/* ===== لوحة الشركة v2: dark mode, navigation, executive components, print ===== */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0d0d0d; --surface:#1a1a19; --ink:#f0efec; --muted:#a8a69d; --line:#2c2c2a; --soft:#232321;
  --good:#3fc46a; --good-bg:#12301c; --bad:#ff8a84; --bad-bg:#3a1917; --warn:#f0b43c; --warn-bg:#3a2e12; --link:#7db4f5;
  --info:#a9c8f5; --info-bg:#16263d; --series-1:#3987e5; --series-2:#d95926; --axis:#383835; color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0d0d0d; --surface:#1a1a19; --ink:#f0efec; --muted:#a8a69d; --line:#2c2c2a; --soft:#232321;
  --good:#3fc46a; --good-bg:#12301c; --bad:#ff8a84; --bad-bg:#3a1917; --warn:#f0b43c; --warn-bg:#3a2e12; --link:#7db4f5;
  --info:#a9c8f5; --info-bg:#16263d; --series-1:#3987e5; --series-2:#d95926; --axis:#383835; color-scheme:dark}
:root{--info:#1c3f75;--info-bg:#e8f0fd;--series-1:#2a78d6;--series-2:#eb6834;--st-good:#0ca30c;--st-warn:#fab219;--st-bad:#d03b3b;--axis:#c3c2b7;--muted:#5f6b7f}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--muted:#a8a69d}}
:root[data-theme=dark]{--muted:#a8a69d}

body{padding-block-end:88px}
.app{display:block}
nav.nav{position:fixed;inset-inline:0;bottom:0;z-index:20;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
nav.nav a{flex:1;text-align:center;padding:9px 2px;font-size:12.5px;font-weight:500;color:var(--muted);border-radius:8px;min-width:0;white-space:nowrap}
nav.nav a:hover{text-decoration:none;background:var(--soft)}
nav.nav a[aria-current=page]{color:var(--ink);font-weight:800;background:var(--soft)}
nav.nav .brand,nav.nav .theme{display:none}
@media (min-width:900px){
  body{padding-block-end:48px}
  .app{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;max-width:1280px;margin:0 auto}
  .app>.wrap{max-width:none;margin:0;min-width:0}
  nav.nav{position:sticky;top:20px;inset:auto;align-self:start;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:10px;gap:2px}
  nav.nav a{text-align:start;padding:9px 12px;font-size:15px}
  nav.nav .brand{display:block;font-weight:800;font-size:17px;padding:6px 12px 10px}
  nav.nav .theme{display:block;margin-top:8px}
  nav.nav .theme button{width:100%;font:inherit;font-size:13px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:8px;padding:5px;cursor:pointer}
}
.num{font-variant-numeric:tabular-nums}
.status-line{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--series-1);border-radius:14px;padding:14px 18px;margin:0 0 20px}
.status-line.bad{border-inline-start-color:var(--st-bad)} .status-line.good{border-inline-start-color:var(--st-good)} .status-line.warn{border-inline-start-color:var(--st-warn)}
.status-line p{margin:0;font-size:17px;line-height:1.8}
.status-line .asof{margin-top:4px;font-size:13px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
@media (min-width:900px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:2px}
.kpi h3{margin:0;font-size:14px;font-weight:500;color:var(--muted);line-height:1.5}
.kpi .big{font-size:27px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .big small{font-size:13px;font-weight:500;color:var(--muted)}
.kpi .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi .tgt,.kpi .asof{font-size:12.5px;color:var(--muted);line-height:1.5}
.spark{display:block;width:100%;max-width:140px;height:32px;margin-top:2px}
.spark .sp-line{stroke:var(--series-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .sp-dot{fill:var(--series-1);stroke:var(--surface);stroke-width:2}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap}
.pill i{font-style:normal;font-weight:800}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.na{background:var(--soft);color:var(--muted)}
/* The red count badge is white on the light red; in dark mode the red is pale, so the text goes dark (QA: 2.3:1 -> over 9:1). */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .count{color:#1a0a09}}
:root[data-theme=dark] .count{color:#1a0a09}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.card h3{margin:0 0 6px;font-size:16.5px}
.units{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.unit-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.unit-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.unit-list li:first-child{border-top:0}
.unit-list .nm{font-weight:700} .unit-list .val{font-weight:800;font-variant-numeric:tabular-nums}
.unit-list .sub2{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.unit-list .spark{max-width:90px;height:22px;margin:0}
.sev{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sev li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.sev .tag{font-size:12px;font-weight:800;border-radius:6px;padding:1px 7px;white-space:nowrap}
.sev .s1 .tag{background:var(--st-bad);color:#fff} .sev .s2 .tag{background:var(--bad-bg);color:var(--bad)} .sev .s3 .tag{background:var(--warn-bg);color:var(--warn)}
.sev .dept{grid-column:2;font-size:12.5px;color:var(--muted)}
.wait{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.wait li{background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--st-warn);border-radius:12px;padding:10px 14px}
.wait b{display:block} .wait span{font-size:14px;color:var(--muted)}
.two{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.chart h3{margin:0 0 8px;font-size:16.5px;line-height:1.6}
.chart svg{width:100%;height:auto;display:block}
.chart .src{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.ax-t{font:11.5px var(--font);fill:var(--muted)} .ax-v{font:600 12px var(--font);fill:var(--ink);font-variant-numeric:tabular-nums}
.ax-line{stroke:var(--axis);stroke-width:1}
.wf-up{fill:var(--series-1)} .wf-down{fill:var(--series-2)} .wf-total{fill:var(--ink);opacity:.85}
.bar-budget{fill:var(--axis)} .bar-spent{fill:var(--series-1)} .bar-spent.over{fill:var(--st-bad)}
.weeks{width:100%;min-width:230px;height:24px}
.wk.good{fill:var(--st-good)} .wk.warn{fill:var(--st-warn)} .wk.bad{fill:var(--st-bad)} .wk.na{fill:var(--soft);stroke:var(--line)}
.wk-t{font:700 12px var(--font);fill:#fff} .wk.warn+.wk-t{fill:#0b0b0b} .wk.na+.wk-t{fill:var(--muted)}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px}
table.grid{width:100%;border-collapse:collapse;font-size:14.5px}
table.grid th,table.grid td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;font-variant-numeric:tabular-nums}
table.grid th{color:var(--muted);font-weight:500;font-size:13px;background:var(--soft);white-space:nowrap}
table.grid tr:last-child td{border-bottom:0}
.flag{font-size:12.5px;font-weight:700;color:var(--bad)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.filters a{padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px}
.filters a[aria-current=true]{background:var(--ink);color:var(--bg)}
.count-row{display:flex;gap:8px;flex-wrap:wrap}
.dnav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tgtform input{font:inherit;font-size:14px;width:84px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.tgtform select{font:inherit;font-size:14px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
@media (max-width:560px){.kpi .big{font-size:23px}}
.printonly{display:none}
@media print{
  @page{size:A4;margin:14mm}
  :root,:root[data-theme=dark]{--bg:#fff;--surface:#fff;--ink:#000;--muted:#444;--line:#bbb;--soft:#f0f0f0;--good:#0a5a0a;--good-bg:#fff;--bad:#9b1c1c;--bad-bg:#fff;--warn:#7a5200;--warn-bg:#fff;--link:#000;color-scheme:light}
  body{padding:0;font-size:12px;line-height:1.55}
  nav.nav,.actions,.noprint,form,.busy,.dnav{display:none!important}
  .app{display:block}
  section{margin-top:14px;break-inside:avoid}
  .kpi,.card,.chart,.sev li,.tablewrap,.status-line,.wait li{break-inside:avoid;border-color:#999}
  .tablewrap{overflow:visible}
  a{color:#000}
  h1{font-size:22px}
  .printonly{display:block}
}

.alerts .sev li::before{display:none}
.alerts .sev li{padding-inline-start:12px;font-size:15.5px}

/* The same paper layout drawn on screen: /daily?print=1 (and the A4 width), so it can be checked without clicking print. */
html.printview:root,html.printview:root[data-theme=dark],html.printview:root[data-theme=light]{--bg:#fff;--surface:#fff;--ink:#000;--muted:#444;--line:#bbb;--soft:#f0f0f0;--good:#0a5a0a;--good-bg:#fff;--bad:#9b1c1c;--bad-bg:#fff;--warn:#7a5200;--warn-bg:#fff;--link:#000;color-scheme:light}
html.printview body{padding:0;font-size:12px;line-height:1.55}
html.printview nav.nav,html.printview .actions,html.printview .noprint,html.printview form,html.printview .busy,html.printview .dnav{display:none!important}
html.printview .app{display:block}
html.printview section{margin-top:14px;break-inside:avoid}
html.printview .kpi,html.printview .card,html.printview .chart,html.printview .sev li,html.printview .tablewrap,html.printview .status-line,html.printview .wait li{break-inside:avoid;border-color:#999}
html.printview .tablewrap{overflow:visible}
html.printview a{color:#000}
html.printview h1{font-size:22px}
html.printview .printonly{display:block}
html.printview body{max-width:794px;margin:0 auto;padding:14mm;background:#fff;color:#000;box-sizing:border-box}
html.printview .wrap{max-width:none}
html.printview .previewbar{display:flex!important}
.previewbar{display:none;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px;font-size:14px}
@media print{.previewbar{display:none!important}}
.asofp{display:block;margin-top:4px;font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.4}

.brief-card{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--series-1);border-radius:14px;padding:14px 18px;margin:0 0 20px}
.brief-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.brief-head h2{margin:0}
.brief-sum{margin:8px 0;font-size:17px;line-height:1.85}
.brief-card h3{margin:10px 0 4px;font-size:15px}
.brief-dec{margin:0 0 8px;padding-inline-start:20px;line-height:1.8}
.brief-body{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;line-height:1.9;overflow-wrap:anywhere}
.brief-body table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%}.brief-body th,.brief-body td{border:1px solid var(--line);padding:6px 10px;text-align:start}
.brief-body h1,.brief-body h2,.brief-body h3{margin:16px 0 6px}.brief-body a{text-decoration:underline}

.brief-frame{display:block;width:100%;height:80vh;min-height:400px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
@media print{.brief-frame{border:0}}