/* تدريب+ — نظام التصميم */
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:500;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:600;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:700;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-weight:500;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Plex Arabic";font-weight:600;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Plex Arabic";font-weight:700;font-display:swap;src:url(/static/vendor/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  color-scheme:light;
  --font:"Plex Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f9f9f7; --chart-surface:#fcfcfb;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781; --grid:#e1e0d9; --line:#e6e5df; --border:rgba(11,11,11,.10);
  --primary:#2a78d6; --primary-600:#1c5cab; --primary-700:#184f95; --primary-100:#cde2fb; --primary-50:#eef4fd;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --seq-100:#cde2fb; --seq-200:#9ec5f4; --seq-300:#6da7ec; --seq-400:#3987e5; --seq-500:#256abf; --seq-600:#184f95; --seq-700:#0d366b;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b; --good-text:#006300;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(11,11,11,.04),0 6px 20px -8px rgba(11,11,11,.10);
  --sidebar-w:248px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d0d0d; --surface:#1a1a19; --surface-2:#161615; --chart-surface:#1a1a19;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --line:#2c2c2a; --border:rgba(255,255,255,.10);
  --primary:#3987e5; --primary-600:#5598e7; --primary-700:#6da7ec; --primary-100:#184f95; --primary-50:#14283f;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --good-text:#0ca30c; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px -8px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15px} h4{font-size:13.5px;color:var(--ink-2)}
p{margin:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::placeholder{color:var(--muted)}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .ink2{color:var(--ink-2)} .small{font-size:12.5px} .xs{font-size:11.5px}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.row{display:flex;align-items:center;gap:10px} .row>.input{min-width:0;flex:1} .row.wrap{flex-wrap:wrap} .grow{flex:1} .between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:10px}
.mt{margin-top:14px} .mb{margin-bottom:14px}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-inline-start:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--s7));display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;flex-shrink:0}
.brand .t{font-weight:700;font-size:15px} .brand .s{font-size:11.5px;color:var(--muted);line-height:1.3}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;transition:.15s}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.active{background:var(--primary-50);color:var(--primary-600)}
.nav a svg{width:18px;height:18px;flex-shrink:0}
.sidebar .foot{margin-top:auto;padding:8px;font-size:11.5px;color:var(--muted)}
.main{padding:22px 28px 60px;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.topbar h1{flex:1}
.page{animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Components ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card.tight{padding:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3}
@media (max-width:1200px){.g4,.g6{grid-template-columns:repeat(3,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:fixed;inset-inline-end:-100%;width:260px;z-index:50;transition:.25s}.sidebar.open{inset-inline-end:0}.main{padding:16px}.g2,.g3,.g4,.g6{grid-template-columns:1fr}.span2,.span3{grid-column:auto}}

.kpi{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
.kpi .l{font-size:12.5px;color:var(--ink-2)} .kpi .v{font-size:28px;font-weight:700;line-height:1.1}
.kpi .d{font-size:12px;color:var(--muted)} .kpi .d.up{color:var(--good-text)} .kpi .d.down{color:var(--critical)}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-weight:500;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--surface-2)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff} .btn.primary:hover{background:var(--primary-600)}
.btn.danger{color:var(--critical)} .btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px} .btn.icon{padding:7px}
.btn.ghost{border-color:transparent;background:transparent} .btn.ghost:hover{background:var(--surface-2)}
.btn svg{width:16px;height:16px}

.input,select.input,textarea.input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);outline:none;transition:.15s}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
textarea.input{min-height:80px;resize:vertical}
.field{display:flex;flex-direction:column;gap:5px} .field label{font-size:12.5px;color:var(--ink-2);font-weight:500}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid .full{grid-column:1/-1}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:5px 12px;border-radius:8px;cursor:pointer;color:var(--ink-2);font-weight:500}
.seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:500;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);white-space:nowrap}
.chip.blue{background:var(--primary-50);color:var(--primary-600);border-color:transparent}
.chip.good{background:rgba(12,163,12,.12);color:var(--good-text);border-color:transparent}
.chip.warn{background:rgba(250,178,25,.18);color:#7a5200;border-color:transparent}
.chip.crit{background:rgba(208,59,59,.12);color:var(--critical);border-color:transparent}
.chip.gray{background:var(--surface-2)}
:root[data-theme="dark"] .chip.warn{color:#fab219}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-weight:600;text-align:start;color:var(--ink-2);font-size:12.5px;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)} .tbl tr.click{cursor:pointer}
.tbl th.sortable{cursor:pointer;user-select:none} .tbl th.sortable:hover{color:var(--ink)}
.tbl-wrap{overflow:auto;border-radius:10px}
.rank{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;font-weight:600;font-size:12.5px;background:var(--surface-2);color:var(--ink-2)}
.rank.r1{background:#fdf1c7;color:#7a5200} .rank.r2{background:#eeeeee;color:#444} .rank.r3{background:#f7e2d2;color:#7a3a10}

.bar{height:8px;border-radius:99px;background:var(--grid);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--primary)}
.score{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.stars{color:var(--s4);letter-spacing:-1px;font-size:13px}

.empty{padding:34px;text-align:center;color:var(--muted)} .empty b{display:block;color:var(--ink-2);margin-bottom:4px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);font-size:13px}
.alert .ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;font-size:12px;color:#fff}
.alert.warning .ic{background:var(--warning);color:#3a2a00} .alert.serious .ic{background:var(--serious)} .alert.critical .ic{background:var(--critical)} .alert.info .ic{background:var(--primary)}
.alert a{font-weight:500}

/* drawer / modal */
.overlay{position:fixed;inset:0;background:rgba(11,11,11,.35);z-index:80;display:flex;justify-content:flex-start;backdrop-filter:blur(2px)}
.drawer{width:min(880px,96vw);height:100%;background:var(--surface);overflow:auto;padding:22px 24px;animation:slide .22s ease;box-shadow:0 0 40px rgba(0,0,0,.2)}
@keyframes slide{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.modal{margin:auto;width:min(520px,94vw);background:var(--surface);border-radius:16px;padding:22px;animation:fade .2s}
.drawer-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;position:sticky;top:-22px;background:var(--surface);padding:6px 0 10px;z-index:2;border-bottom:1px solid var(--line)}
.drawer-h h2{flex:1}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs button{border:0;background:transparent;padding:9px 12px;cursor:pointer;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.active{color:var(--primary-600);border-color:var(--primary)}

.toast-wrap{position:fixed;bottom:18px;inset-inline-start:18px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);animation:fade .2s;max-width:380px}
.toast.err{background:var(--critical);color:#fff} .toast.ok{background:var(--good-text);color:#fff}

/* ---------- Map ---------- */
.map-wrap{position:relative}
.map-wrap svg{width:100%;height:auto;display:block}
.map-wrap path{stroke:var(--surface);stroke-width:1.2;cursor:pointer;transition:filter .15s,opacity .15s}
.map-wrap path:hover{filter:brightness(.9)}
.map-wrap path.selected{stroke:var(--ink);stroke-width:2}
.map-wrap path.dim{opacity:.55}
.map-legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:6px}
.map-legend i{display:block;width:26px;height:8px;border-radius:2px}
.map-labels text{font-family:var(--font);font-size:11px;fill:var(--ink);pointer-events:none;text-anchor:middle;font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.map-labels text.n{font-size:10px;font-weight:500;fill:var(--ink-2)}
.map-cities g.city{cursor:pointer} .map-cities circle.dot{fill:var(--s2);stroke:var(--surface);stroke-width:2;transition:.15s} .map-cities g.city:hover circle.dot{filter:brightness(.9)}
.map-cities circle.ring{fill:none;stroke:var(--s2);stroke-width:2;opacity:0} .map-cities g.city.on circle.ring{opacity:1;animation:pulse 1.6s ease-out infinite} .map-cities g.city.on circle.dot{fill:var(--s4);stroke:var(--ink)}
.map-cities text{font-family:var(--font);font-size:10.5px;fill:var(--ink);pointer-events:none;text-anchor:middle;font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.map-cities text.n{font-size:9px;fill:#fff;stroke:none;font-weight:700}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.8);opacity:0}} .map-cities circle.ring{transform-box:fill-box;transform-origin:center}
.tooltip{position:fixed;z-index:120;background:var(--ink);color:var(--surface);padding:7px 10px;border-radius:8px;font-size:12.5px;pointer-events:none;box-shadow:var(--shadow);max-width:280px;line-height:1.5;opacity:0;transition:opacity .1s}
.tooltip.show{opacity:1} .tooltip b{font-weight:600}
:root[data-theme="dark"] .tooltip{background:#2c2c2a;color:#fff}

/* ---------- Charts (SVG) ---------- */
.chart{width:100%;overflow:visible}
.chart text{font-family:var(--font);fill:var(--muted);font-size:11px}
.chart .grid-l{stroke:var(--grid);stroke-width:1} .chart .axis{stroke:var(--grid)}
.chart .lbl{fill:var(--ink-2);font-size:11.5px;font-weight:500}
.chart .bar-r{transition:opacity .15s} .chart .bar-r:hover{opacity:.85}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink-2);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}

/* ---------- Plan / timeline ---------- */
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.month{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px;min-height:120px;min-width:0}
.month h4{font-size:12px;margin-bottom:6px;display:flex;justify-content:space-between}
.month .ev{font-size:11.5px;background:var(--surface);border:1px solid var(--border);border-inline-start:3px solid var(--primary);border-radius:6px;padding:4px 6px;margin-bottom:4px;cursor:pointer;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.month .ev:hover{background:var(--primary-50)}
.month .ev.done{border-inline-start-color:var(--muted);opacity:.75} .month .ev.now{border-inline-start-color:var(--s3)} .month .ev.cancel{text-decoration:line-through;opacity:.5}
.month .ev.pause{border-inline-start-color:var(--s8);background:rgba(208,59,59,.07);color:var(--critical);cursor:default}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calgrid .wd{font-size:12px;color:var(--muted);text-align:center;font-weight:600;padding:2px 0}
.cday{min-height:64px;border:1px solid var(--border);border-radius:10px;padding:6px 8px;position:relative;background:var(--surface);display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600;cursor:default}
.cday small{font-size:10px;color:var(--muted);font-weight:400;line-height:1.1} .cday small.sub{color:inherit;font-weight:600;font-size:10.5px;margin-top:auto}
.cday.blank{border-color:transparent;background:transparent} .cday.wk{background:var(--surface-2);color:var(--muted)}
.cday.ex{background:var(--primary);color:#fff;border-color:var(--primary);cursor:pointer} .cday.ex small{color:rgba(255,255,255,.85)}
.cday.pz{background:rgba(208,59,59,.12);color:var(--critical);border-color:rgba(208,59,59,.4)} .cday.pz small{color:var(--critical)}
.cday.today::after{content:"";position:absolute;inset:2px;border:2px solid var(--s4);border-radius:8px;pointer-events:none}
@media (max-width:1200px){.months{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:700px){.months{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gantt{position:relative;overflow:auto} .gantt-inner{min-width:1300px}
.gantt .g-head{display:grid;grid-template-columns:220px repeat(12,1fr);font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:6px;position:sticky;top:0;background:var(--surface)}
.gantt .g-row{display:grid;grid-template-columns:220px 1fr;align-items:center;min-height:30px;border-bottom:1px dashed var(--line)}
.gantt .g-row:hover{background:var(--surface-2)}
.gantt .g-name{font-size:12.5px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt .g-track{position:relative;height:22px}
.gantt .g-bar{position:absolute;top:3px;height:16px;border-radius:5px;background:var(--primary);cursor:pointer;min-width:14px;box-shadow:0 0 0 1px var(--surface)}
.gantt .g-bar.done{background:var(--muted)} .gantt .g-bar.now{background:var(--s3)} .gantt .g-bar.cancel{background:var(--critical);opacity:.5}
.gantt .g-today{position:absolute;top:0;bottom:0;width:1px;background:var(--critical)}
.gantt .g-pause{position:absolute;top:0;bottom:0;background:rgba(208,59,59,.10);border-inline:1px dashed rgba(208,59,59,.35)}
.gantt .g-bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:#fff;font-weight:700}

/* ---------- Detail ---------- */
.stat-row{display:flex;gap:18px;flex-wrap:wrap}
.stat{min-width:100px} .stat .l{font-size:12px;color:var(--muted)} .stat .v{font-size:20px;font-weight:700}
.axis-row{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.qr-box{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
.qr-box img{width:150px;height:150px;background:#fff;border-radius:10px;padding:6px;border:1px solid var(--border)}
@media (max-width:1100px){.qr-box{grid-template-columns:1fr}.qr-box img{margin:auto}}
.comment{padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);font-size:13px}
.comment .meta{font-size:11.5px;color:var(--muted);margin-bottom:3px;display:flex;gap:8px;align-items:center}
.ai-box{border:1px solid var(--border);border-radius:14px;padding:16px;background:linear-gradient(180deg,var(--primary-50),transparent 60%)}
.ai-box h3{display:flex;align-items:center;gap:8px}
.ai-list{margin:6px 0 0;padding-inline-start:18px} .ai-list li{margin-bottom:4px}
.rec{display:flex;gap:10px;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;font-size:13px}
.prio{font-size:11px;padding:1px 8px;border-radius:99px;height:fit-content;white-space:nowrap;font-weight:600}
.prio.h{background:rgba(208,59,59,.12);color:var(--critical)} .prio.m{background:rgba(250,178,25,.18);color:#7a5200} .prio.l{background:var(--primary-50);color:var(--primary-600)}
:root[data-theme="dark"] .prio.m{color:#fab219}
.theme-tag{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;margin:0 0 6px 6px}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:min(400px,94vw)}
.kbd{font-family:ui-monospace,monospace;font-size:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters .input{width:auto;min-width:140px}
.pill-nav{display:flex;gap:6px;flex-wrap:wrap}
.pill-nav button{border:1px solid var(--border);background:var(--surface);padding:5px 12px;border-radius:99px;cursor:pointer;color:var(--ink-2);font-size:12.5px;font-weight:500}
.pill-nav button.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.spin{width:18px;height:18px;border:2px solid var(--grid);border-top-color:var(--primary);border-radius:50%;animation:rot .8s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.wc{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;line-height:1.2}
.wc span{color:var(--primary-600);font-weight:500}
.heat{display:grid;gap:3px} .heat .hc{height:22px;border-radius:4px;display:grid;place-items:center;font-size:10.5px;color:var(--ink)}
.sev-good{color:var(--good-text)} .sev-warn{color:#b07800} .sev-crit{color:var(--critical)}
.menu-btn{display:none;position:fixed;bottom:16px;inset-inline-end:16px;z-index:60;border-radius:99px;width:46px;height:46px;justify-content:center;box-shadow:var(--shadow);font-size:18px}
@media (max-width:900px){.menu-btn{display:inline-flex}}
.print-only{display:none} .print-foot{margin-top:20px;font-size:11px;color:var(--muted);text-align:center}
/* وضع العرض التقديمي */
body.present .sidebar,body.present .menu-btn,body.present .toast-wrap{display:none!important}
body.present .app{grid-template-columns:1fr} body.present .main{padding:18px 32px} body.present .kpi .v{font-size:36px} body.present .kpi .l{font-size:14px}
body.present h1{font-size:28px} body.present .card h3{font-size:17px} body.present .topbar .btn:not(#d-present){display:none}
@media print{.sidebar,.topbar .btn,.filters,.noprint{display:none!important}.app{grid-template-columns:1fr}.main{padding:0}.card{box-shadow:none;break-inside:avoid}.print-only{display:block}}

/* Excel drop zone */
.drop{display:block;border:2px dashed var(--border);border-radius:12px;padding:22px 14px;text-align:center;cursor:pointer;background:var(--surface-2);transition:.15s}
.drop:hover,.drop.over{border-color:var(--primary);background:var(--primary-50)}