/* SaigonBite - one stylesheet. Tokens first; one accent (green) marks the action on each screen.
   Sizes in use: 16px body, 20px section headings and wordmark, 28px page titles and totals. */
:root {
  --ground: #ffffff;
  --surface: #f2f5f3;
  --surface-2: #e3ede8;
  --ink: #1b2220;
  --muted: #566360;
  --accent: #0b6b4f;
  --accent-press: #095a41;
  --danger: #a32018;
  --danger-bg: #fbeae8;
  --control: #7c8985;
  --radius: 8px;
  --gutter: 16px;
  --measure: 720px;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 16px/1.5 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink); background: var(--ground);
}
h1, h2, p, ul, ol, dl, dd { margin: 0; }
h1 { font-size: 24px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 20px; line-height: 1.3; font-weight: 700; }
@media (min-width: 600px) { h1 { font-size: 28px; } }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-press); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.num, .price { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Frame: one column, same gutter in the bar, the page and the footer */
.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: -48px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: var(--radius); z-index: 10; }
.skip:focus { top: 8px; color: #fff; }

.topbar { background: var(--surface); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.brand { font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.account { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account .who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account form { margin: 0; }
@media (max-width: 479px) { .account .role { display: none; } }

main { flex: 1; padding: 24px 0 32px; }
main > .wrap > * + * { margin-top: 24px; }
.page-head > * + * { margin-top: 8px; }

footer { color: var(--muted); padding: 24px 0 32px; }

/* Steps of the order flow: an ordered list, current step in ink */
.steps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.steps li + li::before { content: "\203A"; margin-right: 16px; color: var(--control); }

/* Buttons: flat, one radius, 48px tall; one primary per screen */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.btn:hover, button:hover { background: var(--accent-press); border-color: var(--accent-press); color: #fff; }
.btn:active, button:active { background: var(--accent-press); }
.btn.secondary, button.secondary { background: transparent; color: var(--ink); border-color: var(--control); }
.btn.secondary:hover, button.secondary:hover { background: var(--surface); color: var(--ink); }
.btn.link, button.link {
  background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
.btn.link:hover, button.link:hover { background: none; color: var(--accent-press); }
button[disabled], .btn[aria-disabled="true"] { background: var(--surface-2); border-color: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (max-width: 479px) { .actions .btn:not(.link), .actions button:not(.link) { width: 100%; } }

/* Forms */
label { display: block; font-weight: 600; }
.field > * + * { margin-top: 8px; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; height: 48px; padding: 0 12px; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--control); border-radius: var(--radius);
}
.field .hint { color: var(--muted); font-weight: 400; }
.narrow { max-width: 360px; }

/* Alerts: fill only */
.flash { padding: 12px 16px; border-radius: var(--radius); }
.flash.error { background: var(--danger-bg); color: var(--danger); }
.flash.info, .flash.notice { background: var(--surface-2); color: var(--ink); }
.flash.success { background: var(--surface-2); color: var(--accent); }

/* Panels: a tone step, no line, no shadow */
.panel { background: var(--surface); border-radius: var(--radius); padding: 16px; }
@media (min-width: 600px) { .panel { padding: 24px; } }
.panel > * + * { margin-top: 12px; }

/* Hub list */
.hubs { list-style: none; padding: 0; }
.hubs > li + li { margin-top: 12px; }
.hub { display: grid; gap: 12px; }
@media (min-width: 600px) { .hub { grid-template-columns: 1fr auto; align-items: center; } }
.hub .fee { font-weight: 600; }

/* Menu: items grouped by brand */
.brand-group > * + * { margin-top: 12px; }
.brand-group + .brand-group { margin-top: 32px; }
.items { list-style: none; padding: 0; }
.items > li + li { margin-top: 8px; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: 12px 16px;
}
.item.chosen { background: var(--surface-2); }
.item .name { font-weight: 600; }
.item .desc { color: var(--muted); }
.item .price { margin-top: 4px; }
.item.soldout { background: var(--ground); color: var(--muted); padding-left: 0; padding-right: 0; }
.item.soldout .name { font-weight: 400; }
.item .soldout-label { font-weight: 600; }
@media (max-width: 379px) { .item { grid-template-columns: 1fr; } .item .qty, .item .soldout-label { justify-self: end; } }

.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { width: 44px; min-height: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 1; background: var(--ground); color: var(--ink); border-color: var(--control); }
.qty button:hover { background: var(--surface-2); color: var(--ink); border-color: var(--control); }
.qty input[type=number] { width: 3.5rem; height: 44px; padding: 0 4px; text-align: center; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Running total bar: sticks to the bottom of the menu form */
.summary-bar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 24px;
  background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.summary-bar .count { color: var(--muted); }
.summary-bar .subtotal { font-weight: 600; }
@media (max-width: 479px) { .summary-bar { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; } }

/* Tables: real tables keep row lines; numbers right-aligned in tabular figures */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--muted); }
th, td { padding: 12px 8px; vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr + tr td { border-top: 1px solid var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-row td { color: var(--muted); }
.total-row td { font-weight: 700; font-size: 20px; color: var(--ink); }
.line-detail { display: none; color: var(--muted); }
@media (max-width: 479px) {
  /* Phone: each row becomes "name ... amount"; unit price and quantity move under the name */
  .order-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .order-lines tr { display: flex; justify-content: space-between; gap: 16px; }
  .order-lines td { display: block; padding-left: 0; padding-right: 0; }
  .order-lines tbody tr + tr td { border-top: 0; }
  .order-lines tbody tr + tr { border-top: 1px solid var(--surface-2); }
  .order-lines .col-unit, .order-lines .col-qty { display: none; }
  .line-detail { display: block; }
}

/* Totals and confirmation */
.big { font-size: 28px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.done { background: var(--surface-2); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .btn, button, .item { transition: background-color .15s ease, color .15s ease; }
}

.how { padding-left: 20px; }
.how > li + li { margin-top: 8px; }

/* ---- Part 2: staff screens, forms, badges ---------------------------------------------- */
.wide .wrap { max-width: calc(1120px + 2 * var(--gutter)); }
.mainnav { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0 0 12px; }
.mainnav a { color: var(--muted); font-weight: 600; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.mainnav a:hover { color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.stack > * + * { margin-top: 16px; }
.two { display: grid; gap: 16px; }
@media (min-width: 600px) { .two { grid-template-columns: 1fr 1fr; } .two > * + * { margin-top: 0; } }
input[type=email], input[type=tel], input[type=date] {
  width: 100%; height: 48px; padding: 0 12px; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--control); border-radius: var(--radius);
}
.hint { color: var(--muted); font-weight: 400; font-size: 14px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.choice { display: flex; align-items: center; gap: 12px; font-weight: 400; min-height: 44px; }
.choice input { width: 20px; height: 20px; accent-color: var(--accent); }
.payment { margin: 24px 0; }
.inline { display: inline; margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.inline-form input[type=text], .inline-form select, .inline-form input[type=date] { width: auto; flex: 1 1 200px; }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.filter .field { flex: 1 1 160px; }
.wide-form { max-width: 520px; }

button.danger { background: var(--danger); border-color: var(--danger); }
button.danger:hover { background: #8a1a13; border-color: #8a1a13; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 600; }
.badge.good { background: var(--surface-2); color: var(--accent); }
.badge.warn { background: var(--danger-bg); color: var(--danger); }
.attention { background: var(--danger-bg); }
.plain { list-style: none; padding: 0; }
.plain > li + li { margin-top: 4px; }

table.data th { border-bottom: 1px solid var(--surface-2); }
table.data tr.archived td { color: var(--muted); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * + * { margin-left: 12px; }
.row-actions button.link { min-height: 32px; }
.total-row td { font-weight: 700; }

/* Kitchen board: one column per state */
.board { display: grid; gap: 16px; }
@media (min-width: 900px) { .board { grid-template-columns: repeat(4, 1fr); } }
.column { background: var(--surface); border-radius: var(--radius); padding: 12px; }
.column > * + * { margin-top: 12px; }
.column h2 .count { color: var(--muted); font-weight: 400; }
.card { background: var(--ground); border-radius: var(--radius); padding: 12px; }
.card > * + * { margin-top: 8px; }
.card-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.card .actions button, .card .actions .btn:not(.link) { min-height: 40px; width: auto; }
section > * + * { margin-top: 12px; }

/* ---- P5.1 refinement R1: tap targets of at least 44 px (measured: role links 34, wordmark 30, links in
   actions 24, kitchen card links 24 and buttons 40, admin row link-buttons 32) ------------------------ */
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.mainnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.actions a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.card-head a { display: inline-flex; align-items: center; min-height: 44px; }
.card .actions button, .card .actions .btn:not(.link) { min-height: 44px; }
.row-actions a, .row-actions button.link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- P5.1 refinement R2: My orders on a phone is one row per order (measured: 449 px wide on a 390 px
   screen, 450 px on 360 px) ----------------------------------------------------------------------- */
@media (max-width: 479px) {
  .my-orders thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .my-orders tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 8px 0; }
  .my-orders tbody tr + tr { border-top: 1px solid var(--surface-2); }
  .my-orders td, .my-orders tbody tr + tr td { display: block; padding: 0; border: 0; }
  .my-orders td:nth-child(1) { grid-column: 1; align-self: center; font-weight: 600; }
  .my-orders td:nth-child(5) { grid-column: 2; grid-row: 1; align-self: center; text-align: right; }
  .my-orders td:nth-child(2), .my-orders td:nth-child(3) { grid-column: 1 / -1; color: var(--muted); }
  .my-orders td:nth-child(4) { grid-column: 1 / -1; }
  .my-orders td:nth-child(1) a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- P5.1 refinement R3: a wide report table scrolls inside its own labelled box (measured: the sales
   table is 967 px wide at 768 px) --------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- P5.1 refinement R4: shipper cards are surfaces, the cash to collect is the key figure and the action
   fills the width on a phone; an order link never wraps ("Order / 3") ---------------------------------- */
.panel.card { background: var(--surface); padding: 16px; }
.panel.card > * + * { margin-top: 8px; }
.cash { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
table.data td:first-child a { white-space: nowrap; }
@media (max-width: 479px) {
  .panel.card .actions .btn:not(.link), .panel.card .actions button { width: 100%; min-height: 48px; }
}

/* R1 (cont.): short link labels ("Edit", "Hubs", "Back") are at least 44 px wide as well */
.mainnav a, .row-actions a, .row-actions button.link, .btn.link, .card-head a { min-width: 44px; justify-content: center; }

/* ---- P5.1 refinement R6: a destructive action that is not the final irreversible step is an outline in the
   danger colour (A6: destructive actions use danger and ask for confirmation) -------------------------- */
button.danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); }
button.danger-outline:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }