/* Invoice360 POS: the pack's shapes for every screen (Brand.chrome).

   Loaded after brand-g8.css on every page and on the kiosk, so it may reshape
   the shared markup; like auth-g8.css it names no colour and reads only tokens
   brand-g8.css defines (tests/test_brands.py).

   An enterprise cloud console (owner, 2026-10-05: "like Alibaba design"), kept
   formal (owner, 2026-10-16): a white page, a flat white top bar over a 1 px
   hairline with the current page underlined in G8 orange, 4 px rectangular
   controls, hairline cards and dense, tidy tables. Outfit throughout. No
   glows, no pills, no arrows that move. */

/* ---- the top bar: flat white, a hairline, the current page underlined ---- */
:root { --topbar-h: 56px; }
.topbar { gap: 4px 20px; background: var(--bar-bg); box-shadow: inset 0 -1px 0 var(--bar-line); }
.brand { gap: 10px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--bar-line); }

.nav { gap: 0; align-self: stretch; }
.nav a { min-height: 100%; padding: 0 14px; border-radius: 0; font-weight: 400; color: var(--bar-muted); }
.nav a:hover { background: none; color: var(--bar-text); }
.nav a[aria-current="page"] { background: none; color: var(--bar-text); font-weight: 500; }
.nav a[aria-current="page"]::after { left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 0; }
.who-name { font-weight: 400; }
.topbar .btn-quiet { border-radius: 4px; border-color: var(--bar-line); color: var(--bar-text); font-weight: 500; }
.topbar .btn-quiet:hover { background: var(--bar-hover); }
@media (min-width: 720px) {
  .topbar { padding-top: 0; padding-bottom: 0; }
  .nav a { min-height: var(--topbar-h); }
}
/* One row on a tablet and up: the nav scrolls before the bar wraps. */
@media (min-width: 900px) {
  .topbar { flex-wrap: nowrap; }
  .brand, .who { flex: none; }
  .nav a { padding: 0 12px; }
  .nav a[aria-current="page"]::after { left: 12px; right: 12px; }
}
@media (max-width: 719px) {
  .nav { align-self: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 calc(var(--gutter) - 14px); max-width: none; flex-basis: 100%; }
  .nav a { min-height: var(--tap-min); }
}

/* ---- controls: 4 px rectangles, the console's own ---- */
:root { --radius-lg: 6px; --radius: 4px; --radius-sm: 4px; }
.btn { border-radius: 4px; font-weight: 500; }
.btn-secondary { border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface); border-color: var(--primary); color: var(--accent-ink); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-xl { font-weight: 600; }

/* ---- hairline surfaces ---- */
.card, .stat, .table, .report-list, .audit-list { box-shadow: inset 0 0 0 1px var(--border); }
.table th { padding-top: 10px; padding-bottom: 10px; }
.table td { padding-top: 10px; padding-bottom: 10px; }
.page-head h1 { font-size: var(--fs-xl); }

/* ---- the counter ---- */
.till-cart { box-shadow: -1px 0 0 var(--border); }
.item, .qs-tile { box-shadow: inset 0 0 0 1px var(--tile-line); }
.item:hover, .qs-tile:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.item:has(.item-count), .qs-tile:has(.item-count) { box-shadow: inset 0 0 0 2px var(--primary); }
.qs-cats { box-shadow: inset 0 0 0 1px var(--border); }

/* ---- the self-order kiosk: the console's restraint, the G8 orange to act ---- */
.k-btn, .k-bar-done, .k-quiet, .k-back, .k-link, .k-chip, .k-lang, .k-lang-btn, .k-stepper, .k-step { border-radius: 6px; }
.k-tile, .k-dine, .k-line, .ks-offer, .k-done-card, .k-pay-card, .k-notice, .k-center, .k-empty, .k-receipt { border-radius: 8px; }
.k-tile-plate, .k-line-plate, .kc-plate, .k-cat, .kc-option, .k-input, .k-discount, .kc-qty { border-radius: 6px; }