:root{
  --brand:#0b5c6b;--brand-2:#0e7487;--brand-soft:#e3f1f3;--ink:#13232d;--ink-2:#3d4f5a;--muted:#6b7c86;
  --bg:#f3f6f7;--surface:#fff;--line:#e2e8eb;--line-2:#eef2f4;
  --green:#137a4b;--green-soft:#e4f4ec;--red:#b42323;--red-soft:#fbe9e9;--amber:#a5620a;--amber-soft:#fdf1df;--blue:#1f5fae;--blue-soft:#e6eefa;--violet:#5b3fa6;--violet-soft:#efeafb;
  --radius:12px;--shadow:0 1px 2px rgba(16,34,46,.06),0 4px 14px rgba(16,34,46,.05);
  --side:250px;--font:"IBM Plex Sans Arabic",system-ui,sans-serif;--head:"Cairo","IBM Plex Sans Arabic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand-2);text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);margin:0;line-height:1.3;color:var(--ink)}
h1{font-size:1.45rem;font-weight:800}h2{font-size:1.15rem;font-weight:700}h3{font-size:1rem;font-weight:700}
.num,.money{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap}
td.n{font-variant-numeric:tabular-nums}
.m-only{display:none}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}

/* ---------- layout */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);background:#0d2a33;color:#cfe3e7;position:fixed;inset:0 0 0 auto;display:flex;flex-direction:column;z-index:40;transition:transform .25s}
.side .brand{display:flex;gap:10px;align-items:center;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.side .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(140deg,#18a2b5,#0b5c6b);display:grid;place-items:center;color:#fff;flex:none}
.side .brand b{font-family:var(--head);color:#fff;font-size:1rem;display:block;line-height:1.2}
.side .brand small{color:#8fb2b9;font-size:.75rem}
.side nav{overflow-y:auto;padding:10px 10px 20px;flex:1}
.side .grp{font-size:.72rem;color:#7fa3aa;padding:14px 10px 6px;letter-spacing:.02em}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:#d5e7ea;font-weight:500;font-size:.93rem}
.side a.nav:hover{background:rgba(255,255,255,.06)}
.side a.nav.on{background:#14505c;color:#fff}
.side .foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);font-size:.85rem}
.side .foot .who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.side .foot .av{width:32px;height:32px;border-radius:50%;background:#14505c;display:grid;place-items:center;color:#fff;font-weight:700}
.main{flex:1;margin-right:var(--side);min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:rgba(243,246,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 24px;min-height:58px}
.top h1{font-size:1.15rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{display:none}
.page{padding:22px 24px 90px;max-width:1500px;width:100%}
.scrim{display:none}
.bottom{display:none}

/* ---------- primitives */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card>.hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.card>.hd h2,.card>.hd h3{flex:1}
.card>.bd{padding:16px}
.grid{display:grid;gap:14px}
.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))}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);min-width:0}
.kpi .l{color:var(--muted);font-size:.8rem;display:flex;align-items:center;gap:6px}
.kpi .v{font-family:var(--head);font-size:1.3rem;font-weight:800;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s{font-size:.78rem;color:var(--muted);margin-top:2px}
.kpi.good .v{color:var(--green)}.kpi.bad .v{color:var(--red)}.kpi.warn .v{color:var(--amber)}
.sec{margin:26px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec h2{flex:1}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.muted{color:var(--muted)}.small{font-size:.85rem}.tiny{font-size:.76rem}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:600;font-size:.9rem;white-space:nowrap;min-height:38px;color:var(--ink)}
.btn:hover{border-color:#c8d3d8;background:#fafcfc}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}.btn.pri:hover{background:#094d5a}
.btn.ok{background:var(--green);border-color:var(--green);color:#fff}
.btn.danger{color:var(--red);border-color:#f0caca}.btn.danger:hover{background:var(--red-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:4px 10px;min-height:30px;font-size:.82rem;border-radius:7px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.icon{padding:0;width:38px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap;background:var(--line-2);color:var(--ink-2)}
.b-green{background:var(--green-soft);color:var(--green)}.b-red{background:var(--red-soft);color:var(--red)}.b-amber{background:var(--amber-soft);color:var(--amber)}
.b-blue{background:var(--blue-soft);color:var(--blue)}.b-violet{background:var(--violet-soft);color:var(--violet)}.b-teal{background:var(--brand-soft);color:var(--brand)}

/* ---------- forms */
label.f{display:flex;flex-direction:column;gap:5px;font-size:.84rem;color:var(--ink-2);font-weight:600;min-width:0}
label.f .hint{font-weight:400;color:var(--muted);font-size:.76rem}
input.in,select.in,textarea.in{width:100%;border:1px solid #d3dde1;border-radius:9px;padding:9px 11px;background:#fff;font-size:.95rem;min-height:40px;outline:none;transition:border .15s,box-shadow .15s}
input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(14,116,135,.14)}
input.in.money-in{direction:ltr;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
textarea.in{min-height:80px;resize:vertical}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fgrid .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.filters label.f{min-width:140px;flex:1 1 140px}
.filters .in{min-height:36px;padding:6px 9px;font-size:.88rem}

details.fdet{width:100%}
details.fdet>summary{list-style:none;display:none}
details.fdet>summary::-webkit-details-marker{display:none}
/* ---------- tables (become cards on phones) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t th{background:#f7fafb;color:var(--muted);font-weight:600;font-size:.78rem;text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:#f8fbfb}
table.t tr.void td{opacity:.5;text-decoration:line-through}
table.t td.n,table.t th.n{text-align:left;white-space:nowrap}
table.t tfoot td{font-weight:700;background:#f7fafb;border-top:2px solid var(--line)}
.note-cell{max-width:240px;color:var(--ink-2);font-size:.82rem;white-space:pre-wrap}

/* ---------- calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
.results{position:sticky;top:76px}
.res-hero{background:linear-gradient(150deg,#0b5c6b,#0e7487 60%,#1593a6);color:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.res-hero .l{opacity:.85;font-size:.85rem}
.res-hero .big{font-family:var(--head);font-size:2.1rem;font-weight:800;line-height:1.2;margin:4px 0}
.res-hero .sub{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:.88rem}
.res-hero .sub b{display:block;font-size:1.05rem}
.kv{display:grid;grid-template-columns:1fr auto;gap:0;font-size:.92rem}
.kv>div{padding:8px 2px;border-bottom:1px dashed var(--line)}
.kv>div:nth-child(even){text-align:left;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.kv .em{color:var(--brand);font-size:1.02rem}
.kv .sep{grid-column:1/-1;border:0;padding:4px 0}
.alert{border-radius:10px;padding:10px 12px;font-size:.86rem;display:flex;gap:8px;align-items:flex-start}
.alert.warn{background:var(--amber-soft);color:#7a4806}.alert.info{background:var(--blue-soft);color:#174a88}.alert.bad{background:var(--red-soft);color:#8f1c1c}.alert.good{background:var(--green-soft);color:#0f5f3a}

/* ---------- case detail */
.case-head{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.fact .l{font-size:.76rem;color:var(--muted)}.fact .v{font-weight:700;margin-top:2px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{flex:1 1 120px;padding:10px;border-radius:10px;background:var(--line-2);font-size:.8rem;color:var(--muted)}
.step b{display:block;color:var(--ink);font-size:.86rem}
.step.done{background:var(--green-soft)}.step.done b{color:var(--green)}
.step.now{background:var(--blue-soft)}.step.now b{color:var(--blue)}

/* ---------- chart */
.chart{width:100%;height:220px}
.legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:5px;vertical-align:middle}
.progress{height:10px;background:var(--line-2);border-radius:99px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--brand-2);border-radius:99px}

/* ---------- modal & toast */
.modal-bg{position:fixed;inset:0;background:rgba(10,25,32,.45);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:5vh 14px;overflow-y:auto;animation:fade .15s}
.modal{background:#fff;border-radius:14px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:pop .18s}
.modal.wide{max-width:980px}
.modal .hd{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .hd h2{flex:1}
.modal .bd{padding:18px}
.modal .ft{display:flex;gap:8px;justify-content:flex-start;padding:12px 18px;border-top:1px solid var(--line);background:#fafcfc;border-radius:0 0 14px 14px;flex-wrap:wrap}
@keyframes fade{from{opacity:0}}@keyframes pop{from{transform:translateY(10px);opacity:0}}
.toasts{position:fixed;bottom:20px;left:20px;z-index:99;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 40px))}
.toast{background:#13232d;color:#fff;padding:11px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:.9rem;animation:pop .2s}
.toast.err{background:#8f1c1c}.toast.ok{background:#0f5f3a}

/* ---------- auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(1200px 600px at 80% -10%,#d5ecef,transparent),var(--bg)}
.auth .card{width:100%;max-width:420px;padding:28px}
.auth .logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(140deg,#18a2b5,#0b5c6b);display:grid;place-items:center;color:#fff;margin-bottom:14px}
.auth form{display:grid;gap:12px;margin-top:18px}

.install-tip{background:var(--brand-soft);color:var(--brand);border-radius:10px;padding:10px 12px;font-size:.85rem;display:flex;gap:8px;align-items:center}

/* ---------- print */
.print-only{display:none}
@media print{
  .side,.top,.bottom,.no-print,.btn,.filters,.tabs,.toasts{display:none!important}
  .main{margin:0}.page{padding:0;max-width:none}
  body{background:#fff;font-size:12px}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .print-only{display:block}
  .modal-bg{position:static;background:none;padding:0}.modal{box-shadow:none;max-width:none}
  .results{position:static}
  table.t th{position:static}
}

/* ---------- responsive */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.calc{grid-template-columns:1fr}.results{position:static}}
@media (max-width:860px){
  .side{transform:translateX(100%);box-shadow:-10px 0 40px rgba(0,0,0,.25)}
  body.menu .side{transform:none}
  body.menu .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
  .main{margin-right:0}
  .burger{display:inline-flex}
  .top{padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
  .page{padding:14px 12px calc(84px + env(safe-area-inset-bottom))}
  .g2,.g3,.g4,.fgrid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:11px 12px}.kpi .v{font-size:1.05rem}
  .bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;color:var(--muted);padding:4px 0;font-weight:600}
  .bottom a.on{color:var(--brand)}
  .bottom svg.i{width:22px;height:22px}
  /* tables → stacked cards */
  table.t.cards thead{display:none}
  table.t.cards,table.t.cards tbody,table.t.cards tr,table.t.cards td{display:block;width:100%}
  table.t.cards tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:8px 12px;box-shadow:var(--shadow)}
  table.t.cards td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px;text-align:left}
  table.t.cards td::before{content:attr(data-l);color:var(--muted);font-size:.78rem;font-weight:600;text-align:right;flex:none}
  table.t.cards td.n{text-align:left}
  table.t.cards td.lead{font-weight:700;font-size:1rem;border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:4px}
  table.t.cards td.lead::before{display:none}
  table.t.cards td:empty{display:none}
  table.t.cards td .cv{text-align:left;min-width:0}
  table.t.cards td.lead{display:block}table.t.cards td.lead .cv{text-align:right}
  table.t.cards td:has(.cv:empty){display:none}
  details.fdet>summary{display:inline-flex;margin-bottom:8px}
  .m-only{display:block}
  table.t.cards tfoot{display:block}table.t.cards tfoot tr{display:block}
  .card.flat-m{background:transparent;border:0;box-shadow:none}.card.flat-m>.bd{padding:0}
  .note-cell{max-width:none}
  .modal-bg{padding:0;align-items:flex-end}
  .modal{border-radius:16px 16px 0 0;max-height:94vh;overflow-y:auto}
  .modal .ft{position:sticky;bottom:0;border-radius:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .res-hero .big{font-size:1.7rem}
  .toasts{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:none}
}