/* Sahab Almostaqbal — stone-grey ground, slate ink, one teal accent. Mobile first. */
:root{
  --bg:#EEF1F2; --surface:#FFFFFF; --sunk:#E3E8EA; --ink:#14252C; --ink2:#465962; --muted:#71838B; --line:#CBD4D8;
  --accent:#0B6C80; --on-accent:#FFFFFF; --accent-soft:#D9EDF1; --s1:#0088A3; --s2:#C8651B;
  --good:#1E7A4C; --good-soft:#DDEFE4; --warn:#8A5F00; --warn-soft:#F8ECC9; --crit:#B3342B; --crit-soft:#F7DEDB;
  --display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif; --body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --r:10px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10191D; --surface:#182429; --sunk:#0C1417; --ink:#E8EEF0; --ink2:#B4C2C8; --muted:#8497A0; --line:#2C3B42;
  --accent:#5CC1D3; --on-accent:#062028; --accent-soft:#153740; --s1:#2A9FAE; --s2:#D47A2E;
  --good:#5FC08C; --good-soft:#153324; --warn:#E0B24A; --warn-soft:#3A2F12; --crit:#EE8177; --crit-soft:#3F1D1A; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.7}
h1,h2,h3{font-family:var(--body);font-weight:700;margin:0;line-height:1.4;text-wrap:balance}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15px;font-family:var(--body);font-weight:700}
p{margin:0}
.boot{padding:40px 20px;text-align:center;color:var(--muted)}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.neg{color:var(--crit)} .pos{color:var(--good)} .muted{color:var(--muted)} .small{font-size:12.5px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* shell */
.top{background:var(--ink);color:var(--bg);padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5}
.top b{font-family:var(--display);font-size:17px}
.top .who{margin-inline-start:auto;font-size:13px;opacity:.85}
.top button{background:none;border:1px solid currentColor;border-radius:8px;padding:2px 10px;font-size:13px;cursor:pointer;opacity:.85}
nav.main{display:flex;gap:4px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line);padding:6px 12px;position:sticky;top:calc(46px + env(safe-area-inset-top,0px));z-index:4}
nav.main a{white-space:nowrap;text-decoration:none;color:var(--ink2);padding:6px 12px;border-radius:999px;font-size:14px;font-weight:500}
nav.main a.on{background:var(--accent);color:var(--on-accent)}
main{max-width:1080px;margin-inline:auto;padding-inline:16px;padding-block:18px 60px;display:flex;flex-direction:column;gap:18px}
.head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.head .sp{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid2{display:grid;gap:12px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.kpi small{color:var(--muted);font-size:12px} .kpi strong{font-size:21px;line-height:1.4} .kpi em{font-style:normal;font-size:12px;color:var(--ink2)}
.box strong{font-size:22px}
.row{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--sunk);color:var(--ink2)}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.crit{background:var(--crit-soft);color:var(--crit)}
.alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.alerts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}

/* forms */
form{display:flex;flex-direction:column;gap:10px}
.fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);min-width:0}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:15px;width:100%;min-height:42px}
input[type=checkbox]{width:auto;min-height:0}
textarea{min-height:64px;resize:vertical}
.btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;min-height:42px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.ghost{background:none;color:var(--accent);border:1px solid var(--accent)}
.btn.sm{padding:3px 10px;min-height:0;font-size:12.5px}
.btn.danger{background:none;color:var(--crit);border:1px solid var(--crit)}
.btn[disabled]{opacity:.5;cursor:default}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:14px}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.err{color:var(--crit);font-size:13.5px;font-weight:500}
.hint{font-size:12.5px;color:var(--muted)}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
td.wrap{white-space:normal;min-width:160px}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--sunk);position:sticky;top:0}
td.n,th.n{text-align:end}
tr:last-child td{border-bottom:0}
tr.total td{font-weight:700;background:var(--sunk)}
tr.click{cursor:pointer} tr.click:hover td{background:var(--accent-soft)}

/* charts */
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;vertical-align:-1px}
.chart{position:relative} .chart svg{display:block;width:100%;height:auto}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:5px 9px;border-radius:6px;white-space:nowrap;translate:-50% -115%;z-index:2}
.hbars{display:flex;flex-direction:column;gap:7px;font-size:13px}
.hbars .hb{display:grid;grid-template-columns:minmax(90px,34%) minmax(0,1fr) auto;gap:8px;align-items:center}
.hbars .track{height:10px;background:var(--sunk);border-radius:5px;overflow:hidden}
.hbars .track i{display:block;height:100%;background:var(--s1);border-radius:5px;margin-left:auto;margin-right:0}

/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login .card{width:min(380px,100%);gap:14px}
#toast{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-inline:auto;max-width:420px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;text-align:center;z-index:10;font-size:14px}
#toast.bad{background:var(--crit);color:#fff}
[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){.btn,.tabs button,nav.main a{transition:background-color .15s}}

details.card summary{cursor:pointer}
details.card[open] summary{margin-bottom:10px}

/* ---------- phone layout: bottom tab bar, bigger touch targets ---------- */
.tabbar,.moresheet{display:none}
summary{cursor:pointer;padding:4px 0}
details > form{margin-top:10px}
@media (max-width:760px){
  nav.main{display:none}
  .top{padding-block:8px}
  main{padding-inline:12px;padding-block:14px calc(86px + env(safe-area-inset-bottom,0px));gap:14px}
  h1{font-size:19px}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset-inline:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border:0;background:none;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;text-decoration:none;border-radius:10px;cursor:pointer;min-height:52px;justify-content:center}
  .tabbar .on{color:var(--accent);background:var(--accent-soft)}
  .moresheet{display:block;position:fixed;inset:0;z-index:5;background:rgb(0 0 0 / .45)}
  .moresheet .inner{position:absolute;inset-inline:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));background:var(--surface);border-radius:16px 16px 0 0;padding:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:70dvh;overflow:auto}
  .moresheet a{padding:13px 10px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;text-align:center}
  .moresheet a.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  #toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi strong{font-size:18px}
  .fields{grid-template-columns:1fr}
  .head .sp{margin-inline-start:0;width:100%}
  .btn{min-height:46px}
  .btn.sm{min-height:34px;padding:5px 12px;font-size:13px}
  input,select,textarea{font-size:16px;min-height:46px}   /* 16px stops iOS zooming into the field */
  .tbl{border-radius:8px;-webkit-overflow-scrolling:touch}
  th,td{padding:8px}
  .login .card{padding:18px}
}
@media (min-width:761px){.moresheet{display:none!important}}

td.num,th.num{display:table-cell}
[hidden]{display:none!important}

/* view-only account (general manager): every control that adds, edits or cancels is hidden */
.ro main form:not(#pw), .ro [data-void], .ro [data-reset], .ro [data-status], .ro [data-st], .ro [data-edit-x], .ro [data-edit-tx], .ro [data-ec], .ro [data-eu], .ro [data-open],
.ro #activate, .ro #mclose, .ro #mopen, .ro a[href="#entry"], .ro a[href="#quotes/new"], .ro a[href="#projects/new"], .ro a[href^="#quotes/edit-"], .ro a[href="#quotes/catalog"], .ro main details:has(form) { display: none !important }