/* Speed Go — نظام التصميم
   نمط: Minimalism / Swiss · كثافة: لوحة تشغيل · اتجاه: RTL
   ألوان: أصفر #FACC15 × أسود #1C1917 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');

/* الهوية اللونية: أصفر × أسود
   الأصفر = الفعل الأساسي (أزرار، تمييز، أعمدة). الأسود = العمق والتباين.
   الأخضر/الأحمر بقيوا للمعاني العامة (نجاح/إلغاء) لأنهن مفهومين لحالهن. */
:root {
  color-scheme: light;
  --brand:#FACC15; --brand-soft:#FEF9C3; --brand-ink:#422006; --on-brand:#1C1917;
  --accent:#1C1917; --accent-soft:#FDE68A; --on-accent:#FDE047;
  --link:#854D0E;
  --ok:#15803D; --ok-soft:#DCFCE7;
  --warn:#A16207; --warn-soft:#FEF3C7;
  --danger:#B91C1C; --danger-soft:#FEE2E2;

  --bg:#FAFAF9; --card:#FFFFFF; --card-2:#F5F5F4;
  --text:#1C1917; --muted:#57534E; --border:#D6D3D1; --border-soft:#E7E5E4;
  --ring:#CA8A04;
  --shadow-sm:0 1px 2px rgba(28,25,23,.07);
  --shadow:0 4px 14px rgba(28,25,23,.12);

  /* كثافة 8/10 — سلّم 8→32 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r1:6px; --r2:10px; --r3:14px;
  --sans:'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --mono:'Fira Code', ui-monospace, Menlo, monospace;
  --t:200ms cubic-bezier(.4,0,.2,1);
  --sidebar:236px;
}

/* بالوضع الليلي بينقلبوا الدورين: الخلفية سودا والأصفر بيصير هو الحبر */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand:#FDE047; --brand-soft:#422006; --brand-ink:#FDE047; --on-brand:#0A0A0A;
    --accent:#FBBF24; --accent-soft:#451A03; --on-accent:#0A0A0A;
    --link:#FDE047;
    --ok:#4ADE80; --ok-soft:#14532D;
    --warn:#FCD34D; --warn-soft:#452C06;
    --danger:#F87171; --danger-soft:#450A0A;

    --bg:#0A0A0A; --card:#161513; --card-2:#1F1D1A;
    --text:#FAFAF9; --muted:#A8A29E; --border:#332F2A; --border-soft:#292522;
    --ring:#FDE047;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 6px 20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:#FDE047; --brand-soft:#422006; --brand-ink:#FDE047; --on-brand:#0A0A0A;
  --accent:#FBBF24; --accent-soft:#451A03; --on-accent:#0A0A0A;
  --link:#FDE047;
  --ok:#4ADE80; --ok-soft:#14532D;
  --warn:#FCD34D; --warn-soft:#452C06;
  --danger:#F87171; --danger-soft:#450A0A;

  --bg:#0A0A0A; --card:#161513; --card-2:#1F1D1A;
  --text:#FAFAF9; --muted:#A8A29E; --border:#332F2A; --border-soft:#292522;
  --ring:#FDE047;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 6px 20px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3;color:var(--text)}
p{margin:0}
a{color:var(--link);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r1)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────── هيكل ───────── */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100dvh}
.side{
  background:var(--card);border-inline-start:1px solid var(--border);
  display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) var(--s3);
  position:sticky;top:0;height:100dvh;z-index:20;
}
.brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);margin-bottom:var(--s2)}
.brand .mark{
  width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm)
}
.brand b{font-size:16px;font-weight:700;letter-spacing:-.2px}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:500}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);border-radius:var(--r2);
  color:var(--muted);font-weight:500;font-size:14px;cursor:pointer;transition:background var(--t),color var(--t);
  min-height:44px;
}
.nav a:hover{background:var(--card-2);color:var(--text)}
.nav a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav a .badge{margin-inline-start:auto}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--border-soft)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border-soft);
}
.topbar h1{font-size:19px}
.topbar .spacer{flex:1}
.content{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s5);max-width:1500px;width:100%}

/* ───────── مكوّنات ───────── */
.card{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--r3);box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s4) 0}
.card-h h2{font-size:15px;font-weight:600}
.card-h .spacer{flex:1}
.card-b{padding:var(--s4)}

.grid{display:grid;gap:var(--s4)}
.g-stats{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.stat{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--r3);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s1);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--brand)}
.stat.a::before{background:var(--accent)} .stat.g::before{background:var(--ok)}
.stat.w::before{background:var(--warn)}  .stat.d::before{background:var(--danger)}
.stat .k{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.5px;font-family:var(--mono);direction:ltr;text-align:start}
.stat .sub{font-size:12px;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:9px var(--s4);min-height:40px;border-radius:var(--r2);border:1px solid var(--border);
  background:var(--card);color:var(--text);font-weight:500;font-size:14px;cursor:pointer;
  transition:background var(--t),border-color var(--t),transform var(--t),opacity var(--t);white-space:nowrap;
}
.btn:hover{background:var(--card-2);border-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.accent:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--card-2);color:var(--text)}
.btn.danger{color:var(--danger);border-color:var(--border)}
.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn.sm{min-height:34px;padding:5px 10px;font-size:13px;border-radius:var(--r1)}
.btn.icon{padding:8px;min-width:40px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--card-2);color:var(--muted);white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.b{background:var(--card-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.badge.o{background:var(--accent-soft);color:var(--accent)}
.badge.g{background:var(--ok-soft);color:var(--ok)}
.badge.w{background:var(--warn-soft);color:var(--warn)}
.badge.r{background:var(--danger-soft);color:var(--danger)}

.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:500}
.live .pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2.4s infinite}
.live.off .pulse{background:var(--muted);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* حقول */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11.5px;color:var(--muted)}
.input,select.input,textarea.input{
  width:100%;padding:9px var(--s3);min-height:42px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r2);transition:border-color var(--t),box-shadow var(--t)
}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.input[aria-invalid="true"]{border-color:var(--danger)}
textarea.input{min-height:74px;resize:vertical}
.err{color:var(--danger);font-size:12px;font-weight:500;min-height:0}
.row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:flex-end}
.row > .field{flex:1 1 180px;min-width:0}
.seg{display:inline-flex;background:var(--card-2);border:1px solid var(--border-soft);border-radius:var(--r2);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--muted);padding:6px var(--s3);border-radius:7px;
  font-size:13px;font-weight:500;cursor:pointer;min-height:34px;transition:background var(--t),color var(--t)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--card);color:var(--brand-ink);font-weight:600;box-shadow:var(--shadow-sm)}

/* جداول */
.tw{overflow-x:auto;border-radius:var(--r3)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
thead th{position:sticky;top:0;background:var(--card-2);color:var(--muted);font-size:12px;font-weight:600;
  text-align:start;padding:10px var(--s3);border-bottom:1px solid var(--border-soft);white-space:nowrap;z-index:1}
tbody td{padding:10px var(--s3);border-bottom:1px solid var(--border-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--card-2)}
tfoot td{padding:11px var(--s3);font-weight:700;background:var(--card-2);border-top:2px solid var(--border)}
td.n,th.n{text-align:start;font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;white-space:nowrap}
.empty{padding:var(--s6);text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}

/* نافذة */
dialog{border:0;padding:0;background:transparent;max-width:min(94vw,600px);width:100%}
dialog::backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(3px)}
.modal{background:var(--card);border-radius:var(--r3);box-shadow:var(--shadow);border:1px solid var(--border-soft);overflow:hidden}
.modal header{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--border-soft)}
.modal header h3{font-size:16px;flex:1}
.modal .body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);max-height:70dvh;overflow:auto}
.modal footer{display:flex;gap:var(--s2);justify-content:flex-start;padding:var(--s4);border-top:1px solid var(--border-soft);background:var(--card-2)}

/* تنبيهات */
.toasts{position:fixed;inset-block-end:var(--s5);inset-inline-start:var(--s5);z-index:100;display:flex;flex-direction:column;gap:var(--s2)}
.toast{background:var(--card);border:1px solid var(--border);border-inline-start:4px solid var(--brand);
  border-radius:var(--r2);padding:11px var(--s4);box-shadow:var(--shadow);font-size:14px;font-weight:500;
  max-width:380px;animation:slide var(--t)}
.toast.ok{border-inline-start-color:var(--ok)} .toast.err{border-inline-start-color:var(--danger)}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* خريطة */
#map{height:min(66dvh,620px);border-radius:var(--r3);z-index:1;background:var(--card-2)}
.map-wrap{display:grid;grid-template-columns:1fr 300px;gap:var(--s4)}
.drv-list{display:flex;flex-direction:column;gap:var(--s2);max-height:min(66dvh,620px);overflow:auto;padding-inline-end:2px}
.drv{display:flex;gap:var(--s3);align-items:center;padding:10px var(--s3);border:1px solid var(--border-soft);
  border-radius:var(--r2);background:var(--card);cursor:pointer;transition:border-color var(--t),background var(--t)}
.drv:hover{border-color:var(--brand);background:var(--card-2)}
.drv .av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff;font-weight:700;font-size:13px;background:var(--muted)}
.drv .av.g{background:var(--ok);color:#fff} .drv .av.o{background:var(--accent);color:var(--on-accent)}
.drv .nm{font-weight:600;font-size:13.5px}
.drv .mt{font-size:11.5px;color:var(--muted)}
.leaflet-popup-content{margin:12px 14px;font-family:var(--sans);direction:rtl}
.leaflet-container{font-family:var(--sans)}
.pin{display:grid;place-items:center;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);width:26px;height:26px}
.pin span{transform:rotate(45deg);color:var(--pin-fg,#fff);font-size:11px;font-weight:700;font-family:var(--mono)}
.mapfallback{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:var(--s5);gap:var(--s3)}

/* رسم بياني بسيط */
.bars{display:flex;align-items:flex-end;gap:5px;height:132px;padding-top:var(--s3)}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0}
.bars .b i{display:block;width:100%;background:var(--brand);border-radius:4px 4px 0 0;min-height:3px;transition:height var(--t)}
.bars .b.pk i{background:var(--accent)}
.bars .b em{font-style:normal;font-size:10px;color:var(--muted);font-family:var(--mono)}

/* شاشة دخول */
.gate{min-height:100dvh;display:grid;place-items:center;padding:var(--s5);
  background:radial-gradient(1200px 500px at 70% -10%,var(--brand-soft),transparent 70%),var(--bg)}
.gate .card{width:100%;max-width:390px;padding:var(--s6)}
.gate .mark{width:52px;height:52px;border-radius:14px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;margin-bottom:var(--s4)}

@media print{
  .side,.topbar,.no-print{display:none!important}
  .app{grid-template-columns:1fr} .content{padding:0;gap:var(--s4)}
  body{background:#fff} .card{box-shadow:none;border-color:#ddd}
}

@media (max-width:1100px){ .map-wrap{grid-template-columns:1fr} }
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-end:0;width:var(--sidebar);
    transform:translateX(100%);transition:transform var(--t);box-shadow:var(--shadow)}
  .side.open{transform:none}
  .content{padding:var(--s4)}
  .topbar{padding:var(--s3) var(--s4)}
  .menu-btn{display:inline-flex!important}
}
.menu-btn{display:none}
.scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:19}
.scrim.on{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}