/**
 * 🎛️ طبقة تبنّي الثيم الموحَّد داخل شاشات النظام الحقيقية (Details Unified UI Skin)
 * الإصدار: v1.0 — تعمل على **فئات النظام القائمة** بلا أي تغيير في بنية DOM أو JavaScript.
 *
 * القاعدة: Arial · هوية ديتيلز (#0b3a5b كحلي · #c5983c ذهبي) · أنصاف أقطار الثيم (12–16px) ·
 * لمسات ذهبية للتحديد فقط. ويمكن إيقافها فورًا بإضافة `?uiskin=0` إلى العنوان.
 */

:root {
  --skin-navy: #0b3a5b;
  --skin-navy-deep: #08283d;
  --skin-navy-soft: #123f59;
  --skin-gold: #c5983c;
  --skin-gold-soft: rgba(197, 152, 60, 0.18);
  --skin-line: #dbe3ec;
  --skin-line-soft: #e6edf3;
  --skin-surface: #ffffff;
  --skin-surface-soft: #f8fafc;
  --skin-shadow: 0 14px 30px rgba(11, 58, 91, 0.12);
  --skin-shadow-soft: 0 6px 18px rgba(11, 58, 91, 0.08);
  --skin-radius: 12px;
  --skin-radius-lg: 16px;
}

/* ── ① الشريط العلوي والتبويبات ─────────────────────────────────────────── */
.topbar {
  background: linear-gradient(160deg, var(--skin-navy) 0%, var(--skin-navy-deep) 100%);
  border-bottom: 1px solid #16365c;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 var(--skin-radius) var(--skin-radius);
}
.topbar-brand strong, .topbar-brand span { letter-spacing: 0.2px; }
.topbar-right .chip { background: rgba(255, 255, 255, 0.14); color: #eaf2fa; }

.mail-mode-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--skin-surface);
  border: 1px solid var(--skin-line);
  border-radius: 999px;
  box-shadow: var(--skin-shadow-soft);
}
.mail-mode-tab {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-weight: 700 !important;
  color: var(--skin-navy-soft) !important;
  background: transparent !important;
}
.mail-mode-tab.active,
.mail-mode-tab[aria-selected="true"] {
  background: linear-gradient(160deg, var(--skin-navy), var(--skin-navy-soft)) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(11, 58, 91, 0.25) !important;
}

/* ── ② التخطيط واللوحات ───────────────────────────────────────────────── */
.layout { gap: 14px; padding: 12px 14px; }
.list-head {
  background: var(--skin-surface);
  border: 1px solid var(--skin-line);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow-soft);
}
.folders { background: var(--skin-surface); border: 1px solid var(--skin-line); border-radius: var(--skin-radius); }
.folders-sep { border-color: var(--skin-line-soft); }

/* ── ③ صفوف الرسائل (مكثّفة + تحديد ذهبي) ─────────────────────────────── */
.messages li {
  background: var(--skin-surface);
  border: 1px solid var(--skin-line);
  border-radius: var(--skin-radius);
  margin-bottom: 6px;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.messages li:hover { box-shadow: var(--skin-shadow-soft); transform: translateY(-1px); border-color: #cddbe9; }
.messages li.active {
  border-color: var(--skin-gold);
  box-shadow: 0 0 0 3px var(--skin-gold-soft);
}
.messages li .m-subject { font-weight: 700; color: #16324a; }
.messages li .m-meta { color: #64748b; }
.m-age { border-radius: 999px !important; font-weight: 700; }

/* ── ④ نافذة قراءة الرسالة ───────────────────────────────────────────── */
.viewer-head { border-bottom: 1px solid var(--skin-line-soft); padding-bottom: 8px; }
.viewer-meta { color: #64748b; }
/* DISTINCT_MESSAGE_BG: تمييز نصّ الرسالة عن اللوحة البيضاء (طلب المستخدم) */
.viewer-body {
  background: linear-gradient(180deg, #fdfbf6 0%, #fbf7ee 100%);
  border: 1px solid #f0e3ca;
  border-inline-start: 4px solid var(--skin-gold);
  border-radius: var(--skin-radius-lg);
  padding: 16px 18px !important;
  line-height: 2 !important;
  box-shadow: inset 0 1px 0 #fff, 0 3px 14px rgba(11, 58, 91, 0.07);
  color: #1b2b3a;
}
/* بلوك التحليل (أسفل الرسالة): خلفية باردة مميّزة عن الرسالة */
#v-ai:not([hidden]) {
  background: linear-gradient(180deg, #f4f8fd 0%, #ecf3fb 100%) !important;
  border: 1px solid #d6e4f2 !important;
  border-inline-start: 4px solid var(--skin-navy) !important;
  margin: 14px 0 0 !important;
}
.viewer-actions { border-top: 1px solid var(--skin-line-soft); padding-top: 10px; }
.attachments {
  background: var(--skin-surface-soft);
  border: 1px solid var(--skin-line);
  border-radius: var(--skin-radius);
}

/* ── ⑤ الأزرار والشارات ───────────────────────────────────────────────── */
.btn { border-radius: 10px !important; font-weight: 700 !important; transition: all 0.15s ease; }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(160deg, var(--skin-navy), var(--skin-navy-soft)) !important;
  border-color: var(--skin-navy) !important;
  box-shadow: 0 1px 3px rgba(11, 58, 91, 0.18);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { border-color: var(--skin-line) !important; color: var(--skin-navy-soft) !important; background: #fff !important; }
.btn-ghost:hover { border-color: var(--skin-gold) !important; color: var(--skin-navy) !important; }
.chip { border-radius: 999px !important; font-weight: 700; }
.chip-ok { box-shadow: inset 0 0 0 1px rgba(15, 123, 63, 0.18); }
.chip-warn { box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.18); }

/* ── ⑥ النوافذ ───────────────────────────────────────────────────────── */
.modal-box {
  border-radius: var(--skin-radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
}
.modal-head { border-bottom: 1px solid var(--skin-line-soft); }
.modal-actions { border-top: 1px solid var(--skin-line-soft); }
.row2 label { color: #526274; font-weight: 700; }

/* ── ⑦ مركز العمل (بطاقات مبنية بأنماط سطرية ⇒ تلزم أولوية) ───────────── */
#hub-grid > * {
  border-radius: var(--skin-radius-lg) !important;
  border: 1px solid var(--skin-line) !important;
  box-shadow: 0 1px 3px rgba(11, 58, 91, 0.06) !important;
  background: var(--skin-surface) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
#hub-grid > *:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--skin-shadow) !important;
  border-color: #9fc3dd !important;
}
.hub-chips .chip { background: rgba(197, 152, 60, 0.14) !important; color: #7a5a13 !important; }

/* ── ⑧ الحالات الفارغة والتنبيهات ─────────────────────────────────────── */
.empty {
  background: var(--skin-surface);
  border: 1px dashed var(--skin-line);
  border-radius: var(--skin-radius);
  color: #64748b;
}
.alert-error { border-radius: var(--skin-radius); }

/* ── ⑨ الجوال: بلا تمرير أفقي وتباعد أنسب ─────────────────────────────── */
/* ── ⑩ تثبيت الهيدر: لا يختفي عند التمرير (طلب المستخدم) ──────────────── */
#app-screen > .topbar,
#mail-hub > .topbar,
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 48 !important;
  box-shadow: 0 6px 18px rgba(11, 58, 91, 0.18);
}
/* الحاوي الذي يتمرّر داخله الهيدر: لا يقتطع الشريط الثابت */
#app-screen,
#mail-hub {
  overflow-anchor: none;
}

@media (max-width: 520px) {
  .layout { padding: 8px; gap: 10px; }
  .messages li { border-radius: 10px; }
  .viewer-body { padding: 12px !important; }
  .mail-mode-tab { padding: 6px 12px !important; font-size: 12.5px !important; }
}

/* LIST_HEAD_STICKY: شريط قائمة الرسائل والترقيم ثابتان أثناء تمرير الرسائل (طلب المستخدم) */
:root { --list-head-height: 42px; }
.list-pane { position: relative; }
.list-pane > .list-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 9 !important;
  background: #ffffff !important;
  padding: 4px 0 8px !important;
  margin: 0 0 6px !important;
  border-bottom: 1px solid var(--skin-line-soft);
}
.list-pane > #list-pager {
  position: sticky !important;
  top: auto !important;
  bottom: 0 !important;
  z-index: 8 !important;
  background: #ffffff !important;
  padding: 6px 0 !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--skin-line-soft);
  border-bottom: 0;
  box-shadow: 0 -6px 12px rgba(11, 58, 91, 0.05);
}

/* 🔒 فصل زر الخروج عن بقية الأزرار: فاصل مرئي + دفع إلى الطرف البعيد + مظهر هادئ */
.topbar-logout-sep {
  display: inline-block;
  width: 1px;
  min-height: 22px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  margin-inline-start: auto;
  margin-inline-end: 10px;
}
.btn-logout {
  opacity: 0.78;
}
.btn-logout:hover,
.btn-logout:focus-visible {
  opacity: 1;
}

/* 🖼️ عارض الرسالة المنسّق (إطار معزول بلا سكربتات) */
.viewer-html {
  width: 100%;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* 📱 (2026-10-05) شريط واحد قابل للتمرير على الجوال بدل الالتفاف الذي كان يستهلك ثلث الشاشة */
@media (max-width: 720px) {
  .topbar { position: sticky; top: 0; z-index: 40; }
  .topbar-right {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .topbar-right .btn {
    flex: 0 0 auto;
    font-size: 11.5px;
    padding: 5px 9px;
    white-space: nowrap;
  }
  .topbar-right .chip { flex: 0 0 auto; font-size: 10.5px; }
  .topbar-logout-sep { display: none; }
  .mail-mode-tabs { position: sticky; top: 0; z-index: 39; }
}

/* 🧠 قسم تحليل الذكاء الصناعي: رأس قابل للطوي + حافة هادئة */
.v-ai-panel { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: linear-gradient(180deg, #f8fafc, #eef2f7); overflow: hidden; }
.v-ai-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; text-align: start; font-family: inherit; }
.v-ai-head:hover { background: rgba(26, 139, 214, .06); }
.v-ai-chevron { display: inline-block; transition: transform .18s ease; font-size: 12px; color: #5d7386; }
.v-ai-body { padding: 0 12px 12px; border-top: 1px solid rgba(11, 58, 91, .07); }
.v-ai-run { text-decoration: none; }