/* ============================================================================
 * ✨ طبقة التحسين البصري الشاملة لمنظومة بريد ديتيلز — ٢٠ تحسينًا (2026-10-05)
 * تُحمَّل **بعد** كل الأنماط (آخر ملف في index.html) فتُهيمن بأمان، وكل قاعدة
 * مكتوبة بـ:where() لتقليل الأولوية فلا تكسر وظائف قائمة.
 * ============================================================================ */

/* ① نظام رموز تصميم موحّد (مسافات · زوايا · ظلال · ألوان دلالية) */
:root {
  --vp-space-1: 4px;  --vp-space-2: 8px;  --vp-space-3: 12px; --vp-space-4: 16px; --vp-space-5: 24px;
  --vp-radius-sm: 8px; --vp-radius-md: 12px; --vp-radius-lg: 16px; --vp-radius-pill: 999px;
  --vp-shadow-1: 0 1px 2px rgba(11, 58, 91, 0.06);
  --vp-shadow-2: 0 4px 14px rgba(11, 58, 91, 0.10);
  --vp-shadow-3: 0 12px 34px rgba(11, 58, 91, 0.16);
  --vp-ring: 0 0 0 3px rgba(23, 71, 95, 0.22);
  --vp-line-soft: rgba(11, 58, 91, 0.10);
  --vp-tint: #f6f9fc;
  --vp-tint-2: #eef4f9;
  --vp-unread: #f3f9ff;
  --vp-unread-accent: #1a8bd6;
}

/* ② سلّم أزرار واضح: أساسي · ثانوي · شبح · خطر — بحالات كاملة */
:where(.btn) {
  border-radius: var(--vp-radius-md) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  box-shadow: var(--vp-shadow-1);
}
:where(.btn:hover) { transform: translateY(-1px); box-shadow: var(--vp-shadow-2); }
:where(.btn:active) { transform: translateY(0); box-shadow: var(--vp-shadow-1); }
:where(.btn-primary) { background: linear-gradient(180deg, #1d6fa5, #14567f) !important; color: #fff !important; }
:where(.btn-ghost) { background: #fff !important; color: var(--navy, #0b3a5b) !important; border-color: var(--vp-line-soft) !important; }
:where(.btn-ghost:hover) { background: var(--vp-tint) !important; }
:where(.btn:disabled) { opacity: .55 !important; box-shadow: none; transform: none; cursor: not-allowed; }

/* ③ حلقة تركيز واضحة للوحة المفاتيح (وصولية) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: var(--vp-ring) !important;
  border-radius: var(--vp-radius-sm);
}

/* ④ جداول الرسائل: تخطيط مقروء + تمييز الصف عند المرور */
:where(#message-list li, #sent-list li, .dense-table tr, #attach-rows tr) {
  border-radius: var(--vp-radius-sm);
  transition: background-color .12s ease, box-shadow .12s ease;
}
:where(#message-list li:hover, #sent-list li:hover, #attach-rows tr:hover) {
  background: var(--vp-tint) !important;
  box-shadow: inset 0 0 0 1px var(--vp-line-soft);
}
:where(#message-list li.active) {
  background: #eaf4ff !important;
  box-shadow: inset 3px 0 0 var(--vp-unread-accent);
}

/* ⑤ رؤوس أعمدة ثابتة ومنسّقة */
:where(thead th, .table-head, [id$="-head"]) {
  position: sticky; top: 0; z-index: 5;
  background: #f2f6fa;
  font-weight: 900;
  font-size: 12px;
  color: #33566f;
  border-bottom: 1px solid var(--vp-line-soft);
}

/* ⑥ تمييز الرسالة غير المقروءة بلطف (خلفية + شريط جانبي) بدل إطار ثقيل */
:where(#message-list li.unseen) {
  background: var(--vp-unread) !important;
  box-shadow: inset 3px 0 0 var(--vp-unread-accent);
}
:where(#message-list li.unseen .m-subject) { font-weight: 900; color: #0b3a5b; }

/* ⑦ رقائق/بادجات موحّدة الحجم والدلالة */
:where(.chip) {
  border-radius: var(--vp-radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
}
:where(.chip-muted) { background: #eef2f7 !important; color: #5b7386 !important; }
:where(.chip-ok) { background: #e6f7ee !important; color: #0f7b3f !important; border-color: #c9ecda !important; }
:where(.chip-warn) { background: #fdf3e3 !important; color: #925b00 !important; border-color: #f4e0bd !important; }
:where(.chip-danger) { background: #fdecec !important; color: #a32020 !important; border-color: #f6d2d2 !important; }

/* ⑧ أشرطة تمرير رقيقة متناسقة مع الثيم */
* { scrollbar-width: thin; scrollbar-color: #c3d3e0 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3d3e0; border-radius: var(--vp-radius-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a8bfd2; background-clip: content-box; }

/* ⑨ طباعة نصّ الرسالة بمعيار قراءة مريح */
:where(#viewer, .viewer-body, #v-html) { font-size: 14.5px; line-height: 2; }
:where(.viewer-body) { max-width: 92ch; }
:where(.viewer-body, #v-html) blockquote,
:where(#v-html) blockquote {
  margin: 8px 0; padding-inline-start: 12px;
  border-inline-start: 3px solid var(--vp-unread-accent);
  background: var(--vp-tint); border-radius: var(--vp-radius-sm);
}
:where(code, .mono, [dir="ltr"].code) { font-family: "Consolas", "Courier New", monospace; background: #f4f7fa; border-radius: 6px; padding: 1px 5px; }

/* ⑩ طباعة نظيفة للرسالة (بلا واجهة) */
@media print {
  .topbar, .mail-mode-tabs, #accounts-pane, #list-pane, .viewer-actions, .modal, #vp-progress { display: none !important; }
  #viewer, .viewer-body, #v-html { box-shadow: none !important; border: 0 !important; max-width: 100% !important; }
  body { background: #fff !important; }
}

/* ⑪ نوافذ منبثقة أنيقة: تعتيم + ظهور ناعم */
:where(.modal:not([hidden])) { background: rgba(9, 33, 51, 0.52) !important; }
:where(.modal:not([hidden]) .modal-box) { animation: vp-pop .18s ease-out both; box-shadow: var(--vp-shadow-3) !important; border-radius: var(--vp-radius-lg) !important; }
@keyframes vp-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ⑫ حالات فارغة واضحة (أيقونة + نص) */
:where(.empty, #list-empty, #attach-empty, .muted.empty) {
  display: block; padding: 26px 16px; text-align: center;
  color: #7188a0 !important; background: var(--vp-tint);
  border: 1px dashed #d6e2ec; border-radius: var(--vp-radius-md); font-size: 13px;
}
:where(.empty)::before { content: "🗂️"; display: block; font-size: 26px; margin-bottom: 6px; }

/* ⑬ هياكل تحميل (Skeleton) لطيفة */
.vp-skeleton {
  position: relative; overflow: hidden; background: #eef3f8; border-radius: var(--vp-radius-sm); min-height: 14px;
}
.vp-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: vp-shimmer 1.2s infinite;
}
@keyframes vp-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ⑭ شريط تقدّم علوي عند أي طلب API بطيء */
#vp-progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, #1a8bd6, #48c6ef, #1a8bd6);
  transform: translateY(-3px); opacity: 0; transition: opacity .2s ease;
}
#vp-progress.vp-on { opacity: 1; animation: vp-run 1.1s linear infinite; }
@keyframes vp-run { from { background-position: 0 0; } to { background-position: 120px 0; } }

/* ⑮ تنبيهات لطيفة (Toast) مع شريط زمني */
#vp-toasts { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 9998; display: flex; flex-direction: column; gap: 8px; }
.vp-toast {
  position: relative; min-width: 220px; max-width: 380px;
  background: #0b3a5b; color: #fff; border-radius: var(--vp-radius-md);
  padding: 10px 14px 12px; box-shadow: var(--vp-shadow-3); font-size: 13px; font-weight: 700;
  animation: vp-pop .18s ease-out both;
}
.vp-toast.vp-toast-ok { background: #10663f; }
.vp-toast.vp-toast-warn { background: #8a5a00; }
.vp-toast::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%;
  background: rgba(255, 255, 255, .55); transform-origin: right;
  animation: vp-countdown 10s linear forwards;
}
@keyframes vp-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ⑯ أحرف أولى (Monogram) لجهة المرسل في صفوف الرسائل */
.vp-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 13px; margin-inline-end: 8px;
  box-shadow: var(--vp-shadow-1); flex: 0 0 auto;
}
#message-list li { display: flex; align-items: flex-start; gap: 2px; }
#message-list li .vp-row { flex: 1 1 auto; min-width: 0; }

/* ⑰ زمن نسبي بالأرقام العربية بجانب التاريخ الكامل */
.vp-ago { font-size: 11px; color: #6f8aa0; font-weight: 800; }

/* ⑱ شريط أدوات مجموعة: تقليل الزحمة على الشاشات المتوسطة */
@media (max-width: 1180px) and (min-width: 721px) {
  .topbar-right { row-gap: 6px; }
  .topbar-right .btn { font-size: 12px; padding: 6px 10px; }
}

/* ⑲ جوال: أزرار أكبر + شريط إجراءات سفلي لعرض الرسالة */
@media (max-width: 720px) {
  :where(.btn) { padding: 9px 12px !important; font-size: 13px !important; }
  .viewer-actions {
    position: sticky; bottom: 0; background: #fff;
    box-shadow: 0 -6px 18px rgba(11, 58, 91, .10);
    padding: 8px 10px; border-radius: var(--vp-radius-md) var(--vp-radius-md) 0 0;
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
  }
  .viewer-actions .btn { flex: 0 0 auto; }
  #viewer { padding-bottom: 66px; }
}

/* ⑳ تحسين التباين للنصوص الباهتة + أسطح داكنة */
:where(.muted, .brand-latin, .auth-hint, small) { color: #5d7386 !important; }
:where(.topbar .chip) { color: #eaf2fa !important; }

/* احترام «تقليل الحركة» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}