/*
 * ForgeTech: dark mode only (05 §1). The design system is research/ui/STYLE.md.
 * Colours come from the tokens below; never a hex inside a page rule.
 * Sections: Tokens · Base · Components (shared: pages don't edit them) · Shell · Page: <name>.
 */

/* ===== Tokens ============================================================================== */
:root {
  /* Surfaces, darkest to lightest */
  --bg: #0e1013;
  --surface: #16191f;
  --surface-raised: #1e222a;
  --surface-hover: #262b35;
  --border: #2a2f3a;
  --border-strong: #3a414f;
  --border-input: #5f6878;          /* ≥ 3:1 on bg and surface (WCAG 1.4.11) */
  /* Text */
  --text: #e8eaed;
  --text-muted: #a2a9b5;
  /* The one accent: primary actions, links, focus, info */
  --accent: #4c8dff;
  --accent-hover: #6ba0ff;
  --accent-text: #0b1220;           /* text on a filled accent, danger or warning */
  --accent-bg: #16233b;
  /* Meaning (each with a tinted background) */
  --danger: #ff6b6b;                /* errors, destructive, Needs driver, Needs attention "!", negative stock */
  --danger-bg: #2a1618;
  --warning: #ffc14d;               /* Pending (to do), Needs details, warnings */
  --warning-bg: #2a2216;
  --success: #4ade80;               /* success, Packaged (owner, 2026-11-02) */
  --success-bg: #14251c;
  --new: #a78bfa;                   /* exchange marker */
  --new-bg: #221b33;
  --orange: #ff8c3a;                /* low stock, Oversold (05 §1), distinct from warning amber */
  --orange-bg: #2c1a0e;
  --info: var(--accent);
  --info-bg: var(--accent-bg);
  /* Effects */
  --backdrop: rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.55);
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a2a9b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Spacing: multiples of 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --gap: var(--sp-4);               /* older names, kept for the page sections */
  --gap-lg: var(--sp-6);
  /* Type scale: five sizes */
  --fs-xs: 12px;                    /* table headings, pills, chips, badges */
  --fs-sm: 13px;                    /* labels, hints, captions, dense tables */
  --fs-md: 14px;                    /* body, controls, tables */
  --fs-lg: 16px;                    /* section headings (h2) */
  --fs-xl: 22px;                    /* page title (h1), key figures */
  --lh: 1.5;
  --lh-tight: 1.25;
  /* Shape and size */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 999px;
  --control-height: 38px;
  --control-height-sm: 30px;
  --nav-height: 56px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ===== Base ================================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); }
h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); font-weight: 600; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-bg); color: var(--text); }
code, .mono { font-family: var(--font-mono); font-size: max(0.9em, var(--fs-sm)); }  /* never under 13px, even in 13px tables */
.muted { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.muted-inline { color: var(--text-muted); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
[hidden] { display: none !important; }  /* a component's own display never beats hidden */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== Components (shared; STYLE.md §3) ==================================================== */

/* Layout */
.page { max-width: 880px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-12); }
.page-wide { max-width: 1200px; }
.page-header { margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.page-header-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.section-title { margin: var(--sp-8) 0 var(--sp-3); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--sp-4); }

/* Card and form section: a card whose first child is its h2 */
.card { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card + .card { margin-top: var(--sp-6); }
.card > h2:first-child { margin-bottom: var(--sp-4); }

/* Buttons: primary (one per view), secondary (.btn), danger, ghost; .btn-sm for rows and the nav */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-height); padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text);
  font: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-input); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.btn-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--accent-text); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-hover); border-color: transparent; color: var(--text); }
.btn-sm { height: var(--control-height-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn[disabled], .btn[aria-disabled=true] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover, .btn[aria-disabled=true]:hover { background: var(--surface-raised); border-color: var(--border-strong); }
.btn-primary[disabled]:hover { background: var(--accent); border-color: var(--accent); }

/* Loading: a disabled button with a spinner while its request runs (05 §1). htmx puts
   .htmx-request on the requesting element: the button itself, or its form. */
.spinner, .btn.htmx-request::after, form.htmx-request .btn[type=submit]::after {
  content: ""; display: inline-block; flex: none; width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pills (state: round) and chips (an attribute: square-cornered). Text always says what the colour means. */
.pill, .chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 22px; padding: 0 var(--sp-2);
  border: 1px solid; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap;
  vertical-align: middle;
}
.chip { border-radius: var(--radius-sm); }
/* Status (owner, 2026-11-02): Pending amber = to do; Packaged green = ready, the admin's usual step;
   Delivered and Cancelled muted, Cancelled with a dashed edge. */
/* Tone aliases (.pill-warn, -ok, -muted, -danger) for a pill that isn't an order status. */
.pill-pending, .pill-details, .pill-warn { color: var(--warning); background: var(--warning-bg); border-color: var(--warning); }
.pill-packaged, .pill-ok { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.pill-delivered, .pill-cancelled, .pill-inactive, .pill-muted { color: var(--text-muted); background: var(--surface-raised); border-color: var(--border-strong); }
.pill-cancelled, .pill-inactive { border-style: dashed; }
.pill-flag, .pill-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.pill-oversold { color: var(--orange); background: var(--orange-bg); border-color: var(--orange); }
.pill-exchange { color: var(--new); background: var(--new-bg); border-color: var(--new); padding: 0 5px; }
/* Payment method (owner, 2026-11-02): neutral; the text tells the three apart. */
.chip-cash, .chip-partial, .chip-card { color: var(--text); background: var(--surface-raised); border-color: var(--border-strong); }
.badge-low { color: var(--orange); background: var(--orange-bg); border-color: var(--orange); }
.stock-low { color: var(--orange); font-weight: 600; }
.stock-out { color: var(--danger); font-weight: 600; }

/* Count: a small round number beside a heading ("Held lines 1") */
.count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-raised);
  color: var(--text); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle;
}
/* Mark: the round "!" / "✓" / "i" glyph, as in banners; always next to words that say the same */
.mark {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--info); color: var(--accent-text);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.mark-warn { background: var(--warning); }
.mark-danger { background: var(--danger); }
.mark-ok { background: var(--success); }
/* Callout: an inline warning inside a form or dialog (a banner is for the page's result) */
.callout {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3);
  background: var(--info-bg); border: 1px solid var(--info); border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-sm); line-height: var(--lh); text-align: left;
}
.callout::before {
  content: "i"; display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--info); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.callout-warn { background: var(--warning-bg); border-color: var(--warning); }
.callout-warn::before { content: "!"; background: var(--warning); }

/* Form controls */
label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.field-label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
label .req, .field-label .req { color: var(--danger); font-weight: 600; }
label .muted, .field-label .muted { display: inline; font-weight: 400; }
/* A muted aside in a heading ("Payments · all-time, newest first") */
h2 .muted-inline, h2 .muted { font-size: var(--fs-sm); font-weight: 400; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; height: var(--control-height); padding: 0 var(--sp-3);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-md);
}
select {
  appearance: none; padding-right: var(--sp-8);
  background-image: var(--caret); background-repeat: no-repeat; background-position: right var(--sp-3) center;
}
textarea { height: auto; min-height: 76px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: var(--lh); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--text-muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input[readonly], textarea[readonly] { color: var(--text-muted); background: var(--surface); border-style: dashed; }
input:disabled, select:disabled, textarea:disabled { color: var(--text-muted); background: var(--surface); border-color: var(--border-strong); cursor: not-allowed; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.field { margin-bottom: var(--sp-4); }
.hint { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
.hint-warn { color: var(--warning); }
.field-error { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--danger); }
.field-error:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; min-height: 24px; font-size: var(--fs-md); font-weight: 400; color: var(--text); cursor: pointer; }
/* Date window (Drivers, Analytics): From and To show only when the range is Custom */
.w-custom { display: none; }
#window-form:has(#w-range option[value="custom"]:checked) .w-custom { display: block; }

/* Filter bar and toggle chip (a labelled checkbox the height of a select, highlighted when on) */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-4); }
.filters .field { margin: 0; }
.filters select, .filters input { width: auto; min-width: 140px; }
.filters .grow input { min-width: 260px; }
label.toggle-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0;
  height: var(--control-height); padding: 0 var(--sp-3);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-size: var(--fs-md); font-weight: 400; cursor: pointer; white-space: nowrap;
}
label.toggle-chip:hover { border-color: var(--text-muted); }
label.toggle-chip input { width: 16px; min-width: 0; height: 16px; margin: 0; accent-color: var(--warning); }
label.toggle-chip:has(input:checked) { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
label.toggle-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tables: hover, no zebra (05 §3); numbers right, text left; .table-sticky scrolls inside with a sticky head */
.table-scroll { overflow-x: auto; }
.list-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.list-table th, .list-table td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.list-table th {
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  border-bottom-color: var(--border-strong);
}
/* .sticky-head: the head sticks under the nav while the page scrolls. The table must not sit in a
   scrolling box (.table-scroll); a ⋯ menu closes when its box scrolls (STYLE.md §3). */
.list-table.sticky-head thead th { position: sticky; top: var(--nav-height); z-index: 2; background: var(--bg); box-shadow: inset 0 -1px 0 var(--border-strong); }
.list-table th.num, .list-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.list-table td.trunc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-table td.secondary { color: var(--text-muted); }
.list-table td.anchor { font-weight: 600; }
.list-table tbody tr.main-row:hover > td { background: var(--surface-raised); }
.list-table tfoot td { background: var(--surface); font-weight: 600; border-top: 2px solid var(--border-strong); border-bottom: 0; font-variant-numeric: tabular-nums; }
.list-table tr.detail-row > td { background: var(--surface); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
/* Flagged rows (hl-driver, hl-attention, hl-oversold, hl-details) carry no row colour (owner, 2026-11-02):
   their own cells say why (the Needs driver chip, the "!" mark, the Needs details pill). */
.list-table tr.row-negative > td { background: var(--danger-bg); }
.list-table tr.row-inactive > td { color: var(--text-muted); }  /* muted, not faded: opacity drops muted text below 4.5:1 */
.list-table tr.row-reversed > td { color: var(--text-muted); }
.nested { width: auto; max-width: 900px; border-collapse: collapse; font-size: var(--fs-sm); }
.nested th, .nested td { padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; }
.nested th { color: var(--text-muted); font-weight: 600; }
.nested th.num, .nested td.num { text-align: right; font-variant-numeric: tabular-nums; }
.strike { text-decoration: line-through; color: var(--text-muted); margin-right: var(--sp-1); }
.btn.expand { width: 28px; padding: 0; }

/* Empty state: every list has one */
.empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-md); }
.list-table td.empty { padding: var(--sp-8) var(--sp-4); text-align: center; white-space: normal; }  /* beats .list-table td's padding and left align */
.empty .empty-title { display: block; margin-bottom: var(--sp-1); color: var(--text); font-size: var(--fs-md); font-weight: 600; }
p.empty { margin: 0; }

/* Banners: success, error (danger), warning, info. role="alert" on errors; focus lands here after an action. */
.banner {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: var(--fs-md); line-height: var(--lh);
}
.banner::before {
  content: "i"; display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--info); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.banner:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.banner a { color: inherit; font-weight: 600; text-decoration: underline; }
.banner-body { min-width: 0; }
.banner-lead { display: block; font-weight: 600; }  /* an error's "Couldn't …" line (app.js) */
.banner-danger { background: var(--danger-bg); border-color: var(--danger); }
.banner-danger::before { content: "!"; background: var(--danger); }
.banner-warning { background: var(--warning-bg); border-color: var(--warning); }
.banner-warning::before { content: "!"; background: var(--warning); }
.banner-success { background: var(--success-bg); border-color: var(--success); }
.banner-success::before { content: "✓"; background: var(--success); }
.banner-info { background: var(--info-bg); border-color: var(--info); }

/* Dialogs: the shared confirm dialog and the shared form dialog (native <dialog>, showModal) */
dialog.confirm {
  width: min(520px, 92vw); max-height: calc(100vh - var(--sp-12)); padding: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-dialog);
}
dialog.confirm::backdrop { background: var(--backdrop); }
dialog.confirm .body { padding: var(--sp-6); }
dialog.confirm .body > h2:first-child { margin-bottom: var(--sp-3); }
dialog.confirm .foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6); background: var(--bg);
  border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
}
dialog.confirm ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--text-muted); font-size: var(--fs-md); }
dialog.confirm ul:empty { display: none; }
dialog.confirm [data-error] { color: var(--danger); }  /* the dialog's own validation errors are errors: red */
dialog.confirm [data-error]:empty { margin: 0; }
dialog.form-dialog { width: min(640px, 92vw); }
dialog.form-dialog .dialog-form { display: flex; flex-direction: column; max-height: calc(100vh - var(--sp-12) - 2px); }
dialog.form-dialog .dialog-form > .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
dialog.form-dialog .dialog-form > .foot { flex: none; }
/* Dialog summary: what the action is about (order: customer, location, items; payment: driver, Net) */
.dialog-summary {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.dialog-summary dt { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.dialog-summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dialog-summary dd ul { margin: 0; padding-left: var(--sp-4); color: var(--text); }
/* The order or payment number in a dialog title */
.dialog-ref {
  padding: 1px var(--sp-2); border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-raised); font-family: var(--font-mono); font-size: 0.95em; font-weight: 700;
}
/* Preview: the server's "before → after" of an action (Net, stock), set apart from the help text */
.preview { margin: 0 0 var(--sp-3); }
.preview:not(:empty) {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.preview:not(:empty)::before {
  content: "After saving"; display: block; margin-bottom: var(--sp-1);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.preview .hint { margin: 0; color: var(--text); font-size: var(--fs-lg); font-weight: 600; }
.preview:has(.hint-warn) { background: var(--warning-bg); border-color: var(--warning); }
.preview .hint-warn { color: var(--warning); font-size: var(--fs-md); }

/* The "⋯" row menu (keyboard behaviour in app.js) */
.row-menu-wrap { position: relative; }
.menu-trigger { width: 32px; padding: 0; font-weight: 700; letter-spacing: 0.05em; }
.row-menu {
  position: fixed; z-index: 50; min-width: 208px; padding: var(--sp-1);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.row-menu [role=menuitem] {
  display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: var(--fs-md); text-align: left; text-decoration: none; cursor: pointer;
}
.row-menu [role=menuitem]:hover { background: var(--surface-hover); }
.row-menu [role=menuitem]:focus { outline: none; background: var(--surface-hover); box-shadow: inset 0 0 0 2px var(--accent); }
.row-menu [role=menuitem].danger { color: var(--danger); }
.row-menu [role=menuitem].danger:hover, .row-menu [role=menuitem].danger:focus { background: var(--danger-bg); }
.row-menu .menu-sep { height: 1px; margin: var(--sp-1) var(--sp-1); background: var(--border-strong); }

/* ===== Shell: nav, login ==================================================================== */
.topnav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-1);
  height: var(--nav-height); padding: 0 var(--sp-6);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topnav .brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: var(--sp-6);
  color: var(--text); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
}
.topnav .brand img { width: 38px; height: 24px; filter: invert(1); }
.topnav .nav-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); align-self: stretch;
  padding: 0 var(--sp-3); color: var(--text-muted); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.topnav .nav-link:hover { color: var(--text); background: var(--surface-raised); }
.topnav .nav-link.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.topnav .nav-link:focus-visible { outline-offset: -2px; }
.topnav .spacer { flex: 1; }
.topnav .nav-tools { display: flex; align-items: center; gap: var(--sp-2); align-self: stretch; }
.topnav .nav-tools form { margin: 0; }
.topnav .env {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2);
  border: 1px solid var(--warning); border-radius: var(--radius-sm); background: var(--warning-bg);
  color: var(--warning); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--danger); color: var(--accent-text);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.sync-form .when-busy { display: none; }
.sync-form.htmx-request .when-busy { display: inline; }
.sync-form.htmx-request .when-idle { display: none; }

.login-box { max-width: 400px; margin: 14vh auto 0; padding: 0 var(--sp-4); }
.login-box .login-logo { display: block; width: 168px; height: auto; margin: 0 auto var(--sp-8); filter: invert(1); }
.login-box .card { padding: var(--sp-8); }
.login-box h1 { margin-bottom: var(--sp-1); }
.login-box .muted { margin-bottom: var(--sp-6); }
.login-box .btn { width: 100%; margin-top: var(--sp-2); }

/* ===== Page: Orders (05 §3) ================================================================= */
/* Moved to app/static/pages/orders.css, linked from orders.html. */

/* ===== Page: Create / Edit / Exchange order (05 §4, §5) ===================================== */
/* The page's rules are in static/pages/create_order.css, linked from create_order.html. These stay
   here because other pages use them: .order-no (driver.html, resolve.html) and .lines-table
   (_record_return.html). */
.lines-table input { height: 30px; }
.lines-table td.qty input { width: 70px; }
.order-no { font-family: var(--font-mono); color: var(--text-muted); }

/* ===== Page: Inventory (05 §7) ============================================================== */
/* In pages/inventory.css (linked from inventory.html). */

/* ===== Page: Drivers (05 §8) ================================================================ */
/* In pages/drivers.css (linked from drivers.html and driver.html). */

/* ===== Page: Resolve (05 §11) =============================================================== */
/* The Resolve page's own rules are in pages/resolve.css (linked from resolve.html).
   Here: the Record return dialog (_record_return.html), which loads into the Orders page's form dialog. */
#return-form .rr-heading { margin: var(--sp-4) 0 var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
#return-form .dialog-summary + input + .rr-heading { margin-top: 0; }
.return-table { margin-bottom: var(--sp-3); }
.return-table th, .return-table td { padding: var(--sp-2) var(--sp-2); vertical-align: middle; }
.return-table th:first-child, .return-table td:first-child { padding-left: 0; }
.return-table th:last-child, .return-table td:last-child { padding-right: 0; }
.return-table .rr-item strong { display: block; font-weight: 600; }
.return-table .rr-sku { color: var(--text-muted); font-size: var(--fs-sm); }
.return-table .rr-left-n { display: block; font-size: var(--fs-lg); font-weight: 600; }
.return-table .rr-of { display: block; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.return-table td.qty input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.return-table select { width: 148px; }
.return-table select:has(option.opt-defective:checked) { border-color: var(--danger); color: var(--danger); }  /* defective is destructive (owner, 2026-11-06) */
#return-form .condition-key { margin: 0 0 var(--sp-2); padding: 0; list-style: none; color: var(--text-muted); font-size: var(--fs-sm); }
#return-form .condition-key strong { color: var(--text); font-weight: 600; }
#return-form .rr-empty { padding: var(--sp-6) var(--sp-4); }
#return-form .dialog-summary dd.mono { font-size: var(--fs-sm); }

/* ===== Page: Sync (04 §7, 05 §10) =========================================================== */
/* The Sync page's rules are in pages/sync.css (linked from sync.html). */