/* Shared by the counter dashboard and the trolley setup page. */
:root {
  --ground:#F7F9F8; --surface:#FFFFFF; --raised:#F4F8F6; --ink:#0F1A14; --muted:#56675E; --faint:#8A9891;
  --line:#E3EAE6; --line-strong:#CFD9D3;
  --accent:#12884A; --accent-ink:#FFFFFF; --accent-soft:#E6F5EC; --accent-strong:#0B6E3B;
  --warn:#9A6200; --warn-soft:#FBF0D9; --danger:#B42318; --danger-soft:#FDE9E7; --info:#1D63A6; --info-soft:#E3EDF8;
  --side:#FFFFFF; --side-ink:#24342B; --side-muted:#6B7C73; --side-active:#E6F5EC;
  --shadow:0 1px 2px rgba(15,40,25,.04), 0 2px 10px rgba(15,40,25,.04);
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0C1310; --surface:#131C18; --raised:#18231E; --ink:#E4ECE8; --muted:#98A8A0; --faint:#6F7F77;
    --line:#24312B; --line-strong:#314039;
    --accent:#3FC48F; --accent-ink:#06140E; --accent-soft:#143126; --accent-strong:#5ED6A5;
    --warn:#F0B45E; --warn-soft:#33260F; --danger:#FF7A6B; --danger-soft:#3A1714; --info:#7DB6EC; --info-soft:#152A3D;
    --side:#08110D; --side-ink:#DCE8E2; --side-muted:#7F958A; --side-active:#15291F;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--ground); color:var(--ink); font:14.5px/1.45 var(--sans); }
button, input, textarea, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mono { font-family:var(--mono); }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Shell */
.app { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100%; }
aside { background:var(--side); color:var(--side-ink); border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; padding:0 8px; }
.brand-mark { width:34px; height:34px; border-radius:9px; background:var(--accent); display:grid; place-items:center; color:#fff; }
.brand b { font-size:17px; letter-spacing:-.01em; display:block; }
.brand small { color:var(--side-muted); font-size:12px; }
nav { display:grid; gap:4px; }
nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--side-ink); text-decoration:none; font-weight:500; }
nav a:hover { background:var(--side-active); }
nav a[aria-current="page"] { background:var(--side-active); color:var(--accent); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
nav a .count { margin-left:auto; font:600 11px var(--mono); background:var(--accent); color:#fff; border-radius:99px; padding:1px 7px; }
nav svg { width:18px; height:18px; flex:none; }
.side-foot a { color:var(--accent); font-weight:500; text-decoration:none; }
.side-foot { margin-top:auto; padding:12px; border:1px solid var(--line); border-radius:10px; font-size:12.5px; color:var(--side-muted); display:grid; gap:6px; }
.side-foot .row { display:flex; justify-content:space-between; gap:8px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--faint); margin-right:6px; vertical-align:1px; }
.dot.ok { background:var(--accent); } .dot.bad { background:#FF7A6B; }

main { padding:24px 28px 48px; min-width:0; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.topbar h1 { font-size:24px; margin:0; letter-spacing:-.01em; }
.topbar p { margin:2px 0 0; color:var(--muted); }
.clock { text-align:right; color:var(--muted); font-size:13px; }
.clock b { display:block; color:var(--ink); font:600 20px var(--mono); }

@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  aside { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; padding:12px 16px; gap:12px; }
  nav { grid-auto-flow:column; margin-left:auto; }
  nav a { padding:8px 10px; } nav a span.label { display:none; }
  .side-foot { display:none; }
  main { padding:18px 16px 40px; }
}

/* Surfaces */
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.card-h h2 { font-size:15px; margin:0; }
.card-b { padding:16px 18px; }
.eyebrow { font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:20px; }
@media (max-width:1100px) { .stats { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.stat { padding:16px 18px; display:grid; gap:6px; }
.stat .v { font:600 26px/1.1 var(--mono); letter-spacing:-.02em; }
.stat .s { color:var(--muted); font-size:12.5px; }
.stat.warn .v { color:var(--warn); }
button.stat { text-align:left; cursor:pointer; border:1px solid var(--line); }
button.stat:hover { border-color:var(--line-strong); }

/* Buttons & inputs */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:500; white-space:nowrap; }
.btn:hover { background:var(--raised); }
a.btn { color:var(--ink); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover { background:var(--accent-strong); }
.btn.ghost { border-color:transparent; background:transparent; }
.btn.ghost:hover { background:var(--raised); }
.btn.danger { color:var(--danger); }
.btn.sm { padding:5px 10px; font-size:13px; }
.btn.lg { padding:14px 18px; font-size:16px; font-weight:600; width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn svg { width:16px; height:16px; }
.field { display:grid; gap:6px; }
.field label { font-size:12.5px; color:var(--muted); font-weight:500; }
.input { width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); }
.input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input.big { font:600 22px var(--mono); padding:12px 14px; letter-spacing:.04em; }
textarea.input { resize:vertical; min-height:64px; }
.hint { color:var(--faint); font-size:12.5px; }

.pill { display:inline-flex; align-items:center; gap:5px; font:600 11.5px var(--sans); padding:3px 9px; border-radius:99px; background:var(--raised); color:var(--muted); white-space:nowrap; }
.pill.ok { background:var(--accent-soft); color:var(--accent); }
.pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.bad { background:var(--danger-soft); color:var(--danger); }
.pill.info { background:var(--info-soft); color:var(--info); }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--raised); white-space:nowrap; }
td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
td.r, th.r { text-align:right; }
tbody tr:hover td { background:var(--raised); }
.empty { text-align:center; color:var(--muted); padding:36px 16px; }
.empty b { display:block; color:var(--ink); font-size:15px; margin-bottom:4px; }
.sku { font:500 12.5px var(--mono); color:var(--muted); }

/* Checkout */
.checkout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:1100px) { .checkout { grid-template-columns:1fr; } }
.trolley-list { display:grid; gap:8px; }
.trolley-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; text-align:left; }
.trolley-item:hover { border-color:var(--line-strong); background:var(--raised); }
.trolley-item[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tno { width:44px; height:44px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font:700 17px var(--mono); }
.trolley-item .meta { color:var(--muted); font-size:12.5px; }
.trolley-item .amt { font:600 14px var(--mono); }
.cart-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cart-head .tno { width:52px; height:52px; font-size:20px; }
.cart-head h2 { font-size:18px; margin:0; }
.cart-foot { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; padding:18px; border-top:1px solid var(--line); background:var(--raised); border-radius:0 0 12px 12px; }
@media (max-width:760px) { .cart-foot { grid-template-columns:1fr; } }
.cust { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.cust .wide { grid-column:1 / -1; }
.totals { display:grid; gap:8px; align-content:start; }
.totals .line { display:flex; justify-content:space-between; color:var(--muted); }
.totals .grand { display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px dashed var(--line-strong); }
.totals .grand b { font:700 28px var(--mono); letter-spacing:-.02em; }
.qty { display:inline-flex; align-items:center; gap:6px; }
.qty .btn { width:28px; height:28px; padding:0; font-size:16px; }
.qty b { min-width:24px; text-align:center; }
.add-item { border-top:none; }
tr.unknown-row td { background:var(--warn-soft); }
.status { min-height:20px; font-size:13px; color:var(--muted); }
.status.ok { color:var(--accent); } .status.bad { color:var(--danger); }

/* Products */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.toolbar .search { flex:1 1 240px; position:relative; }
.toolbar .search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--faint); }
.toolbar .search input { padding-left:34px; }
.chips { display:flex; gap:6px; }
.chip { border:1px solid var(--line-strong); background:var(--surface); border-radius:99px; padding:6px 12px; cursor:pointer; font-size:13px; font-weight:500; }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.stockbar { width:70px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; }
.stockbar i { display:block; height:100%; background:var(--accent); }
.stockbar.low i { background:var(--warn); } .stockbar.out i { background:var(--danger); }
.actions { display:flex; gap:4px; justify-content:flex-end; }
tr.hidden td { color:var(--faint); }

/* Orders */
.order-row { cursor:pointer; }
.order-lines td { background:var(--raised); padding:0; }
.order-lines table { margin:0; }
.order-lines td td, .order-lines th { background:transparent; }

/* Dialog */
dialog { border:none; border-radius:14px; padding:0; width:min(520px, calc(100vw - 32px)); background:var(--surface); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(8,17,13,.45); }
dialog form { display:grid; gap:14px; padding:20px 22px; }
dialog h3 { margin:0; font-size:18px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.barcode-box { border:1px dashed var(--line-strong); border-radius:10px; padding:12px; display:grid; place-items:center; background:#fff; min-height:110px; }
.barcode-box svg { max-width:100%; height:auto; }
dialog.wide { width:min(900px, calc(100vw - 32px)); }
.drop { display:grid; gap:4px; justify-items:center; text-align:center; padding:22px 16px; border:1.5px dashed var(--line-strong); border-radius:12px; background:var(--raised); cursor:pointer; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent-soft); }
.drop input { position:absolute; width:1px; height:1px; opacity:0; }
.import-sum { display:flex; gap:8px; flex-wrap:wrap; }
.import-rows { max-height:46vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.import-rows th { position:sticky; top:0; }
.import-rows td { padding:8px 12px; font-size:13px; }
.hint a { color:var(--accent); font-weight:500; }
.dlg-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
.err { color:var(--danger); font-size:13px; min-height:18px; }
.stepper { display:flex; gap:6px; }
.printer-row:last-child { border-bottom:none; }
.paper-sel { width:auto; padding:5px 8px; font-size:13px; }
.printer-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.stepper .btn { flex:1; }

/* Toasts */
.toasts { position:fixed; right:18px; bottom:18px; display:grid; gap:8px; z-index:50; }
.toast { background:var(--ink); color:var(--surface); padding:11px 14px; border-radius:10px; box-shadow:var(--shadow); font-size:13.5px; max-width:360px; }
.toast.bad { background:var(--danger); color:#fff; }
@media (prefers-reduced-motion: no-preference) { .toast { animation:rise .18s ease-out; } @keyframes rise { from { transform:translateY(6px); opacity:.6; } } }
[hidden] { display:none !important; }

/* Trolley setup pop-up */
.setup-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start; margin-bottom:18px; }
.pw { display:flex; gap:6px; }
.check { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.check input { width:16px; height:16px; accent-color:var(--accent); }
details summary { cursor:pointer; color:var(--muted); font-size:13.5px; font-weight:500; }
details[open] summary { margin-bottom:12px; }
.steps { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.steps li { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; color:var(--faint); }
.steps .n { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; font:600 12px var(--mono); }
.steps b { display:block; font-weight:600; }
.steps span.d { font-size:12.5px; }
.steps li.active { color:var(--ink); } .steps li.active .n { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.steps li.done { color:var(--ink); } .steps li.done .n { background:var(--accent); border-color:var(--accent); color:#fff; }
.steps li.failed { color:var(--danger); } .steps li.failed .n { background:var(--danger); border-color:var(--danger); color:#fff; }
.notice { padding:12px 14px; border-radius:10px; font-size:13.5px; }
.notice.warn { background:var(--warn-soft); color:var(--warn); }
.notice.ok { background:var(--accent-soft); color:var(--accent-strong); }
.net { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.net:last-child { border-bottom:none; }
.result { min-height:20px; font-size:13.5px; }
.result.ok { color:var(--accent); font-weight:500; } .result.bad { color:var(--danger); }
.setup-dlg { width:min(1120px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; background:var(--ground); }
.setup-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 20px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
.setup-body { padding:18px 20px 20px; }
.setup-dlg form.card-b { padding:16px 18px; }
@media (max-width:960px) { .setup-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .setup-dlg { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); } .setup-head { padding:12px 14px; } .setup-body { padding:12px; } .setup-dlg form.card-b { padding:14px; } }

/* Phones: compact header, single-column forms, and tables shown as one card per row. */
.m-only { display:none; }
@media (max-width:700px) {
  aside { position:sticky; top:0; z-index:20; padding:10px 12px; }
  .brand-mark { width:30px; height:30px; }
  .brand small { display:none; }
  nav a { padding:9px; }
  main { padding:14px 12px 32px; }
  .topbar { margin-bottom:12px; }
  .topbar h1 { font-size:20px; }
  .topbar p { font-size:13px; }
  .clock { display:none; }
  .stats { gap:8px; margin-bottom:14px; }
  .stat { padding:10px 12px; gap:2px; }
  .stat .v { font-size:18px; }
  .stat .s { font-size:11.5px; }
  .card-h, .card-b, .toolbar { padding-left:14px; padding-right:14px; }
  .input { font-size:16px; }  /* iPhones zoom into text boxes with smaller text */
  .input.big { font-size:20px; }
  .grid2, .cust { grid-template-columns:1fr; }
  .cust .wide { grid-column:auto; }
  .toolbar .btn { flex:1; }
  dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; }
  dialog form { padding:16px; }
  .dlg-actions { position:sticky; bottom:-16px; margin:0 -16px -16px; padding:12px 16px; background:var(--surface); border-top:1px solid var(--line); }
  .dlg-actions .btn { flex:1; }
  .toasts { left:12px; right:12px; bottom:12px; }
  .toast { max-width:none; }
  .printer-row { flex-wrap:wrap; }

  table.cards thead, table:has(> tbody.cards) thead { display:none; }
  tbody.cards > tr { display:grid; gap:6px 12px; padding:12px 14px; border-bottom:1px solid var(--line); }
  tbody.cards > tr > td { padding:0; border:none; text-align:left; }
  tbody.cards > tr:hover > td { background:none; }
  tbody.cards > tr > td.empty { grid-column:1 / -1; padding:18px 0; text-align:center; }
  tbody.cards .actions { justify-content:flex-start; flex-wrap:wrap; }

  .product-cards > tr { grid-template-columns:1fr auto; grid-template-areas:"name price" "stock status" "act act"; align-items:center; }
  .p-name { grid-area:name; } .p-price { grid-area:price; font-weight:600; align-self:start; }
  .p-stock { grid-area:stock; } .p-sold { display:none; } .p-status { grid-area:status; justify-self:end; }
  .p-act { grid-area:act; } .product-cards .actions .btn { flex:1; }

  .cart-cards > tr { grid-template-columns:1fr auto; grid-template-areas:"name amt" "qty act"; align-items:center; }
  .c-name { grid-area:name; } .c-amt { grid-area:amt; text-align:right !important; align-self:start; }
  .c-qty { grid-area:qty; } .c-price { display:none; } .c-act { grid-area:act; justify-self:end; }
  .qty .btn { width:38px; height:38px; }
  tr.unknown-row { background:var(--warn-soft); }

  .order-cards > tr.order-row { grid-template-columns:auto 1fr auto; grid-template-areas:"id time total" "trolley cust items" "print print act"; align-items:center; }
  .o-id { grid-area:id; } .o-time { grid-area:time; color:var(--muted); font-size:13px; }
  .o-total { grid-area:total; text-align:right !important; } .o-trolley { grid-area:trolley; } .o-cust { grid-area:cust; }
  .o-items { grid-area:items; text-align:right !important; color:var(--muted); }
  .o-print { grid-area:print; } .o-act { grid-area:act; justify-self:end; }
  .order-cards > tr.order-lines { display:block; padding:0; }
  .order-cards > tr.order-lines > td { display:block; }
  .m-only { display:inline; }
}