/* ═══════════════════════════════════════════════════════════════
   الهوية البصرية — المندرة العربية
   طابع عربي زخرفي: زمردي · ذهبي · عاجي · كحلي
   تُحمَّل بعد style.css وتتجاوزه عبر المتغيرات والمكوّنات
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pr: #0b4f43;           /* زمردي داكن */
  --pr-rgb: 11, 79, 67;
  --pl: #13806a;           /* زمردي فاتح */
  --ac: #c9a227;           /* ذهبي */
  --ac-dark: #8a6d0f;      /* ذهبي للنصوص (تباين AA) */
  --ac-light: #fbf4dc;
  --navy: #14213d;         /* كحلي */
  --bg: #f6f2e9;           /* رملي/عاجي */
  --sf: #fffdf8;
  --tx: #1b2a26;
  --tx2: #4b5d56;
  --mu: #6b7c75;
  --bd: #e6dfcd;
  --ok: #0a7a52;  --okb: #e6f6ee;
  --wn: #9a5b00;  --wnb: #fdf1d8;
  --er: #b42318;  --erb: #fdecea;
  --in: #1d4f91;  --inb: #e8f0fb;
  --sh-sm: 0 1px 2px rgba(20,33,61,.06);
  --sh: 0 2px 10px rgba(20,33,61,.07);
  --sh-lg: 0 6px 26px rgba(20,33,61,.10);
  --font: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'Amiri', 'Reem Kufi', 'Tajawal', serif;
  /* نجمة هندسية ثمانية (SVG) — تُستعمل كنقش خفيف */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1' opacity='.55'%3E%3Cpath d='M28 4l6 10 11-3-3 11 10 6-10 6 3 11-11-3-6 10-6-10-11 3 3-11-10-6 10-6-3-11 11 3z'/%3E%3Ccircle cx='28' cy='28' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

body { font-family: var(--font); line-height: 1.75; font-size: 14.5px; overflow-x: hidden; }
input, select, textarea, button { font-family: var(--font); }
#main { min-width: 0; }

/* ── العناوين بخط زخرفي ── */
.pg-title, .tb-title, .modal-title, .sb-logo-txt, .login-logo-title, .card-title {
  font-family: var(--font-head);
  letter-spacing: 0;
}
.pg-title { font-size: 26px; font-weight: 700; color: var(--pr); position: relative; padding-bottom: 12px; margin-bottom: 18px; }
.pg-title::after {                       /* فاصل زخرفي ذهبي */
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 140px; height: 8px;
  background: linear-gradient(90deg, var(--ac), transparent) 0 3px / 100% 2px no-repeat,
              var(--pattern) 0 0 / 14px 14px no-repeat;
}
.tb-title { font-size: 21px; font-weight: 700; color: var(--pr); }
.card-title { font-size: 17px; font-weight: 700; color: var(--pr); }
.modal-title { font-size: 20px; font-weight: 700; }

/* ── الشريط الجانبي ── */
#sidebar {
  background: linear-gradient(185deg, #0b4f43 0%, #083a32 55%, #062a25 100%);
  box-shadow: -2px 0 24px rgba(6,42,37,.25);
}
#sidebar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--pattern) 0 0 / 56px 56px; opacity: .07;
}
#sidebar > * { position: relative; }
.sb-logo { border-bottom: 1px solid rgba(201,162,39,.35); }
.sb-logo-icon { background: linear-gradient(135deg, #e0bb4a, #c9a227); color: #3d2e00; box-shadow: 0 2px 12px rgba(201,162,39,.4); }
.sb-logo-txt { font-size: 17px; }
.sb-logo-sub { color: rgba(255,255,255,.65); }
.sb-sec { color: #e8cf7a; font-size: 11px; letter-spacing: .5px; text-transform: none; position: relative; }
.sb-sec::after { content: ''; display: block; height: 1px; margin-top: 6px; background: linear-gradient(90deg, rgba(201,162,39,.5), transparent); }
.nav-item { color: rgba(255,255,255,.82); font-size: 13.5px; }
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active { background: rgba(201,162,39,.2); color: #fff; border-right-color: var(--ac); }
.sb-footer { color: rgba(255,255,255,.6); border-top-color: rgba(201,162,39,.25); }
.sb-footer a { color: rgba(255,255,255,.75) !important; }

/* ── الشريط العلوي ── */
#topbar { background: rgba(255,253,248,.9); border-bottom: 2px solid var(--ac); }
.user-chip { background: var(--ac-light); border-color: #eadba0; }
.u-avatar { background: linear-gradient(135deg, var(--pr), var(--pl)); }
#notifPanel { background: var(--sf) !important; border-color: var(--bd) !important; }

/* ── الأزرار ── */
.btn-pr { background: var(--pr); }
.btn-pr:hover { background: var(--pl); box-shadow: 0 2px 12px rgba(11,79,67,.3); }
.btn-ac { background: linear-gradient(135deg, #d8b23a, #b8891e); color: #2c2100; }
.btn-mu { background: #efe9d9; border-color: var(--bd); color: var(--tx); }
.btn-mu:hover { background: #e6dfcb; }
.link-btn { color: var(--pl); }
button:focus-visible, a:focus-visible, .nav-item:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--pl); box-shadow: 0 0 0 4px rgba(19,128,106,.15); }

/* ── البطاقات ── */
.card { border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--sh); background: var(--sf); position: relative; }
.card-header { border-bottom: 1px solid var(--bd); background: linear-gradient(180deg, #fffdf8, #faf5e8); border-radius: 14px 14px 0 0; position: relative; }
.card-header::after {                    /* حافة زخرفية ذهبية */
  content: ''; position: absolute; inset-inline: 18px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--ac), rgba(201,162,39,0) 70%);
}
.stat-card { background: var(--sf); border: 1px solid var(--bd); overflow: hidden; }
.stat-card::after {
  content: ''; position: absolute; inset-inline-end: -14px; bottom: -14px; width: 90px; height: 90px;
  background: var(--pattern) 0 0 / 56px 56px; opacity: .13; pointer-events: none;
}
.stat-val { font-family: var(--font); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.sc-blue::before   { background: linear-gradient(90deg, var(--in), #4a7bc1); }
.sc-green::before  { background: linear-gradient(90deg, var(--ok), #2fa774); }
.sc-amber::before  { background: linear-gradient(90deg, var(--ac), #e3c05a); }
.sc-red::before    { background: linear-gradient(90deg, var(--er), #d9594d); }
.sc-purple::before { background: linear-gradient(90deg, var(--navy), #3d5282); }

/* ── الجداول ── */
.tbl-wrap { max-height: 72vh; overflow: auto; -webkit-overflow-scrolling: touch; }
th { position: sticky; top: 0; z-index: 2; background: #efe9d6; color: var(--pr); font-weight: 800; border-bottom: 2px solid var(--ac); }
td { font-variant-numeric: tabular-nums; }
tr:nth-child(even) td { background: #fbf8ef; }
tr:hover td, tr:nth-child(even):hover td { background: #f1f7f3; }

/* ── الشارات (نص + لون) ── */
.badge { font-weight: 700; border: 1px solid transparent; }
.b-ok { background: var(--okb); color: var(--ok); border-color: #b7e4cd; }
.b-er { background: var(--erb); color: var(--er); border-color: #f3c0ba; }
.b-wn { background: var(--wnb); color: var(--wn); border-color: #efd391; }
.b-in { background: var(--inb); color: var(--in); border-color: #bfd3ee; }
.b-pr { background: #e6efe9; color: var(--pr); border-color: #c4d8cc; }
.b-mu { background: #eee9dc; color: var(--tx2); border-color: var(--bd); }

/* ── النماذج والنوافذ ── */
.form-label { font-weight: 700; color: var(--tx2); }
.form-label.req::after { color: var(--er); }
.modal { background: var(--sf); border: 1px solid var(--bd); }
.modal-hd { background: linear-gradient(180deg, #fffdf8, #f8f1dc); border-bottom: 2px solid var(--ac); }
.modal-close:hover { background: #efe9d9; }
.tab { font-weight: 700; }
.tab.active { color: var(--pr); border-bottom-color: var(--ac); }
.tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.tab { white-space: nowrap; }
.search-bar { flex-wrap: wrap; }
.search-bar > * { min-width: 0; }

/* ── شاشة الدخول ── */
#login-screen { background: radial-gradient(circle at 20% 15%, #13806a 0%, #0b4f43 38%, #062a25 100%); }
#login-screen::before {
  inset: 0; width: auto; height: auto; top: 0; left: 0; border-radius: 0; animation: none;
  background: var(--pattern) 0 0 / 70px 70px; opacity: .10;
}
#login-screen::after { background: radial-gradient(circle, rgba(201,162,39,.18) 0%, transparent 65%); }
.login-box { background: var(--sf); border: 1px solid #eadba0; box-shadow: 0 20px 60px rgba(0,0,0,.35); position: relative; }
.login-box::before {                     /* إطار زخرفي داخلي */
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201,162,39,.55); border-radius: 12px; pointer-events: none;
}
.login-logo-icon { background: linear-gradient(135deg, var(--pr), var(--pl)); color: #f3d77a; border: 2px solid var(--ac); }
.login-logo-title { font-size: 28px; font-weight: 700; }
.login-btn { background: linear-gradient(135deg, var(--pr), var(--pl)); }
.login-btn:hover { box-shadow: 0 4px 20px rgba(11,79,67,.4); }

/* ── الخرائط ومتفرقات ── */
.map-side, .map-wrap, .kchip, .kpi { background: var(--sf); border-color: var(--bd); }
.rank-n { background: var(--ac-light); color: var(--ac-dark); }
.empty-state { color: var(--mu); }
.pbar { background: #e8e1cf; }
::selection { background: rgba(201,162,39,.35); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cdbf93; border-radius: 6px; }

/* ── الجوال (375px) بدون تمرير أفقي ── */
@media (max-width: 768px) {
  .pg-title { font-size: 22px; }
  .tb-right .user-chip > div:last-child { display: none; }
  .tb-right { gap: 8px; }
  #topbar { padding: 0 12px; }
  .search-bar > input, .search-bar > select, .search-bar .search-input { max-width: 100% !important; flex: 1 1 100%; }
  .tbl-wrap { max-height: none; }
  table { min-width: 560px; }
  .dash-grid { gap: 12px; }
  .modal-body { padding: 14px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
  .login-logo-title { font-size: 24px; }
}

/* ── الوضع الداكن ── */
@media (prefers-color-scheme: dark) {
  :root {
    --pr: #5fd0b3; --pl: #3fb596; --ac: #d8b23a; --ac-dark: #e8cf7a; --ac-light: #2a2514; --navy: #e8efe9;
    --bg: #0d1512; --sf: #15211d; --tx: #e8efe9; --tx2: #b7c7be; --mu: #92a89d; --bd: #2a3b34;
    --ok: #4ade9a; --okb: #11321f; --wn: #f0b64d; --wnb: #35290e; --er: #ff8a7d; --erb: #3a1713;
    --in: #8bb8f5; --inb: #14263f;
    --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh: 0 2px 10px rgba(0,0,0,.4); --sh-lg: 0 6px 26px rgba(0,0,0,.5);
  }
  body { background: var(--bg); }
  #topbar { background: rgba(21,33,29,.92); }
  .card-header, .modal-hd { background: linear-gradient(180deg, #1a2824, #15211d); }
  th { background: #1d2c27; color: var(--pr); }
  tr:nth-child(even) td { background: #182621; }
  tr:hover td, tr:nth-child(even):hover td { background: #1e3029; }
  input, select, textarea { background: #101a17; color: var(--tx); border-color: var(--bd); }
  .btn-mu { background: #1e2e29; color: var(--tx); border-color: var(--bd); }
  .btn-mu:hover { background: #26392f; }
  .btn-ok { background: var(--okb); } .btn-er { background: var(--erb); border-color: #6b2a24; }
  .user-chip { background: #1f2a22; border-color: #3a4a30; }
  .login-box { background: var(--sf); }
  .b-ok { border-color: #1f5c3d; } .b-er { border-color: #6b2a24; } .b-wn { border-color: #6b5320; } .b-in { border-color: #2a4a78; }
  .b-pr { background: #14302a; border-color: #25503f; } .b-mu { background: #1e2a26; }
  .stat-card::after, #sidebar::before { opacity: .09; }
  .tab:hover { background: #1b2a25; }
  .modal-close:hover, .hamburger:hover { background: #1e2e29; }
  .veh-item:hover { background: #1e3029; }
  .pbar { background: #263630; }
  .rank-row { border-bottom-color: #22322c; }
  .alert-row { border-bottom-color: #22322c; }
  .leaflet-container { filter: brightness(.9) contrast(1.05); }
}

@media print {
  #sidebar, #topbar, .search-bar, .hamburger, .tbl-actions, button { display: none !important; }
  #main { margin: 0 !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #999; }
  .tbl-wrap { max-height: none; overflow: visible; }
  th { position: static; }
}

/* ═════════ أعمدة الشبكة الإضافية ═════════ */
.c3 { grid-column: span 3; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
@media (max-width: 1100px) { .c3, .c9 { grid-column: span 12; } }

/* ═════════ صفحة المركبة (بروفايل) ═════════ */
.pf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 14px;
  background: linear-gradient(135deg, #fffdf8, #f6efd9); overflow: hidden; }
.pf-head::after { content: ''; position: absolute; inset-inline-start: -30px; top: -30px; width: 200px; height: 200px; background: var(--pattern) 0 0 / 56px 56px; opacity: .14; pointer-events: none; }
.pf-head-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.pf-title h2 { font-family: var(--font-head); font-size: 26px; color: var(--pr); line-height: 1.3; }
.pf-title h2 small { font-family: var(--font); font-size: 15px; color: var(--mu); font-weight: 600; margin-inline-start: 6px; }
.pf-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.pf-sub { font-size: 12.5px; color: var(--tx2); }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.plate { background: #fff; border: 3px solid #1b2a26; border-radius: 10px; padding: 4px 6px; min-width: 150px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); position: relative; z-index: 1; color: #1b2a26; }
.plate::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 14px; background: #0a7a52; border-radius: 6px 0 0 6px; opacity: .9; }
.plate-ar { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding-inline-start: 12px; direction: rtl; }
.plate-ar b { font-size: 30px; font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.plate-ar span { font-size: 22px; font-weight: 800; }
.plate-en { font-size: 12px; font-weight: 700; letter-spacing: 3px; border-top: 1px solid #ccc; margin-top: 2px; padding-inline-start: 12px; direction: ltr; }

.doc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.doc-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--sf); border: 1px solid var(--bd); border-inline-start: 5px solid var(--mu); border-radius: 12px; flex-wrap: wrap; }
.doc-chip > i { font-size: 20px; color: var(--mu); width: 24px; text-align: center; }
.doc-chip > div { flex: 1; min-width: 80px; }
.dc-l { font-size: 12px; color: var(--tx2); font-weight: 700; }
.dc-d { font-size: 14px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.dc-ok { border-inline-start-color: var(--ok); } .dc-ok > i { color: var(--ok); }
.dc-wn { border-inline-start-color: var(--ac); } .dc-wn > i { color: var(--wn); }
.dc-er { border-inline-start-color: var(--er); } .dc-er > i { color: var(--er); }
.kpi small { font-size: 12px; font-weight: 600; color: var(--mu); }

.pf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pf-cols.pf-cols2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .pf-cols, .pf-cols.pf-cols2 { grid-template-columns: 1fr; } }
.info-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--bd); font-size: 13px; align-items: baseline; }
.info-row:last-child { border-bottom: none; }
.info-lbl { color: var(--tx2); min-width: 110px; font-weight: 700; }

.timeline { position: relative; padding-inline-start: 6px; }
.timeline::before { content: ''; position: absolute; inset-inline-start: 22px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--ac), transparent); }
.tl-item { display: flex; gap: 14px; padding: 8px 0; position: relative; }
.tl-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: var(--sf); border: 2px solid var(--bd); z-index: 1; }
.tl-ok { color: var(--ok); border-color: var(--ok); } .tl-er { color: var(--er); border-color: var(--er); }
.tl-wn { color: var(--wn); border-color: var(--ac); } .tl-in { color: var(--in); border-color: var(--in); } .tl-mu { color: var(--mu); }
.tl-t { font-weight: 700; font-size: 13.5px; } .tl-s { font-size: 12px; color: var(--tx2); }

/* ═════════ مركز الامتثال ═════════ */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cmp-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.cmp-card::after { content: ''; position: absolute; inset-inline-end: -10px; bottom: -10px; width: 70px; height: 70px; background: var(--pattern) 0 0 / 46px 46px; opacity: .12; pointer-events: none; }
.cmp-card-h { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--pr); margin-bottom: 8px; }
.cmp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cmp-stat { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.3; cursor: pointer; color: var(--tx); }
div.cmp-stat { cursor: default; }
.cmp-stat b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-stat span { font-size: 10.5px; font-weight: 700; }
.cs-expired { color: var(--er); background: var(--erb); border-color: #f3c0ba; }
.cs-soon { color: var(--wn); background: var(--wnb); border-color: #efd391; }
.cs-valid { color: var(--ok); background: var(--okb); border-color: #b7e4cd; }
.cs-missing { color: var(--tx2); }
.cmp-stat.on { outline: 3px solid var(--ac); outline-offset: 1px; }
.cmp-d { font-size: 12px; color: var(--tx2); font-variant-numeric: tabular-nums; }
#cmpTbl td { white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .pf-head { background: linear-gradient(135deg, #15211d, #1d2a1d); }
  .cs-expired { border-color: #6b2a24; } .cs-soon { border-color: #6b5320; } .cs-valid { border-color: #1f5c3d; }
}
@media (max-width: 768px) {
  .plate-ar b { font-size: 24px; }
  .pf-title h2 { font-size: 21px; }
  .cmp-stats { gap: 4px; }
}

/* ═════════ شريط الفلاتر ═════════ */
.search-box { display: flex; align-items: center; flex: 1 1 280px; max-width: 460px; background: var(--sf); border: 1.5px solid var(--bd); border-radius: 10px; padding: 0 12px; gap: 8px; }
.search-box:focus-within { border-color: var(--pl); box-shadow: 0 0 0 4px rgba(19,128,106,.15); }
.search-box i { color: var(--mu); }
.search-box input { border: none !important; box-shadow: none !important; background: transparent !important; flex: 1; padding-inline: 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filter-bar select { width: auto; min-width: 130px; max-width: 190px; padding-block: 8px; font-size: 12.5px; }
.filter-bar select.f-on { border-color: var(--ac); background-color: var(--ac-light); font-weight: 700; }
.count-pill { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--tx2); background: var(--ac-light); border: 1px solid #eadba0; border-radius: 999px; padding: 2px 10px; vertical-align: middle; margin-inline-start: 8px; }
@media (max-width: 768px) { .filter-bar select { flex: 1 1 45%; max-width: none; } .search-box { max-width: none; } }