:root{
  --bg:#E8ECEF; --surface:#FFFFFF; --surface2:#F3F5F7; --ink:#16212B; --muted:#56636F; --line:#D2D9DF;
  --mat:#1F5466; --mat2:#2A6B80; --mat-ink:#FFFFFF;
  --res:#9A6608; --res-bg:#FBEFD5; --ok:#246B41; --ok-bg:#DFF0E5; --bad:#A1362A; --bad-bg:#F6E1DC; --iss:#43568A; --iss-bg:#E3E7F3;
  --focus:#E0A21B; color-scheme:light;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0F1A20; --surface:#16242C; --surface2:#1B2C35; --ink:#E6EDF1; --muted:#9AABB6; --line:#2B3E48;
  --mat:#173F4D; --mat2:#3A8AA3; --mat-ink:#F2F7F9;
  --res:#F0B847; --res-bg:#3A2D10; --ok:#6CCB90; --ok-bg:#163423; --bad:#F08A7A; --bad-bg:#3D1C17; --iss:#A8B7E8; --iss-bg:#232C47;
  color-scheme:dark;
}}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Noto Sans",Arial,sans-serif;font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.num{direction:ltr;unicode-bidi:isolate}
h1{font-size:24px;font-weight:600;margin:0 0 4px;line-height:1.3}
h2{font-size:18px;font-weight:600;margin:0 0 12px}
.lede{color:var(--muted);margin:0 0 20px;max-width:65ch}
.hint{font-size:13px;color:var(--muted)}
.mt{margin-top:14px} .mb{margin-bottom:14px}
.err{color:var(--bad);min-height:1.4em;margin:4px 0;font-size:14px}

/* login */
.screen-center{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:var(--mat)}
.lcard{background:var(--surface);border-radius:18px;padding:26px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.lbrand{display:flex;gap:12px;align-items:center;color:var(--mat2)}
.lbrand b{display:block;color:var(--ink);font-size:18px}
.lbrand small{display:block;color:var(--muted)}
.caprow{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.caprow img{border-radius:8px;border:1px solid var(--line);background:#eef2f4}
.linkbtn{background:none;border:0;color:var(--mat2);cursor:pointer;text-decoration:underline;align-self:center}

/* header */
header{position:sticky;top:0;z-index:9;background:var(--mat);color:var(--mat-ink)}
.bar{max-width:1150px;margin:0 auto;padding:12px 16px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brand{font-weight:600;font-size:17px;margin-inline-end:auto;display:flex;align-items:center;gap:10px}
.brand small{display:block;font-weight:300;font-size:12px;opacity:.8}
.who{font-size:13px;text-align:end;line-height:1.3}
.who small{display:block;opacity:.8}
.hbtn{position:relative;background:none;border:1px solid rgba(255,255,255,.3);color:var(--mat-ink);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px}
.hbtn:hover{background:rgba(255,255,255,.1)}
.hbtn b{position:absolute;top:-7px;inset-inline-start:-7px;background:var(--focus);color:#1b1300;border-radius:999px;font-size:11px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}
nav{max-width:1150px;margin:0 auto;padding:8px 10px 0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav button{background:none;border:0;color:var(--mat-ink);opacity:.75;padding:10px 14px 12px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;font-size:14px}
nav button[aria-current="page"]{opacity:1;background:var(--bg);color:var(--ink);font-weight:600}
nav .ct{font-size:12px;opacity:.7;margin-inline-start:4px}
main{max-width:1150px;margin:0 auto;padding:20px 16px 60px}

/* forms */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.f input,.f select,.f textarea,.inp{background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);font-size:15px;min-width:0;width:100%}
textarea{resize:vertical;min-height:70px}
fieldset{border:0;padding:0;margin:0}
legend{font-size:13px;color:var(--muted);margin-bottom:6px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label,.chip{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px;cursor:pointer}
.chip button{background:none;border:0;cursor:pointer;color:var(--bad);font-size:16px;line-height:1;padding:0 2px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--mat2)}
.stage{display:grid;grid-template-columns:34px 1fr;gap:14px;margin-bottom:22px}
.stage>.n{width:34px;height:34px;border-radius:50%;background:var(--mat);color:var(--mat-ink);display:grid;place-items:center;font-weight:600}
.stage h2{margin-top:4px}
.decide{display:flex;gap:10px;flex-wrap:wrap}
.decide label{flex:1 1 220px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--surface2)}
.decide label:has(input:checked){border-color:var(--mat2);background:var(--surface)}
.decide input{margin-inline-end:6px}
.decide small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.btn{background:var(--mat);color:var(--mat-ink);border:0;border-radius:10px;padding:10px 18px;font-weight:500;cursor:pointer}
.btn:hover{background:var(--mat2)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.warn{background:var(--res);color:#1b1300}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.avail{font-size:13px;margin-top:6px}

/* status pills */
.pill{display:inline-block;font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;white-space:nowrap}
.s-tech_diagnosis{background:var(--iss-bg);color:var(--iss)}
.s-awaiting_reservation{background:var(--bad-bg);color:var(--bad)}
.s-reserved{background:var(--res-bg);color:var(--res)}
.s-in_repair{background:var(--iss-bg);color:var(--iss)}
.s-completed{background:var(--ok-bg);color:var(--ok)}
.s-delivered{background:var(--surface2);color:var(--ok);outline:1px solid var(--ok)}
.s-off{background:var(--bad-bg);color:var(--bad)}
.s-on{background:var(--ok-bg);color:var(--ok)}

/* tickets */
.tlist{display:flex;flex-direction:column;gap:10px}
.tcard{display:grid;grid-template-columns:1fr auto;gap:4px 12px;background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--mat2);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:start;width:100%}
.tcard:hover{border-color:var(--mat2)}
.tcard .ref{font-weight:600}
.tcard .meta{grid-column:1/-1;font-size:13px;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters .inp{flex:1 1 220px;width:auto}
.tag{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tag-head{background:var(--mat);color:var(--mat-ink);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tag-head .hole{width:16px;height:16px;border-radius:50%;background:var(--bg);flex:none}
.tag-head .r{font-size:22px;font-weight:700;letter-spacing:.03em}
.tag-head .d{margin-inline-start:auto;font-size:13px;opacity:.85}
.tag-body{padding:18px;display:grid;gap:18px}
dl.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 18px;margin:0}
dl.kv div{border-bottom:1px dashed var(--line);padding-bottom:6px}
dl.kv dt{font-size:12px;color:var(--muted)}
dl.kv dd{margin:0;font-weight:500;word-break:break-word}
.path{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.path li{font-size:13px;padding:5px 11px;border-radius:8px;background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.path li.done{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.path li.now{background:var(--res-bg);color:var(--res);border-color:var(--res);font-weight:600}
.path li.skip{text-decoration:line-through;opacity:.5}
.path li.sep{border:0;background:none;padding:0 2px}
.action{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:14px}
.action h3{margin:0 0 8px;font-size:15px}
.hist{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)}
.hist li{padding:0 14px 12px;position:relative;font-size:14px}
.hist li::before{content:"";position:absolute;inset-inline-start:-6px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--mat2)}
.hist time{display:block;font-size:12px;color:var(--muted)}

/* tables */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px}
th,td{text-align:start;padding:10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:500}
.meter{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface2);min-width:120px;border:1px solid var(--line)}
.meter i{display:block} .meter .a{background:var(--ok)} .meter .rv{background:var(--res)}
.big{font-size:17px;font-weight:600}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted);margin:6px 0 14px;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px;background:var(--c)}
.tx-RESERVE{color:var(--res)} .tx-ISSUE{color:var(--iss)} .tx-RECEIVE{color:var(--ok)} .tx-RELEASE{color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:14px}
.segs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.segs button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:14px}
.segs button[aria-pressed="true"]{background:var(--mat);color:var(--mat-ink);border-color:var(--mat)}

/* search */
.ask{display:flex;gap:8px;margin-bottom:12px}
.ask .inp{flex:1}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.sugg button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.reflink{background:none;border:0;padding:0;cursor:pointer;font-weight:600;color:var(--mat2);text-decoration:underline;direction:ltr;unicode-bidi:isolate}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;z-index:40;max-width:90vw;font-size:14px}
.notices{position:fixed;top:64px;inset-inline-end:12px;width:min(380px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;z-index:15;padding:12px;max-height:60vh;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.notices ul{margin:0;padding:0}
.notices li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.notices li.read{opacity:.6}

/* receipt modal */
.modal{position:fixed;inset:0;z-index:30;background:rgba(10,18,24,.55);display:grid;place-items:center;padding:12px}
.mbox{background:var(--surface);color:var(--ink);border-radius:16px;width:min(880px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.mhead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mhead h2{margin:0;margin-inline-end:auto}
.mprev{overflow:auto;background:#9aa5ad;padding:16px;flex:1}
.paper{background:#fff;margin:0 auto;box-shadow:0 4px 16px rgba(0,0,0,.25);padding:8mm}
.mfoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}

/* receipt */
.rc{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;color:#000;background:#fff;font-size:12.5px;line-height:1.5;width:100%}
.rc .num{direction:ltr;unicode-bidi:isolate}
.rc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:8px}
.rc-h b{font-size:16px}
.rc-h .contact{font-size:11px}
.rc-t{text-align:end;font-size:17px;font-weight:700}
.rc-t small{display:block;font-size:11px;font-weight:400}
.rc-ref{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px}
.rc-ref .num{font-size:18px;font-weight:700;letter-spacing:.04em}
.rc-ref svg{height:42px;width:56%;max-width:260px}
.rc-dup{display:inline-block;border:1.5px solid #000;padding:1px 8px;font-weight:700;font-size:11px;margin-inline-start:8px}
.rc table{width:100%;border-collapse:collapse;min-width:0}
.rc td{border:1px solid #000;padding:4px 7px;vertical-align:top;font-size:12px;color:#000}
.rc td.k{width:30%;background:#eee;font-weight:600}
.rc-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.rc-sign div{border-top:1px solid #000;padding-top:4px;text-align:center;font-size:11.5px}
.rc-foot{font-size:10.5px;margin:12px 0 0;border-top:1px dashed #000;padding-top:6px}
.rc-cut{border:0;border-top:1.5px dashed #000;margin:14px 0}
.rc-break{break-after:page;page-break-after:always}
.rc.thermal{font-size:11px}
.rc.thermal .rc-h,.rc.thermal .rc-ref{flex-direction:column;align-items:center;text-align:center}
.rc.thermal .rc-t{text-align:center}
.rc.thermal .rc-ref svg{width:100%;max-width:none}
.rc.thermal td{display:block;width:100%;border:0;border-bottom:1px dotted #000;padding:2px 0}
.rc.thermal td.k{background:none;padding-top:4px;font-size:10px}
.rc.thermal .rc-sign{grid-template-columns:1fr;gap:26px}

#printArea{display:none}
@media print{
  body>*:not(#printArea){display:none!important}
  body{background:#fff!important}
  #printArea{display:block!important}
}
@media (max-width:600px){h1{font-size:20px}.stage{grid-template-columns:1fr}.stage>.n{display:none}.who{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[dir=rtl] dd.num,[dir=rtl] td.num{text-align:right}
.hsel{display:flex;align-items:center;gap:6px;font-size:13px}
.hsel select{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:var(--mat-ink);border-radius:8px;padding:5px 8px;max-width:180px}
.hsel select option{color:#16212B}
.banner{background:var(--res-bg);color:var(--res);text-align:center;padding:8px 16px;font-size:14px;font-weight:500}
.subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.subgrid div{background:var(--surface2);border-radius:10px;padding:10px 12px}
.subgrid b{display:block;font-size:20px}
.subgrid small{color:var(--muted)}
.whpick{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.whpick label{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer}
.whpick label.off{opacity:.5;cursor:not-allowed}

.brandlogo{max-height:40px;max-width:120px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}
.brandlogo.sm{max-height:32px;max-width:96px}
.logoPrev{display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:60px;border:1px dashed var(--line);border-radius:10px;background:#fff;padding:6px}
.logoPrev img{max-height:70px;max-width:200px;object-fit:contain}
.rc-logo{max-height:52px;max-width:150px;object-fit:contain;display:block;margin-bottom:4px}
.rc.thermal .rc-logo{margin:0 auto 4px;max-height:44px}