/* cashier.css — Stripe-grade POS surface.
   Design tokens (palette, type, shadows, radius) live in theme.css, which is
   loaded BEFORE this file. This file styles the cashier's own components against
   those tokens. A polish layer at the bottom of this file fine-tunes specific
   components for the premium look. */

/* Pull in the design tokens so pages that link ONLY this file (admin, stock,
   receivals) also get the palette. The main cashier links theme.css directly too;
   loading it twice is harmless (identical rules). */
@import url("theme.css");

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.45;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* ───── Offline banner (above topbar) ────────────────────────── */
/* Small, unobtrusive chip in the bottom-right — a connection notice, not a
   full-width bar that pushes the till UI down. Fixed so it never shifts layout. */
.offline-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  background: #fff4ec;
  color: #c2410c;
  border: 1px solid #fcd9bd;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  max-width: 280px;
}
.offline-banner.severe {
  background: #fee2e2;
  color: var(--danger);
  border-color: #fecaca;
}

/* ───── Topbar ───────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center;
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  font-weight: 700; font-size: 18px; letter-spacing: 0.2px;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.brand::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.brand-sub { color: var(--text-muted); font-weight: 500; font-size: 14px; }

.meta { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Customer search (topbar) — type-to-find with a dropdown, like the item search. */
.cust-search { position: relative; margin-left: 18px; width: 270px; }
.cust-search-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 14px;
}
.cust-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cust-search-input::placeholder { color: var(--text-muted); }
.cust-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; font-size: 18px;
  color: var(--text-muted); line-height: 1; padding: 2px 6px;
}
.cust-search-clear:hover { color: var(--text); }
.cust-search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  max-height: 340px; overflow-y: auto; padding: 4px;
}
.cust-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
/* .active = the row the arrow keys are sitting on (same look as hover). */
.cust-opt:hover, .cust-opt.active { background: var(--accent-soft); }
.cust-opt-name { font-weight: 600; color: var(--text); }
.cust-opt-phone { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cust-opt-add { color: var(--accent); font-weight: 700; border-top: 1px solid var(--border); margin-top: 2px; }
.cust-opt-add:hover, .cust-opt-add.active { background: var(--accent); color: #fff; }
.cashier-tag {
  padding: 6px 10px; border-radius: 8px;
  color: var(--text); font-weight: 500;
  cursor: pointer;
}
.cashier-tag:hover { background: var(--surface-2); }
.sale-id {
  padding: 6px 10px;
  color: var(--text-faint); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.btn-link {
  background: none; color: var(--text-muted);
  border: 0; padding: 8px 12px; border-radius: 8px;
  font-weight: 500;
}
.btn-link:hover { background: var(--surface-2); color: var(--text); }
.admin-link { text-decoration: none; }

/* ───── Two-pane grid ────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0; flex: 1; min-height: 0;
}
.left {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.right {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2);
}

/* ───── LEFT: search bar ─────────────────────────────────────── */
.entry-bar {
  padding: 16px 22px 12px;
  background: var(--bg);
}
.entry-bar input {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.entry-bar input::placeholder { color: var(--text-faint); }
.entry-bar input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ───── LEFT: cart (UL of card rows) ─────────────────────────── */
.cart-wrap {
  flex: 1; overflow: auto;
  padding: 4px 16px 16px;
}
.cart-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cart-empty {
  text-align: center; color: var(--text-faint);
  padding: 60px 20px;
  font-size: 14px;
}
.cart-empty .icon {
  display: block; margin: 0 auto 12px;
  width: 48px; height: 48px;
  background: var(--surface-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--text-faint);
}

.cart-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  transition: border-color 120ms, box-shadow 120ms;
}
.cart-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.cart-row-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.cart-row-name {
  font-weight: 600; font-size: 15px; color: var(--text);
  line-height: 1.3;
}
.cart-row-meta {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cart-row-meta .cart-amount {
  margin-left: auto;
  color: var(--text); font-weight: 600; font-size: 15px;
}
.cart-row-meta .editable {
  padding: 2px 6px; border-radius: 6px; cursor: pointer;
}
.cart-row-meta .editable:hover { background: var(--accent-soft); }
.cart-row-meta .cart-dot { color: var(--text-faint); }
.cart-row-stock {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint); font-size: 11px; font-weight: 500;
}
.cart-row-stock.low  { background: #fff4ec; color: #c2410c; }
.cart-row-stock.out  { background: #fee2e2; color: var(--danger); }
.cart-row-x {
  background: transparent; border: 0; color: var(--text-faint);
  padding: 4px 8px; font-size: 18px; line-height: 1;
  border-radius: 6px;
}
.cart-row-x:hover { background: #fee2e2; color: var(--danger); }
/* Free-goods discount trigger — sits on any Case/Carton cart line (see renderCart).
   stopPropagation keeps a tap here from firing the line's other click handlers. */
.cart-row-discount-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 12px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.cart-row-discount-btn:hover {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.08);
}
.cart-row-header-only { padding-bottom: 10px; }
/* Free-goods sub-line — sits directly under its item's cart row (see renderCart). */
.cart-row-free {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px 4px 18px;
  margin-top: -6px;
}
.free-tag {
  background: #E7F6EF; color: var(--success-strong);
  font-weight: 700; font-size: 10.5px;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.free-desc { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.cart-row .editable input {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 2px 6px;
  width: 80px;
  color: var(--text);
  outline: none;
}

/* ───── LEFT: totals ─────────────────────────────────────────── */
.totals {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 16px 22px;
}
.totals > div {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  font-size: 14px;
  color: var(--text-muted);
}
.totals .gct { color: var(--text-faint); font-size: 12px; font-style: italic; }
.totals .grand {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
  color: var(--text);
}
.totals .grand span:last-child {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ───── LEFT: payment ────────────────────────────────────────── */
.payment {
  display: flex; gap: 10px;
  padding: 16px 22px 22px;
  background: var(--surface-2);
}
.pay {
  flex: 1; min-height: 64px;
  font-size: 16px; font-weight: 700;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: filter 120ms, box-shadow 120ms, background 120ms;
}
.pay.cash {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.pay.cash:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow: var(--shadow-md);
}
.pay:disabled { opacity: 0.4; cursor: not-allowed; }

/* ───── RIGHT: chip strip + picker ───────────────────────────── */
.chip-strip {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding: 16px 22px 12px;
  background: var(--surface-2);
}
.chip {
  flex-shrink: 0;
  padding: 9px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.chip.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}
.chip .chip-count {
  margin-left: 6px;
  color: var(--text-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.chip.active .chip-count { color: var(--accent-ink); opacity: 0.65; }

.picker {
  flex: 1; overflow: auto;
  padding: 12px 22px 16px;
}
.picker > .muted { color: var(--text-muted); }
.picker .empty-state {
  text-align: center; color: var(--text-faint);
  padding: 60px 20px;
}

/* ───── Item card grid ───────────────────────────────────────── */
.item-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.item-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, transform 80ms;
  min-height: 138px;
}
.item-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.item-card:active { transform: translateY(1px); }
.item-card-top {
  display: flex; gap: 10px; align-items: flex-start;
}
.item-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.item-card-name-wrap { flex: 1; min-width: 0; }
.item-card-name {
  font-weight: 600; font-size: 13.5px; line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-card-stock {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-faint);
}
.item-card-stock.low { color: #c2410c; }
.item-card-stock.out { color: var(--danger); font-weight: 600; }

.item-card-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Sized cigarette view: FOUR columns — two per brand (that brand's 20s then its 10s)
   — with the unit (Case, Carton) as the rows. Brand is also carried by the tile colour
   below, so each half reads as one solid colour block.
   Four equal tile columns with a narrow SPACER column in the middle, so the row splits
   cleanly into its two brand halves. The spacer is a real grid column and every tile is
   placed explicitly, so the extra air is shared by all four columns rather than stolen
   from one (a plain margin narrowed column 3 enough to clip a product name). */
.item-card-grid--brands4 { grid-template-columns: repeat(2, minmax(0, 1fr)) 14px repeat(2, minmax(0, 1fr)); }
.item-card-grid--brands4 > .item-card:nth-child(4n + 1) { grid-column: 1; }
.item-card-grid--brands4 > .item-card:nth-child(4n + 2) { grid-column: 2; }
.item-card-grid--brands4 > .item-card:nth-child(4n + 3) { grid-column: 4; }
.item-card-grid--brands4 > .item-card:nth-child(4n)     { grid-column: 5; }
/* Narrow screens: drop to a 2-up grid and let the halves stack as rows. */
@media (max-width: 900px) {
  .item-card-grid--brands4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-card-grid--brands4 > .item-card:nth-child(n) { grid-column: auto; }
}

/* Brand tile — used ONLY inside the sized cigarette grid, so no other till's cards
   change. The whole tile carries the brand colour (tint + border + avatar + name)
   instead of the thin side tab, which is what makes brand readable at a glance. */
.item-card--brandtile { border-width: 1.5px; }
/* No letter badge on a brand tile (see cashier.js), so the name owns the full
   width and stays readable in the narrow 4-up columns. */
.item-card--brandtile .item-card-name { font-size: 14.5px; overflow-wrap: anywhere; }
/* A cigarette SKU has exactly one price tier, so give that button the full tile
   width — a bigger, squarer tap target on the shop's touchscreen. */
.item-card--brandtile .item-card-prices { grid-template-columns: 1fr; }
/* border-left-width is restated here on purpose: the legacy .item-card--red/--green
   side tab (4px, further down this file) has equal specificity and would otherwise
   win by source order and paint a tab over the tile. */
.item-card--brandtile.item-card--red {
  border-color: rgba(220, 38, 38, 0.45);
  border-left-width: 1.5px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.07), rgba(220, 38, 38, 0.02));
}
.item-card--brandtile.item-card--green {
  border-color: rgba(14, 159, 110, 0.45);
  border-left-width: 1.5px;
  background: linear-gradient(180deg, rgba(14, 159, 110, 0.07), rgba(14, 159, 110, 0.02));
}
.item-card--brandtile.item-card--red   .item-card-name { color: var(--danger, #DC2626); }
.item-card--brandtile.item-card--green .item-card-name { color: var(--success, #0E9F6E); }
.item-card--brandtile.item-card--red:hover   { border-color: var(--danger, #DC2626); }
.item-card--brandtile.item-card--green:hover { border-color: var(--success, #0E9F6E); }
.price-chip {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.price-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.price-chip:hover .lbl,
.price-chip:hover .val { color: var(--accent-ink); }
.price-chip .lbl {
  font-size: 10px; font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.price-chip .val {
  font-size: 13px; font-weight: 700;
  margin-top: 2px;
  color: var(--text);
}
.price-chip.muted {
  cursor: not-allowed; pointer-events: none;
  background: var(--bg);
}
.price-chip.muted .val { color: var(--text-faint); font-weight: 500; }

/* ───── Pagination footer ────────────────────────────────────── */
.pagination-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.pg-btn {
  flex: 1; padding: 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer; font-weight: 600; font-size: 14px;
}
.pg-btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--text);
}
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pg-info {
  color: var(--text-muted); font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 110px; text-align: center;
}

/* ───── Modals ───────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(15, 18, 24, 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 340px; max-width: 90vw;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.modal-card h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 18px; font-weight: 700;
}
.modal-card p { margin: 6px 0; color: var(--text-muted); font-size: 14px; }
.modal-card p strong { color: var(--text); }
.modal-card input {
  width: 100%; background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 12px 14px;
  border-radius: 10px;
  margin: 8px 0;
  font-size: 15px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.modal-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#cash-tendered {
  font-size: 28px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 16px 18px;
}
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0; padding: 12px 22px;
  font-weight: 700; border-radius: 10px;
  font-size: 14px;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-secondary {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
}
.btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.error { color: var(--danger); margin-top: 10px; font-size: 13px; }
.muted { color: var(--text-muted); }

/* ───── Touchscreen pass: number-pad + bigger tap targets ────── */
.numpad-card { min-width: 320px; width: min(360px, 92vw); }
.numpad-display {
  font-size: 34px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 12px 16px; margin: 4px 0 14px; min-height: 30px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
}
.numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.np-key {
  font-size: 24px; font-weight: 600; padding: 20px 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 12px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.np-key:active { background: var(--surface-3); }
.np-clear { color: var(--danger); }
.np-back { color: var(--text-muted); }
.numpad-card .modal-actions { margin-top: 16px; }
.numpad-card .modal-actions button { flex: 1; font-size: 18px; padding: 16px; }

/* Clearer, bigger delete button on cart rows */
.cart-row-x {
  width: 42px; height: 42px; min-width: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 700;
  color: var(--danger); background: #fdecea;
  border: 1px solid #f3c4bd; border-radius: 10px; cursor: pointer;
}
.cart-row-x:active { background: #f6d3cd; }

/* Bigger touch targets in the cart */
.cart-row { padding: 12px 14px; }
.cart-row-name { font-size: 16px; }
.cart-qty, .cart-price { font-size: 17px; }
.cart-qty.editable, .cart-price.editable {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 8px 12px; min-width: 48px;
  text-align: center; cursor: pointer;
}
.cart-qty.editable:active, .cart-price.editable:active { background: var(--surface-3); }
/* Quantity is the field cashiers tap most — make it read as an obvious
   clickable control: accent box, bold number, and a small edit cue. */
.cart-qty.editable {
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  color: var(--text);
  font-weight: 700;
}
.cart-qty.editable::after {
  content: "\270E"; font-size: 11px; margin-left: 6px; opacity: .55;
}
.cart-qty.editable:hover { background: var(--accent); color: #fff; }
.cart-qty.editable:hover::after { opacity: .85; }
.cart-qty.editable:active { background: var(--accent); color: #fff; }
#cash-tendered { cursor: pointer; }

/* ───── Recall modal ─────────────────────────────────────────── */
.recall-card { min-width: 480px; max-width: 90vw; }
.recall-list { max-height: 60vh; overflow: auto; margin: 8px 0; }
.recall-rows { list-style: none; padding: 0; margin: 0; }
.recall-rows li {
  display: grid;
  grid-template-columns: 64px 1fr 100px;
  gap: 12px; align-items: center;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 120ms;
}
.recall-rows li:hover { border-color: var(--accent); background: var(--accent-soft); }
.recall-rows .r-id {
  color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.recall-rows .r-meta { color: var(--text-muted); font-size: 12px; }
.recall-rows .r-total {
  color: var(--text); text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ───── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  padding: 12px 24px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  font-size: 14px; font-weight: 500;
}
.toast.error {
  background: var(--danger);
  color: #fff;
}

/* ───── Tablet portrait (right pane collapses to top) ─────────── */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .left { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ════════════════════════════════════════════════════════════════════════
   STRIPE-GRADE POLISH LAYER — refines specific components on top of the
   base rules above. Tokens come from theme.css. Later rules win, so this
   block fine-tunes the premium look without rewriting everything.
   ════════════════════════════════════════════════════════════════════════ */

/* Topbar — quieter, hairline shadow, refined brand lockup */
.topbar { padding: 14px 24px; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
.brand { font-weight: 650; letter-spacing: -0.01em; gap: 10px; }
.brand::before { width: 10px; height: 10px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brand-sub { font-weight: 500; }

/* Search field — premium focus ring, taller target */
.entry-bar { padding: 18px 24px 12px; }
.entry-bar input {
  height: 52px; border-radius: var(--radius-lg);
  background: var(--surface); border-color: var(--border-strong); font-size: 16px;
}
.entry-bar input:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* Cart — rounded rows, tabular mono money */
.cart-row { border-radius: var(--radius-lg); }
.cart-row-meta .cart-amount, .cart-qty, .cart-price { font-family: var(--font-mono); }

/* Totals — big total in mono, stronger hierarchy */
.totals { padding: 18px 24px; }
.totals > div span:last-child { font-family: var(--font-mono); }
.totals .grand span:last-child { font-family: var(--font-mono); font-size: 30px; letter-spacing: -0.02em; }

/* Payment — emerald Cash button (money green), generous, soft lift */
.payment { padding: 16px 24px 24px; }
.pay.cash {
  background: var(--success); color: var(--success-ink); border-color: var(--success);
  box-shadow: var(--shadow-sm); min-height: 68px; border-radius: var(--radius-lg);
  letter-spacing: -0.01em;
}
.pay.cash:hover:not(:disabled) { background: var(--success-strong); box-shadow: var(--shadow-md); filter: none; }

/* Review mode: the pay button becomes "Print" — gold, not the green money
   button, so it reads as a view/reprint action rather than completing a sale. */
.pay.review {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.pay.review:hover:not(:disabled) { filter: brightness(1.04); box-shadow: var(--shadow-md); }

/* Chips — active uses accent */
.chip { padding: 10px 16px; }
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.active .chip-count { color: var(--accent-ink); }

/* Item cards — soft hover lift */
.item-card { border-radius: var(--radius-lg); }
.item-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.item-card:active { transform: translateY(0); }
.item-avatar { box-shadow: var(--shadow-sm); }

/* Price chips — hover to accent, mono value */
.price-chip .val { font-family: var(--font-mono); }
.price-chip:hover { background: var(--accent); border-color: var(--accent); }
.price-chip:hover .lbl, .price-chip:hover .val { color: var(--accent-ink); }

/* Modals — larger radius, deeper backdrop, mono cash field */
.modal { background: rgba(20,17,14,.45); }
.modal-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 26px; }
.modal-card input:focus { border-color: var(--accent); box-shadow: var(--ring); }
#cash-tendered, .numpad-display { font-family: var(--font-mono); }

/* Modal primary = accent; complete-sale = emerald (money) */
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); filter: none; }
#cash-confirm { background: var(--success); color: var(--success-ink); }
#cash-confirm:hover { background: var(--success-strong); }

/* Pagination — quieter */
.pagination-footer { padding: 12px 24px 18px; }

/* --- Brand button colours (Chow's): Craven A = red, Matterhorn = green --- */
.item-card--red   { border-left: 4px solid var(--danger, #DC2626); }
.item-card--green { border-left: 4px solid var(--success, #0E9F6E); }
.price-chip--red   { border-color: var(--danger, #DC2626); }
.price-chip--green { border-color: var(--success, #0E9F6E); }
.price-chip--red .lbl, .price-chip--red .val     { color: var(--danger, #DC2626); }
.price-chip--green .lbl, .price-chip--green .val  { color: var(--success, #0E9F6E); }
/* Coloured chips keep their colour on hover/tap (override the brass hover) */
.price-chip--red:hover   { background: var(--danger, #DC2626); border-color: var(--danger, #DC2626); }
.price-chip--green:hover { background: var(--success, #0E9F6E); border-color: var(--success, #0E9F6E); }
.price-chip--red:hover .lbl, .price-chip--red:hover .val,
.price-chip--green:hover .lbl, .price-chip--green:hover .val { color: #fff; }

/* ───── Compact pass: fit a 1280x1024 till ───────────────────────────────
   The shop screen is 1280x1024, and a real browser loses ~120-170px of that
   height to its own toolbars plus the Windows taskbar. The earlier
   "touchscreen pass" sizing left a cart row 123px tall (only ~3.5 sale lines
   visible) and squeezed the item tiles to 141px with wrapping names.

   This block tightens the whole screen. It lives at the END of the file ON
   PURPOSE: the touchscreen-pass rules above have equal specificity, so source
   order is what lets these win without editing rules in three places.

   HARD FLOOR: the controls a cashier actually taps — quantity, price, remove —
   stay >=38px. Density must not cost a finger its target on a touchscreen. */

/* Give the item pane more of the width so tiles are wide enough for a
   one-line product name (was 1fr / 1.1fr = 610 / 670 at this screen). */
.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

/* Header + search bar: recover vertical space without shrinking the input's
   own tap area more than a few pixels. */
.entry-bar { padding: 10px 16px 8px; }
.entry-bar input { padding: 11px 14px; font-size: 14.5px; }

/* Cart rows — the biggest win. Two lines stay (no markup change), but the
   padding, gaps and control boxes tighten, roughly halving the row height so
   about twice as many sale lines are visible at once. */
.cart-wrap { padding: 2px 12px 12px; }
.cart-list { gap: 6px; }
.cart-row { padding: 7px 10px; gap: 2px; }
.cart-row-main { gap: 8px; }
.cart-row-name { font-size: 14px; line-height: 1.25; }
.cart-row-meta { gap: 5px; font-size: 12.5px; }
.cart-row-meta .cart-amount { font-size: 14px; }
.cart-qty, .cart-price { font-size: 14.5px; }
.cart-qty.editable, .cart-price.editable {
  padding: 6px 10px; min-width: 42px; min-height: 38px;   /* tap floor */
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-row-x {
  width: 38px; height: 38px; min-width: 38px;             /* tap floor */
  font-size: 19px;
}
.cart-row-stock { font-size: 10.5px; padding: 1px 7px; }
.cart-row-discount-btn { width: 24px; height: 24px; }

/* Totals + Cash button: still prominent, just less tall. */
.cart-foot, .totals { padding-top: 10px; padding-bottom: 10px; }

/* Item tiles — shorter and tighter. With the wider pane above, a name like
   "Matterhorn 10s Carton" now fits without the card growing. */
.item-card-grid { gap: 10px; }
.item-card { padding: 10px; min-height: 0; gap: 8px; }
.item-card-top { gap: 8px; }
/* 13px is the size at which the longest real product name ("Matterhorn 20s Carton")
   fits on ONE line at this tile width — measured, not guessed. Every tile then has
   the same one-line name and the row reads even. */
.item-card--brandtile .item-card-name { font-size: 13px; }
.item-card-stock { margin-top: 2px; font-size: 10.5px; }
.price-chip { padding: 9px 6px; }        /* stays a comfortable tap target */
/* Push the price button to the bottom of its tile so every button in a row lines
   up even when one product name wraps to two lines and its neighbour's doesn't
   (e.g. "Matterhorn 20s Carton" vs "Craven A 10s Case"). Without this the row
   reads ragged, because grid cards stretch to equal height but their contents
   flow from the top. */
.item-card-prices { margin-top: auto; }
.item-card-grid--brands4 { grid-template-columns: repeat(2, minmax(0, 1fr)) 12px repeat(2, minmax(0, 1fr)); }