/* =============================================================
   CRS — مكوّنات نطاق تأجير السيارات
   امتداد لـ design-system.css. كل لون من var(--…) فقط.
   لا يعيد تعريف أي مكوّن موجود في نظام التصميم — يضيف فقط.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* =============================================================
   خط النظام: Cairo لكل النصوص (الأساسي والعناوين)،
   ويبقى JetBrains Mono كما هو لكل ما يجب ألا يتغيّر:
   الأرقام والمعرّفات والجوالات والبريد ورؤوس الجداول و kpi-label
   واللاتيني على اللوحات — كلها تمر عبر --font-mono ولا تُمسّ هنا.
   هذا الملف يُحمَّل بعد design-system.css فتغلب هذه القيم دون تعديل الأصل.
   ============================================================= */
:root {
  --font-body:    'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --font-display: 'Cairo', 'Readex Pro', sans-serif;
  /* أحرف اللوحة السعودية قطعة واقعية لا تتبع خط الواجهة —
     تبقى بخط مستقل لا يتأثر بتغيير خط النظام */
  --font-plate:   'IBM Plex Sans Arabic', sans-serif;
  /* الأحادي للأرقام واللاتيني، وأي حرف عربي داخله يسقط إلى Cairo
     بدل أحادي النظام المشوّه للعربية */
  --font-mono:    'JetBrains Mono', 'Cairo', monospace;
}

/* العناوين التقنية الصغيرة (رؤوس الجداول، ملصقات المؤشرات…) تحمل نصًا
   عربيًا — المباعدة الحرفية تفصل الحروف العربية المتصلة فتُصفَّر هنا */
.data-table thead th, .kpi-label, .filter-group-title,
.bar-head span, .mini .mi-l, .info-item .il { letter-spacing: 0; }

/* مفتاح التبديل عنصر label مضمّن افتراضيًا فيتجاهل عرضه المحدد داخل
   خلايا الجداول وينهار مساره إلى صفر — inline-block يثبّته في كل سياق */
.toggle-switch { display: inline-block; vertical-align: middle; }

/* =============================================================
   0) تثبيت القائمة الجانبية عند طول القائمة
   القائمة هنا 41 عنصرًا في 9 أقسام، وارتفاع محتواها يتجاوز الشاشة.
   قيمة min-height الافتراضية لعناصر flex هي auto، فتمنع .sidebar-nav
   من الانكماش دون ارتفاع محتواه ويتعطّل overflow-y الموجود عليه،
   فيسيل المحتوى خارج صندوق الـ100vh وتبدو القائمة متحركة مع التمرير.
   min-height:0 يعيد للعنصر قابلية الانكماش فيعمل التمرير الداخلي
   وتبقى القائمة ثابتة فعليًا.
   ============================================================= */
.sidebar { max-height: 100vh; }
.sidebar-header, .sidebar-footer { flex-shrink: 0; }
.sidebar-nav { min-height: 0; overscroll-behavior: contain; }

/* السبب الثاني: overflow-x:hidden على body يحوّله إلى حاوية تمرير،
   فيصبح السايدبار والهيدر «لاصقين» داخل صندوق لا يتمرر أصلًا فيتعطّل التثبيت.
   clip يمنع التمرير الأفقي نفسه دون إنشاء صندوق تمرير، وتبقى نافذة العرض
   هي حاوية التمرير كما يفترض sticky. المتصفحات التي لا تدعم clip تتجاهل
   السطر وتبقى على سلوك الملف الأصلي دون أي تراجع. */
html { overflow-x: clip; }
body { overflow-x: clip; overflow-y: visible; }

/* =============================================================
   0.05) لودر الصفحة — حلقة بسيطة على غطاء الخلفية
   يُستثنى شاشة الإقلاع (.boot) لأنها لودر بحد ذاتها.
   ============================================================= */
html:not(.page-ready):not(:has(.boot)) { overflow: hidden; }

html:not(.page-ready):not(:has(.boot)) .app::before {
  content: '';
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg); pointer-events: auto;
  transition: opacity 0.38s ease, visibility 0s linear 0s;
}

html:not(.page-ready):not(:has(.boot)) .app::after {
  content: '';
  position: fixed; top: 50%; left: 50%; z-index: 10001;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 3px solid var(--primary-soft); border-top-color: var(--primary);
  border-radius: 50%; box-sizing: border-box;
  animation: pageLoaderSpin 0.75s linear infinite;
  transition: opacity 0.38s ease, visibility 0s linear 0s;
}

html.page-ready .app::before,
html.page-ready .app::after {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.38s ease, visibility 0s linear 0.38s;
}

@keyframes pageLoaderSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html:not(.page-ready):not(:has(.boot)) .app::after {
    animation: none; border-top-color: var(--primary);
  }
}

@media print {
  html:not(.page-ready) .app::before,
  html:not(.page-ready) .app::after { display: none !important; }
}

/* على الشاشات الضيقة تصبح القائمة درجًا ثابتًا بارتفاع الشاشة */
@media (max-width: 1024px) {
  .sidebar { height: 100vh; max-height: 100vh; }
}

/* =============================================================
   0.1) شريط التحديد الجماعي — إخفاء تام وهو فارغ
   الشريط الفارغ ارتفاعه 24px (حشوة فقط)، و translate(-50%,120%)
   يزيحه 28.8px بينما هو على bottom:24px، فيبقى نحو 19px منه ظاهرًا
   أسفل كل شاشة قوائم. الإزاحة وحدها لا تكفي لإخفاء شريط بلا محتوى،
   فنضيف visibility مؤجَّلة تُبقي حركة الانزلاق كما هي.
   ============================================================= */
.bulk-bar {
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s;
}
.bulk-bar.is-open {
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
}

/* =============================================================
   0.2) مقاسات الأيقونات في الحاويات التي لا تحمل قاعدة خاصة
   القيمة الافتراضية 18px تأتي من دالة ico، وهذه استثناءات مقصودة.
   ============================================================= */
.form-section-title svg { width: 15px; height: 15px; flex-shrink: 0; }
.hb-av svg { width: 26px; height: 26px; }
.cell-avatar svg { width: 16px; height: 16px; }
.chan-mark svg { width: 16px; height: 16px; }
.lane-card svg { width: 12px; height: 12px; }

/* =============================================================
   1) امتدادات الشريط العلوي
   ============================================================= */
.hdr-spacer { flex: 1; }
.sb-toggle { display: none; }
@media (max-width: 1024px) { .sb-toggle { display: grid; } }

.hdr-pop { position: relative; }
.pop-panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-pop); z-index: 200; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
}
.pop-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.pop-panel.from-start { left: auto; right: auto; inset-inline-start: 0; inset-inline-end: auto; }
.pop-head {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pop-head .t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pop-foot { padding: 10px 16px; border-top: 1px solid var(--line-soft); background: var(--bg); text-align: center; }
.pop-link {
  background: none; border: none; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--primary); cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.pop-link:hover { text-decoration: underline; }

/* مبدّل الفرع */
.branch-btn {
  display: flex; align-items: center; gap: 9px; max-width: 230px;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--ink);
  padding: 7px 12px 7px 10px; border-radius: var(--r-pill);
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: all var(--t-base);
}
.branch-btn:hover { border-color: var(--primary); background: var(--card); }
.branch-btn svg.pin { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }
.branch-btn svg.cv { width: 12px; height: 12px; color: var(--muted); flex-shrink: 0; }
.branch-btn .bname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch-list { width: 300px; max-height: 380px; overflow-y: auto; padding: 8px; }
.branch-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: right;
  padding: 9px 11px; border-radius: var(--r-md); border: 1px solid transparent;
  background: transparent; font-family: inherit; cursor: pointer; transition: all var(--t-fast);
}
.branch-opt:hover { background: var(--bg-2); }
.branch-opt.on { background: var(--primary-soft); border-color: var(--primary); }
.branch-opt .bo-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg-2); color: var(--ink-soft); display: grid; place-items: center;
}
.branch-opt.on .bo-ic { background: var(--card); color: var(--primary); }
.branch-opt .bo-ic svg { width: 15px; height: 15px; }
.branch-opt .bo-t { flex: 1; min-width: 0; }
.branch-opt .bo-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.branch-opt .bo-sub { font-family: var(--font-mono); direction: ltr; text-align: right; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.branch-opt .bo-num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--bg); border-radius: var(--r-sm); padding: 3px 7px; }

/* ساعة الشريط العلوي */
.hdr-clock {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-pill);
}
.hdr-clock .ck-time { font-family: var(--font-mono); direction: ltr; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.hdr-clock .ck-day { font-size: 11.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 1420px) { .hdr-clock { display: none; } }
@media (max-width: 1180px) { .branch-btn .bname { max-width: 92px; } }

/* الإشعارات */
.notif-list { width: 380px; max-height: 420px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background var(--t-fast); position: relative;
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--primary-soft); }
.notif-item.unread:hover { background: var(--primary-soft); }
.notif-item .nf-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.notif-item .nf-ic svg { width: 15px; height: 15px; }
.nf-ic.ok { background: var(--ok-bg); color: var(--ok-ink); }
.nf-ic.warn { background: var(--warn-bg); color: var(--warn-ink); }
.nf-ic.danger { background: var(--danger-bg); color: var(--danger-ink); }
.nf-ic.info { background: var(--info-bg); color: var(--info-ink); }
.notif-item .nf-t { flex: 1; min-width: 0; }
.notif-item .nf-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.notif-item .nf-body { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.6; }
.notif-item .nf-time { font-family: var(--font-mono); direction: ltr; text-align: right; font-size: 10px; color: var(--muted); margin-top: 5px; }

/* قائمة المستخدم */
.user-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  background: transparent; border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  cursor: pointer; font-family: inherit; transition: all var(--t-base);
}
.user-btn:hover { background: var(--bg-2); border-color: var(--line); }
.user-btn .ub-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--card); display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.user-btn .ub-n { font-size: 12.5px; font-weight: 700; color: var(--ink); }
@media (max-width: 1280px) { .user-btn .ub-n { display: none; } }
.user-menu { width: 260px; }
.um-head { padding: 15px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.um-head .n { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.um-head .r { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.um-head .e { font-family: var(--font-mono); direction: ltr; text-align: right; font-size: 11px; color: var(--muted); margin-top: 5px; }
.um-body { padding: 6px; }
.um-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
  padding: 9px 11px; border-radius: var(--r-md); border: none; background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; text-decoration: none; transition: all var(--t-fast);
}
.um-item:hover { background: var(--bg-2); color: var(--ink); }
.um-item svg { width: 15px; height: 15px; }
.um-item.danger { color: var(--danger-ink); }
.um-item.danger:hover { background: var(--danger-bg); }

/* =============================================================
   2) لوحة الأوامر / البحث العام
   ============================================================= */
.cmdk-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 1050; display: flex; justify-content: center; align-items: flex-start;
  padding: 90px 20px 20px; opacity: 0; visibility: hidden; transition: all var(--t-base);
}
.cmdk-back.open { opacity: 1; visibility: visible; }
.cmdk {
  width: 100%; max-width: 620px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  box-shadow: var(--sh-modal); overflow: hidden; display: flex; flex-direction: column;
  max-height: 70vh; transform: scale(0.97) translateY(-10px); transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.cmdk-back.open .cmdk { transform: scale(1) translateY(0); }
.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.cmdk-input-row svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.cmdk-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink);
}
.cmdk-input-row input::placeholder { color: var(--muted); }
.cmdk-esc {
  font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font-weight: 600;
}
.cmdk-results { overflow-y: auto; padding: 8px; flex: 1; }
.cmdk-empty { padding: 18px 14px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.6; }
.cmdk-group-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 12px 6px;
}
.cmdk-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: right;
  padding: 9px 12px; border-radius: var(--r-md); border: none; background: transparent;
  font-family: inherit; cursor: pointer; text-decoration: none; transition: background var(--t-fast);
}
.cmdk-row:hover, .cmdk-row.cur { background: var(--primary-soft); }
.cmdk-row .cr-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-2); color: var(--ink-soft); display: grid; place-items: center; flex-shrink: 0; }
.cmdk-row.cur .cr-ic { background: var(--card); color: var(--primary); }
.cmdk-row .cr-ic svg { width: 15px; height: 15px; }
.cmdk-row .cr-t { flex: 1; min-width: 0; }
.cmdk-row .cr-title { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row .cr-sub { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row .cr-kind { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line-soft); border-radius: 5px; padding: 2px 7px; flex-shrink: 0; }
.cmdk-foot {
  padding: 9px 16px; border-top: 1px solid var(--line-soft); background: var(--bg);
  display: flex; gap: 16px; font-size: 11px; color: var(--muted); flex-wrap: wrap;
}
.cmdk-foot kbd {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; margin-left: 4px;
}

/* =============================================================
   3) Toast
   ============================================================= */
.toast-wrap { position: fixed; top: 74px; inset-inline-end: 24px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: 11px; min-width: 290px; max-width: 400px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop); padding: 13px 15px; pointer-events: auto;
  transform: translateX(24px); opacity: 0; transition: all var(--t-base);
  border-inline-end: 3px solid var(--neutral);
}
html[dir="rtl"] .toast { transform: translateX(-24px); }
.toast.in { transform: translateX(0); opacity: 1; }
.toast.ok { border-inline-end-color: var(--ok); }
.toast.warn { border-inline-end-color: var(--warn); }
.toast.danger { border-inline-end-color: var(--danger); }
.toast.info { border-inline-end-color: var(--info); }
.toast .ts-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.toast .ts-ic svg { width: 14px; height: 14px; }
.toast.ok .ts-ic { background: var(--ok-bg); color: var(--ok-ink); }
.toast.warn .ts-ic { background: var(--warn-bg); color: var(--warn-ink); }
.toast.danger .ts-ic { background: var(--danger-bg); color: var(--danger-ink); }
.toast.info .ts-ic { background: var(--info-bg); color: var(--info-ink); }
.toast .ts-t { flex: 1; min-width: 0; }
.toast .ts-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.toast .ts-body { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.6; }
@media (max-width: 600px) { .toast-wrap { inset-inline: 12px; } .toast { min-width: 0; max-width: none; } }

/* =============================================================
   4) لوحة القيادة — الشبكة والبطولة
   ============================================================= */
/* أعمدة من بطاقات: يجب أن يُسمح للمسار بالانكماش دون عرض محتواه الأدنى،
   وإلا فاضت الشبكة وانزلق العمود خارج الشاشة. انظر `.split-2` أدناه. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 16px; align-items: start; }
@media (max-width: 1180px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; }
.dash-col > .card:last-child { margin-bottom: 0; }

.kpi-grid.tight { margin-bottom: 12px; }
.kpi.critical { background: linear-gradient(135deg, var(--danger-bg) 0%, var(--card) 100%); border-color: var(--danger); }
.kpi.critical::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--danger); }
.kpi-icon.danger { background: var(--danger-bg); color: var(--danger-ink); }
.kpi-icon.accent { background: var(--accent-soft); color: var(--accent); }
.kpi-split { display: flex; align-items: baseline; gap: 7px; }
.kpi-split .of { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--muted); }
.kpi-bar { height: 4px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin: 9px 0 8px; }
.kpi-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--primary); transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.kpi-bar.ok > i { background: var(--ok); }
.kpi-bar.warn > i { background: var(--warn); }
.kpi-bar.danger > i { background: var(--danger); }

/* الترحيب */
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
}
.hero-chip svg { width: 13px; height: 13px; color: var(--primary); }
.hero-chip .mo { font-family: var(--font-mono); direction: ltr; font-weight: 700; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qa {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: all var(--t-base); text-decoration: none;
}
.qa:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.qa svg { width: 15px; height: 15px; }
.qa .qa-n { font-family: var(--font-mono); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink); }
.qa.hot .qa-n { background: var(--danger-bg); color: var(--danger-ink); }
.hero-figure { display: flex; align-items: center; gap: 14px; }

/* حلقة الاستفادة داخل الترحيب */
.ring { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring .rg-bg { stroke: var(--bg-2); }
.ring .rg-fg { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.2,0.8,0.2,1); }
.ring .rg-txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .rg-val { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.ring .rg-lab { font-size: 9.5px; color: var(--muted); font-weight: 700; margin-top: 3px; letter-spacing: 0.04em; }

/* =============================================================
   5) شريط «يحتاج انتباهك»
   ============================================================= */
.attn {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line-soft);
  border-right: 3px solid var(--warn); border-radius: var(--r-lg);
  padding: 13px 16px; margin-bottom: 16px;
}
.attn.calm { border-right-color: var(--ok); }
.attn-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); display: grid; place-items: center; flex-shrink: 0; }
.attn.calm .attn-ic { background: var(--ok-bg); color: var(--ok-ink); }
.attn-ic svg { width: 17px; height: 17px; }
.attn-t { flex: 1; min-width: 200px; }
.attn-t .at-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.attn-t .at-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.attn-nums { display: flex; gap: 8px; flex-wrap: wrap; }
.attn-num {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all var(--t-fast);
}
.attn-num:hover { border-color: var(--primary); color: var(--primary); }
.attn-num b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 800; color: var(--ink); }
.attn-num .sq { width: 7px; height: 7px; border-radius: 2px; }

/* =============================================================
   6) الخط الزمني للعمليات
   ============================================================= */
.seg { display: inline-flex; gap: 3px; background: var(--bg-2); padding: 3px; border-radius: var(--r-md); }
.seg button {
  padding: 6px 12px; border: none; background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all var(--t-base); display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover:not(.on) { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-card); }
.seg button .n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; opacity: 0.75; }

.ops { position: relative; padding-right: 68px; }
.ops::before { content: ''; position: absolute; top: 6px; bottom: 6px; right: 52px; width: 2px; background: var(--line-soft); border-radius: 2px; }
.ops-now { position: absolute; right: 0; left: 0; height: 0; z-index: 2; }
.ops-now::before {
  content: ''; position: absolute; right: 47px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--card);
}
.ops-now::after { content: ''; position: absolute; right: 62px; left: 0; top: -1px; height: 2px; background: var(--danger); opacity: 0.3; }
.ops-now .lbl {
  position: absolute; right: 0; top: -9px; font-family: var(--font-mono); font-size: 9px;
  font-weight: 800; color: var(--danger-ink); background: var(--danger-bg); padding: 3px 6px; border-radius: var(--r-pill);
}

.op {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 11px 13px; margin-bottom: 9px; cursor: pointer; font-family: inherit;
  transition: all var(--t-fast);
}
.op:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0,0,0,0.35); }
.op::before {
  content: ''; position: absolute; right: -21px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--card);
  border: 2px solid var(--line); z-index: 1;
}
.op.no-rail::before { display: none; }
.op.k-out::before { border-color: var(--primary); }
.op.k-in::before { border-color: var(--info); }
.op.is-done::before { background: var(--ok); border-color: var(--ok); }
.op.is-late::before { background: var(--danger); border-color: var(--danger); }
.op .op-time {
  position: absolute; right: -68px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); direction: ltr; font-size: 10.5px; font-weight: 700;
  color: var(--muted); width: 40px; text-align: center;
}
.op.is-late .op-time { color: var(--danger-ink); }
.op-kind { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.op-kind svg { width: 16px; height: 16px; }
.op.k-out .op-kind { background: var(--primary-soft); color: var(--primary); }
.op.k-in .op-kind { background: var(--info-bg); color: var(--info-ink); }
.op-main { flex: 1; min-width: 0; }
.op-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-cust { font-size: 13px; font-weight: 700; color: var(--ink); }
.op-ref { font-family: var(--font-mono); direction: ltr; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); background: var(--bg-2); border-radius: 5px; padding: 2px 6px; }
.op-l2 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.op-l2 .veh { color: var(--ink-soft); font-weight: 600; }
.op-l2 .sep { color: var(--line); }
.op-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.op-amt { font-family: var(--font-mono); direction: ltr; font-size: 12px; font-weight: 700; color: var(--ink); }
.op.is-done { opacity: 0.72; }
.op.is-done .op-cust { text-decoration: none; }
.op-flag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 700; background: var(--accent-soft); color: var(--ink);
}
.op-flag svg { width: 10px; height: 10px; }

/* =============================================================
   7) أداء الفروع
   ============================================================= */
.bar-row { display: grid; grid-template-columns: 1fr 82px 62px 96px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.bar-row:last-child { border-bottom: none; }
.bar-row .br-name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .br-city { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.bar-track { height: 7px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.bar-track > i { display: block; height: 100%; border-radius: 4px; background: var(--primary); transition: width 0.8s cubic-bezier(0.2,0.8,0.2,1); }
.bar-track > i.hi { background: var(--ok); }
.bar-track > i.lo { background: var(--warn); }
.bar-row .br-pct { font-family: var(--font-mono); direction: ltr; font-size: 12px; font-weight: 800; color: var(--ink); text-align: center; }
.bar-row .br-rev { font-family: var(--font-mono); direction: ltr; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-align: left; }
.bar-head { display: grid; grid-template-columns: 1fr 82px 62px 96px; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.bar-head span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.bar-head span:nth-child(3) { text-align: center; }
.bar-head span:nth-child(4) { text-align: left; }
@media (max-width: 760px) { .bar-row, .bar-head { grid-template-columns: 1fr 56px 84px; } .bar-row .bar-track, .bar-head span:nth-child(2) { display: none; } }

/* =============================================================
   8) قائمة التنبيهات
   ============================================================= */
.alert {
  display: flex; gap: 11px; padding: 12px; border-radius: var(--r-lg);
  border: 1px solid var(--line-soft); background: var(--bg); margin-bottom: 9px;
  transition: all var(--t-base);
}
.alert:last-child { margin-bottom: 0; }
.alert.sev-high { border-right: 3px solid var(--danger); }
.alert.sev-mid { border-right: 3px solid var(--warn); }
.alert.sev-low { border-right: 3px solid var(--info); }
.alert.leaving { opacity: 0; transform: translateX(-16px); }
.alert-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.alert-ic svg { width: 15px; height: 15px; }
.alert.sev-high .alert-ic { background: var(--danger-bg); color: var(--danger-ink); }
.alert.sev-mid .alert-ic { background: var(--warn-bg); color: var(--warn-ink); }
.alert.sev-low .alert-ic { background: var(--info-bg); color: var(--info-ink); }
.alert-t { flex: 1; min-width: 0; }
.alert-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.alert-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.alert-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.mini-btn {
  padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--card); font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--ink-soft); cursor: pointer; transition: all var(--t-fast);
  display: inline-flex; align-items: center; gap: 5px;
}
.mini-btn:hover { border-color: var(--primary); color: var(--primary); }
.mini-btn.solid { background: var(--ink); border-color: var(--ink); color: var(--card); }
.mini-btn.solid:hover { background: var(--primary); border-color: var(--primary); color: var(--card); }
.mini-btn svg { width: 12px; height: 12px; }
.mini-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* =============================================================
   9) القنوات الخارجية
   ============================================================= */
.chan { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.chan:last-child { border-bottom: none; }
.chan-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; background: var(--bg-2); color: var(--ink-soft);
}
.chan-t { flex: 1; min-width: 0; }
.chan-n { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.chan-s { font-size: 10.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.chan-s .mo { font-family: var(--font-mono); direction: ltr; }
.chan-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chan-count { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--ink); }
.chan-count small { font-size: 9.5px; color: var(--muted); font-weight: 600; display: block; text-align: center; margin-top: 1px; }
.inline-error {
  background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--r-md);
  padding: 11px 13px; margin-top: 10px; display: flex; align-items: flex-start; gap: 10px;
}
.inline-error svg { width: 15px; height: 15px; color: var(--danger-ink); flex-shrink: 0; margin-top: 1px; }
.inline-error .ie-t { flex: 1; min-width: 0; }
.inline-error .ie-title { display: block; font-size: 12px; font-weight: 700; color: var(--danger-ink); }
.inline-error .ie-body { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.65; }

/* =============================================================
   10) تدفق الأحداث
   ============================================================= */
.feed { position: relative; padding-right: 22px; }
.feed::before { content: ''; position: absolute; top: 8px; bottom: 12px; right: 6px; width: 2px; background: var(--line-soft); }
.feed-item { position: relative; padding-bottom: 15px; }
.feed-item:last-child { padding-bottom: 0; }
.feed-item::before {
  content: ''; position: absolute; right: -21px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--primary); z-index: 1;
}
.feed-item.ok::before { border-color: var(--ok); }
.feed-item.warn::before { border-color: var(--warn); }
.feed-item.danger::before { border-color: var(--danger); }
.feed-item.info::before { border-color: var(--info); }
.feed-txt { font-size: 12px; color: var(--ink); line-height: 1.65; }
.feed-txt b { font-weight: 700; }
.feed-txt .mo { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.feed-meta { font-size: 10.5px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.feed-meta .mo { font-family: var(--font-mono); direction: ltr; }

/* =============================================================
   11) إحصاءات مصغّرة + شرح المخطط الدائري
   ============================================================= */
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.mini {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 11px 12px;
}
.mini .mi-l { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.mini .mi-v { font-family: var(--font-mono); font-size: 19px; font-weight: 800; color: var(--ink); margin-top: 6px; line-height: 1; }
.mini .mi-v small { font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 3px; }

.legend { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.legend-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: right;
  padding: 7px 9px; border-radius: 8px; border: none; background: transparent;
  font-family: inherit; cursor: pointer; transition: background var(--t-fast);
}
.legend-row:hover { background: var(--bg); }
.legend-row.off { opacity: 0.42; }
.legend-row .lg-sq { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-row .lg-n { flex: 1; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.legend-row .lg-v { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--ink); }
.legend-row .lg-p { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--muted); width: 38px; text-align: left; }

/* =============================================================
   12) اللوحة السعودية
   ألوان جسم واقعي ثابتة — تُعامل كلوحة الحالات ولا تتبع ثيم الواجهة.
   جسم اللوحة أبيض بأحرف سوداء في كل الأنواع، والشريط الجانبي وحده
   يتلوّن حسب تصنيف المرور: خصوصي أبيض، نقل عام/أجرة أصفر، نقل أزرق.
   ============================================================= */
:root {
  --ksa-plate-paper: #ffffff;
  --ksa-plate-text: #101010;
  --ksa-plate-line: #101010;
  --ksa-plate-band: #0052a5;   /* أزرق شريط لوحات النقل */
  --ksa-plate-faint: #c8c8c8;  /* الخانات الفارغة أثناء الإدخال */
  --ksa-plate-taxi: #ffcc00;   /* أصفر شريط النقل العام والأجرة */
}

/* --- الشارة المصغّرة في الجداول والبطاقات — نسخة مصغّرة من اللوحة الحقيقية:
       الأرقام ← الشعار الملوّن ← الأحرف ← شريط «KSA» الأبيض في أقصى اليمين --- */
.plate {
  display: inline-flex; align-items: stretch; border: 1.5px solid var(--ksa-plate-line);
  border-radius: 4px; overflow: hidden; background: var(--ksa-plate-paper); line-height: 1;
  font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  box-shadow: 0 1px 2px rgba(15,23,42,0.15);
}
.plate .pl-cell { padding: 3px 5px; font-size: 11px; font-weight: 700; color: var(--ksa-plate-text); display: grid; place-items: center; }
.plate .pl-ar { font-family: var(--font-plate); font-size: 10.5px; }

/* =============================================================
   استثناء القوائم المنسدلة من خط Cairo
   عنصر select الأصلي يُرسَم بمحرّك نصّ مبسّط لا يطبّق تشكيل الحروف
   كاملًا، وخط Cairo يعتمد على ذلك في الطرف السفلي لحرفي ي/ى في موضع
   النهاية — فينفصل الطرف ويظهر كعلامة دخيلة بعد كل كلمة تنتهي بهما
   (مدى، القحطاني…). تبقى القوائم على خط الواجهة العربي الأصلي الذي
   يرسمها سليمة، وبقية النظام على Cairo كما هو مطلوب.
   ============================================================= */
select, select option, select optgroup,
select.form-select, select.form-select option {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}
select.mono, select.form-select.mono, select.form-select.mono option {
  font-family: var(--font-mono);
}

/* =============================================================
   بطاقات الاختيار المكتوبة كـ <label>
   قاعدة .form-field label في نظام التصميم أسبقيتها (0,1,1) أعلى من
   .radio-card (0,1,0)، فتفرض display:block وحجم خط الملصق الصغير:
   تنهار البطاقة إلى كتلة، وتعود نقطتها عنصرًا سطريًا فيُلغى مقاسها،
   ويصغر نصها ويُزاح بهامش الملصق. تُستعاد هيئة البطاقة هنا بأسبقية
   أعلى دون تعديل ملف نظام التصميم.
   ============================================================= */
label.radio-card,
.form-field label.radio-card {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 0;
}
.radio-card > .rc-dot { display: block; }

/* =============================================================
   دليل الحسابات — صفوف شجرية بمسافة بادئة حسب العمق
   ============================================================= */
.acc-head, .acc-row {
  display: grid; grid-template-columns: 30px 74px 1fr 240px 130px 44px;
  align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.acc-head {
  background: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.acc-row { transition: background var(--t-fast); }
.acc-row:hover { background: var(--bg-2); }
.acc-row:last-child { border-bottom: none; }
.acc-row .ar-name { padding-inline-start: calc(var(--depth, 0) * 18px); font-size: 12.5px; color: var(--ink); }
.acc-row.is-group { background: var(--bg-2); }
.acc-row.is-group .ar-name { font-weight: 800; }
.acc-row.is-group .ar-val { font-weight: 800; }
.acc-row .ar-code { font-size: 11px; font-weight: 700; color: var(--muted); }
.acc-row .ar-src { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-row .ar-val { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: left; }
.acc-row .ar-val.neg { color: var(--danger); }
.acc-row .ar-toggle { display: grid; place-items: center; }
.ar-tg {
  width: 22px; height: 22px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; transition: all var(--t-fast);
}
.ar-tg svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.ar-tg:hover { background: var(--line-soft); color: var(--ink); }
.ar-tg.closed svg { transform: rotate(-90deg); }
@media (max-width: 1100px) {
  .acc-head, .acc-row { grid-template-columns: 30px 66px 1fr 110px 44px; }
  .acc-head span:nth-child(4), .acc-row .ar-src { display: none; }
}

/* =============================================================
   الربط الإلكتروني — بنود الجاهزية
   ============================================================= */
.ready-list { display: grid; gap: 2px; }
.ready-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 12px; color: var(--ink);
  transition: background var(--t-fast);
}
.ready-row:hover { background: var(--bg-2); }
.ready-row input { flex-shrink: 0; }

/* بطاقة تقرير في صفحة الفهرس */
.rep-card {
  display: grid; grid-template-columns: 44px 1fr auto 18px; align-items: center; gap: 13px;
  padding: 15px 16px; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); text-decoration: none; box-shadow: var(--sh-card);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.rep-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,0.5); }
.rep-card .rc-ic {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
.rep-card .rc-ic svg { width: 21px; height: 21px; }
.rep-card .rc-t { min-width: 0; display: grid; gap: 3px; }
.rep-card .rc-n { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.rep-card .rc-d { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.rep-card .rc-s { display: grid; gap: 3px; justify-items: end; flex-shrink: 0; }
.rep-card .rc-v { font-size: 15px; font-weight: 800; color: var(--ink); }
.rep-card .rc-l { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); }
.rep-card .rc-l.ok { background: var(--ok-bg); color: var(--ok-ink); }
.rep-card .rc-l.warn { background: var(--warn-bg); color: var(--warn-ink); }
.rep-card .rc-go { color: var(--line); display: grid; place-items: center; }
.rep-card .rc-go svg { width: 17px; height: 17px; }
.rep-card:hover .rc-go { color: var(--primary); }

/* قيد في دفتر القيود */
.jv { border-bottom: 1px solid var(--line); }
.jv:last-child { border-bottom: none; }
.jv-head {
  display: grid; grid-template-columns: 96px 1fr 130px 104px; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--bg-2);
}
.jv-head .jv-no { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.jv-head .jv-desc { min-width: 0; display: grid; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.jv-head .jv-meta { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.jv-head .jv-amt { font-size: 12.5px; font-weight: 800; color: var(--ink); text-align: left; }
.jv-lines { padding: 0 0 6px; }
.jv-lines .rep-head { padding-top: 6px; padding-bottom: 6px; background: transparent; }
.jv-lines .rep-row { border-bottom: none; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 1024px) {
  .jv-head { grid-template-columns: 84px 1fr 104px; }
  .jv-head .status-pill { display: none; }
}

/* صفوف تقرير محاسبي بمجموع */
.rep-row, .rep-head, .rep-total {
  display: grid; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.rep-head {
  background: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.rep-row:hover { background: var(--bg-2); }
.rep-total {
  background: var(--bg-2); border-top: 2px solid var(--ink); border-bottom: none;
  font-weight: 800; font-size: 12.5px;
}
.rep-row .rp-n { font-size: 12.5px; color: var(--ink); }
.rep-row .rp-c { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.rep-row .rp-v, .rep-total .rp-v { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; }
.rep-row .rp-v.zero { color: var(--muted); font-weight: 500; }
.rep-row.sub .rp-n { padding-inline-start: 16px; color: var(--ink-soft); }

/* =============================================================
   سلسلة توثيق المستندات — عقد متصلة يحمل كل عقدة عدّادها وبصمتها
   ============================================================= */
.chain-strip { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 4px 2px 8px; }
.chain-node {
  flex: 0 0 auto; display: grid; gap: 2px; justify-items: center;
  min-width: 86px; padding: 9px 10px; cursor: pointer; text-align: center;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.chain-node:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.4); border-color: var(--primary); }
.chain-node .cn-icv {
  font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--card);
  background: var(--ink); border-radius: var(--r-pill); padding: 1px 8px; min-width: 24px;
}
.chain-node .cn-id { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink); }
.chain-node .cn-h { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.chain-node.ok { border-color: var(--ok); }
.chain-node.ok .cn-icv { background: var(--ok); }
.chain-node.warn { border-color: var(--warn); }
.chain-node.warn .cn-icv { background: var(--warn-ink); }
.chain-node.bad { border-color: var(--danger); }
.chain-node.bad .cn-icv { background: var(--danger); }
.chain-node.info { border-color: var(--info); }
.chain-link { flex: 0 0 auto; display: grid; place-items: center; color: var(--line); padding: 0 2px; }
.chain-link svg { width: 15px; height: 15px; }

/* منصّة رمز الاستجابة السريعة داخل اللوحة */
.qr-stage {
  display: grid; place-items: center; padding: 18px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
}
.qr-stage svg { width: 172px; height: 172px; }

/* كتلة نص مُرمَّز قابلة للتحديد */
.code-block {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 10.5px; line-height: 1.7; color: var(--ink-soft);
  direction: ltr; unicode-bidi: isolate; word-break: break-all; user-select: all;
  max-height: 150px; overflow-y: auto;
}

/* =============================================================
   قائمة خيارات الصف — زر ⋮ في نهاية كل صف يفتح قائمة عائمة
   ============================================================= */
.dt-act-td { text-align: left; padding-left: 10px !important; }
.row-act-btn {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; transition: all var(--t-fast);
}
.row-act-btn svg { width: 16px; height: 16px; }
.row-act-btn:hover, .row-act-btn.on { background: var(--bg-2); color: var(--ink); }
.row-menu {
  position: fixed; z-index: 1200; min-width: 190px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-pop, 0 12px 34px rgba(0,0,0,0.16));
  animation: rmIn .14s ease;
}
@keyframes rmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.row-menu .rm-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; background: transparent; border: none; border-radius: var(--r-sm);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: right; transition: background var(--t-fast);
}
.row-menu .rm-item svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.row-menu .rm-item:hover { background: var(--bg-2); }
.row-menu .rm-item.danger { color: var(--danger); }
.row-menu .rm-item.danger svg { color: var(--danger); }
.row-menu .rm-item.danger:hover { background: var(--danger-bg); }

/* =============================================================
   قوائم الاختيار الموحّدة — ارتفاع مطابق لحقول الإدخال وسهم مخصص،
   وقائمة الخيارات لوحة عصرية بهوية النظام بدل قائمة المتصفح.
   السهم بلون رمادي محايد ثابت لأن خلفيات data-uri لا تقرأ المتغيرات.
   ============================================================= */
.form-input, .form-select { height: 42px; }
.form-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-left: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788494' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 11px center; background-size: 15px;
}
.form-select::-ms-expand { display: none; }
.sel-menu {
  position: fixed; z-index: 1200; min-width: 200px; max-height: 280px; overflow-y: auto;
  padding: 6px; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-pop, 0 12px 34px rgba(0,0,0,0.16));
  animation: rmIn .14s ease;
}
.sel-menu .sm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 11px; background: transparent; border: none; border-radius: var(--r-sm);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: right; transition: background var(--t-fast);
}
.sel-menu .sm-item:hover { background: var(--bg-2); }
.sel-menu .sm-item.sel { color: var(--primary); background: var(--primary-soft); }
.sel-menu .sm-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.sel-menu .sm-item[disabled] { color: var(--muted); cursor: default; background: transparent; }

/* =============================================================
   خريطة المركبة التفاعلية — منظور علوي مشترك للفحص والتسليم والاستلام
   ============================================================= */
.carmap-stage {
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 18px 12px;
}
.carmap { position: relative; max-width: 330px; margin: 0 auto; }
.carmap svg { width: 100%; height: auto; display: block; }
.carmap.compact { max-width: 250px; }
.carmap .cm-shell { fill: var(--bg-2); stroke: var(--line); stroke-width: 2; }
.carmap .cm-mirror { fill: var(--bg-2); stroke: var(--line); stroke-width: 1.6; }
.carmap .cm-line { fill: none; stroke: var(--line); stroke-width: 1.2; opacity: 0.75; }
.carmap .cm-lamp { fill: var(--info-bg); stroke: var(--line); stroke-width: 1; }
.carmap .cm-lamp.rear { fill: var(--danger-bg); }
.carmap .cm-part {
  fill: var(--card); stroke: var(--line); stroke-width: 1.4;
  transition: fill var(--t-fast), stroke var(--t-fast);
}
.carmap [data-part="windshield"], .carmap [data-part="roof"],
.carmap [data-part="rear-glass"] { fill: var(--bg); }
.carmap .cm-wheel { fill: var(--ink-soft); stroke: var(--ink-soft); }
.carmap .cm-part.clickable { cursor: pointer; }
.carmap .cm-part.clickable:hover { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2; }
.carmap .cm-part.has-old { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 2; }
.carmap .cm-part.has-new { fill: var(--danger-bg); stroke: var(--danger); stroke-width: 2; }
.carmap .cm-part.has-old.clickable:hover { fill: var(--warn-bg); stroke: var(--primary); }
.carmap .cm-part.has-new.clickable:hover { fill: var(--danger-bg); stroke: var(--primary); }
.carmap .cm-pin { pointer-events: none; }
.carmap .cm-pin circle { stroke: var(--card); stroke-width: 2; }
.carmap .cm-pin.pin-old circle { fill: var(--warn); }
.carmap .cm-pin.pin-new circle { fill: var(--danger); animation: pinPulse 1.6s ease infinite; }
.carmap .cm-pin text {
  fill: #ffffff; font-family: var(--font-mono); font-size: 11px; font-weight: 800;
  text-anchor: middle; direction: ltr;
}
@keyframes pinPulse { 0%, 100% { r: 10.5; } 50% { r: 12.5; } }
.carmap .cm-end {
  fill: var(--muted); font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-anchor: middle;
}
.carmap .cm-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 130px;
  background: var(--ink); color: var(--card); border-radius: var(--r-md);
  padding: 8px 11px; font-size: 11.5px; box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
.carmap .cm-tip b { display: block; font-size: 12px; margin-bottom: 2px; }
.carmap .cm-tip span { display: block; font-size: 10.5px; opacity: 0.9; }
.carmap .cm-tip .t-old { color: var(--warn); }
.carmap .cm-tip .t-new { color: #ff8f8f; }
.carmap .cm-tip .t-ok { opacity: 0.75; }

/* =============================================================
   لوحة تخطيط الأسطول — شريط زمني لكل مركبة عبر الأيام
   العمود الأول ملتصق يمينًا أثناء التمرير الأفقي، والأشرطة
   تُوضع بـ inset-inline-start فتصح تلقائيًا في الاتجاهين.
   ============================================================= */
.planner { border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--card); overflow: hidden; }
.pl-scroll { overflow-x: auto; overflow-y: visible; }
.pl-table { min-width: max-content; --cw: 46px; --vw: 232px; }
.pl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.pl-row:last-child { border-bottom: none; }
.pl-row:hover .pl-veh { background: var(--bg-2); }
.pl-veh {
  position: sticky; inset-inline-start: 0; z-index: 3; width: var(--vw); flex-shrink: 0;
  background: var(--card); border-inline-end: 1px solid var(--line);
  padding: 8px 13px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  transition: background var(--t-fast);
}
.pl-veh .pv-t { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pl-veh .pv-s { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pl-days { position: relative; display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); }
/* خلايا الأيام أبناء مباشرون لـ pl-days فقط — الاسم نفسه مستعمل في
   شارة اللوحة السعودية (.plate .pl-cell) داخل عمود المركبة، فلا يُترك
   المُحدِّد عامًّا لئلا يرث كل جدول في النظام ارتفاع خلية اللوحة. */
.pl-days > .pl-cell { border-inline-start: 1px solid var(--line-soft); min-height: 48px; }
.pl-days > .pl-cell.is-off { background: var(--bg); }
.pl-days > .pl-cell.is-today { background: var(--primary-soft); opacity: 0.5; }

.pl-hrow { position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); }
.pl-hrow .pl-veh { background: var(--bg); border-bottom: none; }
.pl-hrow .pl-days > .pl-cell { min-height: 0; }
.pl-day {
  border-inline-start: 1px solid var(--line-soft); padding: 7px 2px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.pl-day b { font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.pl-day span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.pl-day.is-today b, .pl-day.is-today span { color: var(--primary); }
.pl-day.is-off { background: var(--bg-2); }

.pl-group {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  position: sticky; inset-inline-start: 0;
}
.pl-group .pg-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }

.pl-bar {
  position: absolute; top: 9px; height: 30px; z-index: 2;
  inset-inline-start: calc(var(--s) * var(--cw) + 3px);
  width: calc(var(--n) * var(--cw) - 6px);
  border-radius: 7px; padding: 0 8px; cursor: pointer; border: none;
  display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap;
  font-family: inherit; font-size: 11px; font-weight: 700; text-align: start;
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.pl-bar:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(0,0,0,0.5); z-index: 3; }
.pl-bar svg { width: 12px; height: 12px; flex-shrink: 0; }
.pl-bar.k-contract { background: var(--primary); color: var(--card); }
.pl-bar.k-overdue { background: var(--danger); color: #ffffff; }
.pl-bar.k-reservation { background: var(--warn-bg); color: var(--warn-ink); border: 1.5px dashed var(--warn); }
.pl-bar.k-maintenance { background: var(--bg-2); color: var(--ink-soft); border: 1.5px solid var(--line); }
.pl-bar.is-drag { opacity: 0.45; }
.pl-bar.starts-before { border-start-start-radius: 0; border-end-start-radius: 0; }
.pl-bar.ends-after { border-start-end-radius: 0; border-end-end-radius: 0; }
.pl-days.drop-ok { background: var(--ok-bg); }
.pl-days.drop-bad { background: var(--danger-bg); }
.pl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 3; pointer-events: none;
  inset-inline-start: calc(var(--today) * var(--cw) + var(--cw) / 2); }
.pl-now::before { content: ''; position: absolute; top: -3px; inset-inline-start: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* النقطة تُرسم مرة واحدة في رأس اللوحة — لا في كل صف */
.pl-now.no-cap::before { display: none; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--muted); }
.pl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pl-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

/* شريط الحجوزات بانتظار مركبة — بطاقات تُسحَب وتُفلَت على صف المركبة */
.wait-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; min-height: 62px; border-radius: var(--r-lg); transition: background var(--t-fast), box-shadow var(--t-fast); }
.wait-strip.drop-here { background: var(--info-bg); box-shadow: inset 0 0 0 1.5px var(--info); }
.wait-card {
  flex: 0 0 auto; min-width: 186px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 9px 12px; cursor: grab; text-align: start;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.wait-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px -6px rgba(0,0,0,0.35); transform: translateY(-1px); }
.wait-card:active { cursor: grabbing; }
.wait-card.is-drag { opacity: 0.4; }
.wait-card .wc-t { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.wait-card .wc-t svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
.wait-card .wc-s { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.wait-card .wc-m { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.wait-hint { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.wait-hint svg { width: 14px; height: 14px; }

/* =============================================================
   خريطة شبكة الفروع — ملف الخريطة الرسمي + دبابيس مُسقَطة جغرافيًا
   ============================================================= */
.ksa-stage {
  position: relative; width: 100%; aspect-ratio: 1802 / 1500;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-xl); overflow: hidden;
}
.ksa-stage .ksa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ksa-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ksa-arcs path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 10 8; opacity: 0.85;
  animation: arcFlow 1.1s linear infinite; }
@keyframes arcFlow { to { stroke-dashoffset: -18; } }
.ksa-pin {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: grid; place-items: center; cursor: pointer; background: none; border: none; padding: 0;
}
.ksa-pin .kp-dot {
  width: var(--sz, 26px); height: var(--sz, 26px); border-radius: 50%;
  background: var(--primary); color: var(--card); border: 2.5px solid var(--card);
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,0.28);
  font-family: var(--font-mono); font-size: 11px; font-weight: 800;
  transition: transform var(--t-base);
}
.ksa-pin.is-airport .kp-dot { background: var(--info-ink); }
.ksa-pin.is-active .kp-dot { background: var(--accent); transform: scale(1.14); }
.ksa-pin::before {
  content: ''; position: absolute; width: var(--sz, 26px); height: var(--sz, 26px); border-radius: 50%;
  border: 2px solid var(--primary); opacity: 0.55; animation: pinRing 2.1s ease-out infinite;
}
.ksa-pin.is-airport::before { border-color: var(--info-ink); }
.ksa-pin.is-active::before { border-color: var(--accent); }
@keyframes pinRing { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }
.ksa-pin .kp-lbl {
  position: absolute; top: calc(100% + 5px); white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  padding: 1px 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.ksa-pin:hover { z-index: 5; }
.ksa-pin:hover .kp-dot { transform: scale(1.16); }
.ksa-city { position: absolute; transform: translate(-50%, -50%); z-index: 1; font-size: 10px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.ksa-city::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); margin-inline-end: 4px; vertical-align: middle; }
.ksa-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.ksa-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ksa-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* =============================================================
   مستند قابل للطباعة — عقد أو فاتورة بمقاس A4
   ============================================================= */
.doc-paper {
  background: var(--card); color: var(--ink); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-card);
  width: 100%; max-width: 794px; margin: 0 auto; padding: 40px 44px;
}
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.doc-org { display: flex; align-items: center; gap: 12px; }
.doc-org .do-mark { width: 46px; height: 46px; border-radius: 13px; background: var(--ink); color: var(--card); display: grid; place-items: center; }
.doc-org .do-mark svg { width: 24px; height: 24px; }
.doc-org .do-n { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.doc-org .do-s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.doc-title { text-align: end; }
.doc-title .dt-t { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.doc-title .dt-n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: 3px; }
.doc-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.doc-meta .dm-l { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.doc-meta .dm-v { font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.doc-sec { margin-top: 20px; }
.doc-sec h4 { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
.doc-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.doc-kv .k { color: var(--muted); }
.doc-kv .v { font-weight: 700; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc-table th { background: var(--bg-2); text-align: start; padding: 8px 10px; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.doc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.doc-table td.num, .doc-table th.num { font-family: var(--font-mono); direction: ltr; text-align: end; }
.doc-total { display: flex; justify-content: flex-end; margin-top: 14px; }
.doc-total .dtt { width: 280px; }
.doc-total .dtt-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12.5px; }
.doc-total .dtt-row.grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 9px; font-size: 14px; font-weight: 800; }
.doc-total .dtt-row .v { font-family: var(--font-mono); direction: ltr; font-weight: 700; }
.doc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.doc-qr { text-align: center; }
.doc-qr svg { width: 104px; height: 104px; display: block; }
.doc-qr .dq-c { font-size: 9.5px; color: var(--muted); margin-top: 5px; max-width: 120px; }
.doc-sign { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.doc-sign .ds-b { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 11px; color: var(--muted); }
.doc-sign .ds-b b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 2px; }
.doc-note { margin-top: 16px; font-size: 10.5px; color: var(--muted); line-height: 1.7; }

#printRoot { display: none; }

@media print {
  .sidebar, .sidebar-backdrop, .app-header, .page-title-row, .no-print,
  .toast-stack, .bulk-bar, .panel-backdrop, .modal-backdrop, .row-menu, .sel-menu { display: none !important; }
  .app-layout, .app-main, .app-content { display: block !important; padding: 0 !important; margin: 0 !important; }
  body { background: #ffffff !important; }
  .doc-paper { box-shadow: none; border: none; max-width: none; padding: 0; }
  body.is-printing .app,
  body.is-printing .toast-stack,
  body.is-printing .panel-backdrop,
  body.is-printing .modal-backdrop { display: none !important; }
  body.is-printing #printRoot { display: block !important; }
  #printRoot, .doc-paper, .doc-qr svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 14mm; }
}

/* =============================================================
   منزلق المقارنة — قبل وبعد بمقبض سحب
   ============================================================= */
.cmpx { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--bg); user-select: none; }
.cmpx .cx-pane { position: relative; }
.cmpx .cx-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split, 50%)); }
.cmpx .cx-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 3px; margin-left: -1.5px;
  background: var(--accent); cursor: ew-resize; z-index: 4;
}
.cmpx .cx-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.cmpx .cx-tag {
  position: absolute; top: 12px; z-index: 3; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line-soft);
}
.cmpx .cx-tag.t-out { inset-inline-end: 12px; color: var(--info-ink); }
.cmpx .cx-tag.t-in { inset-inline-start: 12px; color: var(--danger-ink); }
.plate .pl-emblem { width: 11px; align-self: center; margin: 0 1px; }
.plate .pl-ksa {
  border-left: 1.5px solid var(--ksa-plate-line); background: var(--ksa-plate-paper);
  color: var(--ksa-plate-text); font-size: 5.5px; font-weight: 800; line-height: 1.2;
  padding: 2px 3px; display: grid; place-items: center; text-align: center; letter-spacing: 0;
}

/* =============================================================
   13) هيكل التحميل (Skeleton)
   ============================================================= */
.sk { border-radius: 6px; background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: skw 1.3s linear infinite; }
@keyframes skw { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-line { height: 11px; margin-bottom: 9px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sk-circle { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
[data-loading="1"] .hide-loading { visibility: hidden; }

/* =============================================================
   13.5) ترقيم الصفحات + امتدادات الجدول
   ============================================================= */
.table-foot { padding: 11px 16px; border-top: 1px solid var(--line-soft); background: var(--bg); }
.pager { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.pager .pg {
  min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: var(--card);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: all var(--t-fast); display: inline-grid; place-items: center;
}
.pager .pg:hover:not(:disabled):not(.on) { border-color: var(--primary); color: var(--primary); }
.pager .pg.on { background: var(--primary); border-color: var(--primary); color: var(--card); }
.pager .pg:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .pg svg { width: 14px; height: 14px; }
.pager .pg[data-pg]:first-child svg { transform: rotate(-90deg); }
.pager .pg[data-pg]:last-child svg { transform: rotate(90deg); }
.pager .pg-gap { color: var(--muted); font-family: var(--font-mono); padding: 0 2px; }

@media (max-width: 1100px) { [data-hide="1100"] { display: none; } }
@media (max-width: 880px)  { [data-hide="880"]  { display: none; } }
@media (max-width: 720px)  { [data-hide="720"]  { display: none; } }

/* =============================================================
   14) مساعدات
   ============================================================= */
.card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-body.flush { padding: 14px 18px 18px; }
.chart-box { width: 100%; min-height: 40px; }
.muted-note { font-size: 11px; color: var(--muted); line-height: 1.7; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.sar::after { content: ' ر.س'; font-family: var(--font-body); font-size: 0.82em; color: var(--muted); font-weight: 600; }
.icon-btn.spin svg { animation: spin360 0.8s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.btn-wait { position: relative; color: transparent !important; pointer-events: none; }
.btn-wait::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%;
  animation: spin360 0.7s linear infinite;
}
.mini-btn.btn-wait::after { border-top-color: var(--card); }

/* لوحة التفاصيل — عناصر معلومات */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.info-item { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 11px 13px; }
.info-item .il { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.info-item .iv { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 5px; line-height: 1.5; }
.info-item .iv.mo { font-family: var(--font-mono); direction: ltr; text-align: right; font-size: 12.5px; }
.panel-steps { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; }
.pstep { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.pstep:last-child { padding-bottom: 0; }
.pstep::before { content: ''; position: absolute; right: 13px; top: 26px; bottom: 0; width: 2px; background: var(--line-soft); }
.pstep:last-child::before { display: none; }
.pstep .ps-dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); border: 1px solid var(--line-soft); z-index: 1; }
.pstep .ps-dot svg { width: 14px; height: 14px; }
.pstep.done .ps-dot { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok); }
.pstep.cur .ps-dot { background: var(--primary); color: var(--card); border-color: var(--primary); }
.pstep .ps-t { padding-top: 4px; }
.pstep .ps-n { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pstep.pending .ps-n { color: var(--muted); }
.pstep .ps-s { font-size: 11px; color: var(--muted); margin-top: 3px; }

@media (max-width: 640px) { .info-grid, .mini-grid { grid-template-columns: 1fr; } }

/* =============================================================
   15) شاشة الدخول (بلا شل)
   ============================================================= */
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line-soft);
  padding: 12px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative; z-index: 2;
}
.tb-brand { display: flex; align-items: center; gap: 11px; }
.tb-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: var(--card); display: grid; place-items: center; }
.tb-mark svg { width: 19px; height: 19px; }
.tb-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tb-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.auth-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: calc(100vh - 63px); }
@media (max-width: 980px) { .auth-wrap { grid-template-columns: 1fr; } .auth-brand { display: none; } }
.auth-brand { padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.auth-brand h1 { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.25; }
.auth-brand p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; max-width: 480px; }
.auth-points { display: grid; gap: 12px; max-width: 480px; }
.auth-point { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 14px 16px; }
.auth-point .ap-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.auth-point .ap-ic svg { width: 16px; height: 16px; }
.auth-point .ap-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.auth-point .ap-s { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.65; }
.auth-form { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-2xl); padding: 34px 34px 30px; width: 100%; max-width: 430px; box-shadow: var(--sh-card); }
.auth-title { font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.auth-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }
.auth-alert { display: flex; gap: 10px; background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 18px; }
.auth-alert svg { width: 15px; height: 15px; color: var(--danger-ink); flex-shrink: 0; margin-top: 1px; }
.auth-alert .t { font-size: 12px; color: var(--danger-ink); font-weight: 600; line-height: 1.6; }
.auth-foot { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 20px; line-height: 1.8; }
.otp-row { display: flex; gap: 9px; direction: ltr; justify-content: center; margin: 6px 0 4px; }
.otp-row input {
  width: 48px; height: 56px; text-align: center; font-family: var(--font-mono);
  font-size: 21px; font-weight: 700; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: all var(--t-base);
}
.otp-row input:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft); }
.otp-row input.filled { border-color: var(--primary); background: var(--card); }

/* =============================================================
   16) المعالج متعدد الخطوات
   ============================================================= */
.steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 22px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: 16px 20px; overflow-x: auto; }
.step { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 150px; position: relative; }
.step + .step::before { content: ''; position: absolute; right: -50%; top: 15px; width: 100%; height: 2px; background: var(--line-soft); }
.step.done + .step::before, .step.done::before { background: var(--ok); }
.step .st-n {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center; background: var(--bg-2); color: var(--muted);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 800; border: 2px solid var(--card);
}
.step.cur .st-n { background: var(--primary); color: var(--card); box-shadow: 0 0 0 4px var(--primary-soft); }
.step.done .st-n { background: var(--ok); color: #fff; }
.step .st-n svg { width: 15px; height: 15px; }
.step .st-t { min-width: 0; display: flex; flex-direction: column; }
.step .st-l { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--muted); white-space: nowrap; }
.step.cur .st-l, .step.done .st-l { color: var(--ink); }
.step .st-d { display: block; font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.wiz-pane { display: none; }
.wiz-pane.on { display: block; animation: fadeUp 0.35s cubic-bezier(0.2,0.8,0.2,1); }
.wiz-foot {
  position: sticky; bottom: 0; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); padding: 13px 18px; display: flex; align-items: center;
  gap: 12px; margin-top: 18px; box-shadow: 0 -6px 20px -14px rgba(0,0,0,0.3); z-index: 5; flex-wrap: wrap;
}
.wiz-foot .grow { flex: 1; min-width: 120px; }

/* =============================================================
   17) بطاقات الاختيار (فئة / مركبة / خطة)
   ============================================================= */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pick {
  background: var(--card); border: 1.5px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 15px; cursor: pointer; transition: all var(--t-fast); text-align: right;
  font-family: inherit; width: 100%; display: block; position: relative;
}
.pick:hover { border-color: var(--primary); transform: translateY(-1px); }
.pick.on,
.pick:has(.check:checked) { border-color: var(--primary); background: var(--primary-soft); }
.pick.off { opacity: 0.55; cursor: not-allowed; }
.pick.off:hover { transform: none; border-color: var(--line-soft); }
.pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pick-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.pick-code { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted); background: var(--bg-2); border-radius: 5px; padding: 2px 7px; }
.pick-spec { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pick-spec span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 3px 9px; }
.pick-spec svg { width: 11px; height: 11px; color: var(--muted); }
.pick-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px dashed var(--line-soft); }
.pick-price { font-family: var(--font-mono); font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1; }
.pick-price small { font-size: 10.5px; color: var(--muted); font-weight: 600; font-family: var(--font-body); }
.pick-avail { font-size: 11px; font-weight: 700; }
.pick-avail.ok { color: var(--ok-ink); }
.pick-avail.low { color: var(--warn-ink); }
.pick-avail.no { color: var(--danger-ink); }

/* =============================================================
   18) تفصيل السعر
   ============================================================= */
.price-box { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px; position: sticky; top: 78px; }
.price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 12.5px; }
.price-line .l { color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.price-line .l .why { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-2); color: var(--muted); display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; cursor: help; }
.price-line .v { font-family: var(--font-mono); direction: ltr; font-weight: 700; color: var(--ink); }
.price-line.sub .l, .price-line.sub .v { color: var(--muted); font-size: 11.5px; }
.price-line.minus .v { color: var(--ok-ink); }
.price-line.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.price-line.total .l { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.price-line.total .v { font-size: 19px; font-weight: 800; }
.price-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.price-flash { animation: flashBg 0.7s ease; }
@keyframes flashBg { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

/* =============================================================
   19) تقويم التوافر
   ============================================================= */
.cal-wrap { overflow-x: auto; }
.cal { min-width: 900px; }
.cal-head { display: grid; align-items: stretch; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--card); z-index: 2; }
.cal-head .ch-c { padding: 8px 4px; text-align: center; border-right: 1px solid var(--line-soft); }
.cal-head .ch-c:first-child { border-right: none; }
.cal-head .ch-d { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--ink); }
.cal-head .ch-w { font-size: 10px; color: var(--muted); margin-top: 2px; }
.cal-head .ch-c.today { background: var(--primary-soft); }
.cal-head .ch-c.weekend { background: var(--bg); }
.cal-row { display: grid; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.cal-row:last-child { border-bottom: none; }
.cal-lbl { padding: 9px 12px; border-left: 1px solid var(--line-soft); background: var(--card); position: sticky; right: 0; z-index: 1; }
.cal-lbl .cl-n { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cal-lbl .cl-s { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.cal-cell { border-right: 1px solid var(--line-soft); min-height: 42px; padding: 4px; display: grid; gap: 2px; align-content: start; cursor: pointer; transition: background var(--t-fast); }
.cal-cell:hover { background: var(--bg); }
.cal-cell.weekend { background: rgba(0,0,0,0.012); }
.cal-cell.sel { background: var(--primary-soft); }
.cal-bar { height: 15px; border-radius: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: #fff; display: grid; place-items: center; overflow: hidden; white-space: nowrap; }
.cal-bar.b-rent { background: var(--primary); }
.cal-bar.b-hold { background: var(--info); }
.cal-bar.b-maint { background: var(--warn); }
.cal-bar.b-trans { background: var(--neutral); }
.cal-bar.b-late { background: var(--danger); }
.cal-cap { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.cal-cap.free { color: var(--ok-ink); }
.cal-cap.tight { color: var(--warn-ink); }
.cal-cap.none { color: var(--danger-ink); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 4px 0; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.cal-legend i { width: 12px; height: 9px; border-radius: 3px; display: inline-block; }

/* =============================================================
   20) مخطط المركبة والفحص
   ============================================================= */
.veh-diagram { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 18px; position: relative; }
.veh-diagram svg { width: 100%; height: auto; max-height: 340px; display: block; }
.vd-part { fill: var(--bg-2); stroke: var(--line); stroke-width: 1.5; cursor: pointer; transition: fill var(--t-fast), stroke var(--t-fast); }
.vd-part:hover { fill: var(--primary-soft); stroke: var(--primary); }
.vd-part.has-old { fill: var(--warn-bg); stroke: var(--warn); }
.vd-part.has-new { fill: var(--danger-bg); stroke: var(--danger); }
.vd-part.sel { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2.5; }
.vd-label { font-family: var(--font-body); font-size: 9px; fill: var(--muted); pointer-events: none; text-anchor: middle; }
.vd-pin { fill: var(--danger); stroke: #fff; stroke-width: 2; pointer-events: none; }
.vd-pin.old { fill: var(--warn); }
.gauge { display: flex; align-items: center; gap: 12px; }
.gauge-track { flex: 1; height: 12px; border-radius: 7px; background: var(--bg-2); position: relative; overflow: hidden; }
.gauge-track > i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--danger), var(--warn), var(--ok)); transition: width var(--t-base); }
.gauge-val { font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--ink); min-width: 48px; text-align: left; }
.gauge-marks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-top: 5px; }
.odo-input { display: flex; align-items: center; gap: 8px; }
.odo-digits { display: flex; gap: 3px; direction: ltr; }
.odo-digits span {
  width: 26px; height: 36px; display: grid; place-items: center; border-radius: 6px;
  background: var(--ink); color: var(--card); font-family: var(--font-mono); font-size: 18px; font-weight: 800;
}
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.photo-slot {
  aspect-ratio: 4/3; border-radius: var(--r-md); border: 1.5px dashed var(--line);
  background: var(--bg); display: grid; place-items: center; cursor: pointer;
  transition: all var(--t-fast); position: relative; overflow: hidden; text-align: center; padding: 8px;
}
.photo-slot:hover { border-color: var(--primary); background: var(--primary-soft); }
.photo-slot .ps-t { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 5px; line-height: 1.4; }
.photo-slot svg { width: 18px; height: 18px; color: var(--muted); }
.photo-slot.filled { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.photo-slot.filled svg { color: var(--ok-ink); }
.photo-slot.filled .ps-t { color: var(--ok-ink); }
.photo-slot .ps-meta { position: absolute; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-mono); font-size: 8.5px; padding: 3px; }
.sign-pad { border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--card); position: relative; touch-action: none; }
.sign-pad canvas { display: block; width: 100%; height: 160px; border-radius: var(--r-lg); cursor: crosshair; }
.sign-pad .sp-hint { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 12px; color: var(--muted); }
.sign-pad.has-ink { border-style: solid; border-color: var(--ok); }
.sign-pad.has-ink .sp-hint { display: none; }

/* =============================================================
   21) لوحة الإدخال — اللوحة السعودية الكبيرة
   ============================================================= */
/* اللوحة الكبيرة — مطابقة للوحة السعودية الحالية كما في المرجع المصوّر:
   الأرقام (هندية فوق / لاتينية تحت) يسارًا، شعار المملكة الملوّن في الوسط،
   الأحرف (عربية فوق ومقابلها اللاتيني تحتها موضعيًا) يمينًا،
   وشريط أبيض في أقصى اليمين يحمل الشعار و«السعودية» وحروف KSA متراصة.
   لا خطوط فاصلة داخلية سوى خط الشريط. */
.plate-big {
  display: inline-flex; align-items: stretch;
  border: 2.5px solid var(--ksa-plate-line); border-radius: 8px;
  background: var(--ksa-plate-paper); overflow: hidden;
  direction: ltr; unicode-bidi: isolate; min-width: 340px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.18);
}
.plate-big .pb-grid {
  flex: 1; display: grid; grid-template-columns: 1.1fr auto 1.1fr;
  align-items: center; gap: 12px; padding: 10px 16px;
}
.plate-big .pb-cell { display: flex; flex-direction: column; text-align: center; }
.plate-big .pb-top {
  font-family: var(--font-plate); font-size: 27px; font-weight: 800;
  color: var(--ksa-plate-text); letter-spacing: .14em; line-height: 1.15;
  min-height: 32px; display: grid; place-items: center;
}
.plate-big .pb-bot {
  font-family: var(--font-mono); font-size: 17px; font-weight: 700;
  color: var(--ksa-plate-text); letter-spacing: .14em; line-height: 1.2;
  min-height: 22px; display: grid; place-items: center; margin-top: 3px;
}
.plate-big .pb-emb { display: grid; place-items: center; }
.plate-big .pb-emb .pb-emblem { width: 42px; height: 46px; }
.plate-big .pb-band {
  width: 36px; border-left: 2px solid var(--ksa-plate-line);
  background: var(--ksa-plate-paper); color: var(--ksa-plate-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 5px 2px;
}
.plate-big .pb-band .pb-emblem { width: 14px; height: 15px; }
.plate-big .pb-sa { font-family: var(--font-plate); font-size: 6.5px; font-weight: 700; }
.plate-big .pb-ksa-txt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; line-height: 1.35; text-align: center; }
.plate-big .pb-empty { color: var(--ksa-plate-faint); }

/* أصناف اللوحات حسب تصنيف المرور الرسمي: جسم اللوحة أبيض بأحرف سوداء
   في كل الأنواع، والشريط الجانبي وحده يتلوّن ويحمل رمز النوع —
   خصوصي أبيض (دائرة)، نقل عام/أجرة أصفر (مثلث لأعلى)، نقل أزرق (مثلث لأسفل). */
.plate-big .pb-sym { font-size: 7px; line-height: 1; }
.plate-big.pt-public .pb-band, .plate-big.pt-taxi .pb-band { background: var(--ksa-plate-taxi); }
.plate-big.pt-transport .pb-band { background: var(--ksa-plate-band); color: #ffffff; }

/* خانات إدخال اللوحة + منصة المعاينة */
.plate-inputs { display: flex; gap: 7px; }
.plate-box {
  width: 46px; height: 54px; text-align: center;
  font-family: var(--font-body); font-size: 21px; font-weight: 700; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: all var(--t-base);
}
#digitBoxes .plate-box { font-family: var(--font-mono); }
.plate-box:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft); }
.plate-box.filled { border-color: var(--primary); background: var(--card); }
.plate-box.bad { border-color: var(--danger); background: var(--danger-bg); animation: shake 0.4s; }

.plate-stage {
  margin-top: 18px; padding: 20px; border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
}
.plate-read { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.plate-read .pr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.plate-read .pr-l { color: var(--muted); }
.plate-read .pr-v { font-weight: 700; color: var(--ink); }
.plate-read .pr-v.mono { font-family: var(--font-mono); direction: ltr; }

/* =============================================================
   22) الخط الزمني للعقد
   ============================================================= */
.tl { position: relative; padding-right: 26px; }
.tl::before { content: ''; position: absolute; top: 6px; bottom: 6px; right: 8px; width: 2px; background: var(--line-soft); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; right: -22px; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--primary); z-index: 1;
}
.tl-item.ok::before { background: var(--ok); border-color: var(--ok); }
.tl-item.warn::before { border-color: var(--warn); }
.tl-item.danger::before { border-color: var(--danger); }
.tl-item.muted::before { border-color: var(--line); }
.tl-t { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.tl-s { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
.tl-m { font-size: 10.5px; color: var(--muted); margin-top: 5px; display: flex; gap: 7px; flex-wrap: wrap; }
.tl-m .mo { font-family: var(--font-mono); direction: ltr; }

/* =============================================================
   23) أعمدة العمليات (Kanban خفيف)
   ============================================================= */
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1240px) { .lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .lanes { grid-template-columns: 1fr; } }
.lane { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-xl); overflow: hidden; }
.lane-head { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lane-head .lh-t { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.lane-head .lh-t .dotc { width: 8px; height: 8px; border-radius: 50%; }
.lane-head .lh-n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 2px 9px; }
.lane-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 90px; }
.lane-card {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 11px 12px; cursor: pointer; transition: all var(--t-fast); text-align: right; font-family: inherit; width: 100%;
}
.lane-card:hover { border-color: var(--primary); transform: translateY(-1px); background: var(--card); }
.lane-card .lc-1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lane-card .lc-n { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lane-card .lc-t { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--muted); }
.lane-card .lc-2 { font-size: 11px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* =============================================================
   24) عناصر إضافية
   ============================================================= */
.check-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg); margin-bottom: 8px; transition: all var(--t-fast); }
.check-row.ok { border-color: var(--ok); background: var(--ok-bg); }
.check-row.blocked { border-color: var(--danger); background: var(--danger-bg); }
.check-row .cr-i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-2); color: var(--muted); }
.check-row.ok .cr-i { background: var(--ok); color: #fff; }
.check-row.blocked .cr-i { background: var(--danger); color: #fff; }
.check-row .cr-i svg { width: 14px; height: 14px; }
.check-row .cr-x { flex: 1; min-width: 0; }
/* العنوان والوصف سطران مستقلان — بلا display:block يلتصقان في سطر
   واحد متى قصُر النص عن الالتفاف، فيبدو النصان ملتحمين بلا فاصل. */
.check-row .cr-n { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.check-row .cr-s { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.6; }

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--bg);
  padding: 22px; text-align: center; cursor: pointer; transition: all var(--t-fast);
}
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-soft); }
.drop svg { width: 22px; height: 22px; color: var(--muted); }
.drop .d-t { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.drop .d-s { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.file-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--card); margin-top: 8px; }
.file-row .fr-i { width: 32px; height: 32px; border-radius: 8px; background: var(--info-bg); color: var(--info-ink); display: grid; place-items: center; flex-shrink: 0; }
.file-row .fr-i svg { width: 15px; height: 15px; }
.file-row .fr-t { flex: 1; min-width: 0; }
.file-row .fr-n { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .fr-m { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 3px; }

.meter { height: 8px; border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 5px; background: var(--primary); transition: width 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.meter.ok > i { background: var(--ok); }
.meter.warn > i { background: var(--warn); }
.meter.danger > i { background: var(--danger); }

/* ١) المسار يجب أن يُسمح له بالانكماش.

   `1.4fr` تعني `minmax(auto, 1.4fr)`، و`auto` هنا = عرض المحتوى الأدنى. فبطاقة
   محتواها ٥٢١ بكسل داخل عمود نصيبه ٣٢٥ لا تنكمش — تفيض الشبكة، وينزلق العمود
   خارج الشاشة في اتجاه القراءة. `minmax(0, …)` يرفع هذا الحدّ الأدنى التلقائي،
   فيبقى كل شيء داخل الحاوية مهما اتّسع محتواه. وهذه وقاية لكل شاشة تستعمل
   المقسّم — إحدى وخمسون — لا علاج للثلاث التي ظهر فيها العطل. */
.split-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .split-2 { grid-template-columns: 1fr; } }

/* ٢) نموذج في العمود الضيّق يصير عموداً واحداً.

   `.form-row` في الدليل عمودان ينهاران دون ٧٠٠ بكسل — **من عرض النافذة**.
   والعمود الجانبي هنا ٣٢٥ بكسل داخل نافذة ١٤٤٠، فالاستعلام يقيس الصندوق
   الخطأ: النافذة واسعة والحاوية ضيّقة. والعمود الأخير في `.split-2` هو الضيّق
   دائماً (0.6fr)، فحقلان متجاوران فيه مزدحمان عند أي عرض. */
.split-2 > :last-child .form-row { grid-template-columns: 1fr; }
.split-even { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 880px) { .split-even { grid-template-columns: 1fr; } }

.hero-band {
  background: linear-gradient(135deg, var(--card) 0%, var(--bg) 55%, var(--primary-soft) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--r-2xl); padding: 22px 26px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.hero-band .hb-av {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--ink); color: var(--card); font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.hero-band .hb-t { flex: 1; min-width: 220px; }
.hero-band .hb-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.hero-band .hb-s { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-band .hb-a { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-stat { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 9px 14px; min-width: 92px; }
.hb-stat .s-l { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.hb-stat .s-v { font-family: var(--font-mono); font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 4px; line-height: 1; }

.kv-list { display: flex; flex-direction: column; }
.kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--muted); }
.kv-row .v { font-weight: 700; color: var(--ink); text-align: left; }
.kv-row .v.mo { font-family: var(--font-mono); direction: ltr; }

.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 780px) { .compare { grid-template-columns: 1fr; } }
.cmp-col { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 14px; }
.cmp-col.out { border-top: 3px solid var(--primary); }
.cmp-col.in { border-top: 3px solid var(--info); }
.cmp-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.cmp-s { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.diff-new { background: var(--danger-bg); border-color: var(--danger); }
.diff-same { background: var(--bg); }

.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fadeUp 0.3s cubic-bezier(0.2,0.8,0.2,1); }