/* ============================================================================
 * ✨ الموجة التاسعة من التحسينات البصرية — ٢٠ تحسينًا (2026-10-05)
 * تُحمَّل بعد الموجات ١-٨. تركيز: إرشاد الاستخدام · تنقّل الرسائل · إرسال متقدّم · وصولية.
 * ============================================================================ */

/* ① جولة تعريفية أولى (Coach marks) */
#vp-tour {
  position: fixed; inset: 0; z-index: 10004; display: none; background: rgba(6, 22, 34, .55);
}
#vp-tour.vp-open { display: block; }
#vp-tour-card {
  position: absolute; width: min(340px, 90vw); background: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 20px 50px rgba(6,22,34,.35); font-size: 13px; color: #24435c;
}
#vp-tour-card h4 { margin: 0 0 6px; font-size: 14.5px; color: #14567f; }
#vp-tour-card .vp-tour-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
#vp-tour-card button { border: 1px solid #dbe7f2; background: #fff; color: #14567f; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 12px; cursor: pointer; }
#vp-tour-card button.vp-primary { background: #14567f; color: #fff; border-color: #10527a; }
.vp-tour-spot { position: relative; z-index: 10005; box-shadow: 0 0 0 3px #48c6ef, 0 0 0 9999px rgba(6,22,34,.55); border-radius: 10px; }

/* ② أزرار التنقّل بين الرسائل */
#vp-prev-msg, #vp-next-msg { order: 6; }

/* ③ شريط التحديد الجماعي */
#vp-bulk-bar {
  display: none; align-items: center; gap: 8px; padding: 6px 10px; margin: 6px 0;
  background: #eef5fb; border: 1px solid #d6e6f4; border-radius: 999px; font-size: 12px; font-weight: 800; color: #14567f;
}
body.vp-bulk #vp-bulk-bar { display: inline-flex; }
#message-list li.vp-checked { background: #dcecff !important; box-shadow: inset 3px 0 0 #14567f; }

/* ④ جدولة الإرسال داخل النافذة */
#vp-schedule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 6px; font-size: 12px; color: #33566f; }
#vp-schedule-row input[type="datetime-local"] { min-height: 34px; }

/* ⑤⑥ خيارات الإرسال الإضافية */
#vp-self-copy-row, #vp-bcc-default-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #33566f; margin-block: 4px; }

/* ⑦ مؤشّر حفظ المسودة */
#vp-draft-indicator { font-size: 11.5px; font-weight: 800; color: #0f7b3f; }
#vp-draft-indicator.vp-pending { color: #925b00; }

/* ⑧ مرشّح سريع للحسابات/المجلّدات */
#vp-side-filter { width: 100%; margin: 6px 0; min-height: 32px; font-size: 12.5px; }
.folders li.vp-hidden { display: none !important; }

/* ⑨ تحكّم حجم الواجهة */
#vp-zoom { display: inline-flex; gap: 2px; align-items: center; }
#vp-zoom button { border: 0; background: transparent; color: inherit; font-weight: 900; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
#vp-zoom button:hover { background: rgba(255,255,255,.16); }

/* ⑩⑪ تحكّم حجم خط الرسالة وتباعد الأسطر */
#vp-font-controls { display: inline-flex; gap: 4px; align-items: center; margin-inline-start: 8px; }
#vp-font-controls button { border: 1px solid #dbe7f2; background: #fff; color: #33566f; border-radius: 8px; padding: 1px 8px; font-weight: 900; cursor: pointer; }
body[data-read-font="s"] #v-body, body[data-read-font="s"] #v-html { font-size: 13px !important; }
body[data-read-font="l"] #v-body, body[data-read-font="l"] #v-html { font-size: 16.5px !important; }
body[data-line-height="tight"] #v-body { line-height: 1.6 !important; }
body[data-line-height="loose"] #v-body { line-height: 2.4 !important; }

/* ⑫ زر نسخ الرسالة كنصّ */
#vp-copy-message { order: 8; }

/* ⑬ التحميل التلقائي للصفحة التالية */
#vp-autoload[aria-pressed="true"] { background: #14567f !important; color: #fff !important; }

/* ⑭ شريحة آخر خطأ في شريط الحالة */
#vp-last-error { background: rgba(220, 38, 38, .22); border-radius: 999px; padding: 1px 8px; }
#vp-last-error:empty { display: none; }

/* ⑮ تعتيم الصور في الوضع الداكن */
body.theme-dark.vp-dim-images #v-html { filter: brightness(.92) contrast(.98); }

/* ⑯ مفتاح الرموز في رأس القائمة */
#vp-legend { display: inline-flex; gap: 8px; font-size: 10.5px; color: #7188a0; align-items: center; }
#vp-legend span { display: inline-flex; align-items: center; gap: 3px; }
#vp-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ⑰ حصر التركيز داخل النوافذ (بصريًا) */
.modal:not([hidden]) .modal-box:focus-within { box-shadow: 0 0 0 3px rgba(26,139,214,.25), var(--vp-shadow-3, 0 12px 34px rgba(11,58,91,.16)); }

/* ⑱ صيغة الوصولية للأزرار الأيقونية */
.btn[aria-label]:not(:has(span)) { min-width: 38px; }

/* ⑲ الطباعة: إخفاء عناصر الموجة */
@media print {
  #vp-tour, #vp-bulk-bar, #vp-side-filter, #vp-legend, #vp-zoom, #vp-font-controls { display: none !important; }
}

/* ⑳ تباين عالٍ: حلقات تركيز أقوى */
body.high-contrast :where(button, a, input, select, textarea):focus-visible { box-shadow: 0 0 0 3px #0b3a5b !important; }

/* 🔒 سلّم الطبقات الموحّد — إصلاح ظهور النوافذ خلف أيقونات مركز العمل */
.modal { z-index: 12000 !important; }
#vp-toasts { z-index: 12900 !important; }
#vp-palette { z-index: 13000 !important; }
#vp-shortcuts { z-index: 13000 !important; }
#vp-tour { z-index: 13050 !important; }
.vp-tour-spot { z-index: 13055 !important; }
#vp-busy { z-index: 14000 !important; }
/* الأشرطة الثابتة تبقى أسفل النوافذ */
#vp-progress, #vp-top, #vp-status-bar, #vp-display-bar, #vp-bottom-nav, #vp-skip { z-index: 9990 !important; }

/* 🧭 الجولة التعريفية لا تغطي أي حوار — تُخفى الجولة وضبابها ما دامت نافذة مفتوحة */
body:has(.modal:not([hidden])) #vp-tour { display: none !important; }
body:has(.modal:not([hidden])) .vp-tour-spot { box-shadow: none !important; }

/* 📧 تكثيف جدول الرسائل (يتقدّم على قاعدة polish-2 ذات min-height:62px) */
body:not(.density-comfy) #message-list li,
body:not(.density-comfy) #sent-list li {
  min-height: 40px !important;
  padding: 5px 9px !important;
  margin-bottom: 2px !important;
}
body.density-compact #message-list li,
body.density-compact #sent-list li {
  min-height: 32px !important;
  padding: 3px 8px !important;
}
body:not(.density-comfy) #message-list li .m-subject,
body:not(.density-comfy) #sent-list li .m-subject {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  margin-bottom: 0 !important;
}
body:not(.density-comfy) #message-list li .m-meta,
body:not(.density-comfy) #sent-list li .m-meta {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  gap: 6px !important;
}
body:not(.density-comfy) #message-list li .m-serial,
body:not(.density-comfy) #sent-list li .m-serial {
  min-width: 42px !important;
  padding: 1px 5px !important;
  font-size: 10.5px !important;
  margin-inline-end: 5px !important;
}
body:not(.density-comfy) #message-list li .m-age,
body:not(.density-comfy) #sent-list li .m-age {
  min-width: 44px !important;
  padding: 1px 5px !important;
  font-size: 10.5px !important;
  margin-inline-end: 4px !important;
}
body:not(.density-comfy) #message-list li .chip,
body:not(.density-comfy) #sent-list li .chip {
  font-size: 10.5px !important;
  padding: 1px 6px !important;
}

/* ═══ BATCH-001 — 20 تحسينًا بصريًا (طلب المستخدم 2026-10-05) ═══ */
/* 01 خط Arial موحّد على كل شاشات المنظومة */
body, button, input, select, textarea, table, .chip, .btn, .modal-box { font-family: Arial, "Segoe UI", sans-serif !important; }
/* 02 ارتفاع أزرار موحّد */
.btn, button.btn, .mail-mode-tab { min-height: 34px !important; }
/* 03 حلقة تركيز واضحة لكل عنصر تفاعلي */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, .mail-mode-tab:focus-visible, #message-list li:focus-visible {
  outline: 2px solid #1a8bd6 !important; outline-offset: 2px !important;
}
/* 04 شريط تمرير رفيع أنيق */
* { scrollbar-width: thin; scrollbar-color: #b8c6d4 #eef2f7; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #eef2f7; }
*::-webkit-scrollbar-thumb { background: #b8c6d4; border-radius: 999px; border: 2px solid #eef2f7; }
*::-webkit-scrollbar-thumb:hover { background: #93a7ba; }
/* 05 رأس جدول مركز المرفقات ثابت عند التمرير */
#attach-center thead th, #jobs-center thead th, #clients-center thead th {
  position: sticky !important; top: 0; z-index: 3; background: #fff !important; box-shadow: inset 0 -1px 0 var(--line);
}
/* 06 صف الرسائل بزوايا أنعم */
#message-list li, #sent-list li { border-radius: 8px !important; }
/* 07 محاذاة رقمية موحّدة للأرقام */
.m-serial, .m-age, .vp-perm-chip-count, .chip, .attach-table, #attach-rows td, #jobs-center-rows td, #clients-center-rows td {
  font-variant-numeric: tabular-nums;
}
/* 08 تباين أوضح بين المقروء وغير المقروء */
#message-list li.unseen { background: #f0f8ff !important; border-inline-start: 3px solid #1a8bd6 !important; }
#message-list li:not(.unseen) { border-inline-start: 3px solid transparent !important; }
/* 09 تقليل الظلال على البطاقات */
.details-module-card, .hub-btn, .view-pane, .modal-box { box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important; }
/* 10 توحيد زوايا النوافذ */
.modal-box, .details-modal-card { border-radius: 14px !important; }
/* 11 حشو موحّد للبطاقات */
.details-module-card, .vp-perm-group, .vp-perm-card { padding: 12px !important; }
/* 12 شارات الحالة بألوان موحّدة */
.chip { border-radius: 999px !important; padding: 2px 9px !important; font-weight: 800 !important; }
.chip-muted { background: #eef2f7 !important; color: #5b6b7a !important; }
/* 13 الأزرار الثانوية بمظهر موحّد */
.btn-ghost { background: #fff !important; border: 1px solid var(--line) !important; color: #17475f !important; }
.btn-ghost:hover { background: #f2f8fd !important; border-color: #9ec7e6 !important; }
/* 14 إخفاء التمرير الأفقي غير الضروري في الجداول */
#attach-center, #jobs-center, #clients-center { overflow-x: hidden; }
/* 15 مظهر موحّد للقوائم المنسدلة */
select { min-height: 34px; border-radius: 9px; padding-inline: 8px; }
/* 16 خلفية الصفحة موحّدة */
body, #mail-hub, #app-screen { background: #eef2f7 !important; }
/* 17 حقول البحث بارتفاع وزوايا موحّدة */
input[type="search"], input[type="text"], input[type="email"] { min-height: 34px; border-radius: 9px; }
/* 18 شرائح موحّدة المقاس */
.chip, .vp-perm-chip { line-height: 1.5 !important; }
/* 19 تنسيق الطباعة: إخفاء الأزرار والأشرطة */
@media print {
  .topbar, .mail-mode-tabs, .list-pane, .folders, #vp-progress, #vp-top, .btn, .list-pager, .attach-tabs { display: none !important; }
  #viewer, .viewer-body, #v-html { border: 0 !important; box-shadow: none !important; }
}
/* 20 احترام «تقليل الحركة» تلقائيًا */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* BATCH-001-FIX — تصحيح بنود الدفعة 1 الفاشلة (ارتفاع موحّد + منع تمرير أفقي) */
.btn, button.btn, .mail-mode-tab, .pager-btn, #perm-panel button, .topbar button { min-height: 34px !important; height: auto; }
select, select.btn, .btn select, input[type="search"], input[type="text"], input[type="email"], .btn-ghost select {
  min-height: 34px !important; height: 34px !important; border-radius: 9px !important; box-sizing: border-box;
}
#attach-center, #jobs-center, #clients-center, #attach-center .view-pane, #jobs-center .view-pane, #clients-center .view-pane {
  overflow-x: hidden !important;
}