/* SHABAB VAN SALES 1.0 — themes (Fresh Market default, Citrus, Navy Gold), fonts, the van sell screen, Daily Price Editor, picture library, bill done.
   Mobile first: phone 360–430 px and handhelds are the main screens; PC (1280 px) gets a cart panel and wide tables. All sizes in CSS px. */

/* ---------- fonts (SIL Open Font License, files in web/fonts) ---------- */
@font-face{font-family:'Plus Jakarta Sans';src:url(../fonts/plus-jakarta-sans-latin-var.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';src:url(../fonts/plus-jakarta-sans-latinext-var.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Kufi Arabic';src:url(../fonts/noto-kufi-arabic-arabic-var.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
html[data-font=fresh]{--font:'Plus Jakarta Sans','Noto Kufi Arabic','Segoe UI',Tahoma,sans-serif;--disp:'Plus Jakarta Sans','Noto Kufi Arabic','Segoe UI',sans-serif}
html[data-font=fresh] .ptitle h1,html[data-font=fresh] .kpi .v,html[data-font=fresh] h1.disp{font-weight:800;letter-spacing:-.6px}
[dir=rtl] body,.ar,[dir=rtl] .ptitle h1{font-family:'Noto Kufi Arabic',Tajawal,var(--font)}
.ar{direction:rtl;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}

/* ---------- themes ---------- */
html[data-theme=fresh]{--bg:#FFF8EC;--panel:#FFFFFF;--panel2:#FFFCF5;--line:#EFE6D4;--line2:#F6EFE1;--ink:#1E2A22;--muted:#6B776E;--accent:#2E8B3E;--accent-ink:#FFFFFF;--accent-soft:#E8F3E3;--accent-dark:#1F6B2E;
  --gold:#F28C28;--gold-soft:#FFF0DC;--side:#14351E;--side-ink:#D9EED7;--ok:#1F7A3A;--ok-soft:#E3F3E4;--warn:#B45309;--warn-soft:#FEF0DC;--bad:#D23B24;--bad-soft:#FDE7E2;
  --shadow:0 1px 0 #EFE6D4,0 4px 14px rgba(30,42,34,.06);--hdr:linear-gradient(135deg,#2E8B3E 0%,#1F6B2E 100%);--hdr-ink:#FFFFFF;--chip-on:#1E2A22;--pay:#2E8B3E;--pay-ink:#fff;--cart:#1E2A22;--tomato:#E24A33}
html[data-theme=citrus]{--bg:#FFFDF5;--panel:#FFFFFF;--panel2:#FFFBEF;--line:#F1EBD6;--line2:#F8F3E2;--ink:#2B2A26;--muted:#77736A;--accent:#E06B00;--accent-ink:#FFFFFF;--accent-soft:#FFF1D6;--accent-dark:#B35300;
  --gold:#7CB518;--gold-soft:#EEF6DC;--side:#2B2A26;--side-ink:#F6EFD9;--ok:#4C8A0E;--ok-soft:#ECF5DD;--warn:#B45309;--warn-soft:#FEF0DC;--bad:#C93A1E;--bad-soft:#FDE8E2;
  --shadow:0 1px 0 #F1EBD6,0 4px 14px rgba(43,42,38,.06);--hdr:linear-gradient(135deg,#FFB627 0%,#FF8A1F 100%);--hdr-ink:#2B1A00;--chip-on:#E24A33;--pay:#FF8A1F;--pay-ink:#2B1A00;--cart:#2B2A26;--tomato:#E24A33}
html[data-theme=navygold]{--bg:#F2F4F9;--panel:#FFFFFF;--panel2:#F7F8FC;--line:#E4E8F0;--line2:#EDF0F6;--ink:#14213D;--muted:#66728A;--accent:#0B2A6F;--accent-ink:#FFFFFF;--accent-soft:#E6ECF8;--accent-dark:#06194A;
  --gold:#C8961E;--gold-soft:#FBF3DD;--side:#0B2A6F;--side-ink:#C9D3EA;--ok:#13804A;--ok-soft:#E2F5EA;--warn:#B45309;--warn-soft:#FEF0DC;--bad:#C62828;--bad-soft:#FDE8E8;
  --shadow:0 1px 2px rgba(6,25,74,.05),0 8px 24px rgba(6,25,74,.06);--hdr:linear-gradient(135deg,#0B2A6F 0%,#06194A 100%);--hdr-ink:#FFFFFF;--chip-on:#0B2A6F;--pay:#E3B341;--pay-ink:#14213D;--cart:#06194A;--tomato:#E24A33}
html[data-theme=navygold] .side{background:linear-gradient(180deg,#0B2A6F 0%,#06194A 100%)}
html[data-theme=navygold] .nav a.on{background:rgba(227,179,65,.16);color:#F6D27A;box-shadow:inset 3px 0 0 #E3B341}
html[data-theme=navygold] .btn.gold,html[data-theme=navygold] .btn.pri.goldb{background:linear-gradient(135deg,#F0C75A,#E3B341 60%,#C8961E);border-color:#C8961E;color:#14213D}
html[data-theme=fresh] .nav a.on,html[data-theme=citrus] .nav a.on{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
html[data-theme=fresh] .nav a:hover,html[data-theme=citrus] .nav a:hover,html[data-theme=navygold] .nav a:hover{background:rgba(255,255,255,.08)}
html[data-theme=fresh] .nav .g,html[data-theme=citrus] .nav .g,html[data-theme=navygold] .nav .g{color:color-mix(in srgb,var(--side-ink) 70%,transparent)}
html[data-theme=fresh] .brand small,html[data-theme=citrus] .brand small,html[data-theme=navygold] .brand small{color:var(--gold)}
html[data-theme=fresh] .maker,html[data-theme=citrus] .maker,html[data-theme=navygold] .maker{background:rgba(0,0,0,.22);color:#F3E3B5}
.brand .logo{border-radius:14px}

/* ---------- RTL fixes for the engine's shell ---------- */
[dir=rtl] .side{border-right:0;border-left:1px solid var(--line)}
[dir=rtl] .nav .g{text-align:right}
[dir=rtl] .top .who{margin-left:0;margin-right:auto}
[dir=rtl] .nav .lock{margin-left:0;margin-right:auto}
@media (max-width:820px){[dir=rtl] .side{left:auto;right:-280px;transition:right .2s}[dir=rtl] .side.open{right:0;left:auto}}

/* ---------- splash (phone) ---------- */
.splash{position:fixed;inset:0;z-index:9999;background:radial-gradient(120% 80% at 50% 42%,#21407F 0%,#172C5E 55%,#0E1D45 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .35s}
.splash img{width:min(92vw,430px);height:auto;max-height:78vh;object-fit:contain}
.splash-foot{position:absolute;left:0;right:0;bottom:max(28px,env(safe-area-inset-bottom));text-align:center;color:#C9D3EA;font:600 11.5px/1.7 'Plus Jakarta Sans',sans-serif;letter-spacing:2.4px}
.splash-foot b{display:block;color:#E3B341;font-size:13px;letter-spacing:3px}
.splash-foot i{display:block;width:120px;height:4px;border-radius:4px;margin:0 auto 14px;background:linear-gradient(90deg,#E3B341 0 55%,rgba(255,255,255,.18) 55%);animation:vsload 1.1s ease-in-out infinite alternate}
@keyframes vsload{to{background:linear-gradient(90deg,#E3B341 0 100%,rgba(255,255,255,.18) 100%)}}
.splash.out{opacity:0;pointer-events:none}

/* =====================================================================
   SELL SCREEN (#/pos) — big picture tiles, slide-up quantity sheet, cart bar
   ===================================================================== */
body.vs-on .top{display:none}
body.vs-on .page{padding:0;gap:0}
body.vs-on #sbai-btn{display:none!important}
.vs{--g:12px;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;position:relative;padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.vs-top{background:var(--hdr);color:var(--hdr-ink);padding:max(10px,env(safe-area-inset-top)) 0 14px;border-radius:0 0 22px 22px;box-shadow:0 6px 18px rgba(0,0,0,.12);position:sticky;top:0;z-index:15}
.vs-bar{display:flex;align-items:center;gap:10px;padding:2px 12px 10px}
.vs-bar .vs-menu{width:42px;height:42px;border-radius:12px;border:0;background:rgba(255,255,255,.16);color:inherit;display:grid;place-items:center;cursor:pointer;flex:none}
.vs-bar img{width:40px;height:40px;border-radius:11px;box-shadow:0 2px 6px rgba(0,0,0,.25);flex:none}
.vs-bar .t{min-width:0;flex:1}
.vs-bar .t1{font-weight:800;font-size:16px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-bar .t2{font-size:11.5px;opacity:.88;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-sync{white-space:nowrap;flex:none;font-size:11px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.2);display:flex;gap:6px;align-items:center;color:inherit;border:0}
.vs-sync i{width:8px;height:8px;border-radius:50%;background:#7CE38B;display:inline-block}
.vs-sync.off i{background:#FFD54A}
.vs-cust{margin:0 12px;background:var(--panel);color:var(--ink);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.10);border:0;width:calc(100% - 24px);text-align:start;cursor:pointer;min-height:64px}
.vs-av{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;font-size:22px;flex:none}
.vs-cn{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-cs{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.vs-pill{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.vs-credit{margin-inline-start:auto;text-align:end;flex:none}
.vs-credit small{display:block;font-size:9.5px;color:var(--muted);font-weight:800;letter-spacing:.4px}
.vs-credit b{font-size:14px;white-space:nowrap}
.vs-meter{height:5px;background:#EEE;border-radius:9px;margin-top:4px;width:84px;overflow:hidden;margin-inline-start:auto}
.vs-meter i{display:block;height:100%;background:var(--accent)}
.vs-meter.bad i{background:var(--bad)}
.vs-tools{display:flex;gap:8px;padding:12px 12px 0}
.vs-search{flex:1;min-width:0;height:46px;border-radius:13px;background:var(--panel);border:1.5px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:8px;color:var(--muted)}
.vs-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px;font-weight:600;color:var(--ink)}
.vs-sq{width:46px;height:46px;border-radius:13px;background:var(--panel);border:1.5px solid var(--line);display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink)}
.vs-cats{display:flex;gap:7px;padding:10px 12px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vs-cats::-webkit-scrollbar{display:none}
.vs-chip{display:inline-flex;align-items:center;gap:6px;padding:0 14px;height:40px;border-radius:999px;font-size:13px;font-weight:800;background:var(--panel);border:1.5px solid var(--line);color:var(--ink);flex:none;cursor:pointer;white-space:nowrap}
.vs-chip .d{width:9px;height:9px;border-radius:50%}
.vs-chip.on{color:#fff;border-color:transparent;background:var(--chip-on)}
.vs-chip.on .d{background:#fff!important}
.vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:2px 12px 12px}
@media (min-width:600px){.vs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vs-tile{background:var(--panel);border-radius:16px;padding:8px 9px 10px;position:relative;box-shadow:0 1px 0 var(--line),0 3px 10px rgba(30,42,34,.06);border:0;border-top:4px solid var(--cc,#2E8B3E);text-align:start;cursor:pointer;color:var(--ink);min-width:0;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.vs-tile:active{transform:scale(.97)}
.vs-tile.sel{outline:2.5px solid var(--accent);outline-offset:-2.5px}
.vs-pic{height:74px;border-radius:12px;display:grid;place-items:center;margin-bottom:7px;background:color-mix(in srgb,var(--cc,#2E8B3E) 13%,#fff);overflow:hidden}
.vs-pic img{width:56px;height:56px;object-fit:contain;pointer-events:none}
.vs-pic img.own{width:100%;height:100%;object-fit:cover}
.vs-pic .ph0{font-size:30px;font-weight:800;color:var(--cc)}
.vs-nm{font-weight:800;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-na{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Noto Kufi Arabic',Tajawal,sans-serif;direction:rtl;text-align:start}
[dir=ltr] .vs-na{text-align:left}
.vs-pr{display:flex;align-items:baseline;gap:4px;margin-top:5px;flex-wrap:wrap}
.vs-pr b{font-size:20px;font-weight:800;letter-spacing:-.4px}
.vs-pr span{font-size:10.5px;color:var(--muted);font-weight:800}
.vs-stk{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}
.vs-stk.low{color:var(--bad)}
.vs-qb{position:absolute;top:12px;inset-inline-end:12px;background:var(--accent);color:#fff;font-weight:800;font-size:11.5px;padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.vs-pe{position:absolute;top:12px;inset-inline-start:12px;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--accent-dark);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.vs-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 12px;font-weight:700}
/* cart bar + bottom nav */
.vs-cartbar{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));height:64px;border-radius:18px;background:var(--cart);color:#fff;display:flex;align-items:center;padding:0 8px 0 16px;box-shadow:0 10px 26px rgba(0,0,0,.28);z-index:30;border:0;cursor:pointer;text-align:start}
[dir=rtl] .vs-cartbar{padding:0 16px 0 8px}
.vs-cartbar .c1{font-size:11.5px;opacity:.78;font-weight:700}
.vs-cartbar .c2{font-size:21px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.vs-pay{margin-inline-start:auto;height:48px;padding:0 22px;border-radius:14px;background:var(--pay);color:var(--pay-ink);font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;flex:none}
.vs-cartbar.empty{opacity:.55}
.vs-nav{position:fixed;left:0;right:0;bottom:0;height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;z-index:29}
.vs-nav a,.vs-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--muted);background:none;border:0;cursor:pointer;min-width:58px;min-height:52px;justify-content:center;font-family:inherit}
.vs-nav .on{color:var(--accent)}
.vs-nav svg{width:22px;height:22px}
/* sheets (quantity, price, customer, pay): slide up from the bottom, the list stays visible above */
.vs-dim{position:fixed;inset:0;background:rgba(20,30,22,.26);z-index:60;animation:vsfade .15s}
.vs-sheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;background:var(--panel);border-radius:26px 26px 0 0;box-shadow:0 -12px 34px rgba(0,0,0,.22);padding:8px 16px calc(14px + env(safe-area-inset-bottom));z-index:61;overflow:auto;animation:vsup .2s ease-out;color:var(--ink)}
.vs-sheet.tall{height:88vh;height:88dvh}
@keyframes vsup{from{transform:translateY(100%)}to{transform:none}}
@keyframes vsfade{from{opacity:0}}
.vs-handle{width:44px;height:5px;border-radius:9px;background:#D9D3C5;margin:2px auto 10px}
.vs-sh-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.vs-sh-h h3{font-size:18px;font-weight:800;flex:1}
.vs-x{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.vs-it{display:flex;gap:12px;align-items:center}
.vs-it .vs-pic{width:56px;height:56px;margin:0;flex:none;border-radius:16px}
.vs-it .vs-pic img{width:48px;height:48px}
.vs-it .n1{font-weight:800;font-size:17px;line-height:1.2}
.vs-it .n2{font-size:12px;color:var(--muted);font-family:'Noto Kufi Arabic',Tajawal,sans-serif}
.vs-it .n3{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.vs-it .px{margin-inline-start:auto;text-align:end;flex:none}
.vs-it .px small{display:block;font-size:10.5px;color:var(--muted);font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.vs-it .px b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.vs-it .px .mn{font-size:11.5px;color:var(--muted);font-weight:700}
.vs-link{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;background:none;border:0;font:inherit;font-weight:800;cursor:pointer;padding:4px 0}
.vs-seg{display:flex;background:var(--bg);border-radius:13px;padding:3px;margin:10px 0 8px;gap:4px}
.vs-seg button{flex:1;text-align:center;padding:4px 0;border-radius:10px;font-weight:800;font-size:13.5px;color:var(--muted);border:0;background:none;cursor:pointer;min-height:44px;font-family:inherit}
.vs-seg button small{display:block;font-size:10.5px;font-weight:700}
.vs-seg button.on{background:var(--panel);color:var(--accent-dark);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.vs-qrow{display:flex;align-items:center;gap:10px}
.vs-qbtn{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent-dark);font-size:28px;font-weight:800;display:grid;place-items:center;border:0;cursor:pointer;flex:none}
.vs-qv{flex:1;min-width:0;height:52px;border-radius:14px;border:2.5px solid var(--accent);display:flex;align-items:center;justify-content:center;gap:6px}
.vs-qv b{font-size:30px;font-weight:800;letter-spacing:-.5px}
.vs-qv span{font-size:15px;font-weight:800;color:var(--muted)}
.vs-quick{display:flex;gap:7px;margin:8px 0}
.vs-quick button{flex:1;text-align:center;min-height:40px;border-radius:11px;border:1.5px solid var(--line);font-size:13px;font-weight:800;background:var(--panel);cursor:pointer;color:var(--ink);font-family:inherit;padding:0 4px;white-space:nowrap}
.vs-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.vs-keys button{height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:800;border:0;cursor:pointer;color:var(--ink);font-family:inherit}
.vs-keys button:active{background:var(--accent-soft)}
.vs-keys .add{grid-row:span 2;height:auto;background:var(--accent);color:#fff;font-size:15px;text-align:center;line-height:1.3;padding:8px 4px}
.vs-keys .add small{display:block;font-size:13px;font-weight:700;opacity:.95;margin-top:6px}
.vs-keys .rm{color:var(--bad)}
.vs-note{font-size:12px;color:var(--muted);font-weight:600;margin-top:8px}
.vs-warn{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 12px;font-weight:700;font-size:13px;margin-top:10px}
.vs-ok{background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:10px 12px;font-weight:700;font-size:13px;margin-top:10px}
.vs-in{width:100%;height:56px;border-radius:14px;border:2.5px solid var(--accent);font-size:28px;font-weight:800;text-align:center;background:var(--panel);color:var(--ink);font-family:inherit;letter-spacing:.5px}
.vs-in.code{letter-spacing:8px}
.vs-btn{width:100%;min-height:56px;border-radius:16px;border:0;background:var(--accent);color:#fff;font-size:17px;font-weight:800;cursor:pointer;margin-top:12px;font-family:inherit}
.vs-btn.dark{background:var(--cart)}
.vs-btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.vs-btn:disabled{opacity:.55}
/* customer list */
.vs-clist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.vs-crow{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);cursor:pointer;text-align:start;color:var(--ink);min-height:62px;font-family:inherit;width:100%}
.vs-crow.on{border-color:var(--accent);background:var(--accent-soft)}
/* cart lines (pay sheet / PC cart panel) */
.vs-lines{display:flex;flex-direction:column;gap:6px}
.vs-line{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--bg)}
.vs-line .vs-pic{width:44px;height:44px;margin:0;flex:none;border-radius:11px}
.vs-line .vs-pic img{width:34px;height:34px}
.vs-line .ln{flex:1;min-width:0}
.vs-line .ln b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-line .ln small{font-size:12px;color:var(--muted);font-weight:700}
.vs-line .ln small.ed{color:var(--gold)}
.vs-line .lt{font-weight:800;white-space:nowrap}
.vs-line button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;flex:none;color:var(--ink)}
.vs-tot{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.vs-tot div{display:flex;justify-content:space-between;font-weight:700;font-size:13.5px;padding:3px 2px;color:var(--muted)}
.vs-tot div.g{font-size:20px;color:var(--ink);font-weight:800}
.vs-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vs-methods button{min-height:56px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);font-weight:800;cursor:pointer;color:var(--ink);font-family:inherit;font-size:14px}
.vs-methods button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.vs-methods button:disabled{opacity:.4}
.vs-row2{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.vs-row2 label{font-weight:700;font-size:13px;display:flex;gap:8px;align-items:center;min-height:40px}
.vs-row2 input[type=checkbox]{width:22px;height:22px}
/* bill done */
.vs-done{position:fixed;inset:0;z-index:70;background:var(--bg);overflow:auto;padding:0 0 calc(24px + env(safe-area-inset-bottom))}
.vs-done .vs-top{position:static}
.vs-done-in{max-width:560px;margin:0 auto;padding:0 16px}
.vs-check{width:118px;height:118px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;margin:18px auto 8px}
.vs-check i{width:86px;height:86px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff}
.vs-done h2{text-align:center;font-size:22px;font-weight:800}
.vs-done .meta{text-align:center;color:var(--muted);font-weight:700;font-size:13px;margin-top:4px}
.vs-done .big{text-align:center;font-size:40px;font-weight:800;letter-spacing:-1px;margin:6px 0}
.vs-done .chipline{display:flex;justify-content:center}
.vs-done .chipline span{background:var(--accent-soft);color:var(--accent-dark);font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:999px;text-align:center}
.vs-done .chipline span.warn{background:var(--warn-soft);color:var(--warn)}
.vs-sum{background:var(--panel);border-radius:18px;padding:12px 14px;margin:14px 0;box-shadow:var(--shadow)}
.vs-sum div{display:flex;justify-content:space-between;font-weight:700;color:var(--muted);padding:3px 0}
.vs-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs-act{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--panel);border:1.5px solid var(--line);cursor:pointer;text-align:start;color:var(--ink);min-height:68px;font-family:inherit;min-width:0}
.vs-act .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none}
.vs-act b{display:block;font-size:16px}
.vs-act small{display:block;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-act .tx{min-width:0}
.vs-act.print{grid-column:1/-1;background:var(--accent);color:#fff;border-color:transparent}
.vs-act.print small{color:rgba(255,255,255,.88)}
.vs-act.print .ic{background:rgba(255,255,255,.18)}
.vs-next{display:flex;gap:10px;margin-top:14px}
.vs-next button{flex:1}
/* PC: tiles left, cart panel right */
.vs-side{display:none}
@media (min-width:1000px){
  body.vs-on .top{display:flex}
  .vs{padding-bottom:20px;min-height:0}
  .vs-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start;padding:0 16px 16px}
  .vs-top{position:static;border-radius:0 0 22px 22px;margin:0 16px}
  .vs-bar .vs-menu{display:none}
  .vs-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));padding:2px 0 12px}
  .vs-tools,.vs-cats{padding-left:0;padding-right:0}
  .vs-cartbar,.vs-nav{display:none}
  .vs-side{display:block;position:sticky;top:76px;background:var(--panel);border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line);padding:14px;margin-top:12px;max-height:calc(100vh - 96px);overflow:auto}
  .vs-side h3{font-size:16px;font-weight:800;margin-bottom:8px}
  .vs-sheet{left:50%;right:auto;width:560px;transform:translateX(-50%);bottom:16px;border-radius:26px;animation:none}
  .vs-done .vs-top{margin:0}
}

/* =====================================================================
   DAILY PRICE EDITOR (#/prices) + price lists + pictures
   ===================================================================== */
.dpe-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dpe-bar .in{height:42px}
.dpe-ver{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-dark);padding:6px 12px;border-radius:999px;font-weight:800;font-size:12.5px}
.dpe-tw{overflow:auto;max-width:100%}
table.dpe{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.dpe th{position:sticky;top:0;background:var(--panel2);z-index:2;text-align:start;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dpe td{padding:6px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
table.dpe tr.ch td{background:color-mix(in srgb,var(--gold) 9%,transparent)}
table.dpe .pic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--cc,#2E8B3E) 13%,#fff)}
table.dpe .pic img{width:30px;height:30px}
table.dpe .nm b{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis}
table.dpe .nm small{color:var(--muted);font-size:11.5px}
table.dpe input{width:92px;height:40px;border-radius:10px;border:1.5px solid var(--line);text-align:end;font-weight:800;font-size:15px;padding:0 8px;background:var(--panel);color:var(--ink);font-family:inherit}
table.dpe input.today{border-color:var(--accent);width:100px}
table.dpe input.mn{width:84px;font-weight:700;font-size:13.5px}
table.dpe input.lp{width:84px;font-weight:700;font-size:13px}
table.dpe input.fx{border-color:var(--gold);background:var(--gold-soft)}
table.dpe input:focus{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.dpe-up{color:var(--bad);font-weight:800}.dpe-dn{color:var(--ok);font-weight:800}.dpe-eq{color:var(--muted)}
.dpe-low{color:var(--bad);font-weight:800}
.dpe-save{position:sticky;bottom:12px;display:flex;justify-content:flex-end;z-index:5;pointer-events:none}
.dpe-save .btn{pointer-events:auto;box-shadow:0 10px 26px rgba(0,0,0,.2)}
@media (max-width:820px){
  .dpe-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dpe-bar>label.search{grid-column:1/-1}
  .dpe-bar>.row{grid-column:1/-1;display:grid!important;grid-template-columns:70px 1fr 1fr}
  table.dpe thead{display:none}
  table.dpe,table.dpe tbody{display:block;width:100%}
  table.dpe tr{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:10px;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:"pic nm nm hist" "pic y ch ch" "today today today today" "mn mn cost cost" "lists lists lists lists";gap:6px 10px;align-items:center}
  table.dpe tr.ch{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 6%,var(--panel))}
  table.dpe tr.ch td{background:transparent}
  table.dpe td{display:block;border:0;padding:0;white-space:normal;min-width:0}
  table.dpe td.c-pic{grid-area:pic;align-self:start}
  table.dpe td.c-nm{grid-area:nm}
  table.dpe td.c-hist{grid-area:hist;justify-self:end;align-self:start}
  table.dpe td.c-y{grid-area:y}
  table.dpe td.c-ch{grid-area:ch;text-align:end}
  table.dpe td.c-today{grid-area:today}
  table.dpe td.c-mn{grid-area:mn}
  table.dpe td.c-cost{grid-area:cost}
  table.dpe td.c-lists{grid-area:lists}
  table.dpe td[data-l]{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:700}
  table.dpe td[data-l]::before{content:attr(data-l);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:800}
  table.dpe td.c-ch[data-l]{align-items:flex-end}
  table.dpe input.today{width:100%;height:50px;font-size:20px}
  table.dpe input{width:100%}
  table.dpe .nm b{max-width:none}
  table.dpe td.c-lists .row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dpe-save{bottom:calc(10px + env(safe-area-inset-bottom))}
}
.pl-l{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);font-weight:700}
/* picture library */
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.pics button{border:1.5px solid var(--line);background:var(--panel);border-radius:14px;padding:8px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);font-family:inherit;min-height:96px}
.pics button img{width:52px;height:52px}
.pics button span{font-size:11.5px;font-weight:700;text-align:center;line-height:1.2}
.pics button.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent) inset}
.pics button.sug{border-color:var(--gold)}
.picbtn{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:14px;padding:8px 10px;background:var(--panel2);cursor:pointer;min-height:64px;width:100%;color:var(--ink);font-family:inherit;text-align:start}
.picbtn img{width:48px;height:48px;object-fit:contain}
.ipic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--cc,#2E8B3E) 13%,#fff);flex:none}
.ipic img{width:34px;height:34px;object-fit:contain}
.ipic img.own{width:44px;height:44px;object-fit:cover;border-radius:11px}
.units-ed{display:flex;flex-direction:column;gap:6px}
.units-ed .ur{display:grid;grid-template-columns:1.1fr 1fr 1.2fr 1fr 40px;gap:6px;align-items:center}
@media (max-width:560px){.units-ed .ur{grid-template-columns:1fr 1fr 40px}.units-ed .ur .bc,.units-ed .ur .upr{grid-column:span 1}}
/* dashboard */
.vdash-hero{background:var(--hdr);color:var(--hdr-ink);border-radius:20px;padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.vdash-hero h1{font-size:26px;font-weight:800;letter-spacing:-.5px}
.vdash-hero p{opacity:.9;font-weight:600;margin-top:2px}
.vdash-hero .btns{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.vdash-hero .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25);color:inherit}
.vdash-hero .btn.gold{background:linear-gradient(135deg,#F0C75A,#E3B341 60%,#C8961E);color:#14213D;border-color:#C8961E}
.vkpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.vkpi{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);min-width:0}
.vkpi small{display:block;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:800}
.vkpi b{display:block;font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vkpi span{font-size:12px;color:var(--muted);font-weight:700}
.vkpi.hero{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.vkpi.hero small,.vkpi.hero span{color:color-mix(in srgb,var(--accent-ink) 80%,transparent)}
.vbars div{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:5px 0;font-weight:700;font-size:13px}
.vbars i{display:block;height:10px;border-radius:9px;background:var(--accent)}
.vtop div{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line2);font-weight:700;font-size:13px}
.vtop img{width:28px;height:28px}
.vtop span{margin-inline-start:auto;color:var(--muted)}
.vcode{font-size:44px;font-weight:800;letter-spacing:10px;text-align:center;padding:14px;border-radius:18px;background:var(--accent-soft);color:var(--accent-dark);font-variant-numeric:tabular-nums}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:start}
.matrix input{width:22px;height:22px}
body.vs-on #toasts{top:max(12px,env(safe-area-inset-top));bottom:auto}
table.dpe .nm small{display:block}
/* phone: engine pages never scroll sideways */
@media (max-width:560px){
  #page .row{flex-wrap:wrap}
  #page .row>label.f{flex:1 1 140px;min-width:0}
  #page input.in,#page select.in{max-width:100%;min-width:0}
  #page .pill{white-space:normal}
  #page .card{max-width:100%;overflow-wrap:anywhere}
  #page .card>table.t{display:block;overflow-x:auto}
}
@media (max-width:560px){
  #page .row>.row{flex:1 1 100%;min-width:0}
  #page .btn{white-space:normal;max-width:100%;text-align:center;height:auto;min-height:40px}
}
@media (min-width:821px){
  .dpe-bar .in{width:auto}
  .dpe-bar label.search{flex:1 1 260px}
  table.dpe td.c-lists .row{flex-wrap:nowrap!important}
  table.dpe input.lp{width:76px}
}
@media (max-width:820px){#page .split{grid-template-columns:minmax(0,1fr)!important}}
@media (min-width:821px){table.dpe .pl-n{display:none}table.dpe input.lp{width:68px;font-size:12.5px;padding:0 6px}table.dpe td.c-lists .row{gap:4px!important}table.dpe th:nth-last-child(2){white-space:normal;max-width:300px}}
@media (min-width:821px){table.dpe td,table.dpe th{padding:5px 4px}table.dpe input.today{width:88px}table.dpe input.mn{width:74px}table.dpe input.lp{width:62px}table.dpe .nm b{max-width:170px}}

/* =====================================================================
   PHASE 2 — van day screens (Today, load, stock, unload + count, wastage, expenses, settlement, route), collections, ageing, crates, pre-orders
   Phone first (360–430 px): one column, big touch targets; PC: two / three columns.
   ===================================================================== */
.vday{max-width:1180px;margin:0 auto;width:100%;min-width:0}
.vday .ptitle{flex-wrap:wrap;gap:8px}
.bad{color:var(--bad)!important}.okc{color:var(--ok)!important}
.vt-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--hdr);color:var(--hdr-ink);border-radius:22px;padding:16px;box-shadow:var(--shadow);flex-wrap:wrap}
.vt-hero .l{display:flex;align-items:center;gap:12px;min-width:0}
.vt-hero h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.3px}
.vt-hero p{margin:2px 0 0;opacity:.85;font-weight:600;font-size:13px}
.vt-hero .pill{background:rgba(255,255,255,.2);color:inherit;border:0}
.vt-van{display:inline-grid;place-items:center;min-width:54px;height:40px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.18);font-weight:800;font-size:15px;white-space:nowrap}
.card .vt-van,.vt-vc .vt-van{background:var(--accent-soft);color:var(--accent-dark)}
.vt-vanbar{margin:12px 0}.vt-vanbar select,.vt-vsel{height:46px;font-weight:700;max-width:100%}
.vt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.vt-kpis.three{grid-template-columns:repeat(3,1fr)}
.vt-kpis>div{background:var(--panel);border-radius:16px;padding:12px;box-shadow:var(--shadow);min-width:0}
.vt-kpis small{display:block;color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.vt-kpis b{display:block;font-size:22px;font-weight:800;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-kpis span{display:block;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-h{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:18px 2px 8px;font-weight:800}
.vt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vt-step{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--panel);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;min-height:68px;min-width:0}
.vt-step:hover{border-color:var(--accent)}
.vt-step .i{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;font-size:21px;flex:none}
.vt-step .t{min-width:0}.vt-step b{display:block;font-size:15.5px}
.vt-step small{display:block;color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-step.go{background:var(--pay);border-color:transparent;color:var(--pay-ink)}.vt-step.go .i{background:rgba(255,255,255,.22)}.vt-step.go small{color:inherit;opacity:.85}
.vt-step.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}.vt-step.done .i{background:var(--ok-soft)}.vt-step.done small{color:var(--ok)}
.vt-alert{margin-top:14px;background:var(--warn-soft);color:var(--warn);border-radius:14px;padding:12px 14px;font-weight:700;display:flex;gap:14px;flex-wrap:wrap}.vt-alert a{color:inherit}
.vt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vt-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vt-mini>div{background:var(--panel2);border-radius:10px;padding:7px 8px;min-width:0}.vt-mini small{display:block;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase}.vt-mini b{font-size:15px}
.vt-wait h2{margin-top:0}.vt-wl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
.vt-seg{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap;align-items:center}
.vt-seg a,.vt-seg button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer;font-family:inherit}
.vt-seg .on{background:var(--chip-on);border-color:var(--chip-on);color:#fff}
.vt-seg .on .pill{background:rgba(255,255,255,.2);color:#fff}
.vt-dpick input{height:40px;border-radius:999px;border:1.5px solid var(--line);padding:0 12px;font-family:inherit;font-weight:700;background:var(--panel);color:var(--ink)}
.vt-note{background:var(--accent-soft);color:var(--accent-dark);border-radius:12px;padding:10px 12px;font-weight:700;font-size:13px;margin:8px 0}
.vt-list{display:flex;flex-direction:column;gap:8px}
.vt-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--panel);border:1.5px solid var(--line);min-width:0;color:var(--ink);text-decoration:none}
.vt-row.diff{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn-soft) 55%,var(--panel))}
.vt-btnrow{cursor:pointer;width:100%;text-align:start;font-family:inherit;font-size:inherit}
.vt-row .vs-pic,.vt-pi .vs-pic,.vt-pickbtn .vs-pic{width:44px;height:44px;margin:0;flex:none;border-radius:11px}
.vt-row .vs-pic img,.vt-pi .vs-pic img,.vt-pickbtn .vs-pic img{width:34px;height:34px}
.vt-row .n,.vt-pi .n,.vt-pickbtn .n{flex:1;min-width:0}
.vt-row .n b,.vt-pi .n b,.vt-pickbtn .n b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.vt-row .n small,.vt-pi .n small,.vt-pickbtn .n small{display:block;color:var(--muted);font-weight:600;font-size:12px;line-height:1.35}
.vt-row>b.num{font-size:16px;white-space:nowrap}
.vt-two{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}.vt-two b{font-size:16px;white-space:nowrap}.vt-two small{color:var(--muted);font-weight:700;font-size:12px}
.vt-qty{display:flex;align-items:center;gap:6px;flex:none}
.vt-qty input{width:86px;height:46px;text-align:center;font-size:18px;font-weight:800;border-radius:12px}
.vt-qty select{height:46px;width:auto;max-width:96px;border-radius:12px;font-weight:700}
.vt-qty .u{font-weight:800;color:var(--muted);min-width:34px;font-size:13px}
.vt-rm{width:36px;height:36px;border-radius:10px;border:0;background:var(--line2);color:var(--muted);cursor:pointer;flex:none;font-size:14px}
.vt-keep{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);margin-top:4px}
.vt-diff{font-size:16px;min-width:56px;text-align:end}
.vt-meta{color:var(--muted);font-weight:700;font-size:13px;margin:4px 0 10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vt-tot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;margin-top:10px;border-radius:14px;background:var(--panel2);font-weight:700;flex-wrap:wrap}.vt-tot b{font-size:18px}
.vt-search{margin:10px 0;width:100%}
.vt-form{display:flex;flex-direction:column;gap:6px}
.vt-pickbtn{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;border:2px dashed var(--line);background:var(--panel2);cursor:pointer;text-align:start;font-family:inherit;color:var(--ink);min-height:62px;width:100%}
.vt-qtyrow{display:flex;gap:8px;margin-top:6px}.vt-qtyrow input.big,.in.big{height:56px;font-size:26px;font-weight:800;text-align:center}.vt-qtyrow select{width:auto;height:56px;font-weight:700}
.vt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.vt-chips button{min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-weight:800;color:var(--ink);cursor:pointer;font-family:inherit;font-size:13.5px}
.vt-chips button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.vt-chips.col{flex-direction:column}.vt-chips.col button{border-radius:14px;min-height:50px;text-align:start}
.vt-thumb{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1.5px solid var(--line)}
.vt-pick{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.vt-pi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);cursor:pointer;text-align:start;font-family:inherit;color:var(--ink);width:100%}
.vt-pi .q{font-weight:800;white-space:nowrap}
.vt-two-sel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* settlement */
.vt-cols{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px;align-items:start}
.vt-ft{width:100%;border-collapse:collapse}.vt-ft td{padding:6px 0;border-bottom:1px solid var(--line2);font-weight:600}.vt-ft td.num{text-align:end;white-space:nowrap}.vt-ft small{color:var(--muted)}
.vt-ft tr.g td{font-weight:800;font-size:17px;border-bottom:0;padding-top:10px}
.vt-notes{display:flex;flex-direction:column;gap:6px}
.vt-note-row{display:grid;grid-template-columns:50px 10px 42px minmax(54px,1fr) 42px minmax(70px,auto);gap:6px;align-items:center}
.vt-note-row .dn{font-weight:800;font-size:16px;text-align:end}.vt-note-row .x{color:var(--muted);font-weight:800}
.vt-note-row button{height:42px;border-radius:11px;border:1.5px solid var(--line);background:var(--panel);font-size:20px;font-weight:800;cursor:pointer;color:var(--ink)}
.vt-note-row input{height:42px;text-align:center;font-weight:800;font-size:17px;border-radius:11px;min-width:0}
.vt-note-row b{text-align:end;white-space:nowrap}
.vt-res{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding:14px;border-radius:16px;font-weight:800;flex-wrap:wrap}
.vt-res .r{font-size:19px}.vt-res.OK{background:var(--ok-soft);color:var(--ok)}.vt-res.SHORT{background:var(--bad-soft);color:var(--bad)}.vt-res.EXCESS{background:var(--warn-soft);color:var(--warn)}
.vt-card{display:grid;grid-template-columns:minmax(0,1fr) 100px 40px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2)}
.vt-card .n b{display:block}.vt-card .n small{color:var(--muted);font-weight:600}.vt-card input{height:42px;text-align:end;font-weight:800}.vt-card>b{text-align:end;white-space:nowrap}
.vt-card:has(> b:nth-child(2)){grid-template-columns:1fr auto}
.vt-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.vt-actions .vs-btn{width:auto;flex:1;min-width:220px;margin-top:0}
/* route */
.vt-custs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vt-cust{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.vt-cust.done{background:color-mix(in srgb,var(--ok-soft) 45%,var(--panel))}
.vt-cust .hd{display:flex;gap:10px;align-items:center}.vt-cust .n{flex:1;min-width:0}.vt-cust .n b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vt-cust .n small{color:var(--muted);font-weight:600;font-size:12px}
.vt-vis{display:flex;gap:4px}.vt-vis span{width:28px;height:28px;border-radius:50%;background:var(--ok-soft);display:grid;place-items:center;font-size:13px;font-weight:800}
.vt-cust .tags{display:flex;gap:6px;flex-wrap:wrap}.vt-cust .tags span{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.vt-cust .tags .pre{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}.vt-cust .tags .bad{background:var(--bad-soft);border-color:transparent}
.vt-cust .acts{display:flex;gap:6px;flex-wrap:wrap}.vt-cust .acts .btn{min-height:40px}
/* collections, ageing */
.vt-bills{display:flex;flex-direction:column;gap:6px}
.vt-bill{display:grid;grid-template-columns:1fr auto 110px;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.vt-bill.od{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}.vt-bill .n b{display:block;font-family:ui-monospace,monospace;font-size:13px}.vt-bill .n small{color:var(--muted);font-weight:600;font-size:11.5px}
.vt-bill .o{font-weight:800;color:var(--muted)}.vt-bill input{height:38px;text-align:end;font-weight:800}.vt-bill>b{text-align:end}
.vt-filters{flex-wrap:wrap;gap:8px;margin:8px 0}.vt-filters select,.vt-filters input{height:44px;width:auto;max-width:100%}
.vt-age{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0 14px}
.vt-age>div{background:var(--panel);border-radius:16px;padding:12px;box-shadow:var(--shadow);position:relative;overflow:hidden;min-width:0}
.vt-age small{display:block;color:var(--muted);font-weight:800;font-size:11.5px;text-transform:uppercase}.vt-age b{display:block;font-size:20px;font-weight:800;margin-top:2px;white-space:nowrap}
.vt-age i{position:absolute;left:0;bottom:0;height:5px;border-radius:0 4px 0 0}
.vt-age .b0 i{background:var(--ok)}.vt-age .b30 i{background:#E0A800}.vt-age .b60 i{background:var(--warn)}.vt-age .b90 i{background:var(--bad)}.vt-age .b90 b{color:var(--bad)}
.vt-age .tt{background:var(--hdr);color:var(--hdr-ink)}.vt-age .tt small,.vt-age .tt span{color:inherit;opacity:.85}.vt-age .tt span{font-size:12px;font-weight:700}
.vt-steppers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.vt-steppers>div{display:grid;grid-template-columns:auto 48px 1fr 48px;gap:6px;align-items:center;background:var(--panel2);border-radius:14px;padding:8px}
.vt-steppers small{font-weight:800;color:var(--muted);padding:0 4px}.vt-steppers b{text-align:center;font-size:22px}
.vt-steppers button{height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);font-size:22px;font-weight:800;cursor:pointer;color:var(--ink)}
.vt-cacts{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0}
.vt-cact{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;background:var(--panel2);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-weight:800;font-size:12px;text-align:center}
.vt-cact span{font-size:20px}
/* sell screen: mode banner, crates, split, return condition, PDF size */
.vs-mode{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 12px 0;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.18);color:inherit;font-weight:700;font-size:13.5px;border:0;width:calc(100% - 24px);font-family:inherit;text-align:start;cursor:default}
.vs-mode.preorder{background:#FFE7B8;color:#6B4200}.vs-mode.return{background:#FFD9D2;color:#8A1F0F}
.vs-mode button{border:0;background:rgba(0,0,0,.12);color:inherit;font-weight:800;border-radius:10px;padding:7px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.vs-mode.pre{cursor:pointer}.vs-mode .go{background:rgba(255,255,255,.25);border-radius:10px;padding:6px 10px;font-weight:800;white-space:nowrap}
div.vs-mode.pre{cursor:default}
.vs-crates{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin:10px 0;padding:10px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.vs-crates .ct{font-weight:800;font-size:13.5px;min-width:0}.vs-crates .ct small{display:block;color:var(--muted);font-weight:600;font-size:11.5px}
.vs-crates .cg{display:grid;grid-template-columns:36px 30px 36px;grid-template-rows:auto 36px;gap:2px 4px;align-items:center;text-align:center}
.vs-crates .cg small{grid-column:1/-1;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase}
.vs-crates .cg button{height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--panel);font-size:18px;font-weight:800;cursor:pointer;color:var(--ink)}
.vs-crates .cg b{font-size:18px}
.vs-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.vs-two .vs-in{font-size:20px;height:50px}
.vs-methods.m4{grid-template-columns:repeat(4,1fr)}.vs-methods.m4 button{font-size:13px;padding:0 2px}
.vs-cond{display:flex;gap:4px;flex:none}.vs-cond button{min-height:36px;padding:0 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--panel);font-weight:800;font-size:12.5px;cursor:pointer;color:var(--ink);font-family:inherit}
.vs-cond button.on.good{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}.vs-cond button.on.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.vs-paper{display:flex;gap:6px;align-items:center;justify-content:center;margin:0 0 12px}.vs-paper span{font-weight:800;color:var(--muted);font-size:12px}
.vs-paper button{min-height:34px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-weight:800;font-size:12.5px;cursor:pointer;color:var(--ink);font-family:inherit}
.vs-paper button.on{background:var(--chip-on);border-color:var(--chip-on);color:#fff}
.vs-act.busy{opacity:.6;pointer-events:none}.vs-act.busy .ic{animation:vspulse 1s ease-in-out infinite alternate}
@keyframes vspulse{to{transform:scale(.88)}}
/* phone */
@media (max-width:1000px){.vt-cols{grid-template-columns:1fr}.vt-board{grid-template-columns:1fr 1fr}.vt-age{grid-template-columns:repeat(3,1fr)}.vt-age .tt{grid-column:1/-1}}
@media (max-width:700px){
  .vt-kpis{grid-template-columns:1fr 1fr}.vt-kpis.three{grid-template-columns:repeat(3,1fr)}.vt-kpis.three b{font-size:18px}
  .vt-steps{grid-template-columns:1fr 1fr}.vt-board,.vt-custs{grid-template-columns:1fr}
  .vt-step{padding:10px;gap:10px;min-height:64px}.vt-step .i{width:38px;height:38px;font-size:19px}.vt-step b{font-size:14px}
  .vt-row{flex-wrap:wrap}.vt-row .n{flex-basis:calc(100% - 60px)}.vt-qty{margin-inline-start:auto}
  .vt-row:not(:has(.vt-qty)){flex-wrap:nowrap}.vt-row:not(:has(.vt-qty)) .n{flex-basis:auto}
  .vt-cacts{grid-template-columns:repeat(3,1fr)}
  .vt-age{grid-template-columns:1fr 1fr}
  .vt-bill{grid-template-columns:1fr auto;}.vt-bill input,.vt-bill>b{grid-column:1/-1}
  .vt-note-row{grid-template-columns:48px 10px 40px 1fr 40px 76px}
  .vt-card{grid-template-columns:1fr 104px 46px}
  .vt-two-sel{grid-template-columns:1fr}
  .vt-actions .vs-btn{min-width:100%}
  .vt-hero h1{font-size:18px}
  .vs-methods.m4{grid-template-columns:repeat(2,1fr)}
}
#pyAp,#coAp{text-transform:uppercase}
[dir=rtl] .vt-kpis b,[dir=rtl] .vt-mini b{direction:ltr;unicode-bidi:isolate;text-align:right}

/* =====================================================================
   PHASE 3 — the green VAN HEADER on every van-staff phone page (Today, load, route, collect, settlement …) + bottom van menu.
   Office logins and the PC (821 px +) keep the office top bar.
   ===================================================================== */
.vanhdr,.vtnav,.side-me{display:none}
.vanhdr{background:var(--hdr);color:var(--hdr-ink);padding:max(10px,env(safe-area-inset-top)) 0 14px;box-shadow:0 6px 18px rgba(0,0,0,.12);position:sticky;top:0;z-index:15}
.vs-sync.warn i{background:#FF8A65}.vs-sync.busy i{background:#9FE7FF;animation:vsPulse 1s infinite alternate}.vs-sync.warn{background:rgba(255,120,80,.32)}
@keyframes vsPulse{from{opacity:.35}to{opacity:1}}
button.vs-sync{cursor:pointer;font-family:inherit}
@media (max-width:820px){
  body.vanstaff .top{display:none}
  body.vanstaff .vanhdr{display:block;border-radius:0 0 20px 20px;padding-bottom:10px}
  body.vanstaff .vanhdr .vs-bar{padding-bottom:2px}
  body.vanstaff .vanhdr .vtback[hidden],body.vanstaff .vanhdr img[hidden]{display:none}
  body.vanstaff .vtnav{display:flex}
  body.vanstaff .page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body.vanstaff .side-me{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border-top:1px solid color-mix(in srgb,var(--side-ink) 15%,transparent);margin-top:auto}
  body.vanstaff .side-me .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  body.vanstaff #sbai-btn{bottom:calc(84px + env(safe-area-inset-bottom))!important}
  body.vanstaff.vs-on .vanhdr,body.vanstaff.vs-on .vtnav{display:none}
}
/* the Sync page (this phone) */
.sy-hero{display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:var(--hdr);color:var(--hdr-ink)}
.sy-hero .big{font-size:22px;font-weight:800}.sy-hero small{display:block;opacity:.85;font-weight:600}
.sy-dot{width:16px;height:16px;border-radius:50%;background:#7CE38B;flex:none;box-shadow:0 0 0 5px rgba(255,255,255,.18)}.sy-dot.off{background:#FFD54A}.sy-dot.warn{background:#FF8A65}.sy-dot.busy{background:#9FE7FF}
.sy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sy-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}.sy-grid small{display:block;color:var(--muted);font-weight:700;font-size:11px;letter-spacing:.4px;text-transform:uppercase}.sy-grid b{font-size:20px}
.sy-rec{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.sy-rec .n{flex:1;min-width:0}.sy-rec .n b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sy-rec .n small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sy-rec .st{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.sy-rec .st.wait{background:#FFF3C4;color:#7A5A00}.sy-rec .st.held,.sy-rec .st.clash{background:#FFE1D8;color:#A53214}
.sy-pr{display:flex;gap:12px;align-items:center}.sy-pr .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);font-size:24px;flex:none}
.vt-off{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:#FFF3C4;color:#5C4400;font-weight:700;font-size:13px}
[data-theme=navygold] .sy-hero,[data-theme=shabab] .sy-hero{background:linear-gradient(135deg,#0B2A6F,#06194A)}
@media (min-width:821px){ .sy-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 1.0.1 phone menu: dark area behind it (tap = close), ✕ button, above the van header / bottom bar */
.side-bg,.side-x{display:none}
@media (max-width:820px){
  .side{z-index:81}
  body.side-on .side-bg{display:block;position:fixed;inset:0;z-index:80;background:rgba(10,20,12,.45);animation:vsfade .15s}
  body.side-on{overflow:hidden}
  .side .brand{position:relative}
  .side-x{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;flex:none;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:inherit;font-size:18px;cursor:pointer}
}