/* ============================================================================
 * ✨ الموجة الثانية من التحسينات البصرية — ٢٠ تحسينًا (2026-10-05)
 * تُحمَّل بعد `details-visual-polish.css`، وكل قاعدة بـ:where() لعدم كسر الوظائف.
 * ============================================================================ */

/* ① خلفية صفحة متدرّجة + طبقات أسطح واضحة (بطاقات بيضاء فوق خلفية هادئة) */
body { background: linear-gradient(180deg, #eef3f8 0%, #f7fafc 220px, #f7fafc 100%) !important; }
:where(#app-screen, #mail-hub, .panel, .viewer, #list-pane) { background: transparent !important; }

/* ② عناوين الأقسام بشريط لوني صغير (اتساق بصري في كل اللوحات) */
:where(.panel h3, #viewer h3, .modal-box h3, section > h3) {
  position: relative; padding-inline-start: 12px; font-size: 15px; letter-spacing: .1px;
}
:where(.panel h3, #viewer h3, .modal-box h3, section > h3)::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #1d6fa5, #48c6ef);
}

/* ③ رأس قائمة الرسائل: عنوان واضح + عدّاد كبادج */
:where(#list-title) { font-size: 16px !important; font-weight: 900 !important; color: #0b3a5b !important; }
:where(#list-count) {
  background: #eef5fb; color: #33566f !important; border: 1px solid #dbe7f2;
  border-radius: var(--vp-radius-pill, 999px); padding: 3px 10px !important; font-size: 11.5px !important; font-weight: 800;
}

/* ④ صفوف الرسائل: إيقاع رأسي ثابت (ارتفاع موحّد ومحاذاة علوية) */
:where(#message-list li, #sent-list li) { min-height: 62px; align-items: center; padding: 9px 10px !important; }
:where(#message-list li .m-subject) { font-size: 13.5px; line-height: 1.6; }
:where(#message-list li .m-meta) { font-size: 11.5px; color: #64798c; }

/* ⑤ عمود جانبي: عناوين أقسام + فواصل رقيقة بين الحسابات والمجلّدات */
:where(#account-list, #folder-list) { display: flex; flex-direction: column; gap: 4px; }
:where(#account-list li, #folder-list li) { list-style: none; }
:where(.sidebar-section-title, #account-list::before) { content: ""; }
:where(#folder-list) { border-top: 1px solid rgba(11, 58, 91, .08); padding-top: 8px; margin-top: 6px; }

/* ⑥ عنصر الحساب/المجلّد النشط: شكل pill واضح مع شريط جانبي */
:where(#account-list li button, #folder-list button) {
  width: 100%; text-align: start; border-radius: var(--vp-radius-pill, 999px) !important;
  padding: 8px 12px !important; border: 1px solid transparent !important; background: #fff !important;
  color: #21455e !important; font-weight: 700; display: flex; align-items: center; gap: 8px;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
:where(#account-list li button:hover, #folder-list button:hover) { background: #f0f6fb !important; }
:where(#account-list li button.active, #folder-list button.active) {
  background: linear-gradient(180deg, #1d6fa5, #14567f) !important; color: #fff !important;
  border-color: #10527a !important; box-shadow: var(--vp-shadow-2, 0 4px 14px rgba(11,58,91,.1)) !important;
}
:where(#account-list li button.active .acct-badge) { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }

/* ⑦ شريط البحث: حقل دائري + زر مسح صغير */
:where(#search-input) {
  border-radius: var(--vp-radius-pill, 999px) !important; padding-inline-start: 14px !important;
  border: 1px solid #dbe7f2 !important; background: #fff !important; min-height: 36px;
}
:where(#search-input:focus) { border-color: #8cc4e8 !important; background: #fbfdff !important; }
#vp-clear-search {
  border: 0; background: #eef5fb; color: #33566f; border-radius: 50%;
  width: 24px; height: 24px; line-height: 1; cursor: pointer; font-weight: 900; margin-inline-start: -34px;
}

/* ⑧ ترقيم الصفحات: أزرار دائرية بحالة نشطة واضحة */
:where(#list-pager) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 2px; }
:where(#list-pager button) {
  min-width: 34px; height: 34px; border-radius: var(--vp-radius-sm, 8px) !important;
  border: 1px solid #dbe7f2 !important; background: #fff !important; color: #33566f !important; font-weight: 800 !important;
}
:where(#list-pager button:hover) { background: #f0f6fb !important; }
:where(#list-pager button.active, #list-pager button[aria-current="page"]) {
  background: #14567f !important; color: #fff !important; border-color: #10527a !important;
}

/* ⑨ الحقول والنماذج: ارتفاع موحّد وتسميات أوضح */
:where(input, select, textarea) {
  border-radius: var(--vp-radius-sm, 8px) !important; border: 1px solid #d9e5ef !important;
  padding: 9px 12px !important; font-size: 13.5px !important; background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(input:focus, select:focus, textarea:focus) { border-color: #8cc4e8 !important; box-shadow: 0 0 0 3px rgba(26, 139, 214, .16) !important; }
:where(label) { font-weight: 800; color: #33566f; font-size: 12.5px; }

/* ⑩ صناديق الاختيار والتبديلات بلون الهوية */
:where(input[type="checkbox"], input[type="radio"]) { accent-color: #1d6fa5; width: 17px; height: 17px; }

/* ⑪ أزرار الإجراءات في نافذة الرسالة: فصل الإجراءات الحسّاسة + تمييز الحذف */
:where(.viewer-actions) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(11, 58, 91, .08); }
:where(#reply-btn, #reply-all-btn, #forward-btn) { order: 1; }
:where(#toggle-read-btn, #star-btn, #move-btn, #msg-info-btn) { order: 2; }
:where(#delete-btn) { order: 3; margin-inline-start: auto; background: #fff5f5 !important; color: #a32020 !important; border-color: #f2d4d4 !important; }
:where(#delete-btn:hover) { background: #fdeaea !important; }

/* ⑫ رأس نافذة الرسالة: موضوع بارز وترويسة معلومات في صف واحد */
:where(#v-subject) { font-size: 18px !important; font-weight: 900 !important; color: #0b3a5b !important; line-height: 1.6; }
:where(.viewer-head) { border-bottom: 1px solid rgba(11, 58, 91, .08); padding-bottom: 8px; margin-bottom: 10px; }
:where(.viewer-meta) { display: flex; flex-wrap: wrap; gap: 8px; }
:where(.viewer-meta span) {
  background: #f2f7fb; border: 1px solid #e2ecf4; border-radius: var(--vp-radius-pill, 999px);
  padding: 3px 10px; font-size: 11.5px; color: #41637d; direction: ltr;
}

/* ⑬ بطاقات المرفقات: شكل بطاقة + أيقونة نوع + أزرار مصفوفة */
:where(#v-attachments-list li) {
  background: #fff; border: 1px solid #e3ebf3; border-radius: var(--vp-radius-md, 12px);
  padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--vp-shadow-1, 0 1px 2px rgba(11,58,91,.06));
}
:where(#v-attachments-list li:hover) { border-color: #bcd8ec; box-shadow: var(--vp-shadow-2, 0 4px 14px rgba(11,58,91,.1)); }

/* ⑭ نافذة المعلومات التقنية: صفوف متبادلة التظليل وجداول أوضح */
:where(#msg-info-body table, #msg-info-body tr) { border-color: #e6eef5 !important; }
:where(#msg-info-body tr:nth-child(even)) { background: #f7fafd !important; }

/* ⑮ منع تشتّت التركيز: تمييز الصف في التنقّل بالكيبورد */
:where(#message-list li:focus-visible, #sent-list li:focus-visible, #attach-rows tr:focus-visible) { box-shadow: var(--vp-ring, 0 0 0 3px rgba(23,71,95,.22)) !important; outline: none !important; }

/* ⑯ تلميح فوق العناصر المختصرة (title) بمظهر أنيق */
[title] { text-decoration: none; }

/* ⑰ التبويبات (وضع البريد/المرفقات) بشكل حبّة واضحة */
:where(.mail-mode-tabs) { gap: 6px; padding: 4px; background: #eef4f9; border-radius: var(--vp-radius-pill, 999px); display: inline-flex; }
:where(.mail-mode-tab) { border-radius: var(--vp-radius-pill, 999px) !important; padding: 6px 14px !important; border: 0 !important; background: transparent !important; font-weight: 800; color: #41637d !important; }
:where(.mail-mode-tab[aria-selected="true"]) { background: #fff !important; color: #0b3a5b !important; box-shadow: var(--vp-shadow-1, 0 1px 2px rgba(11,58,91,.06)); }

/* ⑱ بطاقات مركز العمل: أيقونة في دائرة + رفع عند المرور */
:where(.hub-btn) { transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
:where(.hub-btn:hover) { transform: translateY(-3px); border-color: #bcd8ec !important; }
:where(.hub-icon) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; background: #eef5fb; font-size: 22px !important;
}

/* ⑲ شريط الإجراءات يبقى في متناول اليد داخل نافذة الرسالة (سطح المكتب) */
@media (min-width: 721px) {
  :where(.viewer-actions) { position: sticky; bottom: 0; background: linear-gradient(180deg, #ffffff, #ffffff); }
}

/* ⑳ تنقّل أسرع: تظليل خفيف للعنوان عند تمرير المؤشر على الصف */
:where(#message-list li:hover .m-subject, #sent-list li:hover .m-subject) { color: #10527a; text-decoration: none; }

/* زر نسخ الرقم/البصمة (يُضاف تلقائيًا بجانب العناصر النصية البرمجية) */
.vp-copy {
  margin-inline-start: 6px; border: 1px solid #dbe7f2; background: #fff; color: #33566f;
  border-radius: 8px; padding: 1px 7px; font-size: 11px; cursor: pointer; font-weight: 800;
}
.vp-copy:hover { background: #f0f6fb; }

/* هياكل تحميل صفوف القائمة أثناء الجلب */
.vp-loading-row { height: 62px; margin: 8px 10px; border-radius: 10px; }

/* 🔒 كتلة الأولوية النهائية — تُطبِّق ما خُنق بقواعد سابقة أعلى أولوية */
#search-input { border-radius: 999px !important; border: 1px solid #dbe7f2 !important; }
#list-title { font-size: 16px !important; font-weight: 900 !important; color: #0b3a5b !important; }
#list-count {
  background: #eef5fb !important; color: #33566f !important; border: 1px solid #dbe7f2 !important;
  border-radius: 999px !important; padding: 3px 10px !important; font-size: 11.5px !important; font-weight: 800 !important;
}
#delete-btn { background: #fff5f5 !important; color: #a32020 !important; border-color: #f2d4d4 !important; margin-inline-start: auto !important; }
#delete-btn:hover { background: #fdeaea !important; }
#star-btn, #move-btn, #msg-info-btn, #toggle-read-btn, #reply-btn, #reply-all-btn, #forward-btn { order: 1; }
#delete-btn { order: 3; }
#v-subject { font-size: 18px !important; font-weight: 900 !important; color: #0b3a5b !important; }
#v-attachments-list li {
  background: #fff !important; border: 1px solid #e3ebf3 !important; border-radius: 12px !important;
  padding: 10px 12px !important; margin-bottom: 8px !important; box-shadow: 0 1px 2px rgba(11, 58, 91, .06) !important;
}
#list-pager button { border-radius: 8px !important; border: 1px solid #dbe7f2 !important; background: #fff !important; color: #33566f !important; font-weight: 800 !important; }
#list-pager button:hover { background: #f0f6fb !important; }
#list-pager button.active, #list-pager button[aria-current="page"] { background: #14567f !important; color: #fff !important; border-color: #10527a !important; }
#account-list li button, #folder-list button {
  border-radius: 999px !important; background: #fff !important; color: #21455e !important;
  border: 1px solid transparent !important; padding: 8px 12px !important;
}
#account-list li button:hover, #folder-list button:hover { background: #f0f6fb !important; }
#account-list li button.active, #folder-list button.active {
  background: linear-gradient(180deg, #1d6fa5, #14567f) !important; color: #fff !important; border-color: #10527a !important;
}
#account-list li button.active .acct-badge { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.mail-mode-tabs { border-radius: 999px !important; background: #eef4f9 !important; display: inline-flex !important; gap: 6px !important; padding: 4px !important; }
.mail-mode-tab { border-radius: 999px !important; padding: 6px 14px !important; border: 0 !important; background: transparent !important; color: #41637d !important; font-weight: 800 !important; }
.mail-mode-tab[aria-selected="true"] { background: #fff !important; color: #0b3a5b !important; box-shadow: 0 1px 2px rgba(11, 58, 91, .06) !important; }
#message-list li, #sent-list li { min-height: 62px !important; padding: 9px 10px !important; }
#message-list li .m-subject { font-size: 13.5px !important; line-height: 1.6 !important; }
#message-list li .m-meta { font-size: 11.5px !important; color: #64798c !important; }
.hub-icon {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 44px !important; height: 44px !important; border-radius: 14px !important; background: #eef5fb !important; font-size: 22px !important;
}
#msg-info-body tr:nth-child(even) { background: #f7fafd !important; }

/* مؤشّر النسخ (بلا أي عناصر مضافة) */
code, #v-fingerprint, #msg-info-badge { cursor: copy; } /* vp-copy-cursor */