@font-face{font-family:Cairo;src:url(/assets/fonts/Cairo-var.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--bg:#07090d;--bg2:#0c1017;--card:#11161f;--card2:#151b26;--line:#1f2733;--tx:#eef2f7;--mu:#8b97a8;--ac:#d9b779;--ok:#34d399;--bad:#f87171;--warn:#fbbf24;--r:18px;--sh:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:Cairo,"Noto Sans Arabic",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
body{min-height:100svh;background:radial-gradient(1200px 600px at 50% -10%,#121925 0%,transparent 60%),var(--bg)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block}
.muted{color:var(--mu)}

#splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(70vmax 70vmax at 50% 45%,#10151d 0%,#07090d 62%);transition:opacity .35s ease}
#splash img{width:min(78vw,520px);height:auto;opacity:0;transform:scale(.97);animation:lg .45s cubic-bezier(.2,.7,.2,1) .05s forwards}
#splash.out{opacity:0;pointer-events:none}
@keyframes lg{to{opacity:1;transform:none}}

.screen{min-height:100svh;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));animation:vin .4s cubic-bezier(.2,.7,.2,1)}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top img.logo{height:34px;width:auto}
.top .date{font-size:13px;color:var(--mu)}
.foot{text-align:center;font-size:11px;letter-spacing:.35em;color:var(--mu);margin-top:auto;padding-top:18px}

.card{background:linear-gradient(160deg,#141a24,#0e131b);border:1px solid rgba(255,255,255,.05);border-radius:24px;box-shadow:var(--sh);padding:22px}
h1{font-size:28px;margin:0 0 8px;font-weight:800}
h2{font-size:18px;margin:0 0 8px}
.lead{color:var(--mu);margin:0 0 16px;line-height:1.6}

label.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mu);margin:12px 0}
input[type="text"],input[type="password"],input[type="number"]{background:#0c1118;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:18px;outline:none}
input:focus{border-color:rgba(217,183,121,.55)}
.btn{border:0;border-radius:14px;padding:14px 18px;background:var(--ac);color:#1a1408;font-weight:800;font-size:17px}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn.warn{background:#3a2a12;color:var(--warn);border:1px solid rgba(251,191,36,.35)}
.btn.bad{background:#3a1518;color:#fecaca}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}

.home-main{flex:1;display:grid;align-content:center;gap:16px;width:min(560px,100%);margin:0 auto}
.store-name{font-size:34px;font-weight:800}
.emp{color:var(--ac);font-size:15px}

.warn-card{border-color:rgba(251,191,36,.35);background:linear-gradient(180deg,rgba(251,191,36,.08),#121820)}
.warn-card h2{color:var(--warn)}
.order{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.order b{font-size:16px}
.order span{color:var(--mu);font-size:13px}
.pill{display:inline-block;background:rgba(248,113,113,.12);color:#fecaca;border-radius:999px;padding:2px 8px;font-size:12px}

.workspace{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px;align-items:start;margin-top:12px}
.dock{position:sticky;top:12px;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:10px 8px;text-align:center}
.dock .count{font-size:42px;font-weight:800;color:var(--ac);line-height:1;letter-spacing:-.03em}
.dock small{color:var(--mu);font-size:11px}
.dock .btn{font-size:13px;padding:10px 6px;line-height:1.25}

.stage{min-width:0;overflow:hidden}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:auto;max-height:calc(100svh - 210px)}
.sheet.locked{opacity:.42;filter:grayscale(.4);pointer-events:none}
table.grid{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
table.grid th,table.grid td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;text-align:right}
table.grid th{color:var(--mu);font-weight:600;position:sticky;top:0;background:#121820}
table.grid tr.unk td{background:rgba(251,191,36,.08)}
table.grid tr.dup td{background:rgba(248,113,113,.12)}
table.grid td.name{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.icon-x{border:0;background:transparent;color:var(--bad);font-size:18px;padding:0 6px}

.scanbar{display:flex;gap:8px;margin:10px 0}
.scanbar input{flex:1;font-size:16px;padding:12px 14px}
.banner{border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px}
.banner.warn{background:rgba(251,191,36,.12);color:#fde68a}
.banner.bad{background:rgba(248,113,113,.12);color:#fecaca}
.banner.ok{background:rgba(52,211,153,.1);color:#a7f3d0}

.setup{display:flex;flex-direction:column;gap:12px}
.photo-btn{display:grid;place-items:center;min-height:140px;border:1px dashed rgba(217,183,121,.45);border-radius:18px;color:var(--ac);background:rgba(217,183,121,.05);text-align:center;padding:16px}
.photo-btn img{max-height:160px;border-radius:12px}
.thumbrow{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.mini{min-width:140px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;font-size:12px;color:var(--mu)}
.mini b{display:block;color:var(--tx);font-size:14px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;z-index:40;padding:18px}
.modal .card{width:min(440px,100%)}
.progress{height:14px;background:#0b0f15;border-radius:999px;overflow:hidden;margin:18px 0}
.progress span{display:block;height:100%;background:linear-gradient(270deg,var(--ac),#b8925a);width:0;transition:width .3s ease}

.reader{width:100%;min-height:240px;border-radius:16px;overflow:hidden;background:#000}

.result{overflow:auto}
.result table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.result th,.result td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
.result .short{display:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--mu);font-size:12px;margin:0 0 10px}
.result td:first-child,.result th:first-child{text-align:right;position:sticky;right:0;background:#121820}
.result tr.total td{font-weight:800;background:#1a140c;color:var(--ac)}
.result tr.head td{background:#0e131b;color:var(--mu);font-weight:700}
.neg{color:var(--bad)}.pos{color:var(--ok)}

.tiles{display:grid;gap:12px}
@media (min-width:900px){.tiles.two{grid-template-columns:1fr 1fr}.home-main{width:min(880px,100%)}}
.linkbox{background:#0c1118;border-radius:12px;padding:12px;word-break:break-all;direction:ltr;text-align:left;font-size:14px}
.age{color:var(--ac);font-size:13px}

@media (max-width:759px){
  table.grid{min-width:0}
  table.grid .wide{display:none}
  table.grid td.name{white-space:normal;max-width:42vw}
  .result table{min-width:0;font-size:12px}
  .result .full{display:none}
  .result .short{display:inline}
  .scanbar{flex-direction:column}
  .scanbar .btn{padding:12px;font-size:15px}
}
@media (max-width:420px){
  .workspace{grid-template-columns:minmax(0,1fr) 92px}
  .dock .count{font-size:34px}
  h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#splash img{opacity:1;transform:none}}
/* manual entry (2026-11-03) */
.manualbox{position:relative;margin:0 0 10px}
.manualrow{display:flex;gap:8px}
.manualrow input{flex:1;font-size:16px;padding:12px 14px;border:1px dashed var(--ac)}
.picklist{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:360px;overflow:auto}
.picklist:empty{display:none}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:right;width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:inherit;font:inherit;cursor:pointer}
.pick:hover,.pick:focus{border-color:var(--ac);outline:none}
.pick-name{font-size:14px}
.pick-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;opacity:.75}
.pick-meta b{color:var(--ac);font-weight:600}
.pick-empty{font-size:13px;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pick-empty.warn{background:rgba(251,191,36,.12);color:#fde68a;border-color:transparent}
.badge.manual{display:inline-block;margin-inline-start:6px;background:rgba(217,183,121,.16);color:var(--ac);border-radius:999px;padding:1px 7px;font-size:11px;vertical-align:middle}
@media (max-width:759px){.manualrow .btn{min-width:84px}}
/* branch stock tile above the frame counter (2026-11-03) */
.stocktile{display:flex;flex-direction:column;gap:2px;padding:6px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.stocktile .stock{font-size:26px;font-weight:800;color:var(--tx,#f5f1e8);line-height:1.05;letter-spacing:-.02em}
.stocktile small{font-size:11px;color:var(--mu)}
.stocktile small.late{color:var(--ac);font-size:10px;line-height:1.3}
@media (max-width:420px){.stocktile .stock{font-size:22px}}
/* column-shift fix (2026-11-03): .num is inline-block; a <td class="num"> left the table-cell flow
   and merged with its neighbour, so every cell after the barcode moved one header to the left. */
table.grid td,table.grid th{display:table-cell}
table.grid td.wide,table.grid th.wide{display:table-cell}
table.grid .c-del{text-align:center;width:44px}
table.grid .c-qty{text-align:center}
table.grid .unk-name{color:var(--warn);font-weight:600}
@media (max-width:759px){table.grid .wide{display:none}}
td.num,th.num{display:table-cell}
/* scan table = "gard" tab of the scan sheet: LTR, English headers, black header with white bold text,
   double rules, bold centred cells, large barcode. Widths follow the sheet's column widths. */
table.grid.scansheet{direction:ltr;table-layout:fixed;font-family:Calibri,Carlito,"Segoe UI",Cairo,system-ui,sans-serif;font-size:14px;min-width:900px}
table.grid.scansheet th,table.grid.scansheet td{text-align:center;font-weight:700;padding:6px 8px;border:0;border-bottom:3px double rgba(255,255,255,.10);border-right:3px double rgba(255,255,255,.06);height:33px;overflow:hidden;text-overflow:ellipsis}
table.grid.scansheet th{background:#000;color:#fff;font-size:14px;border-bottom:3px double var(--ac);position:sticky;top:0}
table.grid.scansheet td.c-barcode{font-size:18px;letter-spacing:.01em}
table.grid.scansheet td.c-name{text-align:left;max-width:none;white-space:nowrap}
table.grid.scansheet td.c-ref{text-align:left}
table.grid.scansheet td.c-price{text-align:right}
@media (min-width:760px){
  table.grid.scansheet th.c-serial{width:4.2%}table.grid.scansheet th.c-barcode{width:13.5%}table.grid.scansheet th.c-ref{width:13.5%}
  table.grid.scansheet th.c-brand{width:10.5%}table.grid.scansheet th.c-cat{width:11%}
  table.grid.scansheet th.c-price{width:8.5%}table.grid.scansheet th.c-qty{width:5.2%}table.grid.scansheet th.c-del{width:5.5%}
}
table.grid.scansheet .badge.manual{font-size:10px;font-family:Cairo,system-ui,sans-serif}
table.grid.scansheet .unk-name{font-family:Cairo,system-ui,sans-serif}
@media (max-width:759px){
  table.grid.scansheet{min-width:0;font-size:13px;table-layout:auto}
  table.grid.scansheet td.c-barcode{font-size:15px}
  table.grid.scansheet td.c-name{white-space:normal;font-size:12px}
}
@media (max-width:759px){table.grid td.wide,table.grid th.wide{display:none}}
#sheet{direction:ltr}
@media (max-width:759px){
  table.grid.scansheet th,table.grid.scansheet td{padding:5px 4px;font-size:12px}
  table.grid.scansheet td.c-barcode{font-size:13px;letter-spacing:0}
  table.grid.scansheet td.c-name{font-size:11px;word-break:break-word}
  table.grid.scansheet .c-serial{width:22px}table.grid.scansheet .c-qty{width:30px}table.grid.scansheet .c-del{width:34px}
}