:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --app:#D9DFE6;--win:#F3F5F7;--panel:#FFFFFF;--title:#1D3557;--title-ink:#FFFFFF;--menu:#FAFBFC;--tool:#ECEFF3;
  --line:#C5CED8;--line2:#E2E7EC;--ink:#18222E;--muted:#5A6878;--head:#E5EAF0;--zebra:#F6F8FA;--sel:#D3E3F7;--sel-line:#2C6BC0;
  --acc:#2C6BC0;--acc-ink:#FFFFFF;--acc-s:#E0EBFA;
  --ok:#2C7A31;--ok-s:#E2F1E3;--warn:#9F5D00;--warn-s:#FFF0D8;--bad:#C0282A;--bad-s:#FBE2E2;
  --info:#00768A;--info-s:#DCF1F4;--violet:#5C35AE;--violet-s:#ECE5F8;--done:#4A5562;--done-s:#E6EAEE;
  color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --app:#0E1318;--win:#141A21;--panel:#1A222B;--title:#0B1A2C;--title-ink:#E5ECF4;--menu:#171F28;--tool:#19212A;
  --line:#2D3946;--line2:#242E39;--ink:#E0E7EE;--muted:#93A1B0;--head:#1F2934;--zebra:#18202A;--sel:#1E395B;--sel-line:#6DA7FF;
  --acc:#5C9CF0;--acc-ink:#08121F;--acc-s:#1A2D48;
  --ok:#67BC6B;--ok-s:#15301A;--warn:#EFA53B;--warn-s:#3A2A10;--bad:#EE6B6B;--bad-s:#3A1717;
  --info:#4FC3D9;--info-s:#10303A;--violet:#A98CEC;--violet-s:#2A2142;--done:#AAB6C2;--done-s:#222B35;color-scheme:dark}}
:root[data-theme="dark"]{
  --app:#0E1318;--win:#141A21;--panel:#1A222B;--title:#0B1A2C;--title-ink:#E5ECF4;--menu:#171F28;--tool:#19212A;
  --line:#2D3946;--line2:#242E39;--ink:#E0E7EE;--muted:#93A1B0;--head:#1F2934;--zebra:#18202A;--sel:#1E395B;--sel-line:#6DA7FF;
  --acc:#5C9CF0;--acc-ink:#08121F;--acc-s:#1A2D48;
  --ok:#67BC6B;--ok-s:#15301A;--warn:#EFA53B;--warn-s:#3A2A10;--bad:#EE6B6B;--bad-s:#3A1717;
  --info:#4FC3D9;--info-s:#10303A;--violet:#A98CEC;--violet-s:#2A2142;--done:#AAB6C2;--done-s:#222B35;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{background:var(--app);color:var(--ink);font-family:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;line-height:1.3}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)}.small{font-size:12.5px}
.t-ok{color:var(--ok)}.t-bad{color:var(--bad)}.t-warn{color:var(--warn)}
svg.i{width:20px;height:20px;flex:none}

/* window chrome */
.app{height:100%;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);background:var(--win)}
.titlebar{display:flex;align-items:center;gap:10px;background:var(--title);color:var(--title-ink);padding:6px 12px;min-height:40px}
.titlebar .logo{width:26px;height:26px;color:var(--title-ink);opacity:.95}
.titlebar b{font-size:14.5px}
.titlebar .sub{opacity:.7;font-size:13px}
.titlebar .sp{flex:1}
.titlebar .who{font-size:13px;opacity:.9;white-space:nowrap}
.tbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--title-ink);border-radius:4px;padding:3px 10px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.tbtn:hover{background:rgba(255,255,255,.12)}
.tbtn svg{width:16px;height:16px}
.menubar{display:flex;align-items:stretch;background:var(--menu);border-bottom:1px solid var(--line);padding:0 4px;position:relative;z-index:30}
.mi{position:relative}
.mi>button{height:100%;border:0;background:none;padding:7px 14px;color:var(--ink);cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px}
.mi>button:hover,.mi.open>button{background:var(--sel)}
.mi .badge{transform:scale(.9)}
.dd{position:absolute;top:100%;right:0;min-width:230px;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.2);padding:4px;z-index:40}
.dd button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;color:var(--ink);text-align:start;cursor:pointer;border-radius:3px}
.dd button:hover{background:var(--sel)}
.dd button svg{color:var(--acc)}
.dd button .badge{margin-inline-start:auto}
.mob{display:none}
.tabs{display:flex;gap:2px;background:var(--tool);border-bottom:1px solid var(--line);padding:5px 6px 0;overflow-x:auto}
.tab{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-bottom:0;background:var(--menu);padding:4px 10px;border-radius:5px 5px 0 0;cursor:pointer;white-space:nowrap;color:var(--muted);font-size:13px}
.tab svg{width:15px;height:15px}
.tab.on{background:var(--win);color:var(--ink);font-weight:600;margin-bottom:-1px;padding-bottom:5px}
.tab .x{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 3px;font-size:15px;line-height:1;border-radius:3px}
.tab .x:hover{background:var(--bad-s);color:var(--bad)}
.toolbar{display:flex;align-items:stretch;gap:2px;background:var(--win);border-bottom:1px solid var(--line);padding:4px 8px;overflow-x:auto;min-height:58px}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:70px;padding:4px 8px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;border-radius:4px;font-size:12px;white-space:nowrap}
.tb svg{width:22px;height:22px;color:var(--acc)}
.tb:hover:not([disabled]){background:var(--panel);border-color:var(--line)}
.tb[disabled]{opacity:.38;cursor:default}
.tb.ok svg{color:var(--ok)}.tb.bad svg{color:var(--bad)}.tb.warn svg{color:var(--warn)}
.tsep{width:1px;background:var(--line);margin:6px 6px;flex:none}
.content{overflow:auto;padding:12px;min-width:0}
.statusbar{display:flex;background:var(--title);color:var(--title-ink);font-size:12px;overflow-x:auto}
.statusbar span{padding:4px 12px;border-inline-start:1px solid rgba(255,255,255,.16);white-space:nowrap}
.statusbar span:first-child{border:0}
.statusbar span:empty{display:none}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:11.5px;display:inline-grid;place-items:center;font-weight:700;line-height:1}

/* panels, filters */
.panel{background:var(--panel);border:1px solid var(--line);margin-bottom:12px}
.panel-h{background:var(--head);padding:6px 10px;font-weight:700;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px}
.panel-b{padding:10px}
.panel>.grid-w{border:0}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.filters input[type=search]{width:260px;max-width:100%}
.filters label.inl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel);flex-wrap:wrap}
.seg button{border:0;border-inline-start:1px solid var(--line);background:none;padding:5px 12px;color:var(--ink);cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.seg button:first-child{border-inline-start:0}
.seg button.on{background:var(--acc);color:var(--acc-ink)}
.seg .c{background:var(--head);color:var(--ink);border-radius:9px;padding:0 6px;font-size:11.5px;font-weight:700}
.seg button.on .c{background:rgba(255,255,255,.25);color:inherit}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.side-l{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:12px}
.kv div{background:var(--panel);padding:7px 10px}
.kv small{display:block;color:var(--muted);font-size:12px}
.kv b{font-size:15px}
.empty{padding:22px;text-align:center;color:var(--muted)}

/* grid */
.grid-w{overflow:auto;border:1px solid var(--line);background:var(--panel);max-width:100%}
.grid{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px}
.grid th{position:sticky;top:0;background:var(--head);border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line2);padding:0;text-align:start;z-index:1;white-space:nowrap;font-weight:700}
.grid th:first-child,.grid td:first-child{border-inline-start:0}
.grid th .sorter,.grid th .nos{display:block;width:100%;border:0;background:none;padding:6px 10px;font:inherit;font-weight:700;color:var(--ink);text-align:inherit}
.grid th .sorter{cursor:pointer}
.grid th .sorter:hover{background:var(--sel)}
.grid td{padding:5px 10px;border-bottom:1px solid var(--line2);border-inline-start:1px solid var(--line2);white-space:nowrap;vertical-align:middle}
.grid tbody tr:nth-child(even) td{background:var(--zebra)}
.grid tbody tr[data-act]{cursor:default;user-select:none}
.grid tbody tr.sel td{background:var(--sel)}
.grid tbody tr.sel td:first-child{box-shadow:inset -3px 0 0 var(--sel-line)}
.grid .n{text-align:end}
.grid td.wrap{white-space:normal;min-width:180px}
.grid tfoot td{background:var(--head);font-weight:700;border-top:1px solid var(--line)}
.grid input,.grid select{min-height:30px;padding:3px 6px}
.grid input.q{width:110px;text-align:center}
.tag{display:inline-block;padding:0 8px;border-radius:3px;font-size:12px;font-weight:700;background:var(--s);color:var(--c);white-space:nowrap;line-height:1.7}
.c-ok{--c:var(--ok);--s:var(--ok-s)}.c-warn{--c:var(--warn);--s:var(--warn-s)}.c-bad{--c:var(--bad);--s:var(--bad-s)}.c-info{--c:var(--info);--s:var(--info-s)}
.c-brand{--c:var(--acc);--s:var(--acc-s)}.c-violet{--c:var(--violet);--s:var(--violet-s)}.c-done{--c:var(--done);--s:var(--done-s)}

/* form controls */
input,select,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:5px 8px;min-height:34px;width:100%}
textarea{resize:vertical;min-height:60px}
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;margin:0;accent-color:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:4px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover:not([disabled]){background:var(--sel)}
.btn svg{width:17px;height:17px}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.pri:hover:not([disabled]),.btn.ok:hover:not([disabled]),.btn.warn:hover:not([disabled]){filter:brightness(1.08);background:var(--acc)}
.btn.ok:hover:not([disabled]){background:var(--ok)}.btn.warn:hover:not([disabled]){background:var(--warn)}
.btn.sm{min-height:28px;padding:0 9px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
fieldset{border:1px solid var(--line);padding:8px 12px 10px;margin:0 0 12px;background:var(--panel);min-width:0}
legend{padding:0 6px;font-weight:700;font-size:13px;color:var(--acc)}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 12px}
.fld{display:grid;gap:3px;align-content:start}
.fld label{font-size:12.5px;color:var(--muted);font-weight:600}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer;margin:6px 0}
.err{color:var(--bad);font-size:13px;min-height:18px}
.note{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 12px;margin-top:10px;background:var(--s);border:1px solid var(--c);border-inline-start-width:4px;color:var(--ink)}
.n-ok{--c:var(--ok);--s:var(--ok-s)}.n-warn{--c:var(--warn);--s:var(--warn-s)}.n-bad{--c:var(--bad);--s:var(--bad-s)}.n-info{--c:var(--info);--s:var(--info-s)}

/* home */
.home{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px;padding:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;background:var(--win);border:1px solid var(--line);border-radius:4px;cursor:pointer;color:var(--ink);font-weight:600;font-size:13px;text-align:center}
.tile svg{width:34px;height:34px;color:var(--acc)}
.tile:hover{border-color:var(--acc);background:var(--sel)}
.tile .badge{position:absolute;top:6px;left:6px}
.task{display:flex;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--line2);background:none;padding:9px 10px;cursor:pointer;color:var(--ink);text-align:start}
.task:last-child{border-bottom:0}
.task:hover{background:var(--sel)}
.task b.n{min-width:30px;text-align:center;color:var(--acc);font-size:17px}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 22px 12px 0}
.tl li::before{content:"";position:absolute;right:5px;top:8px;bottom:-6px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl li::after{content:"";position:absolute;right:0;top:6px;width:12px;height:12px;border-radius:2px;background:var(--c,var(--muted))}
.tl .m{font-size:12.5px;color:var(--muted)}

/* dialogs */
#modal[hidden]{display:none}
.dlg-back{position:fixed;inset:0;background:rgba(10,20,32,.45);display:grid;place-items:center;padding:max(14px,env(safe-area-inset-top,0px)) 14px max(14px,env(safe-area-inset-bottom,0px));z-index:50}
.dlg{background:var(--win);border:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.35);width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:5px;overflow:hidden}
.dlg.wide{width:min(1000px,100%)}
.dlg.narrow{width:min(440px,100%)}
.dlg-t{background:var(--title);color:var(--title-ink);padding:7px 10px 7px 6px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.dlg-t svg{width:18px;height:18px}
.dlg-t .x{margin-inline-start:auto;border:0;background:none;color:var(--title-ink);width:30px;height:28px;border-radius:3px;cursor:pointer;font-size:18px;line-height:1}
.dlg-t .x:hover{background:var(--bad)}
.dlg-b{padding:14px;overflow:auto}
.dlg-f{display:flex;gap:8px;justify-content:flex-end;padding:9px 14px;border-top:1px solid var(--line);background:var(--tool);flex-wrap:wrap}
.dlg-f .sp{flex:1}

/* auth */
.auth{min-height:100%;display:grid;place-items:center;padding:20px;background:var(--app)}
.auth .dlg{width:min(400px,100%)}
.auth .brandbox{text-align:center;margin-bottom:12px}
.auth .brandbox svg{width:48px;height:48px;color:var(--acc)}

/* print docs */
.doc-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:12px}
.doc-t{display:flex;justify-content:flex-end;margin-top:10px}
.doc-t table{min-width:0;width:auto}
.sign{display:flex;justify-content:space-between;gap:20px;margin-top:28px;font-size:13px;color:var(--muted)}
.sign div{border-top:1px dashed var(--line);padding-top:6px;min-width:150px;text-align:center}

/* bon paper */
.fmt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.paper-wrap{background:var(--app);padding:16px;overflow:auto;border:1px solid var(--line)}
.paper{--pi:#141414;--pm:#555;--pl:#9a9a9a;--ph:#efefef;background:#fff;color:var(--pi);margin:0 auto;padding:26px 28px;box-shadow:0 4px 18px rgba(0,0,0,.2);font-size:13px;line-height:1.5;width:100%;max-width:794px;color-scheme:light}
.paper.a5{max-width:560px;padding:18px;font-size:12px}
.paper{position:relative}
.paper.void::after{content:'ملغى';position:absolute;top:36%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);font-size:92px;font-weight:800;line-height:1.2;color:rgba(190,30,30,.2);border:8px solid rgba(190,30,30,.2);padding:0 28px;border-radius:12px;pointer-events:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cxd{text-decoration:line-through;opacity:.6}
.imp{margin:8px 22px 14px;line-height:2}
.paper.tk{max-width:302px;padding:10px 8px;font-size:11.5px}
.b-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid var(--pi);padding-bottom:10px}
.b-co{display:flex;gap:10px;align-items:flex-start}
.b-co div{color:var(--pm)}
.b-logo{width:40px;height:40px;flex:none;color:var(--pi)}
.b-logo svg{width:40px;height:40px}
.b-name{font-size:17px;display:block;color:var(--pi)}
.b-title{border:2px solid var(--pi);padding:6px 12px;text-align:center;min-width:170px}
.b-type{font-size:18px;font-weight:700;border-bottom:1px solid var(--pl);margin-bottom:4px;padding-bottom:2px}
.b-ids{display:flex;gap:4px 18px;flex-wrap:wrap;font-size:11.5px;color:var(--pm);padding:6px 0;border-bottom:1px solid var(--pl)}
.b-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
.b-box{border:1px solid var(--pl);padding:6px 10px}
.b-box small{display:block;color:var(--pm);font-size:11px}
.b-t{width:100%;border-collapse:collapse}
.b-t th,.b-t td{border:1px solid var(--pi);padding:4px 6px;text-align:start}
.b-t th{background:var(--ph);font-weight:700}
.b-t .n{text-align:end;white-space:nowrap}
.b-t .ix{width:28px;text-align:center}
.b-tot{display:flex;justify-content:flex-end;margin-top:8px}
.b-tot table{border-collapse:collapse;min-width:250px}
.b-tot td{border:1px solid var(--pi);padding:4px 8px}
.b-tot td.n{text-align:end}
.b-tot tr.tt td{font-weight:700;background:var(--ph)}
.b-words{margin-top:10px;font-weight:600}
.b-note{margin-top:6px}
.b-sign{display:flex;justify-content:space-between;gap:20px;margin-top:22px}
.b-sign div{flex:1;border:1px solid var(--pl);min-height:72px;padding:4px 8px;font-size:12px;color:var(--pm)}
.b-foot{margin-top:14px;border-top:1px solid var(--pl);padding-top:6px;font-size:11px;color:var(--pm);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.paper.a5 .b-sign div{min-height:52px}
.paper.tk .b-head{flex-direction:column;align-items:stretch;gap:6px}
.paper.tk .b-title{min-width:0}
.paper.tk .b-parties{grid-template-columns:1fr}
.paper.tk .c-code,.paper.tk .c-unit,.paper.tk .b-sign,.paper.tk .b-logo{display:none}
.paper.tk .b-t th,.paper.tk .b-t td{padding:2px 3px;border-width:0 0 1px 0}
.paper.tk .b-tot table{min-width:0;width:100%}
@media (max-width:600px){.paper-wrap{padding:6px}.paper{padding:14px 10px}.b-head{flex-direction:column;align-items:stretch}.b-title{min-width:0}}

/* sales screen */
.sale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;align-items:start}
.sale>*{min-width:0}
.sale-q{font-size:16px;min-height:42px}
.grid.pick{min-width:460px}
.grid.pick tbody tr td{cursor:pointer}
.grid.pick tbody tr:hover td{background:var(--sel)}
.grid.pick tbody tr.out td{opacity:.5}
.qbox{display:inline-flex;align-items:center;gap:2px}
.qbox button{width:28px;height:30px;border:1px solid var(--line);background:var(--win);color:var(--ink);border-radius:3px;cursor:pointer;font-weight:700;font-size:16px;line-height:1}
.qbox button:hover{background:var(--sel)}
.grid .qbox input{width:72px;text-align:center}
.ctn-in{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;color:var(--muted,inherit);white-space:nowrap}
.grid .ctn-in input{width:60px;text-align:center;padding:2px 4px}
.ctn{white-space:nowrap}
.grid input.pr{width:100px;text-align:center}
.grid.px td.wrap{min-width:96px;white-space:normal}.grid.px input.pr{width:88px}
@media(max-width:560px){.grid.px td{padding:5px 6px}.grid.px th .nos{padding:6px}.grid.px input.pr{width:70px;padding-inline:4px}.grid.px td.wrap{min-width:84px}}
.grid tbody tr.line-bad td{background:var(--bad-s)}
.tot-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.net{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--title);color:var(--title-ink);padding:10px 14px;margin-top:10px}
.net b{font-size:26px;line-height:1.2}
@media (max-width:1100px){.sale{grid-template-columns:minmax(0,1fr)}}

/* sales bon: invoice-style sheet */
.iv{--r:16px;max-width:1240px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 2px 6px rgba(15,23,42,.05),0 12px 32px rgba(15,23,42,.07)}
.iv input,.iv select,.iv textarea{border-radius:10px}
.iv-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line2);background:linear-gradient(180deg,var(--acc-s),transparent);border-radius:var(--r) var(--r) 0 0}
.iv-ttl{display:flex;align-items:center;gap:12px}
.iv-ttl>div{display:grid;line-height:1.35}
.iv-ttl b{font-size:20px}
.iv-ttl .muted{font-size:13px}
.iv-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink);box-shadow:0 6px 16px rgba(47,107,235,.3)}
.iv-ico .i{width:24px;height:24px}
.iv-no{display:flex;gap:10px}
.iv-no>div{display:grid;padding:7px 14px;border-radius:11px;background:var(--panel);border:1px solid var(--line2);line-height:1.35;min-width:120px}
.iv-no small{font-size:11.5px;color:var(--muted)}
.iv-no b{font-size:15px}
.iv-meta{display:grid;grid-template-columns:minmax(240px,2fr) auto minmax(150px,1fr);gap:12px 16px;align-items:start;padding:16px 22px;border-bottom:1px solid var(--line2)}
.iv-cust select{min-height:42px;font-size:15px;font-weight:600}
.iv-cinfo{font-size:12.5px;color:var(--muted);margin-top:4px}
.iv-meta .seg2{min-height:42px;align-items:stretch}
.seg2{display:inline-flex;padding:3px;gap:3px;border-radius:11px;background:var(--win);border:1px solid var(--line2)}
.seg2 button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--muted);padding:0 16px;min-height:32px;border-radius:8px;cursor:pointer;font-weight:600;white-space:nowrap}
.seg2 button .i{width:16px;height:16px}
.seg2 button.on{background:var(--panel);color:var(--acc);box-shadow:0 1px 3px rgba(16,24,40,.15)}
.seg2 button[disabled]{opacity:.4;cursor:not-allowed}
.iv-meta select#sl-m{min-height:42px}
/* product search */
.iv-add{display:flex;gap:10px;padding:16px 22px 10px;align-items:flex-start}
.iv-srch{position:relative;flex:1}
.iv-srch input{min-height:46px;font-size:15px;padding-inline:16px;border-radius:12px;background:var(--win);border-color:var(--line2)}
.iv-srch input:focus{background:var(--panel)}
.iv-add>.btn{min-height:46px;border-radius:12px}
.iv-sug{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:20;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 44px rgba(15,23,42,.18);max-height:360px;overflow:auto;padding:6px}
.iv-sug button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:start;padding:10px 12px;border-radius:10px;cursor:pointer}
.iv-sug button:hover,.iv-sug button.hi{background:var(--sel)}
.iv-sug button.out{opacity:.55}
.iv-sn{flex:1;min-width:0;display:grid;line-height:1.35}
.iv-sst{font-size:12px;font-weight:600;padding:2px 9px;border-radius:9px;white-space:nowrap}
.iv-sst.ok{background:var(--ok-s);color:var(--ok)}.iv-sst.warn{background:var(--warn-s);color:var(--warn)}.iv-sst.bad{background:var(--bad-s);color:var(--bad)}
.iv-sp{min-width:100px;text-align:end;white-space:nowrap}
.iv-sug .empty{padding:18px}
/* lines table */
.iv-tw{padding:6px 22px 4px;overflow-x:auto}
.iv-t{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.iv-t th{font-size:12.5px;color:var(--muted);font-weight:600;text-align:start;padding:10px 10px;background:var(--head);border-bottom:1px solid var(--line2);white-space:nowrap}
.iv-t th:first-child{border-radius:0 10px 10px 0}.iv-t th:last-child{border-radius:10px 0 0 10px}
.iv-t td{padding:10px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.iv-t tbody tr:hover td{background:var(--zebra)}
.iv-t tbody tr.line-bad td{background:var(--bad-s)}
.iv-t .n{text-align:end}
.iv-ix{width:40px;text-align:center!important;color:var(--muted);font-weight:700}
.iv-pn{min-width:200px}
.iv-pn>*{display:block;line-height:1.4}
.iv-av{white-space:nowrap}
.iv-k{white-space:nowrap}
.iv-k input{width:64px;min-height:34px;text-align:center;padding:0 4px}
.iv-k .small{margin-inline-start:4px}
.iv-q{white-space:nowrap}
.iv-q .ctn{display:block;margin-top:3px}
.iv .qbox{display:inline-flex;align-items:center;background:var(--win);border-radius:10px;padding:2px;gap:0;border:1px solid var(--line2)}
.iv .qbox button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:17px;font-weight:700;cursor:pointer}
.iv .qbox button:hover{background:var(--panel);color:var(--acc)}
.iv .qbox input{width:58px;min-height:30px;border:0;background:transparent;text-align:center;padding:0;font-weight:700;box-shadow:none}
.iv-p input{width:100px;min-height:34px;text-align:center;padding:0 6px}
.iv-a{white-space:nowrap;font-size:14.5px}
.iv-x{width:44px;text-align:center}
.iv-x button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.iv-x button:hover{background:var(--bad-s);color:var(--bad)}
.iv-empty{text-align:center;padding:38px 10px!important;color:var(--muted)}
.iv-empty>*{display:block;margin:0 auto}
.iv-empty .i{width:50px;height:50px;padding:12px;border-radius:50%;background:var(--win);margin-bottom:8px}
.iv-empty b{color:var(--ink);font-size:15px;margin-bottom:2px}
.iv-t tbody tr:hover td.iv-empty{background:transparent}
/* footer: note + totals */
.iv-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:20px;padding:16px 22px 22px;align-items:start}
.iv-side textarea{min-height:96px}
.iv-sum{background:var(--win);border:1px solid var(--line2);border-radius:14px;padding:14px 16px}
.iv-in{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.iv-in label{font-size:13px;color:var(--muted);font-weight:600}
.iv-in input{width:150px;min-height:36px;text-align:center;background:var(--panel)}
.iv-kv{display:grid;gap:6px;padding:10px 0;margin-top:4px;border-top:1px dashed var(--line)}
.iv-kv>div{display:flex;justify-content:space-between;gap:8px}
.iv-kv small{font-size:13px;color:var(--muted)}
.iv-net{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--acc);color:var(--acc-ink);box-shadow:0 6px 16px rgba(47,107,235,.28)}
.iv-net span{font-weight:600}
.iv-net b{font-size:26px;line-height:1.2}
.iv-act{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-top:12px}
.iv .btn.lg{min-height:46px;font-size:15px;border-radius:12px}
@media (max-width:900px){.iv-meta{grid-template-columns:1fr 1fr}.iv-cust{grid-column:1/-1}.iv-foot{grid-template-columns:minmax(0,1fr)}.iv-head,.iv-meta,.iv-add,.iv-tw,.iv-foot{padding-inline:14px}}
@media (max-width:520px){.iv-meta{grid-template-columns:1fr}.iv-add{flex-wrap:wrap}.iv-add>.btn{width:100%}.iv-no{width:100%}.iv-no>div{flex:1;min-width:0}.iv-in input{width:120px}}
/* bon: one screen, full width; only the lines table scrolls */
.content[data-v="newbon"]{display:flex;flex-direction:column;padding-bottom:12px}
.content[data-v="newbon"]>.note{flex:none}
.iv{flex:1;min-height:540px;max-width:none;width:100%;display:flex;flex-direction:column;margin:0}
.iv-head{flex:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:10px 14px;padding:12px 16px}
.iv-ttl{align-self:center;margin-inline-end:6px}
.iv-ttl b{font-size:17px}
.iv-ttl>div>span{font-size:12.5px;color:var(--muted)}
.iv-ico{width:40px;height:40px}
.iv-cust{flex:2 1 260px}
.iv-cust select{min-height:40px;font-size:14.5px;font-weight:600}
.iv-meth{flex:0 1 150px}
.iv-note{flex:1 1 180px}
.iv-head input,.iv-head select,.iv-head .seg2{min-height:40px}
.iv-cinfo{font-weight:600;margin:0;font-size:12px}
.iv-add{flex:none;padding:10px 16px 8px}
.iv-srch input,.iv-add>.btn{min-height:42px}
.iv-tw{flex:1 1 auto;min-height:120px;overflow:auto;padding:0 16px}
.iv-t thead th{position:sticky;top:0;z-index:2}
.iv-msgs{flex:none;padding:0 16px}
.iv-msgs .note{margin:6px 0 0}
.iv-msgs p{margin:6px 0 0}
.iv-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;margin-top:8px;border-top:1px solid var(--line2);background:var(--head);border-radius:0 0 var(--r) var(--r)}
.iv-bar .iv-in{display:grid;gap:3px;margin:0}
.iv-bar .iv-in label{font-size:12px}
.iv-bar .iv-in input{width:130px;min-height:40px}
.iv-bar .iv-kv{display:flex;gap:18px;border:0;margin:0;padding:0 6px;flex:1 1 auto}
.iv-bar .iv-kv>div{display:grid;gap:0}
.iv-bar .iv-kv small{font-size:12px}
.iv-bar .iv-net{padding:8px 18px;min-width:220px}
.iv-bar .iv-net b{font-size:24px}
.iv-bar .iv-act{margin:0;display:flex;gap:8px}
.iv-bar .btn.lg{min-height:48px;padding:0 18px}
@media (max-width:900px){.content[data-v="newbon"]{display:block}.iv{min-height:0}.iv-bar .iv-net{flex:1 1 100%}.iv-bar .iv-act{flex:1 1 100%}.iv-bar .iv-act .btn{flex:1}}
/* staff performance */
.pf-bar{display:inline-block;flex:1;min-width:60px;height:8px;border-radius:4px;background:var(--line2);overflow:hidden;vertical-align:middle}
.pf-bar i{display:block;height:100%;border-radius:4px}
.pf-sc{display:flex;align-items:center;gap:8px;min-width:200px}
.pf-sc b{min-width:38px;text-align:end}
.pf-nm{display:flex;align-items:center;gap:9px;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;padding:2px 0}
.pf-nm>span:last-child{display:grid;line-height:1.35}
.pf-nm:hover b{color:var(--acc);text-decoration:underline}
.pf-av{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--violet));color:#fff;font-weight:700;font-size:22px}
.pf-av.sm{width:32px;height:32px;border-radius:10px;font-size:14px}
.pf-card{display:grid;gap:14px}
.pf-head{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:var(--win)}
.pf-id{flex:1;display:grid;line-height:1.45}
.pf-id b{font-size:18px}
.pf-ring{--p:0;width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line2) 0);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pf-ring>div{width:76px;height:76px;border-radius:50%;background:var(--panel);display:grid;place-items:center;align-content:center;line-height:1.2}
.pf-ring b{font-size:20px}
.pf-ring span{font-size:11.5px;color:var(--muted)}
.pf-sec h4{margin:0 0 8px;font-size:14px}
.pf-tg{display:grid;gap:4px;margin-bottom:10px}
.pf-tg>div{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.pf-tg>div span:last-child{color:var(--muted)}
.pf-tg{grid-template-columns:1fr auto;align-items:center;column-gap:10px}
.pf-tg>div{grid-column:1/-1}
.pf-tg .pf-bar{height:10px}
.pf-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pf-kpis>div{padding:9px 12px;border-radius:10px;background:var(--win);display:grid}
.pf-kpis small{color:var(--muted);font-size:12px}
.pf-kpis b{font-size:15px}
.tg-row{margin-bottom:10px}
@media print{.pf-bar i,.pf-av{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* toasts */
.toasts{position:fixed;bottom:calc(34px + env(safe-area-inset-bottom,0px));inset-inline-start:14px;z-index:70;display:grid;gap:6px;max-width:calc(100% - 28px)}
.toast{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-inline-start:4px solid var(--c,var(--acc));padding:9px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-weight:500;border-radius:3px}
.toast.ok{--c:var(--ok)}.toast.bad{--c:var(--bad)}.toast.warn{--c:var(--warn)}.toast.info{--c:var(--info)}

/* drawer (mobile menu) */
.drawer-back{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45}
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(300px,86vw);background:var(--panel);z-index:46;overflow:auto;padding:calc(10px + env(safe-area-inset-top,0px)) 8px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 0 30px rgba(0,0,0,.3)}
.drawer h3{font-size:12.5px;color:var(--muted);padding:12px 10px 4px}
.drawer button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;color:var(--ink);text-align:start;cursor:pointer;border-radius:4px}
.drawer button.on{background:var(--sel);font-weight:700}
.drawer button svg{color:var(--acc)}
.drawer button .badge{margin-inline-start:auto}

.home>*,.cols2>*,.side-l>*{min-width:0}
@media (max-width:1000px){.home,.side-l,.cols2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .menubar .mi{display:none}
  .mob{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;background:none;color:var(--ink);font-weight:600;cursor:pointer}
  .mob svg{color:var(--acc)}
  .titlebar .sub,.titlebar .who{display:none}
  .tb{min-width:62px;padding:4px 6px}
  .content{padding:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  :root:root:root{--win:#fff;--panel:#fff;--head:#eee;--zebra:#fff;--ink:#000;--muted:#444;--line:#999;--line2:#ccc;--sel:#fff;padding:0}
  body,.app{background:#fff;height:auto;display:block}
  .titlebar,.menubar,.tabs,.toolbar,.statusbar,.toasts,.filters,.no-print{display:none!important}
  .content{overflow:visible;padding:0}
  .grid-w{overflow:visible;border:0}
  .grid th{position:static}
  body:not(.pd) #modal{display:none!important}
  body.pd #root{display:none!important}
  body.pd .dlg-back{position:static;background:none;padding:0;display:block}
  body.pd .dlg{box-shadow:none;border:0;width:100%;max-height:none;overflow:visible}
  body.pd .dlg-t,body.pd .dlg-f{display:none}
  body.pd .dlg-b{overflow:visible;padding:0}
  body.pd .paper-wrap{background:none;padding:0;border:0;overflow:visible}
  body.pd .paper{box-shadow:none;max-width:none;margin:0;padding:0}
  body.pd .paper.fp{min-height:276mm;font-size:12.5px;padding-inline-start:30px}
}
/* full-page A4 road invoice: sheet proportions on screen, lines table grows to push totals and signatures to the bottom */
.paper.fp{display:flex;flex-direction:column;max-width:794px;min-height:1123px;padding:36px 38px}
/* corporate style: brand strip on the left, large coloured title, open info columns, light grid */
.paper.fp{--pc:#0f6e56;--pt:#e1f5ee;padding-inline-start:52px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper.fp::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:14px;background:var(--pc)}
.paper.fp .b-head{border-bottom:0;padding-bottom:6px;align-items:center}
.paper.fp .b-logo,.paper.fp .b-logo svg{width:56px;height:56px}
.paper.fp .b-name{font-size:20px}
.paper.fp .b-title{border:0;padding:0;text-align:end;min-width:0;color:var(--pm)}
.paper.fp .b-type{font-size:28px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--pc);border:0;margin:0 0 2px;padding:0;line-height:1.15}
.paper.fp .b-title b{color:var(--pi)}
.paper.fp .b-ids{border-top:2px solid var(--pc);border-bottom:1px solid var(--pt);padding:6px 0;margin-top:8px}
.paper.fp .b-ids b{color:var(--pc)}
.paper.fp .b-parties{margin:14px 0 16px;gap:18px;border-bottom:2px solid var(--pc);padding-bottom:12px}
.paper.fp .b-box{border:0;padding:0}
.paper.fp .b-box b{white-space:nowrap}
.paper.fp .b-box small{color:var(--pc);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:10.5px;margin-bottom:3px}
.paper.fp .b-body{flex:1;display:flex;flex-direction:column;min-height:240px}
.paper.fp .b-t{flex:1;height:100%;border:1px solid #bdbdbd}
.paper.fp .b-t thead tr,.paper.fp .b-t tbody tr{height:1px}
.paper.fp .b-t th,.paper.fp .b-t td{padding:7px 8px;border:0;border-inline-end:1px solid #dcdcdc;border-bottom:1px solid #e6e6e6}
.paper.fp .b-t th{background:var(--pt);color:var(--pc);border-bottom:2px solid var(--pc);text-transform:uppercase;font-size:11px;letter-spacing:.4px}
.paper.fp .b-t tr.fill{height:auto}
.paper.fp .b-t tr.fill td{border-bottom:0;padding:0}
.paper.fp .b-tot{margin-top:12px}
.paper.fp .b-tot table{min-width:300px}
.paper.fp .b-tot td{border:0;border-bottom:1px solid #e0e0e0;padding:5px 10px}
.paper.fp .b-tot tr.tt td{background:var(--pc);color:#fff;font-size:15px;border:0}
.paper.fp .b-words{border-inline-start:3px solid var(--pc);padding-inline-start:10px}
.paper.fp .b-sign{margin-top:28px;gap:40px}
.paper.fp .b-sign div{min-height:90px;border:0;border-top:1.5px solid var(--pi);padding:6px 0 0;color:var(--pi);font-weight:600}
.paper.fp .b-sign .b-pay{border:1px solid var(--pt);border-inline-start:3px solid var(--pc);background:#fafafa;padding:8px 12px;min-height:0;align-self:flex-start;font-weight:400;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.paper.fp .b-pay p{margin:2px 0;color:var(--pm)}
.paper.fp .b-pay p span{color:var(--pc);font-weight:700}
.paper.fp .b-pay b{color:var(--pi)}
.paper.fp .b-pay b:empty{display:inline-block;min-width:150px;border-bottom:1px dotted var(--pm);height:1em;vertical-align:-2px}
.paper.fp .b-foot{margin-top:16px;border-top:1px solid var(--pt)}
.paper.fp.void::after{left:calc(50% + 20px)}
@media (max-width:600px){.paper.fp{min-height:0;padding:14px 10px 14px 26px}}



/* ======================= مخططات التقارير ======================= */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.charts>*{min-width:0}
.chart .panel{margin-bottom:0}
.bars{display:flex;align-items:flex-end;gap:6px;min-height:168px;padding:4px 2px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.bars .bcol{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:168px}
.bars .group{display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%;height:140px}
.bars .seg{display:block;width:10px;border-radius:3px 3px 0 0;min-height:0;opacity:.92}
.bars .bl{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:7px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:4px;vertical-align:-1px}
.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:minmax(76px,140px) minmax(60px,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
.hbar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .tr{background:var(--head);height:12px;border-radius:6px;overflow:hidden}
.hbar .fl{display:block;height:100%;border-radius:6px;min-width:2px}
.hbar .vl{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr}
@media print{.bars,.hbars .tr,.hbars .fl,.bars .seg{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* =====================================================================
   modern soft theme: sidebar shell, rounded cards, soft shadows
   ===================================================================== */
:root{
  --app:#FFFFFF;--win:#F6F8FB;--panel:#FFFFFF;--title:#1E3A8A;--title-ink:#FFFFFF;--menu:#FFFFFF;--tool:#F7F9FC;
  --line:#DCE3EC;--line2:#EBEFF5;--ink:#0F172A;--muted:#64748B;--head:#F5F7FB;--zebra:#FAFBFD;--sel:#EAF1FE;--sel-line:#2F6BEB;
  --acc:#2F6BEB;--acc-ink:#FFFFFF;--acc-s:#E7EFFE;--violet:#7048E8;--violet-s:#F0EBFE;
  --ok:#16A34A;--ok-s:#E5F6EC;--warn:#C2700A;--warn-s:#FEF3E2;--bad:#DC2626;--bad-s:#FDECEC;--info:#0891B2;--info-s:#E2F5F9;--done:#475569;--done-s:#EEF1F5;
  --side1:#1E3A8A;--side2:#312E81;--rad:14px;--shd:0 1px 2px rgba(15,23,42,.05),0 4px 16px rgba(15,23,42,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --app:#0A0F16;--win:#0D131B;--panel:#141B25;--title:#0F1A33;--title-ink:#E5ECF4;--menu:#141B25;--tool:#111821;
  --line:#253042;--line2:#1C2533;--ink:#E2E8F0;--muted:#94A3B8;--head:#18212D;--zebra:#161E29;--sel:#1B2A44;--sel-line:#6E9BFF;
  --acc:#6E9BFF;--acc-ink:#0A1222;--acc-s:#1A2944;--violet:#A78BFA;--violet-s:#2A2145;
  --ok:#4ADE80;--ok-s:#132B1D;--warn:#FBBF24;--warn-s:#33270F;--bad:#F87171;--bad-s:#361818;--info:#22D3EE;--info-s:#0F2D35;--done:#A5B4C6;--done-s:#1E2633;
  --side1:#111C3A;--side2:#1B1640;--shd:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25)}}
:root[data-theme="dark"]{
  --app:#0A0F16;--win:#0D131B;--panel:#141B25;--title:#0F1A33;--title-ink:#E5ECF4;--menu:#141B25;--tool:#111821;
  --line:#253042;--line2:#1C2533;--ink:#E2E8F0;--muted:#94A3B8;--head:#18212D;--zebra:#161E29;--sel:#1B2A44;--sel-line:#6E9BFF;
  --acc:#6E9BFF;--acc-ink:#0A1222;--acc-s:#1A2944;--violet:#A78BFA;--violet-s:#2A2145;
  --ok:#4ADE80;--ok-s:#132B1D;--warn:#FBBF24;--warn-s:#33270F;--bad:#F87171;--bad-s:#361818;--info:#22D3EE;--info-s:#0F2D35;--done:#A5B4C6;--done-s:#1E2633;
  --side1:#111C3A;--side2:#1B1640;--shd:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25)}
body{font-size:14px}

/* shell */
.app{background:var(--win)}
.side{display:none}
.titlebar{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line2);min-height:56px;padding:8px 18px;gap:12px}
.titlebar .logo{color:var(--acc)}
.titlebar .sub{color:var(--muted);opacity:1}
.titlebar .who{color:var(--muted);opacity:1}
.titlebar .pg,.titlebar .today{display:none}
.tbtn{border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:5px 12px;font-weight:600}
.tbtn:hover{background:var(--sel)}
.menubar{background:var(--panel);border-bottom:1px solid var(--line2);padding:0 10px}
.mi>button{border-radius:10px;margin:5px 2px;padding:6px 14px}
.dd{border-radius:14px;border-color:var(--line2);box-shadow:0 14px 40px rgba(15,23,42,.18);padding:6px}
.dd button{border-radius:10px}
.tabs{background:transparent;border-bottom:0;padding:12px 18px 0;gap:6px}
.tab{border:1px solid transparent;border-radius:10px;background:transparent;padding:6px 12px;color:var(--muted)}
.tab:hover{background:var(--panel)}
.tab.on{background:var(--panel);border-color:var(--line2);box-shadow:var(--shd);margin-bottom:0;padding-bottom:6px;color:var(--acc)}
.toolbar{background:transparent;border-bottom:0;padding:10px 18px 0;gap:4px;min-height:0}
.toolbar:empty{padding:0}
.tb{flex:none;flex-direction:row;gap:7px;min-width:0;padding:8px 13px;border-radius:11px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:13px;font-weight:600}
.tb svg{width:18px;height:18px}
.tb:hover:not([disabled]){background:var(--sel);border-color:var(--acc)}
.tsep{background:transparent;margin:0 4px}
.content{padding:16px 18px 20px}
.statusbar{background:var(--panel);color:var(--muted);border-top:1px solid var(--line2)}
.statusbar span{border-inline-start-color:var(--line2);padding:5px 14px}
.badge{background:var(--bad)}

@media (min-width:901px){
  .app{grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto}
  .app>*{grid-column:2}
  .side{display:flex;flex-direction:column;grid-column:1;grid-row:1/-1;min-height:0;background:linear-gradient(180deg,var(--side1),var(--side2));color:#E6ECFA}
  .menubar{display:none}
  .titlebar .logo,.titlebar .co,.titlebar .sub,.titlebar .who,.titlebar .tbtn{display:none}
  .titlebar .pg{display:flex;align-items:center;gap:10px;font-size:18px}
  .titlebar .pg svg{width:22px;height:22px;padding:7px;box-sizing:content-box;border-radius:10px;background:var(--acc-s);color:var(--acc)}
  .titlebar .today{display:block;color:var(--muted);font-size:13px;padding:5px 12px;border-radius:10px;background:var(--win)}
}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
.side-brand .logo{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.14)}
.side-brand .logo svg{width:26px;height:26px}
.side-brand>div{display:grid;line-height:1.35;min-width:0}
.side-brand b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-brand small{font-size:11.5px;opacity:.7}
.side-nav{flex:1;min-height:0;overflow:auto;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sn-g{margin-bottom:6px}
.sn-g h3{font-size:11.5px;font-weight:600;letter-spacing:.2px;opacity:.6;margin:12px 10px 4px}
.sn-g button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:inherit;padding:8px 10px;border-radius:10px;cursor:pointer;font:inherit;font-size:13.5px;text-align:start;opacity:.88}
.sn-g button svg{width:19px;height:19px;opacity:.85}
.sn-g button:hover{background:rgba(255,255,255,.09);opacity:1}
.sn-g button.on{background:#fff;color:var(--side1);opacity:1;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.sn-g button.on svg{opacity:1}
.sn-g button .badge{margin-inline-start:auto}
.side-user{display:flex;align-items:center;gap:8px;margin:8px 10px 12px;padding:10px;border-radius:14px;background:rgba(255,255,255,.08)}
.side-user .av{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.18);font-weight:700}
.side-user>div{flex:1;min-width:0;display:grid;line-height:1.3}
.side-user b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user small{font-size:11.5px;opacity:.7}
.side-user button{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;opacity:.8}
.side-user button:hover{background:rgba(255,255,255,.14);opacity:1}
.side-user button svg{width:18px;height:18px}

/* surfaces */
.panel{border:1px solid var(--line2);border-radius:var(--rad);box-shadow:var(--shd);overflow:hidden;margin-bottom:14px}
.panel-h{background:transparent;border-bottom:1px solid var(--line2);padding:12px 16px;font-size:14.5px}
.panel-b{padding:14px 16px}
.kv{gap:12px;background:transparent;border:0;margin-bottom:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kv div{border-radius:var(--rad);padding:14px 16px;box-shadow:var(--shd);border:1px solid var(--line2);position:relative;overflow:hidden}
.kv div::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--acc);opacity:.7}
.kv small{font-size:12.5px;margin-bottom:2px}
.kv b{font-size:19px}
fieldset{border:1px solid var(--line2);border-radius:var(--rad);padding:12px 16px 14px;box-shadow:var(--shd)}
legend{padding:3px 10px;border-radius:8px;background:var(--acc-s);font-size:12.5px}
.note{border-radius:12px;border-width:0;border-inline-start-width:4px;border-inline-start-style:solid}
.empty{padding:30px}

/* tables */
.grid-w{border:1px solid var(--line2);border-radius:var(--rad);box-shadow:var(--shd)}
.panel>.grid-w,.pos-box .grid-w{border-radius:0;box-shadow:none}
.grid{font-size:13.5px}
.grid th{background:var(--head);border-bottom:1px solid var(--line2);border-inline-start:0}
.grid th .sorter,.grid th .nos{padding:10px 12px;color:var(--muted);font-size:12.5px}
.grid th .sorter:hover{background:var(--sel);color:var(--acc)}
.grid td{padding:9px 12px;border-inline-start:0;border-bottom:1px solid var(--line2)}
.grid tbody tr:nth-child(even) td{background:transparent}
.grid tbody tr:hover td{background:var(--zebra)}
.grid tbody tr.sel td{background:var(--sel)}
.grid tbody tr.sel td:first-child{box-shadow:inset -3px 0 0 var(--acc)}
.grid tbody tr:last-child td{border-bottom:0}
.grid tfoot td{background:var(--head);border-top:1px solid var(--line)}
.tag{border-radius:999px;padding:1px 10px;line-height:1.6;font-weight:600}

/* controls */
input,select,textarea{border-radius:10px;border-color:var(--line);min-height:38px;padding:6px 11px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-s)}
input[disabled],select[disabled]{background:var(--win);color:var(--muted)}
.grid input,.grid select{min-height:32px;border-radius:8px}
.btn{border-radius:10px;min-height:38px;padding:0 16px;border-color:var(--line);transition:background .15s,box-shadow .15s,border-color .15s}
.btn:hover:not([disabled]){border-color:var(--acc)}
.btn.pri{box-shadow:0 4px 12px rgba(47,107,235,.25)}
.btn.ok{box-shadow:0 4px 12px rgba(22,163,74,.22)}
.btn.bad{background:var(--panel)}
.btn.bad:hover:not([disabled]){background:var(--bad-s);border-color:var(--bad)}
.btn.sm{min-height:30px;border-radius:8px;padding:0 11px}
.seg{border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px;background:var(--panel)}
.seg button{border:0;border-radius:8px;padding:5px 13px;color:var(--muted);font-weight:600}
.seg button.on{background:var(--acc-s);color:var(--acc)}
.seg button.on .c{background:var(--acc);color:var(--acc-ink)}
.fld label{font-weight:600}

/* home */
.tiles{gap:12px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.tile{border-radius:var(--rad);background:var(--panel);border:1px solid var(--line2);padding:18px 10px 14px;gap:10px;transition:transform .15s,box-shadow .15s,border-color .15s}
.tile svg{width:26px;height:26px;padding:12px;box-sizing:content-box;border-radius:14px;background:var(--acc-s);color:var(--acc)}
.tile:nth-child(4n+2) svg{background:var(--ok-s);color:var(--ok)}
.tile:nth-child(4n+3) svg{background:var(--violet-s);color:var(--violet)}
.tile:nth-child(4n+4) svg{background:var(--warn-s);color:var(--warn)}
.tile:hover{background:var(--panel);border-color:var(--acc);transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.1)}
.task{padding:11px 16px}
.task:hover{background:var(--zebra)}

/* dialogs */
.dlg-back{background:rgba(15,23,42,.45);backdrop-filter:blur(3px)}
.dlg{border:0;border-radius:18px;background:var(--panel);box-shadow:0 30px 80px rgba(15,23,42,.35)}
.dlg-t{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line2);padding:14px 14px 14px 10px;font-size:15px}
.dlg-t svg{width:22px;height:22px;padding:6px;box-sizing:content-box;border-radius:9px;background:var(--acc-s);color:var(--acc)}
.dlg-t .x{color:var(--muted);border-radius:9px;width:32px;height:32px}
.dlg-t .x:hover{background:var(--bad-s);color:var(--bad)}
.dlg-b{padding:18px}
.dlg-f{background:var(--win);border-top:1px solid var(--line2);padding:12px 18px}
.auth{background:radial-gradient(circle at 20% 10%,rgba(112,72,232,.25),transparent 45%),radial-gradient(circle at 85% 90%,rgba(47,107,235,.3),transparent 45%),linear-gradient(160deg,var(--side1),var(--side2))}
.auth .dlg{width:min(420px,100%)}
.auth .dlg-t svg{display:none}
.toast{border-radius:12px;border:1px solid var(--line2);border-inline-start:4px solid var(--c,var(--acc));box-shadow:0 12px 30px rgba(15,23,42,.18)}
.drawer{background:linear-gradient(180deg,var(--side1),var(--side2));color:#E6ECFA}
.drawer h3{color:inherit;opacity:.6}
.drawer button{color:inherit;border-radius:10px}
.drawer button svg{color:inherit;opacity:.85}
.drawer button:hover{background:rgba(255,255,255,.09)}
.drawer button.on{background:#fff;color:var(--side1)}
@media (max-width:600px){.kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kv div{padding:10px 12px}.kv b{font-size:16px}}
@media (max-width:900px){.titlebar{padding:6px 12px}.tabs{padding:8px 10px 0}.toolbar{padding:8px 10px 0}.content{padding:12px}.tb{padding:7px 10px}}
/* white page background */
body,.app,.content{background:#FFFFFF}
/* product editor: full page, data beside formula */
.dlg.full{width:100%;height:100%;max-height:none}
.dlg.full .dlg-b{flex:1;padding:18px 22px}
.pm-cols{display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,1.7fr);gap:18px;align-items:start}
.pm-cols>fieldset{margin:0}
@media (max-width:1000px){.pm-cols{grid-template-columns:minmax(0,1fr)}}

/* company identity */
.brand-f{display:grid;grid-template-columns:96px minmax(0,1.4fr) minmax(0,1fr);gap:12px 16px;align-items:start}
.brand-prev{width:96px;height:96px;border-radius:16px;border:1px dashed var(--line);display:grid;place-items:center;background:var(--win);overflow:hidden;color:var(--acc)}
.brand-prev img{max-width:84px;max-height:84px;object-fit:contain}
.brand-prev svg{width:54px;height:54px}
input[type=color]{padding:3px;height:42px;cursor:pointer}
.side-brand .logo img,.titlebar .logo img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.side-brand .logo.img{background:#fff;padding:4px}
.auth-logo{max-width:110px;max-height:80px;object-fit:contain}
.b-logo img{width:40px;height:40px;object-fit:contain}
@media (max-width:600px){.brand-f{grid-template-columns:1fr}}
/* delays */
.dl-r{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--win);border:1px solid var(--line2);margin-bottom:8px}
.dl-r.open{border-color:var(--bad);background:var(--bad-s)}
.dl-r>div{flex:1;min-width:0;line-height:1.5}
.dl-r p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.dl-b{flex:none;min-width:84px;text-align:center;padding:4px 8px;border-radius:9px;background:var(--bad);color:#fff;font-weight:700;font-size:12.5px}
/* admin dashboard */
.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.dash>.db-hero{grid-column:1/-1}
.panel-h .i{width:18px;height:18px;color:var(--acc);vertical-align:-3px;margin-inline-end:4px}
.db-bars{display:flex;align-items:flex-end;gap:6px;height:200px;padding-top:10px}
.db-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.db-col i{display:block;width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--acc),var(--side1));opacity:.75;transition:opacity .15s}
.db-col:hover i,.db-col.today i{opacity:1}
.db-col.today i{box-shadow:0 4px 12px rgba(47,107,235,.35)}
.db-v{font-size:10.5px;color:var(--muted);white-space:nowrap;min-height:14px}
.db-d{font-size:11.5px;color:var(--muted)}
.db-col.today .db-d{color:var(--acc);font-weight:700}
.db-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.db-stats>div{padding:10px 12px;border-radius:12px;background:var(--win);display:grid}
.db-stats small{font-size:12px;color:var(--muted)}
.db-stats b{font-size:20px}
.db-emp{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:start;padding:8px;border-radius:12px;cursor:pointer}
.db-emp:hover{background:var(--win)}
.db-rk{width:22px;text-align:center;font-weight:700;color:var(--muted)}
.db-en{display:grid;line-height:1.3;min-width:110px}
.db-en small{font-size:11.5px;color:var(--muted)}
.db-emp .pf-bar{flex:1}
@media (max-width:1000px){.dash{grid-template-columns:minmax(0,1fr)}.db-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =====================================================================
   enterprise theme: brand top bar, white menu bar, app launcher, dense tables
   ===================================================================== */
:root[data-theme]{
  --app:#FFFFFF;--win:#F4F6F9;--panel:#FFFFFF;--menu:#FFFFFF;--tool:#FFFFFF;
  --line:#D3D9E2;--line2:#E4E8EE;--ink:#1B2430;--muted:#5F6B7A;--head:#EEF1F5;--zebra:#F8F9FB;
  --acc:#1F5FAE;--acc-s:#E6EEF8;--sel:#E8F0FA;--sel-line:#1F5FAE;--side1:#17406F;--side2:#0F2C4F;--title:#17406F;
  --rad:6px;--shd:0 1px 2px rgba(16,24,40,.06);
}
body,.app,.content{background:#FFFFFF}
/* single-column shell on every screen size: the side menu is replaced by the top bars */
.side{display:none!important}
@media (min-width:901px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto}
  .app>*{grid-column:auto}
  .menubar{display:flex}
  .titlebar .logo,.titlebar .co,.titlebar .sub,.titlebar .who,.titlebar .tbtn{display:inline-flex}
  .titlebar .pg{display:none}
}
.titlebar{background:linear-gradient(90deg,var(--side1),var(--side2));color:#fff;border:0;min-height:52px;padding:6px 18px;gap:12px}
.titlebar .logo{width:34px;height:34px;padding:4px;border-radius:7px;background:rgba(255,255,255,.14);color:#fff;align-items:center;justify-content:center}
.titlebar .logo svg{width:24px;height:24px}
.titlebar .logo img{background:#fff;border-radius:5px}
.titlebar .co{font-size:16px;letter-spacing:.2px}
.titlebar .sub{color:rgba(255,255,255,.7);font-size:12.5px;padding-inline-start:12px;border-inline-start:1px solid rgba(255,255,255,.25)}
.titlebar .who{color:rgba(255,255,255,.85)}
.titlebar .today{display:block;background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:4px 10px;font-size:12.5px}
.tbtn{border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;padding:5px 12px;background:transparent}
.tbtn:hover{background:rgba(255,255,255,.14)}
.menubar{background:#fff;border-bottom:1px solid var(--line);padding:0 12px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.mi>button{border-radius:0;margin:0;padding:12px 16px;font-weight:600;color:var(--ink);border-bottom:3px solid transparent}
.mi>button:hover,.mi.open>button{background:var(--win);border-bottom-color:var(--acc);color:var(--acc)}
.dd{border-radius:6px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(16,24,40,.16);padding:6px;min-width:250px}
.dd button{border-radius:4px;padding:9px 12px}
.dd button:hover{background:var(--sel);color:var(--acc)}
.tabs{background:var(--win);border-bottom:1px solid var(--line);padding:6px 16px 0;gap:2px}
.tab{border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;padding:6px 14px;background:transparent;color:var(--muted);font-weight:600}
.tab:hover{background:#fff}
.tab.on{background:#fff;border-color:var(--line);box-shadow:none;color:var(--acc);margin-bottom:-1px;padding-bottom:7px;position:relative}
.tab.on::before{content:"";position:absolute;top:-1px;inset-inline:-1px;height:3px;border-radius:6px 6px 0 0;background:var(--acc)}
.toolbar{background:#fff;border-bottom:1px solid var(--line2);padding:8px 16px;gap:6px;min-height:0}
.tb{border-radius:6px;padding:7px 12px;border:1px solid var(--line);background:#fff;box-shadow:none;font-weight:600}
.tb:hover:not([disabled]){background:var(--sel);border-color:var(--acc);color:var(--acc)}
.tb.ok{background:var(--ok);border-color:var(--ok);color:#fff}.tb.ok svg{color:#fff}
.tb.ok:hover:not([disabled]){background:var(--ok);filter:brightness(1.07);color:#fff}
.content{padding:16px 20px 22px}
.statusbar{background:var(--side2);color:rgba(255,255,255,.8);border:0}
.statusbar span{border-inline-start-color:rgba(255,255,255,.15)}
/* app launcher */
.launch{margin:0 0 18px}
.launch-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:4px 2px 12px}
.launch-h h2{font-size:22px;color:var(--ink)}
.launch .tiles{padding:0;gap:14px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.launch .tile{background:transparent;border:0;box-shadow:none;padding:10px 6px;gap:9px;font-weight:600;font-size:13px;border-radius:10px}
.launch .tile:hover{background:var(--win);transform:none;box-shadow:none}
.launch .tile svg{width:30px;height:30px;padding:17px;border-radius:16px;color:#fff;background:#1F5FAE;box-shadow:0 6px 14px rgba(16,24,40,.16);transition:transform .15s}
.launch .tile:hover svg{transform:translateY(-3px)}
.launch .tile:nth-child(8n+1) svg{background:linear-gradient(135deg,#2F80ED,#1F5FAE)}
.launch .tile:nth-child(8n+2) svg{background:linear-gradient(135deg,#27AE60,#1E874B)}
.launch .tile:nth-child(8n+3) svg{background:linear-gradient(135deg,#F2994A,#D9741C)}
.launch .tile:nth-child(8n+4) svg{background:linear-gradient(135deg,#9B51E0,#7136B8)}
.launch .tile:nth-child(8n+5) svg{background:linear-gradient(135deg,#EB5757,#C93C3C)}
.launch .tile:nth-child(8n+6) svg{background:linear-gradient(135deg,#00A3BF,#007F95)}
.launch .tile:nth-child(8n+7) svg{background:linear-gradient(135deg,#F2C94C,#D4A517)}
.launch .tile:nth-child(8n+8) svg{background:linear-gradient(135deg,#56657A,#3B4757)}
.launch .tile .badge{top:2px;left:calc(50% - 40px)}
/* surfaces */
.panel{border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shd)}
.panel-h{background:var(--head);border-bottom:1px solid var(--line);padding:10px 14px;font-size:14px}
.kv{gap:10px}
.kv div{border-radius:var(--rad);border:1px solid var(--line);box-shadow:var(--shd);padding:12px 14px}
.kv div::before{top:0;bottom:0;width:4px;border-radius:0;opacity:1}
.kv b{font-size:18px}
fieldset{border:1px solid var(--line);border-radius:var(--rad);box-shadow:none;padding:12px 16px 14px}
legend{background:var(--side1);color:#fff;border-radius:4px;padding:3px 10px}
.note{border-radius:var(--rad)}
/* dense enterprise tables */
.grid-w{border:1px solid var(--line);border-radius:var(--rad);box-shadow:none}
.grid{font-size:13px}
.grid th{background:var(--head);border-bottom:2px solid var(--line);border-inline-start:1px solid var(--line2)}
.grid th .sorter,.grid th .nos{padding:8px 10px;color:var(--ink);font-size:12.5px;font-weight:700}
.grid td{padding:7px 10px;border-inline-start:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.grid th:first-child,.grid td:first-child{border-inline-start:0}
.grid tbody tr:nth-child(even) td{background:var(--zebra)}
.grid tbody tr:hover td{background:var(--sel)}
.grid tbody tr.sel td{background:#D6E4F5}
.grid tfoot td{background:var(--head);border-top:2px solid var(--line)}
.tag{border-radius:4px;padding:0 8px}
/* controls */
input,select,textarea{border-radius:5px;min-height:36px;border-color:var(--line)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--acc-s)}
.btn{border-radius:5px;min-height:36px}
.btn.pri{background:var(--acc);border-color:var(--acc);box-shadow:none}
.btn.ok{box-shadow:none}
.seg{border-radius:6px;border-color:var(--line);padding:2px}
.seg button{border-radius:4px}
.seg button.on{background:var(--acc);color:#fff}
/* dialogs */
.dlg{border-radius:8px}
.dlg-t{background:linear-gradient(90deg,var(--side1),var(--side2));color:#fff;border:0;padding:12px 14px 12px 10px}
.dlg-t svg{background:rgba(255,255,255,.16);color:#fff}
.dlg-t .x{color:#fff}
.dlg-t .x:hover{background:rgba(255,255,255,.18);color:#fff}
.dlg-f{background:var(--win)}
.auth{background:linear-gradient(160deg,var(--side1),var(--side2))}
/* invoice bon sheet follows the enterprise radius */
.iv{--r:8px;box-shadow:var(--shd);border-color:var(--line);min-height:420px}
.iv-head{background:var(--win);border-bottom-color:var(--line)}
.iv-t th{border-radius:0!important;background:var(--head);color:var(--ink);font-weight:700}
.iv-bar{background:var(--head);border-top-color:var(--line)}
.iv-net{border-radius:6px;box-shadow:none}
.iv .btn.lg{border-radius:6px}
/* mobile keeps the menu button inside the white bar */
@media (max-width:900px){.menubar{padding:0 6px}.titlebar .today,.titlebar .sub{display:none}}

/* home page: hero banner, KPI cards, launcher, order pipeline */
.home-x{display:grid;gap:16px;max-width:1500px;margin:0 auto}
.home-x>.home{margin:0}
.hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 28px;border-radius:12px;color:#fff;background:linear-gradient(120deg,var(--side1) 0%,var(--acc) 55%,#4f8de0 100%);box-shadow:0 10px 30px rgba(23,64,111,.25)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hero::before{width:320px;height:320px;top:-160px;left:-60px}
.hero::after{width:200px;height:200px;bottom:-110px;left:220px;background:rgba(255,255,255,.06)}
.hero-t{position:relative;z-index:1;display:grid;gap:4px}
.hero-k{font-size:14px;opacity:.85;font-weight:600}
.hero h1{font-size:30px;line-height:1.2;color:#fff}
.hero p{opacity:.85;font-size:13.5px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hc{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;font-weight:600;backdrop-filter:blur(4px)}
.hc .i{width:15px;height:15px}
.hc.w{background:rgba(255,193,7,.28)}.hc.b{background:rgba(255,82,82,.32)}.hc.g{background:rgba(255,255,255,.14)}
.hero-a{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
.hq{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:700;padding:11px 18px;border-radius:10px;cursor:pointer;transition:background .15s,transform .15s}
.hq:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.hq.pri{background:#fff;color:var(--side1);border-color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.hq .i{width:19px;height:19px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px}
.kpi{--kc:var(--acc);--ks:var(--acc-s);display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(16,24,40,.06);transition:box-shadow .15s,transform .15s;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--kc)}
.kpi:hover{box-shadow:0 8px 22px rgba(16,24,40,.1);transform:translateY(-2px)}
.kpi-i{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--ks);color:var(--kc)}
.kpi-i .i{width:24px;height:24px}
.kpi-b{display:grid;min-width:0;line-height:1.35}
.kpi-b small{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi-b b{font-size:19px;white-space:nowrap}
.trend{font-size:12px;font-weight:700;white-space:nowrap}
.trend small{font-weight:500;color:var(--muted)}
.trend.up{color:var(--ok)}.trend.down{color:var(--bad)}
.k-blue{--kc:#2F80ED;--ks:#E8F1FD}.k-green{--kc:#1E9E5A;--ks:#E3F5EB}.k-teal{--kc:#00A3BF;--ks:#E0F5F8}.k-orange{--kc:#E8811F;--ks:#FDF0E2}.k-red{--kc:#D64545;--ks:#FBE6E6}.k-violet{--kc:#7B4FD6;--ks:#F0EAFC}.k-gold{--kc:#C99A0C;--ks:#FBF4DC}
.launch.panel{margin:0}
.launch.panel .tiles{padding:16px}
.panel-h .i{width:18px;height:18px;color:var(--acc);vertical-align:-3px;margin-inline-end:4px}
.pipe{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.pipe-s{position:relative;display:grid;justify-items:center;gap:2px;padding:14px 6px 10px;border:1px solid var(--line2);border-top:4px solid var(--c);border-radius:8px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:background .15s,transform .15s}
.pipe-s:hover{background:var(--s);transform:translateY(-2px)}
.pipe-n{font-size:24px;font-weight:800;color:var(--c)}
.pipe-t{font-size:12px;font-weight:600;text-align:center;color:var(--muted)}
.pipe-i{position:absolute;top:6px;inset-inline-start:8px;font-size:10.5px;color:var(--muted)}
.task{border-radius:8px;margin:2px 6px;width:calc(100% - 12px)}
.task b.n{min-width:34px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--acc-s)}
@media (max-width:1100px){.pipe{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.hero{padding:20px}.hero h1{font-size:24px}.hero-a{width:100%}.hq{flex:1;justify-content:center}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:12px;gap:10px}.kpi-i{width:38px;height:38px}.kpi-b b{font-size:16px}}

/* quick search (Ctrl+K) and WhatsApp */
.tbtn.srch{flex:0 0 300px;width:300px;min-width:0;max-width:300px;gap:8px;padding:6px 12px;justify-content:flex-start;overflow:hidden;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);font-weight:500}
.tbtn.srch span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;opacity:.85}
.tbtn.srch kbd{flex:none;font:inherit;font-size:11px;line-height:1.5;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.18);letter-spacing:.3px;white-space:nowrap}
.titlebar .co{flex:none;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titlebar .sub{flex:none;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titlebar .who{flex:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg.cmdk{width:min(640px,100%);align-self:start;margin-top:8vh}
.dlg.cmdk .dlg-b{padding:12px}
.ck-q{min-height:48px;font-size:16px;border-radius:8px;padding-inline:14px}
.ck-l{max-height:min(60vh,460px);overflow:auto;margin-top:8px}
.ck-g{font-size:11.5px;font-weight:700;color:var(--muted);padding:10px 8px 4px}
.ck-r{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:start;padding:9px 10px;border-radius:7px;cursor:pointer}
.ck-r .i{width:20px;height:20px;color:var(--acc);flex:none}
.ck-r span{display:grid;min-width:0;line-height:1.35}
.ck-r small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-r:hover,.ck-r.hi{background:var(--sel)}
.ck-r.hi .i{color:var(--acc)}
.ck-k{margin:8px 4px 0;text-align:center}
.btn.wa{background:#25D366;border-color:#25D366;color:#fff;text-decoration:none}
.btn.wa:hover:not([disabled]){background:#1fb959;border-color:#1fb959;color:#fff}
@media (max-width:1720px){.titlebar .sub{display:none}}
@media (max-width:1460px){.titlebar .today{display:none}}
@media (max-width:1320px){.titlebar .who{display:none}}
@media (max-width:1180px){.tbtn.srch{flex:0 0 auto;width:auto;max-width:none}.tbtn.srch span,.tbtn.srch kbd{display:none}}
@media (max-width:900px){.titlebar .co{max-width:min(46vw,320px)}}

/* language button and left-to-right (French) adjustments */
.tbtn.lang{font-weight:700;letter-spacing:.2px}
.auth{position:relative}
.auth-lang{position:absolute;top:16px;inset-inline-end:16px;z-index:2}
[dir=ltr] body{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
[dir=ltr] .dd{right:auto;left:0}
[dir=ltr] .drawer{right:auto;left:0}
[dir=ltr] .grid tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
[dir=ltr] .tl li{padding:0 0 12px 22px}
[dir=ltr] .tl li::before{right:auto;left:5px}
[dir=ltr] .tl li::after{right:auto;left:0}
[dir=ltr] .pt-q{left:auto;right:7px}
[dir=ltr] .launch .tile .badge{left:auto;right:calc(50% - 40px)}
[dir=ltr] .hero::before{left:auto;right:-60px}
[dir=ltr] .hero::after{left:auto;right:220px}
/* movement detail (materials of a production, batch of a consumption) */
.mv-d{margin-top:4px;padding:5px 8px;border-radius:6px;background:var(--win);font-size:12px;line-height:1.6;color:var(--ink)}
.mv-d b{font-weight:700}
.mv-c{display:block;color:var(--acc);font-weight:600}
/* customer fiscal ids on invoices */
.b-pid{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;color:var(--pm);margin-top:3px}
.b-pid b{color:var(--pi)}

/* notifications: bell in the title bar, list, and clickable alert toast */
.tbtn.bell{position:relative;padding:5px 9px}
.tbtn.bell svg{width:18px;height:18px}
.tbtn.bell.on{background:rgba(255,255,255,.16)}
.tbtn.bell .nb{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px;background:#e53935;color:#fff;font-size:11px;font-weight:700;text-align:center}
.nf-item{display:block;width:100%;text-align:start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.nf-item:hover{border-color:var(--acc)}
.nf-item.unread{border-inline-start:4px solid var(--acc);background:var(--acc-s)}
.nf-item div{margin:3px 0;color:var(--ink)}
.toast.nf{--c:var(--acc);display:flex;gap:10px;align-items:flex-start;text-align:start;cursor:pointer;font:inherit;max-width:380px;padding:12px 16px}
.toast.nf svg{width:22px;height:22px;flex:none;color:var(--acc)}
/* expense request tracker */
.xr-track{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.xr-track span{flex:1;min-width:110px;padding:7px 10px;border-radius:6px;background:var(--app);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;text-align:center}
.xr-track .ok{background:#e7f6ec;border-color:#9fd7b0;color:#1d6b35}
.xr-track .cur{background:#fff4e0;border-color:#f0c47a;color:#8a5a00}
.xr-track .no{background:#fdecec;border-color:#f0a8a8;color:#a12a2a}

/* view-only creation screens */
.ro-lock{opacity:.6;pointer-events:none;user-select:none;filter:grayscale(.3)}
.note .ic,.note svg{vertical-align:-3px;margin-inline-end:6px}

/* KPI values: never cut, long amounts shrink */
.kpis{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.kpi-b{min-width:0;flex:1}
.kpi-b b{direction:ltr;unicode-bidi:isolate;text-align:start}
[dir=rtl] .kpi-b b{text-align:right}
.kpi-b b.l{font-size:17px}
.kpi-b b.xl{font-size:15px}
@media (max-width:600px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-b b.l{font-size:14px}.kpi-b b.xl{font-size:12.5px}}
@media (max-width:480px){.kpis{grid-template-columns:1fr}.kpi-b b,.kpi-b b.l,.kpi-b b.xl{font-size:17px}}

/* bon screen: customer search and shortcut strip */
.iv-csrch{position:relative}
.iv-csrch input{width:100%}
.iv-csug{min-width:300px;max-height:320px}
.iv-keys{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 22px 14px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}
.iv-keys svg{width:14px;height:14px;vertical-align:-2px;margin-inline-end:4px}
.iv-keys kbd{font:600 11px/1 ui-monospace,Consolas,monospace;direction:ltr;display:inline-block;min-width:22px;text-align:center;padding:3px 6px;margin-inline-end:5px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;background:var(--panel);color:var(--ink)}
@media (max-width:700px){.iv-keys{display:none}}

/* bon screen: new balance stands out */
.iv-kv .iv-newbal{border-inline-start:2px solid var(--line2);padding-inline-start:12px}
.iv-kv .iv-newbal b{font-size:1.08em}

/* =================== PHONE LAYOUT (≤ 760px): a real phone app, not a shrunk desktop =================== */
.bnav{display:none}
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  input,select,textarea{font-size:16px!important}               /* no automatic zoom when typing (iPhone) */
  .app{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important;width:100%;max-width:100vw;overflow-x:hidden}
  .app>*{min-width:0;max-width:100vw}
  .side,.tabs,.statusbar,.menubar{display:none!important}
  /* header: logo + name + icons only */
  .titlebar{gap:6px;padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px;flex-wrap:nowrap;overflow:hidden}
  .titlebar .sub,.titlebar .pg,.titlebar .today,.titlebar .who,.titlebar .tbtn.srch kbd,.titlebar .tbtn.srch span{display:none!important}
  .titlebar .co{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
  .titlebar .sp{display:none}
  .titlebar .tbtn{font-size:0;padding:7px 8px;min-width:0;flex:none}
  .titlebar .tbtn svg{width:19px;height:19px;margin:0}
  .titlebar .tbtn.lang{font-size:12px;padding:6px 8px}
  .titlebar .tbtn.bell,.titlebar [data-act="account"],.titlebar [data-act="logout"]{display:none}
  .titlebar .tbtn.srch{min-width:0!important}
  /* toolbar: one scrolling line of buttons */
  .toolbar,#tb{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;gap:6px;padding:8px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar>*{flex:none;white-space:nowrap}
  .toolbar .sep,.toolbar .tsep{display:none}
  .content{padding:10px 10px calc(78px + env(safe-area-inset-bottom,0px))!important;overflow-x:hidden}
  .cols2,.home-x{grid-template-columns:minmax(0,1fr)!important;display:grid;gap:12px}
  .filters{flex-wrap:wrap;gap:8px}
  .filters .seg,.seg{overflow-x:auto;max-width:100%;flex-wrap:nowrap}
  .fg{grid-template-columns:minmax(0,1fr)!important}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero{flex-direction:column;align-items:stretch;padding:18px!important}
  .hero-a{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .hq{justify-content:center;width:100%}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px}
  .tile span{font-size:11px}
  /* tables: every row becomes a card */
  .grid-w{overflow:visible!important;border:0!important;max-height:none!important}
  table.grid{min-width:0!important;width:100%;border:0;background:transparent}
  table.grid thead{display:none}
  table.grid tbody tr{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:6px 0;box-shadow:0 1px 3px rgba(16,24,40,.06)}
  table.grid tbody tr.sel,table.grid tbody tr.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-s)}
  table.grid tbody td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0!important;padding:5px 14px!important;text-align:end;white-space:normal!important;min-height:0;background:transparent!important}
  table.grid tbody td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;text-align:start;flex:none;max-width:45%}
  table.grid tbody td:not([data-l])::before,table.grid tbody td[data-l=""]::before{display:none}
  table.grid tbody td:first-child{font-size:15px}
  table.grid tbody td.empty{justify-content:center;color:var(--muted)}
  table.grid tbody td.empty::before{display:none}
  table.grid tfoot{display:block}
  table.grid tfoot tr{display:flex;justify-content:space-between;flex-wrap:wrap;background:var(--acc-s);border-radius:12px;padding:8px 14px;margin-bottom:10px}
  table.grid tfoot td{border:0!important;padding:2px 0!important}
  table.grid td input,table.grid td select{max-width:60%}
  /* dialogs: full screen */
  .dlg-back{padding:0!important;align-items:stretch!important}
  .dlg{width:100%!important;max-width:100%!important;height:100%;max-height:100%!important;border-radius:0!important;display:flex;flex-direction:column}
  .dlg-b{flex:1;overflow:auto;padding:14px!important}
  .dlg-f{flex-wrap:wrap;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important}
  .dlg-f .btn{flex:1 1 auto}
  .paper-wrap{padding:6px!important}
  /* bottom bar */
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(16,24,40,.08)}
  .bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--muted);font:inherit;font-size:11px;padding:4px 2px;border-radius:10px}
  .bnav button svg{width:22px;height:22px}
  .bnav button.on{color:var(--acc);background:var(--acc-s)}
  .bnav .nb{position:absolute;top:0;inset-inline-end:18%;min-width:17px;height:17px;line-height:17px;padding:0 4px;border-radius:9px;background:#e53935;color:#fff;font-size:10px;font-weight:700}
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  .drawer{width:min(320px,88vw)}
}

/* phone cards: keep the value inline (an amount and its currency stay together), title floats to the start */
@media (max-width:760px){
  table.grid tbody td{display:block!important;overflow:hidden;text-align:end}
  table.grid tbody td::before{float:right;margin-left:12px;line-height:inherit}
  [dir=ltr] table.grid tbody td::before{float:left;margin-left:0;margin-right:12px}
  table.grid tbody td.empty{text-align:center}
}@media (max-width:760px){.kv b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}.kv>div{padding:8px 10px}.kpi{padding:10px 12px}.kpi-i{width:38px;height:38px}}

/* phone: lines of the bon screen as cards (name on top, then quantity / price / amount) */
@media (max-width:760px){
  .iv-tw{overflow:visible!important;padding:0 10px}
  table.iv-t{min-width:0!important;width:100%;border:0}
  table.iv-t thead{display:none}
  table.iv-t tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-items:center;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;margin:0 0 10px}
  table.iv-t tbody td{border:0!important;padding:0!important;text-align:start;min-width:0}
  table.iv-t tbody td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}
  table.iv-t .iv-ix{display:none}
  table.iv-t .iv-pn{grid-column:1/-1;padding-inline-end:34px!important}
  table.iv-t .iv-pn::before{display:none!important}
  table.iv-t .iv-x{position:absolute;top:8px;inset-inline-end:8px}
  table.iv-t .iv-a{text-align:end;font-size:15px}
  table.iv-t .iv-q .qbox{width:100%;display:flex}
  table.iv-t .iv-q .qbox input{flex:1;min-width:0}
  table.iv-t .iv-p input,table.iv-t .iv-k input{width:100%}
  table.iv-t tbody tr:has(.iv-empty){display:block;border:0;background:none}
  .iv-bar{flex-wrap:wrap}
  .iv-act{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
}@media (max-width:760px){table.iv-t .iv-k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}table.iv-t .iv-k::before{width:100%}table.iv-t .iv-k input{flex:1;min-width:0}}

/* orders list: next-step buttons on each row */
.oq{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.oq .btn{white-space:nowrap}
@media (max-width:760px){.oq{width:100%;justify-content:stretch}.oq .btn{flex:1;padding:10px 8px;font-size:14px}}

/* last sale price to this customer, under the item of a bon line */
.lastp{display:block;width:100%;margin-top:4px;padding:2px 0 0;border:0;border-top:2px solid var(--bad);background:none;color:var(--bad);font:inherit;font-size:12px;text-align:start;cursor:pointer;white-space:normal}
.lastp b{font-weight:800}
.lastp:hover{background:var(--bad-s)}
.lastp.none{cursor:default;opacity:.75}
.lastp.none:hover{background:none}

/* full-screen lock while the main PC's USB key is missing */
#usb-lock{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,12,16,.92);backdrop-filter:blur(4px);color:#fff;font-family:inherit;direction:rtl}
#usb-lock .ul-box{max-width:440px;width:100%;text-align:center;background:#1b1f27;border:1px solid #3a2020;border-top:4px solid #e05252;border-radius:14px;padding:28px 22px}
#usb-lock .ul-ic{color:#ff7a7a;margin-bottom:8px}
#usb-lock h2{margin:0 0 10px;font-size:22px}
#usb-lock p{margin:0 0 10px;line-height:1.7;color:#dfe3ea}
#usb-lock .ul-fr{font-size:13px;color:#9aa3b2}
#usb-lock .ul-wait{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:#9aa3b2}
#usb-lock .ul-wait span{width:14px;height:14px;border:2px solid #555;border-top-color:#ff7a7a;border-radius:50%;animation:ulspin 1s linear infinite}
@keyframes ulspin{to{transform:rotate(360deg)}}
@media print{#usb-lock{display:none}}