/* Back Counter's look (Hrishi's pick, 2026-10-15): the Storefront colors (clean retail, one bold blue, white
   cards with a soft shadow) and the sidebar shell (Shopify Admin / Square Dashboard style: the screens down the
   left, the page in a centered column). The mockups it came from: notes\color-schemes\1-storefront and
   notes\color-schemes\layouts\1-sidebar. Loaded last on every page, after app.css and the page's own <style>; the
   page styles came first and many set the same things, so the rules here win with !important. Light only. */

:root, :root[data-theme], :root[data-theme="light"], :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg: #f2f4f7 !important; --surface: #ffffff !important; --surface-2: #f5f7fa !important;
  --ink: #111827 !important; --ink-2: #4b5563 !important; --ink-3: #5f6b7a !important;
  --line: #e4e7ec !important; --line-2: #cfd5dd !important;
  --accent: #1a56db !important; --accent-ink: #ffffff !important;
  --in: #047857 !important; --in-bg: #e3f5ec !important;
  --out: #c2410c !important; --out-bg: #fdeee6 !important;
  --warn: #92400e !important; --warn-bg: #fef3c7 !important;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif !important;
  --font-mono: var(--font-ui) !important;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-code: Consolas, "Cascadia Mono", ui-monospace, monospace;
  --r: 10px !important;
  --side: 232px;
  --shadow: 0 0 0 1px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  color-scheme: light !important;
}

/* ---------- type: sentence case in the UI font, no letter-spacing, figures that line up ---------- */
html body { font-family: var(--font-ui) !important; font-size: 14.5px; font-variant-numeric: tabular-nums lining-nums; background: var(--bg) !important; color: var(--ink); }
body * { text-transform: none !important; letter-spacing: normal !important; }
body *:not(code):not(.rcode):not(svg):not(svg *) { font-family: var(--font-ui) !important; }
td.nm code, .bct .nm code, .picked code, .review .rcode, .um .rl code, .panel p code, .sugg small { font-family: var(--font-code) !important; font-size: 12px !important; color: var(--ink-3) !important; }
.bcchart .axis { font: 11px var(--font-ui) !important; fill: var(--ink-3) !important; }
.mast .sub, .conn, .dayctl, .top label, .cell span, .stat .lbl, .card h2, .card .sub, th, .ist th, .cat, .fld span, .opts label, .rd label,
.ctl label, .rhd, .day h4, .reb h4, .um h4, .review .revh, .bct tr.grp td, .cards .card > span:first-child, #catfilter, #sortby { font-size: 12.5px !important; }
.stat .note, .bct-reset, .bct-more, .empty .hint, .asof, .noprice, .mv time, .mv .what em { font-size: 12px !important; }
.tag, .pill, .mk { font-size: 11.5px !important; font-weight: 600 !important; border-radius: 999px !important; padding: 2px 9px !important; }
.btn, .modes button, .go, .tabs button, .subtabs button, .tools .view button { font-size: 13.5px !important; font-weight: 600 !important; }
.btn.sm, .rowbtn { font-size: 12.5px !important; }
a { color: var(--accent); }

/* ---------- the sidebar (nav.js draws it) ---------- */
body.bc-side { padding-left: var(--side) !important; }
.bcnav { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--side); box-sizing: border-box; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px; background: #e9ecf1; border-right: 1px solid #dde1e7; overflow-y: auto; font-size: 14px; }
.bcnav .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.bcnav .logo { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13.5px; }
.bcnav .brand b { display: block; font-size: 14.5px; color: var(--ink); }
.bcnav .who { display: block; font-size: 12.5px; color: var(--ink-3); }
.bcnav .who a, .bcnav .who button { color: var(--accent); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.bcnav .links { display: flex; flex-direction: column; gap: 2px; }
.bcnav .links a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.bcnav .links a:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.bcnav .links a .ic { color: var(--ink-3); flex: none; }
.bcnav .links a.on { background: #fff; color: var(--accent); font-weight: 650; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.bcnav .links a.on .ic { color: var(--accent); }
.bcnav .feedbox { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.bcnav .feedbox .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.bcnav .feedbox b { display: block; font-size: 13px; color: var(--ink); }
.bcnav .feed { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.bcnav .feedbox.ok .ic { color: var(--in); } .bcnav .feedbox.bad .ic { color: var(--warn); } .bcnav .feedbox.bad .feed { color: var(--warn); }
.bcpin { margin: 0 auto; max-width: 1280px; padding: 9px 16px; font-size: 13.5px; color: var(--warn); background: var(--warn-bg); border-bottom: 1px solid #f5e1a8; }
.bcpin a { color: inherit; font-weight: 600; }
/* narrow screens (a phone, a small tablet): the sidebar becomes a bar across the top */
@media (max-width: 900px) {
  body.bc-side { padding-left: 0 !important; }
  .bcnav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid #dde1e7; }
  .bcnav .brand { padding: 0 6px 0 0; } .bcnav .brand .who { display: none; }
  .bcnav .links { flex-direction: row; flex-wrap: wrap; }
  .bcnav .links a { padding: 7px 9px; }
  .bcnav .links a .ic { display: none; }
  .bcnav .feedbox { margin: 0 0 0 auto; padding: 4px 8px; box-shadow: none; background: transparent; }
  .bcnav .feedbox b, .bcnav .feedbox .ic { display: none; }
}
@media print { .bcnav { display: none; } body.bc-side { padding-left: 0 !important; } }

/* ---------- page header: title (and a line under it) on the left, the page's actions on the right ---------- */
.wrap { max-width: 1280px !important; padding-left: 32px !important; padding-right: 32px !important; }
.mast { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap; padding: 26px 0 18px !important; }
.mast h1 { font-family: var(--font-display) !important; font-size: 24px !important; font-weight: 700 !important; margin: 0 !important; }
.mast .sub, .mast .lede { display: block; margin: 2px 0 0 !important; color: var(--ink-3) !important; font-size: 13.5px !important; }
.mast .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mast .acts .btn { display: inline-flex !important; align-items: center; gap: 6px; padding: 9px 14px !important; }
.mast .acts .btn[hidden] { display: none !important; }
@media (max-width: 700px) { .wrap { padding-left: 14px !important; padding-right: 14px !important; } }

/* ---------- surfaces: white, soft shadow, rounded ---------- */
.card, .stat, .cell, .sec:not(h2), .tablewrap, details.is, .panel, .barbox, details.lines > summary {
  border: 0 !important; border-radius: 12px !important; background: var(--surface) !important; box-shadow: var(--shadow) !important; }
.panel { box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(16,24,40,.08) !important; }
.card { padding: 16px 20px !important; }
.card h2 { font-size: 14px !important; font-weight: 650 !important; color: var(--ink) !important; }
.card h2 a { font-weight: 500 !important; font-size: 13px !important; color: var(--accent) !important; }
.card .big { font-family: var(--font-display) !important; font-size: 32px !important; font-weight: 700 !important; }
.card .sub { color: var(--ink-3) !important; }
.card li { border-bottom-color: #eef0f3 !important; }
.cards { gap: 16px !important; }

/* ---------- controls ---------- */
.btn { border-radius: 8px !important; border-color: var(--line-2) !important; }
.btn:not(.pri) { background: var(--surface) !important; color: var(--ink) !important; }
.btn.pri { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.rowbtn { border-radius: 7px !important; padding: 4px 9px !important; color: var(--ink-2) !important; border-color: var(--line-2) !important; background: var(--surface) !important; }
#find, #catfilter, #sortby, .dayctl input, .top select, .top input[type=date], .ctl select, .opts select, .opts input[type=number] {
  border-radius: 8px !important; border: 1px solid var(--line-2) !important; background: var(--surface) !important; color: var(--ink) !important; }
.dayctl { gap: 8px !important; } .dayctl input { padding: 7px 10px !important; } .dayctl .rowbtn { padding: 7px 12px !important; font-size: 13.5px !important; }
.tools .view button { border-color: var(--line-2) !important; color: var(--ink-2) !important; background: var(--surface) !important; padding: 9px 14px !important; }
.tools .view button[aria-pressed=true] { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.tools .view button:first-child { border-radius: 8px 0 0 8px !important; } .tools .view button:last-child { border-radius: 0 8px 8px 0 !important; }
.bcchart .sw button { font: 600 12px var(--font-ui) !important; }
.bcchart .sw button[aria-pressed=true] { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.tabs { border-bottom: 1px solid var(--line) !important; gap: 4px; }
.tabs button { color: var(--ink-3) !important; border-bottom: 2px solid transparent !important; padding: 10px 12px !important; font-size: 14px !important; }
.tabs button[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--accent) !important; }

/* ---------- Stock ---------- */
.bar { position: static !important; background: transparent !important; padding: 0 0 16px !important; }
.modes { background: #f1f3f6; padding: 4px; gap: 4px; }
.modes button { border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--ink-2) !important; padding: 10px 8px !important; font-size: 14px !important; }
.modes button[aria-pressed="true"] { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.scanrow { border-top: 1px solid var(--line); }
.go { background: var(--accent) !important; color: #fff !important; padding-inline: 26px !important; font-size: 14px !important; }
.go:hover { filter: brightness(1.08); }
.opts { background: #fff !important; }
/* the numbers: one card with dividers, the label over the number */
.stats { gap: 0 !important; background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; margin: 8px 0 18px !important; }
.stats.editing { overflow: visible; outline-offset: 4px; }
.stats .stat { box-shadow: none !important; border-radius: 0 !important; border-right: 1px solid #eef0f3 !important; border-bottom: 1px solid #eef0f3 !important; padding: 14px 18px !important; }
.stats .stat .lbl { color: var(--ink-3) !important; font-size: 13px !important; margin-bottom: 2px; }
.stats .stat b { font-family: var(--font-display) !important; font-size: 22px !important; font-weight: 700 !important; }
.stats .addtile { border-radius: 0 !important; }
.statbar { margin-top: 0 !important; }
th { background: #f7f8fa !important; color: var(--ink-2) !important; font-weight: 600 !important; border-bottom: 1px solid var(--line) !important; }
td { border-bottom-color: #eef0f3 !important; }
.bct tr.grp td { background: #f7f8fa !important; color: var(--ink) !important; font-weight: 650 !important; font-size: 13.5px !important; }
.cat { color: var(--ink-2) !important; font-size: 13px !important; }
.foot { border-top: 0 !important; }

/* ---------- Sales ---------- */
#panSales > .cards { gap: 0 !important; background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px !important; }
#panSales > .cards .card { box-shadow: none !important; border-radius: 0 !important; border-right: 1px solid #eef0f3 !important; }
#panSales > .cards .card:last-child { border-right: 0 !important; }
#panSales > .cards .card b { font-family: var(--font-display) !important; font-size: 26px !important; font-weight: 700 !important; }
.charts { gap: 16px !important; margin-bottom: 16px !important; }
details.is { margin-bottom: 16px !important; }
.exnote, .reb .note { border-radius: 8px !important; }

/* Stock's server status: said only when something's wrong ("Server down"); fine is the normal state. */
.mast .conn:not([data-s="off"]) { display: none !important; }

/* Stock's table: the vendor is on its group row, so item rows don't need a Vendor column's width */
#stockTable .bct th[data-k="__vendor"] { width: 0 !important; padding: 0 0 0 4px !important; font-size: 0 !important; }
#stockTable .bct tr:not(.grp) > td:first-child { padding: 0 !important; }
#stockTable .bct tr.grp > td:first-child { padding-left: 12px !important; }
.bct td { padding: 9px 8px !important; } .bct th { padding: 10px 8px !important; }
.bct td:has(> .nm) { min-width: 200px !important; }
.bct .rowbtn { padding: 3px 7px !important; }

/* Home: the widget area fills the window down to the bottom, its rows sharing the height, so there's no
   blank half-screen under the cards (a phone just stacks them). */
@media (min-width: 901px) and (min-height: 600px) {
  .home-cards { min-height: calc(100vh - 150px); align-content: stretch; grid-auto-rows: minmax(min-content, auto); }
}