:root{--bg:#f1f5f9;--card:#fff;--ink:#0f172a;--mute:#64748b;--line:#e2e8f0;--brand:#0a8fe0;--brand2:#0877b8;--bad:#b91c1c;--warn:#b45309;--ok:#15803d}
*{box-sizing:border-box}
body{margin:0;font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.hidden{display:none!important}
header.top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:5}
header.top b{font-size:17px}header.top small{opacity:.8}header.top .sp{flex:1}
header.top a,header.top button{color:#fff;text-decoration:none;background:#ffffff26;border:0;border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer}
header.top a.on{background:var(--accent,#00a8ff);color:#fff;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
button.btn{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:9px 14px;background:var(--brand);color:#fff;font-weight:600}
button.btn:hover{background:var(--brand2)}button.btn.sec{background:#e2e8f0;color:var(--ink)}button.btn:disabled{opacity:.5}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
label{display:block;font-size:12px;color:var(--mute);margin:8px 0 3px}
.card{background:var(--card);border-radius:12px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px #0001}
.card h2,.card h3{margin:0 0 10px}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 1px 2px #0001}
.kpi .l{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}.kpi .v{font-size:24px;font-weight:800;margin-top:2px}.kpi .s{font-size:12px;color:var(--mute)}
table{width:100%;border-collapse:collapse}
th,td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
th{font-size:12px;color:var(--mute);font-weight:600}td.r,th.r{text-align:right}
.tbl{overflow:auto}
.pos{color:var(--ok)}.neg{color:var(--bad)}.warn{color:var(--warn)}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;background:#e2e8f0}
.tag.bad{background:#fee2e2;color:var(--bad)}.tag.warn{background:#fef3c7;color:var(--warn)}.tag.ok{background:#dcfce7;color:var(--ok)}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:6px}.okmsg{color:var(--ok);font-size:13px;min-height:18px;margin-top:6px}
.overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.box{background:var(--card);border-radius:14px;padding:24px;width:100%;max-width:380px;box-shadow:0 8px 30px #0002}
.box h1{margin:0}.box .by{color:var(--mute);font-size:13px;margin-bottom:10px}
.row{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.row>*{flex:1;min-width:120px}.row>.fit{flex:0 0 auto;min-width:0}
.bar{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--brand)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{font:inherit;border:0;border-radius:99px;padding:7px 14px;background:#e2e8f0;cursor:pointer}.tabs button.on{background:var(--brand);color:#fff;font-weight:700}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cred{font:700 15px ui-monospace,Consolas,monospace;background:#f1f5f9;border-radius:8px;padding:9px 10px;word-break:break-all}
dialog{border:0;border-radius:14px;padding:20px;width:min(440px,94vw);box-shadow:0 10px 40px #0004}
dialog::backdrop{background:#0006}
.logoPrev{max-height:52px;max-width:150px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:4px;display:block;margin:4px 0}
.hint{font-size:12px;color:var(--mute);line-height:1.45}
.lowrow{background:#fffbeb}
.lowrow td{border-bottom-color:#fde68a}
.hold-actions{display:flex;gap:4px;flex-wrap:wrap}

/* A4 print view shared by purchases, reports and cash-ups */
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  #printArea{display:block!important}
  @page{size:A4;margin:12mm}
  #printArea .a4{font:12px/1.45 Arial,Helvetica,sans-serif;color:#000;background:#fff}
  #printArea .head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #000;padding-bottom:10px}
  #printArea h1{font-size:22px;margin:0 0 2px}#printArea h2{font-size:16px;margin:0 0 4px}
  #printArea .muted{color:#444}#printArea .right{text-align:right}
  #printArea table{width:100%;border-collapse:collapse;margin-top:12px}
  #printArea th,#printArea td{border-bottom:1px solid #999;padding:5px 4px;font-size:12px;text-align:left}
  #printArea th{background:#f2f2f2}#printArea td.r,#printArea th.r{text-align:right}
  #printArea .totals{width:65mm;margin-left:auto;margin-top:10px}
  #printArea .totals div{display:flex;justify-content:space-between;padding:2px 0}
  #printArea .totals .big{border-top:2px solid #000;font-weight:800;font-size:14px;margin-top:4px;padding-top:4px}
  #printArea .foot{margin-top:18px;border-top:1px solid #999;padding-top:8px;font-size:11px;color:#333}
  #printArea img{max-height:60px;max-width:150px}
}

/* Flex-C branding footer */
.pw{text-align:center;color:var(--mute);font-size:12px;padding:14px 8px;line-height:1.5}
.pw a{color:var(--brand);text-decoration:none;font-weight:600}.pw a:hover{text-decoration:underline}

/* ---- 1.3 look: back office + owner dashboard ---- */
:root{--bg:#eef2f6;--accent:#00a8ff;--shadow:0 1px 2px #0f172a10,0 8px 24px #0f172a0c}
body{background:radial-gradient(1100px 420px at 8% -8%,#dbeeff 0,transparent 60%) no-repeat fixed,var(--bg);-webkit-font-smoothing:antialiased}
svg.ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
button[data-ic],a[data-ic]{display:inline-flex;align-items:center;justify-content:center;gap:7px}
header.top{background:linear-gradient(135deg,#0b1437,#14235a);box-shadow:0 2px 12px #0f172a30;padding:10px 18px}
header.top a,header.top button{transition:background .15s}
header.top a:hover,header.top button:hover{background:#ffffff3d}
header.top a.on{box-shadow:0 2px 8px #0f172a2e}
.brandmark{width:30px;height:30px;border-radius:9px;background:#fff;color:var(--brand);display:inline-grid;place-items:center;font-weight:900;font-size:17px}
.card{border-radius:16px;box-shadow:var(--shadow);padding:18px}
.card h2,.card h3{letter-spacing:-.01em}
button.btn{border-radius:10px;transition:background .15s,transform .05s}button.btn:active{transform:translateY(1px)}
button.btn.sec{background:#e6ecf2}button.btn.sec:hover{background:#d6dee8}
input,select,textarea{border-radius:10px;border-color:#d5dde6}
input:focus,select:focus,textarea:focus{outline:2px solid #00a8ff4d;border-color:var(--accent)}
.tabs{gap:4px;background:#e6ecf2;padding:4px;border-radius:14px;display:flex;flex-wrap:wrap}
.tabs button{background:transparent;padding:7px 13px;border-radius:10px;color:#475569;font-weight:600;transition:background .15s}
.tabs button:hover{background:#ffffff90}
.tabs button.on{background:#fff;color:var(--brand);box-shadow:0 1px 4px #0f172a1f}
.kpi{border-radius:16px;box-shadow:var(--shadow);padding:16px 16px 14px;border-left:4px solid var(--accent);position:relative;overflow:hidden}
.kpi .l{font-size:11.5px;font-weight:600}.kpi .v{font-size:26px;letter-spacing:-.02em;margin-top:4px}
.kpi .v.warn{color:var(--warn)}.kpi .v.neg{color:var(--bad)}.kpi .v.pos{color:var(--ok)}
.kpi.k-sales{border-left-color:#0a8fe0}.kpi.k-week{border-left-color:#0ea5e9}.kpi.k-month{border-left-color:#6366f1}
.kpi.k-profit{border-left-color:#16a34a}.kpi.k-warn{border-left-color:#f59e0b}.kpi.k-bad{border-left-color:#ef4444}.kpi.k-stock{border-left-color:#8b5cf6}
.kpi.big{background:linear-gradient(135deg,#0b1437,#14235a);color:#fff;border-left:0}
.kpi.big .l,.kpi.big .s{color:#ffffffc4}.kpi.big .v{font-size:32px}
table tr:hover td{background:#f8fafc}
th{text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.tag{font-weight:700}
.bar{height:7px;background:#e6ecf2}.bar i{background:linear-gradient(90deg,#0a8fe0,#00a8ff);border-radius:99px}
.shopcard{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.shopcard .nm{font-weight:700}.shopcard .sub{font-size:12px;color:var(--mute)}
.shopcard .amt{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.spark{display:flex;align-items:flex-end;gap:5px;height:84px;margin-top:6px}
.spark div{flex:1;background:linear-gradient(180deg,#00a8ff,#0a8fe0);border-radius:6px 6px 2px 2px;min-height:3px;position:relative}
.spark small{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--mute)}
.splitbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:#e6ecf2;margin:6px 0 4px}
.splitbar i{display:block}.legend{display:flex;gap:14px;font-size:12px;color:var(--mute);flex-wrap:wrap}.legend b{color:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.pw{padding:18px 8px 26px}
@media (max-width:640px){.wrap{padding:10px}.kpi .v{font-size:22px}header.top{gap:8px}}
.kpi .v{white-space:nowrap;font-size:clamp(19px,2vw,26px)}.kpi.big .v{font-size:clamp(22px,2.3vw,30px)}
.card a:not(.btn){color:var(--brand);font-weight:600;text-decoration:none}.card a:not(.btn):hover{text-decoration:underline}
.tabs{flex-wrap:wrap!important;max-width:100%;overflow:visible}
.row{flex-wrap:wrap}.row>div:not(.fit){min-width:190px}
body{overflow-x:hidden}
a.btn{border-radius:10px;padding:9px 14px;font-weight:600;background:#16a34a;color:#fff!important;text-decoration:none!important;cursor:pointer}
a.btn.sec{background:#16a34a}a.btn.sec:hover{background:#15803d}

/* 1.5.1 per-app themes: each app's inside colours follow its icon */
html[data-app=console]{--brand:#00a8ff;--brand2:#008fe0;--accent:#00a8ff}
html[data-app=console] header.top{background:linear-gradient(135deg,#0b1437,#14235a)}
html[data-app=console] button.btn,html[data-app=console] .tabs button.on{color:#04182e}
html[data-app=console] button.btn.sec{color:var(--ink)}
html[data-app=office]{--brand:#4338ca;--brand2:#3730a3;--accent:#818cf8}
html[data-app=office] header.top{background:linear-gradient(135deg,#312e81,#4338ca)}
html[data-app=dashboard]{--brand:#b45309;--brand2:#92400e;--accent:#f59e0b}
html[data-app=dashboard] header.top{background:linear-gradient(135deg,#78350f,#b45309)}
html[data-app=office] .tabs button.on,html[data-app=dashboard] .tabs button.on{color:var(--brand)}
html[data-app=office] header.top a.on{background:#fff;color:#312e81}html[data-app=dashboard] header.top a.on{background:#fff;color:#78350f}

/* dark mode (generated from the light rules above) */
@media screen{
html[data-theme=dark]{color-scheme:dark;--bg:#0b1220;--card:#162032;--ink:#e5e7eb;--mute:#94a3b8;--line:#2a3a52;--soft:#2b3a52;--soft0:#101a2b;--ok:#4ade80;--bad:#f87171;--warn:#fbbf24}
html[data-theme=dark] .tile .p,html[data-theme=dark] .card a:not(.btn),html[data-theme=dark] .pw a,html[data-theme=dark] .box a{color:var(--accent,#5eead4)}
html[data-theme=dark] dialog{background:var(--card);color:var(--ink)}
html[data-theme=dark] dialog::backdrop{background:#000a}
html[data-theme=dark] input::placeholder{color:#64748b}
html[data-theme=dark] .kpi,html[data-theme=dark] .shopcard{box-shadow:0 1px 2px #0006}
html[data-theme=dark]{background:var(--bg)}
html[data-theme=dark] body{background:radial-gradient(1100px 420px at 8% -8%,#12305a 0,transparent 60%) no-repeat fixed,var(--bg)}
html[data-theme=dark] .hint,html[data-theme=dark] .muted{color:var(--mute)}
html[data-theme=dark] button.btn.sec{background:var(--soft)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:var(--card)}
html[data-theme=dark] .tag{background:var(--soft)}
html[data-theme=dark] .tag.bad{background:#3f1414}
html[data-theme=dark] .tag.warn{background:#3b2a0a}
html[data-theme=dark] .tag.ok{background:#0f2f1c}
html[data-theme=dark] .bar{background:var(--soft)}
html[data-theme=dark] .tabs button{background:var(--soft)}
html[data-theme=dark] .cred{background:var(--soft0)}
html[data-theme=dark] .logoPrev{background:var(--card)}
html[data-theme=dark] .lowrow{background:#3b2a0a}
html[data-theme=dark] .brandmark{background:var(--card)}
html[data-theme=dark] button.btn.sec{background:var(--soft)}
html[data-theme=dark] button.btn.sec:hover{background:var(--soft)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{border-color:var(--line)}
html[data-theme=dark] .tabs{background:var(--soft)}
html[data-theme=dark] .tabs button{color:var(--ink)}
html[data-theme=dark] .tabs button.on{background:var(--card)}
html[data-theme=dark] table tr:hover td{background:var(--soft0)}
html[data-theme=dark] .bar{background:var(--soft)}
html[data-theme=dark] .shopcard{background:var(--card)}
html[data-theme=dark] .splitbar{background:var(--soft)}
}
/* end dark */

/* 1.7 Back office sidebar: grouped menu on the left (desktop), collapsible menu on phones */
.shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start;max-width:1320px}
.shell #side{position:sticky;top:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;max-height:calc(100vh - 24px);overflow:auto}
.shell #side .co{padding:2px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.shell #side .co select{width:100%}
.shell #tabs.tabs{display:flex!important;flex-direction:column;flex-wrap:nowrap!important;gap:2px;background:transparent!important;padding:0!important;border:0!important}
.shell #tabs .grp{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);padding:12px 10px 4px}
.shell #tabs button{width:100%;text-align:left;border-radius:9px!important;padding:8px 10px!important;background:transparent!important;border:0!important;box-shadow:none!important;font-weight:600}
.shell #tabs button:hover{background:var(--soft0,#f1f5f9)!important}
.shell #tabs button.on{background:var(--brand)!important;color:#fff!important}
.shell .sidetog{display:none}
.shell #main{min-width:0}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .shell #side{position:static;max-height:none;padding:6px}
  .shell .sidetog{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;padding:10px;font-size:16px;color:var(--ink);cursor:pointer;text-align:left}
  .shell .sidetog .chev{margin-left:auto}
  .shell .sidebody{display:none}
  .shell #side.open .sidebody{display:block}
}

.shell #side .msearch{padding:0 2px 6px}.shell #side .msearch input{width:100%}
.shell #tabs button.grp{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);padding:12px 10px 4px!important;cursor:pointer;background:transparent!important}
.shell #tabs button.grp i{font-style:normal;transition:transform .15s}.shell #tabs button.grp.shut i{transform:rotate(-90deg)}
.shell #tabs button.grp:hover{color:var(--ink)}

/* 1.7.2 colour-coded, clearly collapsible menu groups */
.shell #tabs button.grp{background:color-mix(in srgb,var(--gc) 13%,transparent)!important;border-left:4px solid var(--gc)!important;border-radius:8px!important;margin-top:8px;padding:8px 10px!important;color:var(--gc)!important;font-size:12px}
.shell #tabs button.grp:hover{background:color-mix(in srgb,var(--gc) 22%,transparent)!important;color:var(--gc)!important}
.shell #tabs button.grp span{display:flex;align-items:center;gap:8px}
.shell #tabs button.grp em{font-style:normal;font-size:10px;font-weight:800;background:var(--gc);color:#fff;border-radius:99px;padding:1px 7px;letter-spacing:0}
.shell #tabs button.grp i{font-size:15px;line-height:1;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--gc) 20%,transparent)}
.shell #tabs button.sub{margin-left:10px;width:calc(100% - 10px);border-left:2px solid color-mix(in srgb,var(--gc) 35%,transparent)!important;border-radius:0 9px 9px 0!important}
.shell #tabs button.sub:hover{background:color-mix(in srgb,var(--gc) 12%,transparent)!important}
.shell #tabs button.sub.on{background:var(--gc)!important;border-left-color:var(--gc)!important;color:#fff!important}
.shell #side .mall{display:flex;gap:6px;margin-top:6px}
.shell #side .mall button{flex:1;font-size:12px;font-weight:600;padding:5px 6px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mute);cursor:pointer}
.shell #side .mall button:hover{color:var(--ink);border-color:var(--mute)}
/* ---- Stock take: stocker screens are black and white (stocker login, Stock app) ---- */
body.stocker #side,body.stocker header.top a{display:none}body.stocker .shell{grid-template-columns:minmax(0,1fr);max-width:720px}
/* Stocker phones: plain black and white (black text, white icons on black buttons), easy to read on the shop floor. */
html.bw{color-scheme:light;--brand:#000;--brand2:#222;--accent:#000;--ink:#000;--mute:#2b2b2b;--line:#000;--bg:#fff;--card:#fff;--soft:#fff;--soft0:#fff;--ok:#000;--bad:#000;--warn:#000;--shadow:none}
html.bw body{background:#fff!important;color:#000}
html.bw header.top{background:#000!important;box-shadow:none;color:#fff}
html.bw header.top button,html.bw header.top a{background:#000!important;color:#fff!important;border:1.5px solid #fff!important}
html.bw .brandmark{background:#000!important;color:#fff!important;border:2px solid #fff}
html.bw .card,html.bw .box,html.bw .kpi{background:#fff!important;color:#000;box-shadow:none!important;border:2px solid #000}
html.bw button.btn{background:#000!important;color:#fff!important;border:2px solid #000}
html.bw button.btn svg{stroke:#fff;color:#fff}
html.bw button.btn.sec{background:#fff!important;color:#000!important}
html.bw button.btn.sec svg{stroke:#000;color:#000}
html.bw input,html.bw select,html.bw textarea{background:#fff!important;color:#000!important;border:2px solid #000!important}
html.bw input::placeholder{color:#555}
html.bw label,html.bw .hint,html.bw th{color:#000!important}
html.bw .tag,html.bw .tag.ok,html.bw .tag.bad,html.bw .tag.warn{background:#000!important;color:#fff!important}
html.bw .err,html.bw .okmsg{color:#000!important;font-weight:700}
html.bw a,html.bw .pw a{color:#000!important}
html.bw .overlay{background:#fff}
html.bw #ts_last{background:#fff!important;border:2px solid #000}
html.bw dialog{background:#fff;color:#000;border:2px solid #000}
html.bw .themetog{display:none!important}
/* "Already counted" warning stays red, also on the black and white stocker screen */
.dupwarn,html.bw .dupwarn{background:#fef2f2!important;border:3px solid #dc2626!important;box-shadow:none!important;color:#7f1d1d}
.dupwarn .dt{color:#dc2626}.dupwarn .hint,html.bw .dupwarn .hint{color:#991b1b!important}
.dupwarn #cf_add,html.bw .dupwarn #cf_add{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}
.dupwarn #cf_skip,html.bw .dupwarn #cf_skip{background:#fff!important;border:2px solid #dc2626!important;color:#dc2626!important}
.dupwarn button:focus-visible,.dupwarn button:focus{outline:3px solid #fca5a5;outline-offset:2px}