/* Exclusive Food Mart #1 — Inventory & Reorder
 *
 * Light only, on purpose. An earlier version followed the operating system's
 * dark preference, which put red "below par" markers on a black field and was
 * hard to read. Back-office retail software is light, and this follows that.
 *
 * Colour is used sparingly and only to mean something. Low stock is a small
 * red badge and a red number — never a red-filled row, which reads as an
 * emergency on a screen where a third of the list is normally below par.
 */

:root {
  --bg:          #eef1f5;
  --surface:     #ffffff;
  --surface-2:   #f6f7f9;
  --surface-3:   #eceff3;
  --line:        #dde2e9;
  --line-strong: #c5ccd6;

  --text:      #16202e;
  --text-mid:  #48566a;
  --text-dim:  #6b7787;

  --primary:      #1252c9;
  --primary-dark: #0e42a5;
  --primary-soft: #e8effc;

  --ok:      #0a7c3f;  --ok-soft:     #e7f4ec;
  --warn:    #9a5b00;  --warn-soft:   #fdf2e0;
  --danger:  #b3261e;  --danger-soft: #fdecea;

  --radius: 10px;
  --tap: 52px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow:    0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg: 0 8px 24px rgba(16,24,40,.12);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --num: ui-monospace, 'SF Mono', 'Segoe UI Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overscroll-behavior-y: none;
}

button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
.hidden { display: none !important; }
.mobile-only { display: none; }

/* ---------- Brand ---------- */

.brand, .lock-brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .875rem; letter-spacing: .02em;
}
.brand strong, .lock-brand strong { display: block; font-size: .9375rem; font-weight: 650; letter-spacing: -.01em; }
.brand span,   .lock-brand span   { display: block; font-size: .75rem; color: var(--text-dim); }

/* ---------- Lock screen ---------- */

#lock {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lock-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 28px 26px 26px; width: 100%; max-width: 356px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.lock-brand { align-self: stretch; }
.lock-hint { font-size: .8125rem; color: var(--text-dim); }

.seg {
  display: flex; background: var(--surface-3); border-radius: 9px;
  padding: 3px; gap: 3px; width: 100%;
}
.seg button {
  flex: 1; height: 42px; border-radius: 7px;
  font-weight: 600; font-size: .875rem; color: var(--text-mid);
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.seg.small { width: auto; }
.seg.small button { height: 34px; padding: 0 16px; font-size: .8125rem; }

.pin-dots { display: flex; gap: 13px; }
.pin-dots span {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background .12s, transform .12s;
}
.pin-dots span.on { background: var(--primary); box-shadow: none; transform: scale(1.1); }
.pin-dots.bad { animation: shake .38s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.keypad button {
  height: 58px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 1.375rem; font-weight: 500; font-family: var(--num); color: var(--text);
}
.keypad button:hover  { background: var(--surface-3); }
.keypad button:active { background: var(--line); transform: scale(.97); }
.keypad button.fn { font-family: var(--font); font-size: .875rem; font-weight: 600; color: var(--text-dim); background: transparent; border-color: transparent; }

.lock-msg { min-height: 18px; font-size: .8125rem; color: var(--danger); font-weight: 550; }

/* ---------- Shell ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar { display: none; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 13px 16px; display: flex; align-items: center; gap: 10px;
}
.topbar h2 { font-size: 1.0625rem; font-weight: 650; flex: 1; letter-spacing: -.015em; }

.role-pill {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 9px; border-radius: 5px; background: var(--primary-soft); color: var(--primary);
}
.linkbtn { font-size: .8125rem; font-weight: 600; color: var(--primary); padding: 8px; border-radius: 6px; }
.linkbtn:hover { background: var(--primary-soft); }

main { padding: 14px; flex: 1; }

.view { display: none; }
.view.active { display: block; }

/* ---------- Panels ---------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; margin-bottom: 14px;
}
.panel-head {
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-dim);
}
.scanpanel { padding: 14px; }

/* ---------- Scan input ---------- */

.scanbar { position: relative; }
.scan-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; stroke: var(--text-dim); fill: none; stroke-width: 1.8; pointer-events: none;
}
.scanbar input {
  width: 100%; height: 52px; padding: 0 100px 0 43px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 9px; font-size: .9375rem;
}
.scanbar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.scanbar input::placeholder { color: var(--text-dim); }

.scan-status {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px; pointer-events: none;
  padding: 4px 9px; border-radius: 999px; background: var(--ok-soft);
}
.scan-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.scan-status .txt { font-size: .6875rem; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .04em; }
.scan-status.idle { background: var(--warn-soft); }
.scan-status.idle .dot { background: var(--warn); }
.scan-status.idle .txt { color: var(--warn); }

.mode-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.mode-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.mode-row .seg { margin-left: auto; }

/* Type-ahead results */
.results {
  position: absolute; top: 58px; left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto;
}
.results button {
  display: flex; width: 100%; text-align: left; gap: 10px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line); min-height: 48px;
}
.results button:last-child { border-bottom: none; }
.results button:hover, .results button.sel { background: var(--primary-soft); }
.results .r-name { flex: 1; font-weight: 500; }
.results .r-meta { font-size: .75rem; color: var(--text-dim); font-family: var(--num); }

.chip {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 4px; background: var(--surface-3); color: var(--text-dim);
}
.chip.order-only { background: var(--warn-soft); color: var(--warn); }

/* ---------- Scanned line cards ----------
   Reads as a receipt of something already done, not a form awaiting input. */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 10px; animation: land .2s ease-out;
}
@keyframes land { from { opacity: 0; transform: translateY(-6px); } }

.card.unsaved { border-color: #e6bf7a; background: var(--warn-soft); }

.card-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px 0; }
.tick {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--ok-soft); color: var(--ok);
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
}
.card.unsaved .tick { background: #f6e3c2; color: var(--warn); }
.card-id { flex: 1; min-width: 0; }
.card-name { font-weight: 600; line-height: 1.3; }
.card-meta { font-size: .75rem; color: var(--text-dim); margin-top: 1px; font-family: var(--num); }

.badge {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.badge.ok      { background: var(--ok-soft);      color: var(--ok); }
.badge.low     { background: var(--danger-soft);  color: var(--danger); }
.badge.pending { background: #f6e3c2;             color: var(--warn); }
/* Below par but not running out — informational, so it stays quiet. */
.badge.order   { background: var(--primary-soft); color: var(--primary); }

/* Activity rows */
.time { font-family: var(--num); font-size: .75rem; color: var(--text-dim); width: 62px; flex: 0 0 62px; }
.delta { font-family: var(--num); font-weight: 650; font-size: .875rem; }
.delta.down { color: var(--text-mid); }
.delta.up   { color: var(--ok); }
.mini {
  height: 30px; padding: 0 11px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .75rem; font-weight: 600; color: var(--text-mid);
}
.mini:hover { background: var(--surface-2); border-color: var(--line-strong); }

.card-body {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  padding: 12px 14px 13px; margin-top: 11px; border-top: 1px solid var(--line);
}
.field label {
  display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); margin-bottom: 5px;
}

.stepper { display: flex; align-items: center; gap: 3px; background: var(--surface-3); border-radius: 8px; padding: 3px; }
.stepper button {
  width: 42px; height: 40px; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--line); font-size: 1.25rem; font-weight: 500; color: var(--text);
}
.stepper button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.stepper button:active:not(:disabled) { transform: scale(.94); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper .qty { min-width: 38px; text-align: center; font-family: var(--num); font-size: 1.0625rem; font-weight: 650; }

/* The count before and after, spelled out — the plainest possible answer to
   "did that actually save?" */
.beforeafter { display: flex; align-items: center; gap: 7px; font-family: var(--num); }
.beforeafter s   { color: var(--text-dim); text-decoration: line-through; font-size: .9375rem; }
.beforeafter i   { color: var(--text-dim); font-style: normal; }
.beforeafter b   { font-size: 1.375rem; font-weight: 650; line-height: 1; }
.beforeafter .par { font-size: .75rem; color: var(--text-dim); }
.card.low .beforeafter b { color: var(--danger); }

.card-body .spacer { flex: 1; }
.card-body .act { display: flex; gap: 8px; }
.card-body .act button {
  height: 38px; padding: 0 16px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .8125rem; font-weight: 600; color: var(--text-mid);
}
.card-body .act button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.card-body .act button.retry { background: var(--warn); border-color: var(--warn); color: #fff; }

/* ---------- Finish bar ---------- */

.finishbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 11px 14px;
  position: sticky; bottom: 0;
}
.finishbar-info { flex: 1; }
.finishbar-info b { font-family: var(--num); font-size: 1.25rem; font-weight: 650; }
.finishbar-info span { font-size: .8125rem; color: var(--text-dim); }
.finishbar button {
  height: 42px; padding: 0 22px; border-radius: 8px;
  background: var(--primary); color: #fff; font-weight: 650; font-size: .875rem;
}
.finishbar button:hover:not(:disabled) { background: var(--primary-dark); }
.finishbar button:disabled { background: var(--surface-3); color: var(--text-dim); cursor: default; }

/* ---------- Rows ---------- */

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); min-height: 48px;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface-2); }
.row-name { flex: 1; font-weight: 500; }
.row-meta { font-size: .75rem; color: var(--text-dim); font-family: var(--num); }
.row-qty  { font-family: var(--num); font-size: 1rem; font-weight: 650; white-space: nowrap; }
.row.below .row-qty { color: var(--danger); }

/* ---------- Item row ----------------------------------------------------
   Name on its own line, then the numbers as separate labelled cells. Running
   "#10350 · par 12, 11 on hand" together as one sentence made the reader do
   the parsing; a labelled grid answers each question in its own place. */

.itemrow {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.itemrow:last-child { border-bottom: none; }
.itemrow:hover { background: var(--surface-2); }
.itemrow .main { flex: 1; min-width: 0; }
.itemrow .name { font-weight: 600; line-height: 1.3; margin-bottom: 8px; }

.stats { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.stat { min-width: 52px; }
.stat span {
  display: block; font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); white-space: nowrap;
}
.stat b { display: block; font-family: var(--num); font-size: .9375rem; font-weight: 650; }
.stat b.muted { color: var(--text-dim); font-weight: 500; }
.stat.flag b { color: var(--danger); }

.itemrow .side-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.itemrow .side-actions .rowbtns { display: flex; gap: 6px; }

/* The order quantity is the one editable number, so it is visually the field. */
.orderqty { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.orderqty label {
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--primary);
}
.orderqty input {
  width: 68px; height: 42px; text-align: center;
  font-family: var(--num); font-size: 1.0625rem; font-weight: 650;
  border: 1px solid var(--primary); border-radius: 8px; background: var(--surface);
}
.orderqty input:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }

.filters { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; }
.filters button {
  padding: 8px 15px; border-radius: 7px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--text-mid); min-height: 38px;
}
.filters button:hover { border-color: var(--line-strong); }
.filters button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

.section-head {
  display: flex; align-items: baseline; gap: 8px; padding: 11px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.section-head h3 { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.section-head span { font-size: .75rem; color: var(--text-dim); font-family: var(--num); margin-left: auto; }

.empty { text-align: center; padding: 48px 20px; color: var(--text-dim); }
.empty svg { width: 34px; height: 34px; stroke: var(--line-strong); fill: none; stroke-width: 1.6; margin-bottom: 12px; }
.empty strong { display: block; font-size: .9375rem; color: var(--text); margin-bottom: 5px; }
.empty p { font-size: .8125rem; max-width: 320px; margin: 0 auto; }

.btn {
  display: block; width: 100%; height: 46px; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: .9375rem; font-weight: 650; margin-top: 12px;
}
.btn:hover { background: var(--primary-dark); }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); }

.note { padding: 11px 14px; font-size: .8125rem; color: var(--text-dim); background: var(--surface-2); }
.note.warn { background: var(--warn-soft); color: var(--warn); font-weight: 550; }

.panel-foot { padding: 10px 14px; border-top: 1px solid var(--line); }
.order-docs { display: flex; gap: 10px; }
.order-docs .btn { margin-top: 0; }
@media (max-width: 520px) { .order-docs { flex-direction: column; } }
.mini.wide { width: 100%; height: 40px; }
.qtybox { display: flex; align-items: center; gap: 8px; }
.qtybox .times { color: var(--text-dim); font-family: var(--num); }
.qtybox input {
  width: 54px; height: 38px; text-align: center; font-family: var(--num); font-weight: 650;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface);
}
.qtybox input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------- Manage products ---------- */

.manage-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.manage-top .filters { margin-bottom: 0; flex: 1; }
.btn.compact { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 40px; padding: 0 16px; margin-top: 0; font-size: .8125rem; white-space: nowrap; }

.row .tag {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 4px; background: var(--surface-3); color: var(--text-dim);
}
.row .tag.tracked { background: var(--primary-soft); color: var(--primary); }
.row.retired { opacity: .6; }
.row.retired .row-name { text-decoration: line-through; }

.row .rowbtns { display: flex; gap: 6px; }

/* ---------- Modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 24, 40, .45);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
@media (min-width: 640px) { .modal { align-items: center; padding: 20px; } }

.modal-card {
  background: var(--surface); width: 100%; max-width: 460px;
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: 92vh;
  animation: sheet-up .22s ease-out;
}
@media (min-width: 640px) { .modal-card { border-radius: 16px; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }

.modal-head { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head strong { flex: 1; font-size: 1rem; font-weight: 650; }
.modal-x { width: 32px; height: 32px; border-radius: 7px; font-size: 1.5rem; color: var(--text-dim); line-height: 1; }
.modal-x:hover { background: var(--surface-2); }

.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.modal-foot .btn { margin-top: 0; }

.field-block { margin-bottom: 16px; }
.field-block > label {
  display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-mid); margin-bottom: 7px;
}
.field-block .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.field-block input {
  width: 100%; height: 46px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; font-size: .9375rem;
}
.field-block input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field-row { display: flex; gap: 12px; }
.field-row .field-block { flex: 1; }
.field-help { font-size: .75rem; color: var(--text-dim); margin-top: 7px; }

.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 1 1 40%; }
.modal .seg { background: var(--surface-3); }
.modal .seg button { height: 40px; padding: 0 10px; font-size: .8125rem; }
.modal .seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.modal-msg { min-height: 16px; font-size: .8125rem; color: var(--danger); font-weight: 550; }

.pick-results { max-height: 46vh; overflow-y: auto; margin: 0 -18px -6px; border-top: 1px solid var(--line); }
.pick-results .row { padding: 11px 18px; }
.pick-results .qtybox { display: flex; align-items: center; gap: 8px; }
.pick-results .qtybox input {
  width: 56px; height: 40px; text-align: center; font-family: var(--num); font-weight: 650;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface);
}
.pick-results .qtybox button {
  height: 40px; padding: 0 14px; border-radius: 7px;
  background: var(--primary); color: #fff; font-weight: 650; font-size: .8125rem;
}
.pick-results .added { color: var(--ok); font-weight: 650; font-size: .8125rem; }
/* The "add something not in the list" row sits apart from the matches. */
.pick-results .row.create { background: var(--primary-soft); }
.pick-results .row.create .row-name { color: var(--primary); }
.pick-results .row.create .qtybox { flex-wrap: wrap; justify-content: flex-end; }
.ghostbtn {
  height: 40px; padding: 0 12px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-weight: 650; font-size: .8125rem; color: var(--text-mid);
}
.ghostbtn:hover { background: var(--surface-2); }

/* ---------- Receiving ---------- */

.recv-summary {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px;
}
.recv-summary .stat b { font-size: 1.25rem; }
.recv-summary .stat.flag b { color: var(--warn); }

.itemrow.adjusted { background: var(--warn-soft); }
.itemrow.adjusted .ordered-was { color: var(--warn); font-weight: 650; }
.itemrow.short-recv .stat.recv b { color: var(--warn); }

.recvqty { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.recvqty label {
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ok);
}
.recvqty input {
  width: 68px; height: 42px; text-align: center;
  font-family: var(--num); font-size: 1.0625rem; font-weight: 650;
  border: 1px solid var(--ok); border-radius: 8px; background: var(--surface);
}
.recvqty input:focus { outline: none; box-shadow: 0 0 0 3px var(--ok-soft); }

.nav-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
  display: inline-block; margin-left: auto;
}

.barcode-shown {
  background: var(--surface-3); border-radius: 8px; padding: 11px 13px; margin-bottom: 16px;
}
.barcode-shown span {
  display: block; font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim);
}
.barcode-shown b { font-family: var(--num); font-size: 1.125rem; letter-spacing: .02em; }

/* ---------- Mobile tab bar ---------- */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
  /* A manager has seven sections; on a phone they scroll rather than shrink to
     unreadable slivers. Staff only ever see two, so this never applies to them. */
  overflow-x: auto; scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  flex: 1 0 auto; min-width: 74px; padding: 8px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .6875rem; font-weight: 600; color: var(--text-dim); min-height: var(--tap);
}
.tabbar button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.tabbar button[aria-pressed="true"] { color: var(--primary); }

main { padding-bottom: 84px; }

/* ---------- Toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(12px);
  background: var(--text); color: #fff;
  padding: 11px 17px; border-radius: 9px; font-size: .8125rem; font-weight: 550;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 60; max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast .ok { color: #6ee7a8; font-weight: 700; }

/* ---------- Desktop: the front counter ----------------------------------
   The staff machine is a desktop with a barcode scanner and this is where the
   tool lives. Above 960px the layout becomes a back-office one: fixed sidebar,
   the scan session and what's running low side by side. */

@media (min-width: 960px) {
  .tabbar { display: none; }
  main { padding: 20px 24px 32px; padding-bottom: 32px; }

  .sidebar {
    display: flex; flex-direction: column; gap: 6px;
    width: 236px; flex: 0 0 236px;
    background: var(--surface); border-right: 1px solid var(--line);
    padding: 16px 12px; position: sticky; top: 0; height: 100vh;
  }
  .sidebar .brand { padding: 4px 8px 14px; }

  .navlist { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .navlist button {
    display: flex; align-items: center; gap: 11px;
    padding: 0 12px; height: 42px; border-radius: 8px;
    font-size: .875rem; font-weight: 550; color: var(--text-mid); text-align: left;
  }
  .navlist button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 18px; }
  .navlist button:hover { background: var(--surface-2); color: var(--text); }
  .navlist button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 650; }

  .sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; display: flex; align-items: center; gap: 9px; }
  .who { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
  .avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-mid);
    display: grid; place-items: center; font-weight: 700; font-size: .8125rem;
  }
  .who strong { display: block; font-size: .8125rem; font-weight: 650; }
  .who span   { display: block; font-size: .6875rem; color: var(--text-dim); }

  .topbar { padding: 15px 24px; }
  .topbar h2 { font-size: 1.1875rem; }

  /* The scan run is the whole screen — nothing competes with it. */
  #view-scan .scanpanel { margin-bottom: 16px; }
  #view-scan .col-main  { max-width: 860px; }

  .scanbar input { height: 54px; font-size: 1rem; }
  #toast { bottom: 28px; left: auto; right: 28px; transform: translateY(12px); }
  #toast.show { transform: translateY(0); }
  .btn { max-width: 300px; }
}

@media (max-width: 959px) { .mobile-only { display: block; } }

/* ---------- Print sheet: the page handed to B&G ----------
   A dedicated document, hidden on screen and revealed only when printing, so
   the printout is clean typography rather than the live app with its input
   boxes and buttons. The browser's own "Save as PDF" turns this same sheet
   into a PDF. */

#printSheet { display: none; }

.ps-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 4px; }
.ps-head h1 { font-size: 17pt; font-weight: 700; letter-spacing: -.01em; }
.ps-head .ps-store { font-size: 9.5pt; color: #333; margin-top: 2px; }
.ps-head .ps-meta { text-align: right; font-size: 9.5pt; color: #333; }
.ps-head .ps-meta b { display: block; font-size: 12pt; color: #000; }

.ps-sec { margin-top: 16px; }
.ps-sec h2 { font-size: 10pt; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #000; padding-bottom: 3px; margin-bottom: 4px; }
table.ps-table { width: 100%; border-collapse: collapse; }
table.ps-table th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; color: #555; padding: 3px 6px; border-bottom: 1px solid #999; }
table.ps-table td { font-size: 10.5pt; padding: 4px 6px; border-bottom: 1px solid #ddd; }
table.ps-table td.num, table.ps-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ps-table td.qty { font-weight: 700; }
.ps-total { margin-top: 6px; text-align: right; font-size: 10pt; }
.ps-foot { margin-top: 22px; font-size: 8.5pt; color: #666; border-top: 1px solid #ccc; padding-top: 8px; }

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .shell, .tabbar, #toast, .modal { display: none !important; }
  #printSheet { display: block; color: #000; }
}