/* Staff admin on Unfold (trial, Oct 2026): the design tokens and the
   page-specific sections of admin.css (orders home, order page, accounts,
   mirrors, compact pass, cancellation, logins). Unfold draws the chrome
   (sidebar, header, forms, tables); this styles the parts we built. */
/* ======================================================================
   1. Tokens
   ====================================================================== */
:root {
  --green-600: #1f5c46;
  --green-500: #2c7a5b;
  --green-800: #143f30;
  --ink-900: #16171a;
  --bg: #f2f3f5;
  --bg-chrome: #e9ebee;
  --surface: #ffffff;
  --row-alt: #f7f8f9;
  --row-hover: #f2f7f4;
  --text: #434549;
  --text-strong: #16171a;
  --muted: #75777c;
  --faint: #a9acb1;
  --empty: #c3c6ca;
  --border: #e1e3e6;
  --border-strong: #c9ccd1;
  --border-hairline: #eceef0;
  --warn-bg: #fff4e5;
  --warn-ink: #a15c00;
  --warn-border: #f0dcbb;
  --warn-tint: #fffaf2;
  --warn-ink-deep: #7a4600;
  --danger: #b3261e;
  --danger-bg: #fdeceb;
  --danger-border: #f3cfcc;
  --danger-ink: #8f221c;
  --success-bg: #e6f2ec;
  --success-border: #c9e3d7;
  --success-ink: #14503b;
  --masthead: #16171a;
  --masthead-divider: #33363c;
  --masthead-text: #a8abb1;
  --masthead-text-2: #c9cbcf;
  --masthead-pill-open: #22242a;
  --primary-ink: #ffffff;      /* label on a primary button */
  --link: #1f5c46;
  --chrome-border: #dfe1e5;

  --chip-placed-bg: #eef0f2; --chip-placed-ink: #4a4d52; --chip-placed-border: #dcdfe3;
  --chip-review-bg: #fff4e5; --chip-review-ink: #a15c00; --chip-review-border: #f0dcbb;
  --chip-quote-bg: #e8eff9; --chip-quote-ink: #1c4f8f; --chip-quote-border: #cfdff2;
  --chip-queued-bg: #f1ecfa; --chip-queued-ink: #57419b; --chip-queued-border: #e0d6f4;
  --chip-dispatched-bg: #e6f2ec; --chip-dispatched-ink: #1f5c46; --chip-dispatched-border: #c9e3d7;
  --chip-monthly-bg: #eef2f7; --chip-monthly-ink: #3a4a5c; --chip-monthly-border: #dbe3ec;
  --chip-bacs-bg: #eaf1ee; --chip-bacs-ink: #235c47; --chip-bacs-border: #d3e4dc;
  --chip-card-bg: #f4eef6; --chip-card-ink: #6b3a75; --chip-card-border: #e8dcec;
  --tile-review: #a15c00; --tile-quote: #1c4f8f; --tile-queued: #57419b; --tile-dispatched: #1f5c46;

  --shadow-card: 0 1px 3px rgba(22, 23, 26, 0.07);
  --shadow-menu: 0 8px 22px rgba(22, 23, 26, 0.18);
  --shadow-bar: 0 -2px 8px rgba(22, 23, 26, 0.10);
  --shadow-dropdown: 0 4px 12px rgba(22, 23, 26, 0.09);
  --focus-ring: 0 0 0 3px rgba(44, 122, 91, 0.14);
  --font: "Work Sans", Arial, Helvetica, sans-serif;
  /* One typeface (2 Oct 2026): codes and figures used to be IBM Plex Mono. The token is kept so the rules that
     mark "this is a code or a figure" still say so; digits line up through tabular figures on <body>. */
  --mono: var(--font);

  /* Django's own variables, mapped so untouched screens follow the tokens. */
  --primary: var(--green-600);
  --secondary: var(--green-600);
  --accent: var(--green-500);
  --primary-fg: #fff;
  --body-fg: var(--text);
  --body-bg: var(--surface);
  --body-quiet-color: var(--muted);
  --body-medium-color: var(--text);
  --body-loud-color: var(--text-strong);
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: var(--masthead);
  --header-link-color: #fff;
  --breadcrumbs-fg: var(--text);
  --breadcrumbs-link-fg: var(--green-600);
  --breadcrumbs-bg: var(--bg-chrome);
  --link-fg: var(--green-600);
  --link-hover-color: var(--green-800);
  --link-selected-fg: var(--green-800);
  --hairline-color: var(--border-hairline);
  --border-color: var(--border);
  --error-fg: var(--danger);
  --message-success-bg: var(--success-bg);
  --message-warning-bg: var(--warn-bg);
  --message-error-bg: var(--danger-bg);
  --darkened-bg: var(--row-alt);
  --selected-bg: var(--row-hover);
  --selected-row: var(--row-hover);
  --button-fg: var(--text-strong);
  --button-bg: var(--surface);
  --button-hover-bg: var(--row-alt);
  --default-button-bg: var(--green-600);
  --default-button-hover-bg: var(--green-800);
  --close-button-bg: var(--muted);
  --close-button-hover-bg: var(--text);
  --delete-button-bg: var(--danger);
  --delete-button-hover-bg: var(--danger-ink);
  --object-tools-fg: var(--text-strong);
  --object-tools-bg: var(--surface);
  --object-tools-hover-bg: var(--row-alt);
  --font-family-primary: var(--font);
  --font-family-monospace: var(--mono);
}

/* Dark — deliberate, not inverted. Applied for data-theme="dark", and for
   "auto" (no data-theme / data-theme="auto") when the OS asks. */
html[data-theme="dark"] { --scheme: dark; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --scheme: dark; } }

html[data-theme="dark"],

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #101113; --surface: #1b1d20; --row-alt: #1e2124; --row-hover: #22252a;
    --bg-chrome: #16181b; --chrome-border: #22252a;
    --border: #2f333a; --border-strong: #3a3f47; --border-hairline: #22252a;
    --text: #e4e6e9; --text-strong: #f2f3f5; --muted: #92959b; --faint: #6b6e74; --empty: #4d5158;
    --masthead: #0b0c0e; --masthead-divider: #2a2d33; --masthead-text: #a8abb1; --masthead-text-2: #c9cbcf; --masthead-pill-open: #22242a;
    --green-600: #3f9c76; --green-500: #54b58b; --green-800: #2f8a64; --primary-ink: #08130e; --link: #54b58b;
    --warn-bg: #241c0d; --warn-ink: #e0a34a; --warn-border: #3d2f14; --warn-tint: #1f1a12; --warn-ink-deep: #e0a34a;
    --danger: #f2836f; --danger-bg: #2a1512; --danger-border: #4a2a26; --danger-ink: #f2836f;
    --success-bg: #0d1a15; --success-border: #1e3a2e; --success-ink: #54b58b;
    --chip-placed-bg: #1c1f23; --chip-placed-ink: #b6b9bf; --chip-placed-border: #2b2f35;
    --chip-review-bg: #241c0d; --chip-review-ink: #e0a34a; --chip-review-border: #3d2f14;
    --chip-quote-bg: #101d2e; --chip-quote-ink: #6ea8e8; --chip-quote-border: #1e344f;
    --chip-queued-bg: #1b1630; --chip-queued-ink: #a48be0; --chip-queued-border: #2d2450;
    --chip-dispatched-bg: #0d1a15; --chip-dispatched-ink: #54b58b; --chip-dispatched-border: #1e3a2e;
    --chip-monthly-bg: #171b21; --chip-monthly-ink: #9db3cc; --chip-monthly-border: #26303b;
    --chip-bacs-bg: #0f1a16; --chip-bacs-ink: #6fc3a0; --chip-bacs-border: #24382f;
    --chip-card-bg: #1e1424; --chip-card-ink: #b98bc4; --chip-card-border: #33203b;
    --tile-review: #e0a34a; --tile-quote: #6ea8e8; --tile-queued: #a48be0; --tile-dispatched: #3f9c76;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --primary-fg: #08130e; --button-fg: var(--text-strong);
    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --bg: #101113; --surface: #1b1d20; --row-alt: #1e2124; --row-hover: #22252a;
  --bg-chrome: #16181b; --chrome-border: #22252a;
  --border: #2f333a; --border-strong: #3a3f47; --border-hairline: #22252a;
  --text: #e4e6e9; --text-strong: #f2f3f5; --muted: #92959b; --faint: #6b6e74; --empty: #4d5158;
  --masthead: #0b0c0e; --masthead-divider: #2a2d33; --masthead-text: #a8abb1; --masthead-text-2: #c9cbcf; --masthead-pill-open: #22242a;
  --green-600: #3f9c76; --green-500: #54b58b; --green-800: #2f8a64; --primary-ink: #08130e; --link: #54b58b;
  --warn-bg: #241c0d; --warn-ink: #e0a34a; --warn-border: #3d2f14; --warn-tint: #1f1a12; --warn-ink-deep: #e0a34a;
  --danger: #f2836f; --danger-bg: #2a1512; --danger-border: #4a2a26; --danger-ink: #f2836f;
  --success-bg: #0d1a15; --success-border: #1e3a2e; --success-ink: #54b58b;
  --chip-placed-bg: #1c1f23; --chip-placed-ink: #b6b9bf; --chip-placed-border: #2b2f35;
  --chip-review-bg: #241c0d; --chip-review-ink: #e0a34a; --chip-review-border: #3d2f14;
  --chip-quote-bg: #101d2e; --chip-quote-ink: #6ea8e8; --chip-quote-border: #1e344f;
  --chip-queued-bg: #1b1630; --chip-queued-ink: #a48be0; --chip-queued-border: #2d2450;
  --chip-dispatched-bg: #0d1a15; --chip-dispatched-ink: #54b58b; --chip-dispatched-border: #1e3a2e;
  --chip-monthly-bg: #171b21; --chip-monthly-ink: #9db3cc; --chip-monthly-border: #26303b;
  --chip-bacs-bg: #0f1a16; --chip-bacs-ink: #6fc3a0; --chip-bacs-border: #24382f;
  --chip-card-bg: #1e1424; --chip-card-ink: #b98bc4; --chip-card-border: #33203b;
  --tile-review: #e0a34a; --tile-quote: #6ea8e8; --tile-queued: #a48be0; --tile-dispatched: #3f9c76;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --primary-fg: #08130e; --button-fg: var(--text-strong);
  color-scheme: dark;
}
/* Django's dark_mode.css sets its own values for these on the same
   selectors; ours are declared after it and re-point them at the tokens. */
html[data-theme="dark"], html:not([data-theme="light"]) {
  --body-bg: var(--surface); --body-fg: var(--text); --body-quiet-color: var(--muted);
  --body-medium-color: var(--text); --body-loud-color: var(--text-strong);
  --breadcrumbs-bg: var(--bg-chrome); --breadcrumbs-link-fg: var(--green-600); --breadcrumbs-fg: var(--text);
  --link-fg: var(--link); --link-hover-color: var(--green-500); --link-selected-fg: var(--green-500);
  --hairline-color: var(--border-hairline); --border-color: var(--border);
  --darkened-bg: var(--row-alt); --selected-bg: var(--row-hover); --selected-row: var(--row-hover);
  --primary: var(--green-600); --secondary: var(--green-600); --accent: var(--green-500);
  --message-success-bg: var(--success-bg); --message-warning-bg: var(--warn-bg); --message-error-bg: var(--danger-bg);
  --error-fg: var(--danger);
  --button-bg: var(--surface); --button-hover-bg: var(--row-alt);
  --default-button-bg: var(--green-600); --default-button-hover-bg: var(--green-500);
  --object-tools-fg: var(--text-strong); --object-tools-bg: var(--surface); --object-tools-hover-bg: var(--row-alt);
}


/* Unfold draws everything in its own font stack; keep the design's. */
body { font-family: "Work Sans", system-ui, sans-serif; }
.mono { font-family: inherit; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--row-alt); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip--square { border-radius: 4px; padding: 0 8px; font-weight: 500; }
.chip--mini { height: 20px; font-size: 11px; }
.chip--placed { background: var(--chip-placed-bg); color: var(--chip-placed-ink); border-color: var(--chip-placed-border); }
.chip--in_review { background: var(--chip-review-bg); color: var(--chip-review-ink); border-color: var(--chip-review-border); }
.chip--review { background: var(--chip-review-bg); color: var(--chip-review-ink); border-color: var(--chip-review-border); }
.chip--quote_sent { background: var(--chip-quote-bg); color: var(--chip-quote-ink); border-color: var(--chip-quote-border); }
.chip--queued_for_machining { background: var(--chip-queued-bg); color: var(--chip-queued-ink); border-color: var(--chip-queued-border); }
.chip--dispatched { background: var(--chip-dispatched-bg); color: var(--chip-dispatched-ink); border-color: var(--chip-dispatched-border); }
.chip--monthly_account { background: var(--chip-monthly-bg); color: var(--chip-monthly-ink); border-color: var(--chip-monthly-border); }
.chip--bacs { background: var(--chip-bacs-bg); color: var(--chip-bacs-ink); border-color: var(--chip-bacs-border); }
.chip--card { background: var(--chip-card-bg); color: var(--chip-card-ink); border-color: var(--chip-card-border); }
.chip--success { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-border); }
.chip--danger { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-border); }
.chip--warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-border); }
.cell-meta { color: var(--muted); font-size: 12px; }
.empty-value { color: var(--empty); }
.button, a.button { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-strong); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.button.default, button.default { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.button.btn-quiet { background: transparent; }
.button.btn-danger, .btn-danger { color: var(--danger-ink); border-color: var(--danger-border); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.button[disabled], button[disabled] { opacity: 0.5; cursor: not-allowed; }
.needs-attention { font-weight: 700; }
.inline-link { color: var(--link); font-weight: 600; text-decoration: underline; }
.value-chip { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--row-alt); border: 1px solid var(--border); font-weight: 600; }

/* ======================================================================
   13. Orders list (home) — title block, stat tiles, filter card, results
   ====================================================================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 18px; }
.page-head__date { font-size: 12px; color: var(--muted); }
.page-head__title { margin: 2px 0 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.page-head__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.page-head__tools { margin: 0 0 4px; }
body.change-list.model-order #content > h1:not(.page-title) { display: none; }   /* Django's own title; the orders strip and the page heading replace it */
body.change-list #content > h1 { margin-bottom: 14px; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 14px; }
.stat-tile {
  display: block;
  padding: 14px 16px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  color: var(--text) !important;
  text-decoration: none;
}
.stat-tile:hover { border-color: var(--border-strong); }
.stat-tile--review { border-top-color: var(--tile-review); }
.stat-tile--quote { border-top-color: var(--tile-quote); }
.stat-tile--queued { border-top-color: var(--tile-queued); }
.stat-tile--dispatched { border-top-color: var(--tile-dispatched); }
.stat-tile--blocked { background: var(--warn-bg); border-color: var(--warn-border); border-top-color: var(--danger); color: var(--warn-ink-deep) !important; }
.stat-tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stat-tile__figure { font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.stat-tile--blocked .stat-tile__figure { color: var(--danger); }
.stat-tile__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); }
.stat-tile--review .stat-tile__kicker { color: var(--tile-review); }
.stat-tile--blocked .stat-tile__kicker { color: var(--danger); }
.stat-tile__label { margin-top: 8px; font-size: 13px; font-weight: 600; }

.filter-card {
  margin-bottom: 14px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.filter-card__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--filter-count, 4), 170px) 108px; gap: 10px; align-items: end; }
.filter-card__search { display: block; margin: 0; }
.filter-card__search input[type="search"] { width: 100%; height: 36px; padding-left: 14px; background: var(--row-alt); margin: 0; }
.filter-card .filter-dropdown { min-width: 0; }
.filter-card .filter-dropdown label { display: none; }
.filter-card .filter-dropdown select { width: 100%; }
.filter-card__submit { width: 100%; }
.filter-card__applied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-hairline); }
.filter-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-card__applied-label { font-size: 13px; color: var(--muted); }
.filter-chip { text-decoration: none; cursor: pointer; }
.filter-chip:hover { filter: brightness(0.97); }
.filter-card__clear { font-size: 13px; font-weight: 500; color: var(--link); }
.filter-card__drill { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.filter-card__drill:not(:has(.toplinks)) { display: none; }
.filter-card__drill .toplinks { margin: 0; display: flex; gap: 12px; }
.filter-card__drill .toplinks a { color: var(--green-600); }
.filter-card__drill .date-back { font-family: var(--mono); }

/* Orders columns per the handoff: 44 | 96 | 1fr | 186 | 132 | 118 | 148 | 104 */
body.model-order #result_list .column-id_display, body.model-order #result_list .field-id_display { width: 96px; }
body.model-order #result_list .column-status_display, body.model-order #result_list .field-status_display { width: 186px; }
body.model-order #result_list .column-payment_display, body.model-order #result_list .field-payment_display { width: 132px; }
body.model-order #result_list .field-payment_display .cell-meta { display: none; }   /* the "read-only" note belongs to the form, not the list */
body.model-order #result_list .column-quoted_display, body.model-order #result_list .field-quoted_display { width: 118px; text-align: right; }
body.model-order #result_list .column-tracking_display, body.model-order #result_list .field-tracking_display { width: 148px; }
body.model-order #result_list .column-created_display, body.model-order #result_list .field-created_display { width: 104px; text-align: right; }
body.model-order #result_list th.column-quoted_display .text, body.model-order #result_list th.column-created_display .text { text-align: right; }
.cell-meta { color: var(--muted); font-weight: 400; }
#result_list tbody tr:has(.needs-attention) th, #result_list tbody tr:has(.needs-attention) td { background: var(--warn-tint); }
#result_list tbody tr:has(.needs-attention) th:first-child, #result_list tbody tr:has(.needs-attention) td:first-child { box-shadow: inset 3px 0 0 var(--warn-ink); }
#result_list tbody tr:has(.needs-attention):hover th, #result_list tbody tr:has(.needs-attention):hover td { background: var(--row-hover); }
.mono.is-attention { color: var(--warn-ink); font-weight: 500; }

.paginator-perpage { font-size: 13px; color: var(--muted); margin-left: 16px; }
.paginator-perpage a { border: 0; background: none; min-width: 0; height: auto; padding: 0; color: var(--link); font-family: var(--mono); }
.paginator-perpage a.is-current { color: var(--text-strong); font-weight: 600; }
.paginator-pages { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.paginator-ellipsis { padding: 0 4px; color: var(--muted); }
.paginator a.paginator-next { font-family: var(--font); }

.empty-state {
  margin: 0;
  padding: 30px 20px;
  border: 1px dashed #dcdfe3;
  border-radius: 8px;
  background: var(--row-alt);
  text-align: center;
}
.empty-state__mark { width: 34px; height: 34px; margin: 0 auto 12px; border: 2px dashed var(--border-strong); border-radius: 50%; }
.empty-state__title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.empty-state__hint { margin: 4px 0 14px; font-size: 13px; color: var(--muted); }

.recent-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 14px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  font-size: 13px;
}
.recent-strip__label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.recent-strip__item strong { color: var(--text-strong); font-weight: 600; }
.recent-strip__item strong a { color: var(--text-strong); }
.recent-strip__item--empty { color: var(--muted); }
.recent-strip__all { margin-left: auto; font-weight: 500; color: var(--link); }

/* Confirmation pages (bulk actions, delete) */
.confirm-card { max-width: 860px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); }
.confirm-card__title { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.confirm-card__body { max-width: 560px; margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.confirm-card__body--warn { color: var(--warn-ink-deep); }
.confirm-card__objects { margin: 14px 0 18px; padding: 12px 14px; background: var(--row-alt); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; line-height: 1.7; }
.confirm-card__actions { display: flex; gap: 10px; }

@media (max-width: 1279px) { .filter-card__row { grid-template-columns: minmax(0, 1fr) repeat(var(--filter-count, 4), minmax(0, 150px)) 96px; } }
@media (max-width: 1023px) { .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filter-card__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-card__search { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.model-order #result_list .column-payment_display, body.model-order #result_list .field-payment_display,
  body.model-order #result_list .column-quoted_display, body.model-order #result_list .field-quoted_display,
  body.model-order #result_list .column-tracking_display, body.model-order #result_list .field-tracking_display,
  body.model-order #result_list .column-created_display, body.model-order #result_list .field-created_display { display: none; }
}
@media (max-width: 1023px) {
  body.model-order #result_list .field-dealer_display { white-space: nowrap; }
}

/* ======================================================================
   14. Order change form — refusal panel, title row, pipeline strip, the
   card grid (by fieldset class), line items, delivery/status/quote cards
   ====================================================================== */
body.model-order.change-form #content > h1, body.model-order.change-form #content > h2 { display: none; }   /* the order-head replaces "Change order" */

.refusal {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn-ink);
  border-radius: 8px;
}
.refusal__badge { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--warn-ink); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.refusal__text { flex: 1 1 auto; }
.refusal__headline { font-size: 14px; font-weight: 600; color: var(--warn-ink-deep); }
.refusal__body { margin-top: 2px; font-size: 13px; color: #8a5200; }
.refusal__go { flex: none; }
body.model-order.change-form .errornote { display: none; }   /* the refusal panel says it better */
body.model-order.change-form ul.errorlist.nonfield { display: none; }

.order-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }

.chip--ghost { background: transparent; color: var(--faint); border-style: dashed; border-color: var(--border-strong); }

/* Card grid (children of the form's wrapper div, placed by fieldset class) */
/* Three columns: two flexible on the left, a fixed 420px on the right.
   Row 2 is one band — Order | Status | Dispatch (staff, 15 Sep 2026:
   "compressed into one horizontal row"); line items full width; then
   Delivery and Shipping (spanning the two left columns) beside the tall
   Quote & payment card. */
#order_form > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
#order_form > div > * { grid-column: 1 / -1; min-width: 0; }
#order_form > div > .fs-order { grid-column: 1; grid-row: 2; }
#order_form > div > .fs-status { grid-column: 2; grid-row: 2; }
#order_form > div > .fs-dispatch { grid-column: 3; grid-row: 2; }
/* Top row reads in working order: Order, Status, Dispatch, Quote & payment;
   Delivery sits under the lines with Shipping beside it, bottom right
   (business, 1 Oct 2026). */
#order_form > div > .fs-quote { grid-column: 4; grid-row: 2; }
#order_form > div > #line_items-group { grid-row: 3; }
#order_form > div > .fs-delivery { grid-column: 1 / span 3; grid-row: 4; }
#order_form > div > .fs-shipping { grid-column: 4; grid-row: 4; }
#order_form > div > .fs-admin { grid-row: 5; }
#order_form > div > .submit-row { grid-row: 6; }
#content-main fieldset.module { margin-bottom: 0; }
#order_form > div > .refusal { grid-row: 1; }
#order_form .field-account.form-row { display: none; }   /* the dealer is shown as a read-only value chip; the FK travels as a hidden input */
.inline-link { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--link); }

/* Status card */
.fs-status .field-status select { width: 100%; }
.fs-status .field-status option:disabled { color: var(--faint); }
.fs-status .field-amount_to_pay_display { border-top: 1px solid var(--border-hairline); margin-top: 6px; padding-top: 12px; }

/* Delivery card: toggle + muted one-off fields */
.form-row.field-ship_to_business input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
  transition: background 0.15s;
}
.form-row.field-ship_to_business input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3);
  transition: left 0.15s;
}
.form-row.field-ship_to_business input[type="checkbox"]:checked { background: var(--green-600); }
.form-row.field-ship_to_business input[type="checkbox"]:checked::after { left: 18px; }
.form-row.field-ship_to_business label { padding-top: 4px; }
.form-row.is-muted input { border-style: dashed; border-color: #dcdfe3; background: var(--row-alt); color: var(--faint); }
.form-row.is-muted label { color: var(--faint); }

/* Quote & payment: file row */
.file-field { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 8px 4px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--row-alt); }
.file-field--missing { border: 1px dashed var(--warn-border); background: var(--warn-tint); }
.file-field__pick { height: 30px; padding: 0 14px; font-size: 13px; margin: 0; }
.file-field__pick--warn { border-color: var(--warn-border); color: var(--warn-ink); background: var(--surface); }
.file-field__name { font-size: 13px; color: var(--link); }
.file-field__status { font-size: 13px; color: var(--muted); }
.file-field--missing .file-field__status { color: var(--warn-ink); }
.file-field__remove { margin-left: auto; font-size: 13px; color: var(--danger); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.file-field__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fs-quote .field-pro_forma_file .form-row { overflow: visible; }

/* Dispatch */
.fs-dispatch .field-courier input { width: 220px; }
.fs-dispatch .field-tracking_number input { width: 220px; font-family: var(--mono); }

/* Admin card: 4-up read-only */
.fs-admin > details > summary h2 { font-size: 16px; }
.fs-admin .form-row { grid-template-columns: 220px minmax(0, 1fr); }

/* Line items */
.line-items .line-items__head { padding: 16px 20px 12px; border-bottom: 1px solid var(--border-hairline); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.line-items .line-items__head h2 { padding: 0; border: 0; }
.line-items .line-items__head .description { margin: 4px 0 0; padding: 0; border: 0; }
.line-items__count { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--muted); }
/* Inset the table like every other card's content (20px gutters), and
   share the width out so no single column soaks up the slack. */
.line-items .tabular > fieldset > table { table-layout: fixed; width: calc(100% - 40px); margin: 0 20px; }
.line-items th.column-product { width: 16%; }
.line-items th.original, .line-items td.original { width: 0; padding: 0; }
.line-items th.column-size { width: 62px; }
.line-items th.column-colour { width: 80px; }
.line-items th.column-quantity { width: 44px; }
.line-items th.column-chosen_pcd { width: 78px; }
.line-items th.column-chosen_offset { width: 58px; }
.line-items th.column-bore { width: 56px; }
/* Vehicle gets a share, not the whole remainder: with every column sized,
   table-layout: fixed spreads spare width across all of them, so a wide
   screen widens each column a little instead of opening one big gap. */
.line-items th.column-vehicle { width: 15%; }
.line-items th.column-fitment { width: 80px; }
.line-items th.column-unit_price_override { width: 104px; }
.line-items th.column-line_total { width: 84px; }
.line-items th.column-extras { width: 120px; }
.line-items th.column-delete { width: 24px; }
.line-items td { font-size: 13px; }
.line-items td.field-quantity input, .line-items td.field-chosen_offset input, .line-items td.field-chosen_offset select, .line-items td.field-chosen_pcd select, .line-items td.field-chosen_pcd input { width: 100%; padding: 0 6px; height: 32px; font-size: 13px; }
.line-items td.field-unit_price_override, .line-items td.field-line_total, .line-items td.field-bore, .line-items td.field-chosen_offset, .line-items td.field-quantity { font-family: var(--mono); }
.line-items td.field-unit_price_override, .line-items td.field-line_total { text-align: right; }
/* Editable unit price: blank shows the dealer's normal price as the placeholder; a typed override stands out. */
.line-items td.field-unit_price_override input { width: 96px; text-align: right; font-family: var(--mono); -moz-appearance: textfield; appearance: textfield; }
.line-items td.field-unit_price_override input::-webkit-outer-spin-button,
.line-items td.field-unit_price_override input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }   /* the spinner arrows were clipping "100.00" */
/* The end-of-row tick box removes the line on Save (staff couldn't tell what
   it was for — 1 Oct 2026): it now has a "Remove" heading, and a ticked row
   is struck through and tinted so it's obvious the line is about to go. */
.line-items th.column-delete { width: 62px; text-align: center; }
.line-items td.delete { text-align: center; }
.line-items tr.form-row:has(td.delete input:checked) > td { background: var(--warn-bg, rgba(200, 60, 40, 0.08)); }
.line-items tr.form-row:has(td.delete input:checked) > td:not(.delete) { opacity: 0.55; text-decoration: line-through; }
.line-items tr.form-row:has(td.delete input:checked) > td.delete::after { content: "removing\2026"; display: block; font-size: 0.6875rem; color: var(--warn-ink-deep); line-height: 1.2; margin-top: 2px; }
.line-items td.field-unit_price_override input:not(:placeholder-shown) { border-color: var(--warn-ink-deep); font-weight: 600; }
.line-items th.column-unit_price_override, .line-items th.column-line_total { text-align: right; }
.line-items td.field-product .select2-container { width: 100% !important; min-width: 0 !important; }
.line-items td.field-product select { max-width: 100%; }
/* Extras: a plain list the height of its options (size= set in the
   inline), no scrollbar arrows, same radius as the other inputs. */
.line-items td.field-extras select[multiple] { width: 100%; height: auto; min-height: 34px; padding: 3px 4px; font-size: 12px; border-radius: 6px; overflow: hidden; }
.line-items td.field-extras select[multiple] option { padding: 2px 4px; border-radius: 4px; }
.line-items td.field-extras select[multiple] option:checked { background: var(--success-bg); color: var(--success-ink); }
.line-items tr.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.line-items__flag-row td { padding: 0 !important; background: var(--danger-bg) !important; }
.line-items__flag { padding: 8px 14px; border-top: 1px solid var(--danger-border); border-bottom: 1px solid var(--danger-border); color: var(--danger-ink); font-size: 13px; }
.line-items__flag-label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; margin-right: 10px; }
.line-items__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 10px 20px; background: var(--row-alt); border-top: 1px solid var(--border-hairline); border-radius: 0 0 8px 8px; font-size: 12px; color: var(--muted); }
.line-items__totals { min-width: 280px; }
.line-items__totals > div .mono { margin-left: 24px; }
.cell-meta--small { font-size: 12px; margin-top: 2px; }
.cell-edit { margin-left: 6px; font-size: 12px; color: var(--link); }
.line-items .add-row { display: table-row; }
.line-items .add-row td { padding: 10px 20px; }
.line-items .add-row a::before { content: "+ "; }
/* Delete: a square tick box, centred, rather than the browser default. */
.line-items td.delete input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--danger); cursor: pointer; }

@media (max-width: 1279px) {
  #order_form > div { grid-template-columns: minmax(0, 1fr); }
  #order_form > div > * { grid-column: 1 !important; grid-row: auto !important; }
}
@media (max-width: 1023px) {
  .line-items table, .line-items thead, .line-items tbody, .line-items tr, .line-items td { display: block; }
  .line-items thead { display: none; }
  .line-items tr.form-row { padding: 10px 14px; border-bottom: 1px solid var(--border-hairline); }
  .line-items td { padding: 4px 0 !important; border: 0 !important; background: transparent !important; }
  .line-items td.original, .line-items td.hidden { display: none; }
}

/* Line-items fixes: compact extras multi-select, no related-object icons in
   the inline, a real delete column. */
#line_items-group select[multiple] { height: 56px !important; min-height: 0 !important; width: 100%; }
#line_items-group .related-widget-wrapper-link { display: none; }
#line_items-group .related-widget-wrapper { display: block; }
.line-items th.column-delete, .line-items td.delete { width: 62px; text-align: center; }
.line-items td.delete input[type="checkbox"] { margin: 0; }
.inline-group .inline-deletelink { font-size: 0; color: var(--danger); text-decoration: none; }
.inline-group .inline-deletelink::before { content: "✕"; font-size: 14px; }
.line-items td.field-vehicle { line-height: 1.35; }
.form-row.field-recalculate_button > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
.form-row.field-recalculate_button > div > .help { margin-left: 0; }
/* No add/change/delete/view icons beside foreign-key selects on the order form. */
.related-widget-wrapper-link { display: none; }

/* Shipping card: the fieldset description says it; the model help texts repeat it. */
.fs-shipping .field-shipping_zone .help, .fs-shipping .field-shipping_cost .help { display: none; }
.form-row.field-recalculate_button label { display: none; }
.form-row.field-recalculate_button { grid-template-columns: minmax(0, 1fr); }
/* Value column must be able to use the full card width (file row, chips). */
.aligned .form-row > div { width: 100%; max-width: none; }
.aligned .form-row .flex-container { width: 100%; }
.file-field { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
.file-field__pick { flex: none; }
/* Split date/time (paid at): one compact row. */
.aligned .form-row .datetime { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.aligned .form-row .datetime > br { display: none; }
.aligned .form-row .datetime input { width: 120px; }
.aligned .form-row .datetime .datetimeshortcuts { margin-left: 0; }
.datetimeshortcuts img, .datetimeshortcuts .date-icon, .datetimeshortcuts .clock-icon { vertical-align: middle; }
/* Collapsed fieldsets (Admin card): a plain header, not Django's dark bar. */
fieldset.module.collapse > details > summary { background: transparent; color: var(--text-strong); padding: 0; margin: 0; }
fieldset.module.collapse > details > summary h2 { background: transparent; color: var(--text-strong); border-bottom: 0; padding: 16px 20px; }
fieldset.module.collapse > details[open] > summary h2 { border-bottom: 1px solid var(--border-hairline); }
/* The 420px right-column cards use a narrower label column. */
.fs-status .form-row > div > .flex-container, .fs-shipping .form-row > div > .flex-container, .fs-dispatch .form-row > div > .flex-container, .fs-quote .form-row > div > .flex-container, .fs-order .form-row > div > .flex-container { grid-template-columns: 110px minmax(0, 1fr); }
.fs-status .form-row > div > .help, .fs-shipping .form-row > div > .help, .fs-dispatch .form-row > div > .help, .fs-quote .form-row > div > .help, .fs-order .form-row > div > .help { margin-left: 134px; }
.fs-status input, .fs-status select, .fs-shipping input, .fs-shipping select, .fs-dispatch input, .fs-dispatch select, .fs-quote input, .fs-quote select, .fs-order input { max-width: 100%; box-sizing: border-box; }
.fs-dispatch .field-courier input, .fs-dispatch .field-tracking_number input { width: 100%; }
.amount-to-pay { font-size: 1rem; font-weight: 700; }
.amount-to-pay__stale { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--warn-ink-deep); border-radius: 6px; color: var(--warn-ink-deep); font-size: 0.875rem; line-height: 1.4; }
fieldset.module.collapse { border: 1px solid var(--border); }

/* ======================================================================
   15. Dealer accounts — list columns, segmented account type, discounts
   ====================================================================== */
body.model-account #result_list .column-login_display, body.model-account #result_list .field-login_display { width: 110px; }
body.model-account #result_list .column-type_display, body.model-account #result_list .field-type_display { width: 130px; }
body.model-account #result_list .column-zone_display, body.model-account #result_list .field-zone_display { width: 92px; }
body.model-account #result_list .column-active_display, body.model-account #result_list .field-active_display { width: 78px; text-align: right; }
body.model-account #changelist table tbody th, body.model-account #changelist table tbody td { height: 40px; }
#result_list tbody tr:has(.acct-inactive) th, #result_list tbody tr:has(.acct-inactive) td { color: var(--faint); }
#result_list tbody tr:has(.acct-inactive) th a { color: var(--faint); }
#result_list tbody tr:has(.acct-inactive) .chip { filter: saturate(0.2); opacity: 0.75; }
.fs-narrow .form-row > div > .flex-container { grid-template-columns: 150px minmax(0, 1fr); }
.fs-narrow .form-row > div > .help { margin-left: 174px; }
.fs-narrow input[type="text"], .fs-narrow input[type="email"], .fs-narrow select { width: min(100%, 420px); }
/* Account type: RadioSelect → 3-way segmented pills (Django 5 renders the radios as nested divs) */
#id_account_type { display: flex; gap: 8px; margin: 0; padding: 0; }
#id_account_type > div { margin: 0; padding: 0; }
#id_account_type label { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-strong); cursor: pointer; }
#id_account_type label:has(input:checked) { background: var(--green-600); border-color: var(--green-600); color: var(--primary-ink); }
#id_account_type input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Stock changelists (accounts, settings): the filter card without the "Filter" heading / facet link */
#changelist-filter h2, #changelist-filter #changelist-filter-extra-actions { display: none; }
/* Active flag as a toggle */
.form-row.field-is_active input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; margin: 0; }
.form-row.field-is_active input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3); transition: left 0.15s; }
.form-row.field-is_active input[type="checkbox"]:checked { background: var(--green-600); }
.form-row.field-is_active input[type="checkbox"]:checked::after { left: 18px; }
/* Brand discounts inline */
.discounts table { table-layout: fixed; }
.discounts thead th { height: 34px; }
.discounts th.column-brand { width: auto; }
.discounts th.column-discount_percent, .discounts td.field-discount_percent { width: 110px; text-align: right; }
.discounts th.column-delete, .discounts td.delete { width: 92px; text-align: right; }
.discounts td.field-discount_percent input { width: 80px; text-align: right; font-family: var(--mono); }
.discounts tbody tr.form-row td { height: 40px; }
.discounts .add-row td { padding: 10px 20px; }
.discounts .add-row a::before { content: "+ "; }
.discounts .description { padding: 0 20px 12px; margin-top: -6px; border-bottom: 1px solid var(--border-hairline); }

/* ======================================================================
   16. Read-only mirrors (Products, Vehicle fitment): notice bar, dense
   tables, plain-text detail pages
   ====================================================================== */
.mirror-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 10px 16px;
  background: var(--row-hover);
  border: 1px solid var(--success-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.mirror-notice__badge {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--success-border);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green-600);
}
.mirror-notice__link { font-weight: 600; color: var(--link); white-space: nowrap; }

body.model-product #changelist table thead th,
body.model-product #changelist table tbody th, body.model-product #changelist table tbody td { height: 34px; padding: 0 10px; font-size: 12px; }
body.model-product #result_list .mono { font-size: 12px; }
body.model-product #result_list .column-code_display, body.model-product #result_list .field-code_display { width: 112px; }
body.model-product #result_list .column-size_display, body.model-product #result_list .field-size_display { width: 74px; }
body.model-product #result_list .column-pcd_display, body.model-product #result_list .field-pcd_display { width: 120px; }
body.model-product #result_list .column-et_display, body.model-product #result_list .field-et_display { width: 72px; }
body.model-product #result_list .column-bore_display, body.model-product #result_list .field-bore_display { width: 60px; }
body.model-product #result_list .column-price_display, body.model-product #result_list .field-price_display { width: 84px; text-align: right; }
body.model-product #result_list .column-stock_display, body.model-product #result_list .field-stock_display { width: 62px; text-align: right; }
body.model-product #result_list th.column-price_display .text, body.model-product #result_list th.column-stock_display .text { text-align: right; }
.stock-ok { color: var(--green-600); }
.stock-low { color: var(--warn-ink); }
.stock-out { color: var(--danger); }
body.model-product #toolbar input[type="text"],
body.model-product #changelist-filter select,
body.model-product #toolbar input[type="submit"] { height: 34px; }

/* View-only detail pages: values as plain text under mono labels. */
body.model-product.change-form .aligned label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
}
body.model-product.change-form div.readonly { font-size: 14px; }
body.model-product.change-form .submit-row { display: none; }
body.model-product.change-form #content { padding-bottom: 40px; }

/* ======================================================================
   17. Delete confirmation (templates/admin/delete_confirmation.html)
   ====================================================================== */
.confirm-card__objects ul { margin: 0; padding-left: 18px; }
.confirm-card__objects ul ul { padding-left: 16px; }
.delete-confirmation .confirm-card__actions a.cancel-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; line-height: 1; padding: 0 18px; margin: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-strong);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.delete-confirmation .confirm-card__actions a.cancel-link:hover { background: var(--row-hover); color: var(--text-strong); }
.confirm-card__actions { align-items: center; }
.btn-danger-solid, input.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover, input.btn-danger-solid:hover { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; }

/* ======================================================================
   18. Tablet / phone adjustments to the chrome and forms
   ====================================================================== */
@media (max-width: 1279px) {
  .mh-welcome, #user-tools a[href*="password_change"] { display: none; }
  #header { gap: 10px; }
  .mh-nav { margin-left: 4px; }
}
/* Django's responsive.css stacks #header into a column at <=1024px (its
   breakpoint is inclusive); keep our row layout and let it wrap instead. */
@media (max-width: 1024px) {
  #header { flex-direction: row; flex-wrap: wrap; justify-content: space-between; height: auto; padding: 10px 16px; row-gap: 8px; }
  #content { padding-top: 24px; }
}
@media (max-width: 1023px) {
  .aligned .form-row > div > .flex-container { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .aligned .form-row > div > div.help, .aligned .form-row > div > .flex-container + .help { margin-left: 0; }
  .aligned .form-row > div > .flex-container.checkbox-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .aligned .form-row > div > .flex-container.checkbox-row > input { grid-column: 1; }
  .aligned .form-row > div > .flex-container.checkbox-row > label { grid-column: 2; }
  .fs-narrow .form-row > div > .flex-container, .fs-status .form-row > div > .flex-container, .fs-shipping .form-row > div > .flex-container, .fs-dispatch .form-row > div > .flex-container, .fs-quote .form-row > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
  .fs-narrow .form-row > div > .help, .fs-status .form-row > div > .help, .fs-shipping .form-row > div > .help, .fs-dispatch .form-row > div > .help, .fs-quote .form-row > div > .help { margin-left: 0; }
  .aligned label { padding-top: 0; }
}

/* ======================================================================
   19. Order form: compact pass (Sep 2026) — tighter rows/cards so the
   whole order fits with far less scrolling; the Delivery card lays its
   DPD address fields out two-up; copyable stock codes; the Shipping
   card's recalculate note on its own line.
   ====================================================================== */
body.model-order.change-form #content { padding-top: 16px; }
body.model-order.change-form .order-head { margin: 0 0 10px; }
#order_form > div { gap: 12px; }
#order_form fieldset.module h2, #order_form .inline-heading { padding: 10px 16px 8px; font-size: 15px; }
#order_form .module .description, #order_form fieldset .description { padding: 0 16px 8px; font-size: 12px; }
#order_form .form-row { padding: 4px 16px; }
#order_form fieldset.module .form-row:first-of-type { padding-top: 10px; }
#order_form fieldset.module .form-row:last-of-type { padding-bottom: 12px; }
#order_form .aligned label { padding-top: 6px; font-size: 13px; }
#order_form .aligned .form-row > div > .flex-container { grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; }
#order_form .aligned .form-row > div > div.help, #order_form .aligned .form-row > div > .flex-container + .help { margin: 3px 0 0 166px; font-size: 12px; }
#order_form input[type="text"], #order_form input[type="number"], #order_form input[type="email"], #order_form input[type="tel"], #order_form input[type="url"], #order_form select:not([multiple]) { height: 32px; font-size: 13px; }
#order_form div.readonly { padding: 5px 0; font-size: 13px; }
#order_form .value-chip { padding: 4px 10px; font-size: 13px; }
#order_form .fs-status .field-amount_to_pay_display { margin-top: 2px; padding-top: 8px; }
#order_form .line-items .line-items__head { padding: 10px 16px 8px; }
#order_form .line-items tbody tr.form-row { min-height: 38px; }
#order_form .line-items th { height: 32px; }
#order_form .fs-delivery .field-dropship_delivery_information input,
#order_form .fs-delivery .field-dropship_address_line1 input, #order_form .fs-delivery .field-dropship_address_line2 input, #order_form .fs-delivery .field-dropship_name input { width: 100%; max-width: 100%; box-sizing: border-box; }
#order_form .fs-delivery input[type="text"], #order_form .fs-delivery input[type="email"], #order_form .fs-delivery input[type="tel"] { width: 100%; max-width: 100%; box-sizing: border-box; }
/* Delivery: the address fields two-up (the fieldset itself is the grid; heading, description, snapshot and the toggle span both columns). */
#order_form .fs-delivery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; align-content: start; }
#order_form .fs-delivery > h2, #order_form .fs-delivery > .description, #order_form .fs-delivery > .field-ship_to_business,
#order_form .fs-delivery > .field-dropship_delivery_information { grid-column: 1 / -1; }
#order_form .fs-delivery .aligned .form-row > div > .flex-container, #order_form .fs-delivery .form-row > div > .flex-container { grid-template-columns: 118px minmax(0, 1fr); column-gap: 10px; }
#order_form .fs-delivery > .form-row:first-of-type { padding-top: 6px; }
#order_form .fs-delivery > .form-row:last-of-type { padding-bottom: 6px; }
#order_form .fs-delivery > .form-row { padding-top: 3px; padding-bottom: 3px; }
#order_form .fs-delivery > .form-row:nth-last-child(-n+2) { padding-bottom: 12px; }
/* Shipping: the recalculate note beneath the button, never in a squeezed column. */
.recalc-note { display: block; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
/* Copyable stock codes (admin.js). */
.copy-code {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--row-alt); color: var(--text-strong); font-family: var(--mono); font-size: 12px; line-height: 1.5; cursor: pointer;
}
.copy-code::after { content: " \2398"; color: var(--muted); }
.copy-code:hover { border-color: var(--green-600); color: var(--green-600); }
.copy-code.is-copied, .copy-all-codes.is-copied { background: var(--success-bg, #e9f3ef); border-color: var(--success-border); color: var(--green-600); }
.copy-all-codes { flex: none; align-self: flex-start; }
@media (max-width: 1023px) {
  #order_form .fs-delivery { grid-template-columns: minmax(0, 1fr); }
}

/* Dispatch: the courier is a fixed list now (orders/couriers.py). */
.fs-dispatch .field-courier select { width: 100%; }

/* Delivery card: a copy button on the end of each address box. */
#order_form .fs-delivery .form-row > div > .flex-container { grid-template-columns: 118px minmax(0, 1fr) auto; }
#order_form .fs-delivery .form-row > div > .flex-container.checkbox-row { grid-template-columns: auto minmax(0, 1fr); }
.copy-inline {
  height: 32px; width: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.copy-inline:hover { border-color: var(--green-600); color: var(--green-600); }
.copy-inline.is-copied { background: var(--success-bg, #e9f3ef); border-color: var(--success-border); color: var(--green-600); }
#order_form .fs-delivery .form-row.is-muted .copy-inline { opacity: 0.6; }

/* ======================================================================
   20. Compact pass for the whole admin (Sep 2026): the business wants
   more on screen — tighter cards, rows, inputs and lists on desktop;
   touch sizes below 1024px are untouched.
   ====================================================================== */
@media (min-width: 1024px) {
  #content { padding: 14px 24px 100px; }
  #content > h1 { font-size: 20px; }
  .module h2, .module caption, .inline-group h2, fieldset.module h2, .fieldset-heading, .inline-heading { padding: 9px 16px 7px; font-size: 15px; }
  .module .description, fieldset .description { padding: 0 16px 7px; font-size: 12px; }
  .form-row { padding: 3px 16px; }
  fieldset.module .form-row:first-of-type { padding-top: 8px; }
  fieldset.module .form-row:last-of-type { padding-bottom: 10px; }
  .aligned .form-row > div > .flex-container { grid-template-columns: 170px minmax(0, 1fr); column-gap: 16px; }
  .aligned .form-multiline { grid-template-columns: 170px minmax(0, 1fr); column-gap: 16px; }
  .aligned .form-row > div > div.help, .aligned .form-row > div > .flex-container + .help { margin: 2px 0 0 186px; font-size: 12px; }
  .aligned label { padding-top: 6px; font-size: 13px; }
  .fs-narrow .form-row > div > .flex-container { grid-template-columns: 130px minmax(0, 1fr); }
  .fs-narrow .form-row > div > .help { margin-left: 146px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"],
  input[type="tel"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"],
  select, .vTextField, .vDateField, .vTimeField, .vIntegerField, .vBigIntegerField, .vForeignKeyRawIdAdminField, .vURLField { height: 32px; font-size: 13px; }
  div.readonly { padding: 5px 0; font-size: 13px; }
  .submit-row { height: 56px; }
  .page-head { margin: 2px 0 10px; }
  .page-head__title { font-size: 20px; }
  .stat-tile { padding: 9px 14px 8px; }
  .filter-card { margin-bottom: 10px; padding: 10px 16px; }
  #changelist table thead th, #result_list thead th { height: 34px; }
  #changelist table tbody th, #changelist table tbody td, #result_list tbody th, #result_list tbody td { height: 38px; }
  .module { margin-bottom: 12px; }
  .copy-inline { height: 32px; width: 32px; }
}

/* Dispatch card: auto-save feedback under the tracking number. */
.autosave-note { margin-top: 3px; font-size: 12px; color: var(--muted); min-height: 14px; }
.autosave-note.is-saved { color: var(--green-600); }
.autosave-note.is-error { color: var(--danger); }
.autosave-note:empty { display: none; }

/* Dealer account: two-up (Dealer | Brand discounts, Address | Contact details), compact discounts table. */
#account_form > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
#account_form > div > * { min-width: 0; grid-column: 1 / -1; }
#account_form > div > fieldset.module { margin-bottom: 0; }
#account_form > div > fieldset:nth-of-type(1) { grid-column: 1; grid-row: 1; }
#account_form > div > #brand_discounts-group { grid-column: 2; grid-row: 1; margin: 0; }
#account_form > div > fieldset:nth-of-type(2) { grid-column: 1; grid-row: 2; }
#account_form > div > fieldset:nth-of-type(3) { grid-column: 2; grid-row: 2; }
#account_form > div > fieldset:nth-of-type(4) { grid-row: 3; }
#account_form > div > .submit-row { grid-row: 4; }
#account_form .fs-narrow input[type="text"], #account_form .fs-narrow input[type="email"], #account_form .fs-narrow select { width: 100%; max-width: 100%; box-sizing: border-box; }
.discounts th.column-brand { width: auto; }
.discounts td.field-brand select { width: 200px; }
.discounts th.column-discount_percent, .discounts td.field-discount_percent { width: 90px; }
.discounts td.field-discount_percent input { width: 72px; }
.discounts th.column-delete, .discounts td.delete { width: 56px; }
.discounts tbody tr.form-row td { height: 34px; }
.discounts .add-row td { padding: 6px 16px; }
.discounts .description { padding: 0 16px 7px; }
@media (max-width: 1023px) {
  #account_form > div { grid-template-columns: minmax(0, 1fr); }
  #account_form > div > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* "?" tooltips that replace card descriptions and field help (admin.js 4f). */
.tip {
  display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: middle;
  width: 16px; height: 16px; margin-left: 6px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--muted); font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1; cursor: help;
}
.tip:hover, .tip:focus { color: var(--green-600); border-color: var(--green-600); outline: none; }
.tip::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  width: max-content; max-width: 380px; padding: 8px 10px; border-radius: 6px;
  background: #16171a; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); pointer-events: none;
  /* display:none, not opacity:0 — an invisible 380px bubble still counts
     as page width, and the ones in the right-hand cards gave the whole
     order form a horizontal scrollbar (15 Sep 2026). */
  display: none;
}
.tip:hover::after, .tip:focus::after { display: block; }
/* Right-hand column cards: open the bubble leftwards so it stays on screen. */
.fs-dispatch .tip::after, .fs-quote .tip::after { left: auto; right: 0; }
h2 .tip { margin-left: 8px; }
.aligned label .tip { margin-left: 5px; }

/* Quote card: pro-forma buttons under the file row. */
.proforma-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proforma-actions .cell-meta { flex-basis: 100%; }
#order_form .form-row.field-pro_forma_actions label { display: none; }
#order_form .aligned .form-row.field-pro_forma_actions > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
#order_form .form-row.field-pro_forma_actions { padding-top: 0; }
.proforma-actions .cell-meta { flex-basis: auto; }


/* ---- 21. Payment banner (order form, Quote & payment card) and the
   paid tick beside the order number in the list. ---- */
/* The banner row drops the label column so the strip spans the card. */
.aligned .form-row.field-payment_banner > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
.form-row.field-payment_banner label { display: none; }
.form-row.field-payment_banner .readonly { grid-column: 1 / -1; padding: 0; margin: 0; width: 100%; }
.pay-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 14px; margin: 0 0 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--row-alt); color: var(--text-strong);
}
.pay-banner__label { font-weight: 700; letter-spacing: 0.06em; font-size: 0.9375rem; }
.pay-banner__amount { font-size: 1.25rem; font-weight: 700; }
.pay-banner__meta { color: var(--muted); font-size: 0.875rem; }
.pay-banner__ref { font-size: 0.8125rem; }
.pay-banner--paid { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
.pay-banner--paid .pay-banner__label, .pay-banner--paid .pay-banner__amount { color: var(--success-ink); }
.pay-banner--due { background: var(--warn-bg); border-color: var(--warn-border); }
.pay-banner--due .pay-banner__label { color: var(--warn-ink); }
.paid-tick {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 50%; background: var(--success-ink); color: #fff; font-size: 0.75rem; font-weight: 700;
  vertical-align: 1px; margin-left: 4px;
}


/* ---- 22. Compact order form (staff, 15 Sep 2026: "minimal white space,
   more on screen at once"). Rows that were stacking their parts vertically
   in the 420px column now lay them out in one line. ---- */
.form-row.field-payment_banner { padding: 0; }
.pay-banner { margin: 0; }
/* Rows whose only content is an action strip: no empty label column. */
.aligned .form-row.field-pro_forma_actions > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
.form-row.field-pro_forma_actions label { display: none; }
.proforma-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.proforma-actions .cell-meta { flex-basis: 100%; }
.fs-shipping .field-recalculate_button .readonly, .form-row.field-pro_forma_actions .readonly { width: 100%; max-width: none; box-sizing: border-box; }
.fs-shipping .field-recalculate_button .readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fs-shipping .recalc-note { margin: 0; }
/* Attached document: one line, filename clipped with an ellipsis. */
.fs-quote .file-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fs-quote .file-field__name { flex: 1 1 110px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-quote .file-field__pick, .fs-quote .file-field__remove { width: auto; flex: none; }
/* Date/time shortcuts: keep the calendar and clock icons, drop the
   "Today |" / "Now |" text so the two inputs share one line. */
#order_form p.datetime .datetimeshortcuts a:first-child { display: none; }
#order_form p.datetime .datetimeshortcuts { font-size: 0; }
#order_form p.datetime .datetimeshortcuts a { font-size: 13px; }
/* Paid at: date and time side by side instead of on two lines. */
#order_form p.datetime { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; line-height: 1.2; font-size: 0; }
#order_form p.datetime input, #order_form p.datetime .datetimeshortcuts { font-size: 13px; }
#order_form p.datetime .datetimeshortcuts { white-space: nowrap; }
#order_form p.datetime br { display: none; }
#order_form p.datetime input.vDateField { width: 96px; }
#order_form p.datetime input.vTimeField { width: 72px; }

/* Action-only rows get the whole card width, whatever the card's label
   column is (the shared 110px rule above otherwise wins). */
#order_form .form-row.field-recalculate_button > div > .flex-container,
#order_form .form-row.field-pro_forma_actions > div > .flex-container,
#order_form .form-row.field-payment_banner > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
/* Quote & payment's labels are short; a 90px column leaves room for the
   date + time inputs and the filename on one line. */
#order_form .fs-quote .form-row > div > .flex-container { grid-template-columns: 90px minmax(0, 1fr); }
#order_form .fs-quote .form-row > div > .help { margin-left: 114px; }
#order_form p.datetime input.vDateField { width: 88px; }
#order_form p.datetime input.vTimeField { width: 60px; }

/* Trade application form: the Create dealer account row has no label. */



/* ---- 23. Order page autosave (admin.js 4h) ----
   The sticky bar's status line, a field the server refused, and messages
   the save produced (e.g. "the quote no longer matches the order"). */
.submit-row .autosave-status { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.submit-row .autosave-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); flex: 0 0 auto; }
.submit-row .autosave-status.is-saving::before { background: var(--muted); animation: autosave-pulse 0.9s ease-in-out infinite; }
.submit-row .autosave-status.is-error { color: var(--danger); font-weight: 600; }
.submit-row .autosave-status.is-error::before { background: var(--danger); }
@keyframes autosave-pulse { 50% { opacity: 0.25; } }
#order_form .autosave-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(200, 50, 40, 0.15); }
.line-items td.delete .js-add-line { white-space: nowrap; }
.line-items tr.form-row:not(.has_original):not(.empty-form) td.delete { width: auto; }

/* ---- 24. Order page (Claude Design handoff, built 2 Oct 2026 —
   docs/design/order-page/). A sticky header holding the stage bar and the
   one next step; a main column led by the Lines table, then Customer /
   Delivery / Shipping in a row and the collapsed Admin section; a sticky
   right rail with Payment (the only money summary) and Dispatch. The
   panels are still Django's fieldsets (classes fs-*), placed by name in
   templates/admin/orders/order/change_form.html, so the earlier card-grid
   rules (#order_form > div > .fs-*) no longer match anything. ---- */
#order_form > div { display: block; }
#order_form fieldset.module, #order_form .line-items { margin: 0; }

/* -- header -- */
#order_form .order-head {
  display: block; position: sticky; top: 0; z-index: 30; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card);
}
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 16px 8px; }
.order-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.order-title h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.order-title h1 .mono { font-weight: 600; margin-right: 4px; }
.order-title__placed { font-size: 12px; color: var(--muted); }
.head-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.head-tools .button { height: 32px; padding: 0 12px; line-height: 30px; font-size: 13px; text-decoration: none; }
.autosave-status { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.autosave-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); flex: none; }
.autosave-status.is-saving::before { background: var(--muted); animation: autosave-pulse 0.9s ease-in-out infinite; }
.autosave-status.is-error { color: var(--danger); font-weight: 600; white-space: normal; }
.autosave-status.is-error::before { background: var(--danger); }

/* -- stage bar: five stages, then the one next step -- */
.stage-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 20px; align-items: stretch; padding: 0 16px 12px; }
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; margin: 0; padding: 6px 0 0; list-style: none; }
.stage { position: relative; display: flex; flex-direction: column; gap: 3px; padding-right: 8px; min-width: 0; list-style: none; }
.stage::after { content: ""; position: absolute; left: 30px; right: 8px; top: 10px; height: 2px; background: var(--border); }
.stage:last-child::after { display: none; }
.stage__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: grid; place-items: center; position: relative; z-index: 1; margin-bottom: 2px; box-sizing: border-box; }
.stage__dot svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stage__name { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.25; }
.stage__meta { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; min-height: 15px; }
.stage--done .stage__dot { background: var(--green-600); border-color: var(--green-600); }
.stage--done::after { background: var(--green-600); }
.stage--done .stage__name { color: var(--text-strong); }
.stage--current .stage__dot { border-color: var(--text-strong); background: var(--text-strong); box-shadow: 0 0 0 3px var(--border-hairline); }
.stage--current .stage__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); }
.stage--current .stage__name { color: var(--text-strong); font-weight: 700; }
.stage--current .stage__meta { color: var(--text-strong); font-weight: 600; }
.stage--skipped .stage__dot { border-style: dashed; }
.stage--skipped .stage__name { text-decoration: line-through; }

.next { align-self: center; border-left: 1px solid var(--border); padding-left: 20px; min-width: 0; position: relative; }
.next__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.next__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.next__btn.button { height: 38px; padding: 0 18px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.next__btn.button:disabled, .next__btn.button[disabled] { background: var(--border-hairline); border-color: var(--border); color: var(--muted); cursor: not-allowed; opacity: 1; }
.next__reason { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text-strong); }
.next__reason--warn { color: var(--warn-ink-deep); }
.next__reason--done { color: var(--success-ink); }
.status-override summary { cursor: pointer; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--green-600); list-style: none; }
.status-override summary::-webkit-details-marker { display: none; }
.status-override__body { position: absolute; right: 0; top: 22px; z-index: 40; width: 300px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); letter-spacing: 0; text-transform: none; font-weight: 400; }
#order_form .status-override__body fieldset.module { border: 0; box-shadow: none; background: transparent; padding: 0; }
#order_form .status-override__body fieldset.module > h2 { display: none; }
#order_form .status-override__body .form-row { padding: 0; border: 0; }
#order_form .status-override__body .form-row > div > .flex-container { display: block; }
#order_form .status-override__body label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
#order_form .status-override__body select { width: 100%; }

/* -- two columns -- */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.order-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.order-rail { position: sticky; top: calc(var(--order-head-h, 150px) + 14px); max-height: calc(100vh - var(--order-head-h, 150px) - 72px); overflow-y: auto;   /* leaves room for the page's bottom padding, or a short page would slide the rail under the header */ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.details-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1700px) { .order-layout { grid-template-columns: minmax(0, 1fr) 400px; } }

/* -- panels: compact label/field rows -- */
#order_form .fs-order .form-row > div > .flex-container,
#order_form .fs-shipping .form-row > div > .flex-container,
#order_form .fs-dispatch .form-row > div > .flex-container { grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; }
#order_form .fs-order .form-row > div > .help, #order_form .fs-shipping .form-row > div > .help, #order_form .fs-dispatch .form-row > div > .help { margin-left: 94px; }
#order_form .fs-order input[type="text"], #order_form .fs-shipping select, #order_form .fs-dispatch input, #order_form .fs-dispatch select { width: 100% !important; max-width: 100%; box-sizing: border-box; }
#order_form fieldset.fs-dispatch.is-needed { border-color: var(--warn-border); box-shadow: 0 0 0 3px var(--warn-bg); }
#order_form fieldset.fs-dispatch.is-needed > h2::after { content: "Needed next"; margin-left: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--warn-ink-deep); }

/* -- delivery: switch, address summary, the fields behind a disclosure -- */
.delivery-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); min-width: 0; }
#order_form .delivery-panel fieldset.module { border: 0; box-shadow: none; background: transparent; }
#order_form .delivery-panel fieldset.fs-delivery > h2 { display: none; }
.delivery-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 4px 16px 12px; }
.delivery-summary__address { margin: 0; font-size: 13px; line-height: 1.5; }
.delivery-summary .button { height: 28px; padding: 0 10px; font-size: 12px; flex: none; }
.delivery-fields { border-top: 1px solid var(--border-hairline); }
.delivery-fields > summary { cursor: pointer; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--green-600); }
#order_form .delivery-fields .fs-delivery { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }

/* -- Payment: the one money summary -- */
#order_form .fs-quote .form-row > div > .flex-container { grid-template-columns: minmax(0, 1fr); }
#order_form .fs-quote .form-row.field-quote_panel label { display: none; }
#order_form .fs-quote .field-quote_panel .readonly { width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
.pay { display: flex; flex-direction: column; gap: 10px; }
.pay__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.money-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.money-figure { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-strong); }
.money-figure.paid { color: var(--success-ink); }
.money-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pay-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; background: var(--border-hairline); color: var(--text-strong); }
.pay-chip--ok { background: var(--success-bg); color: var(--success-ink); }
.pay-chip--warn { background: var(--warn-bg); color: var(--warn-ink-deep); }
.pay-chip--info { background: var(--row-alt); border: 1px solid var(--border); }
.notice { margin: 0; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
.notice--ok { background: var(--success-bg); color: var(--success-ink); }
.notice--warn { background: var(--warn-bg); color: var(--warn-ink-deep); }
.notice--info { background: var(--row-alt); color: var(--text-strong); border: 1px solid var(--border-hairline); }
.pay .sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border-hairline); font-size: 13px; }
.pay .sum dt { color: var(--muted); margin: 0; }
.pay .sum dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 13px; }
.pay .sum .total { font-weight: 600; color: var(--text-strong); border-top: 1px solid var(--border); padding-top: 5px; }
.pay .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.pay .kv dt { color: var(--muted); margin: 0; }
.pay .kv dd { margin: 0; }
.pay .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pay .btn-row .button { flex: 1 1 0; height: 32px; padding: 0 10px; font-size: 13px; white-space: nowrap; }

/* -- Lines -- */
.line-items table.lines { table-layout: fixed; width: 100%; margin: 0; }
.line-items table.lines th, .line-items table.lines td { box-sizing: border-box; }   /* column widths below include the cell padding */
.line-items .line-items__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.line-items .line-items__head > div:first-child { margin-right: auto; }
.line-items th.column-lineno, .line-items td.lineno { width: 40px; padding-left: 16px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.line-items th.column-product { width: auto; }
.line-items th.column-vehicle { width: 160px; }
.line-items th.column-quantity { width: 64px; }
.line-items th.column-chosen_pcd { width: 96px; }
.line-items th.column-chosen_offset { width: 72px; }
.line-items th.column-bore { width: 52px; }
.line-items th.column-unit_price_override { width: 104px; text-align: right; }
.line-items th.column-line_total { width: 96px; text-align: right; }
.line-items th.column-delete { width: 46px; }
.line-items table.lines th, .line-items table.lines td { padding-left: 6px; padding-right: 6px; }
.line-items table.lines th:last-child, .line-items table.lines td:last-child { padding-right: 12px; }
.line-items td.field-product .js-add-line { display: block; margin-top: 8px; height: 30px; padding: 0 12px; font-size: 13px; }
.line-items table.lines td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.line-items td.lineno { padding-top: 16px; }
.line-items .prod-name { font-weight: 600; color: var(--text-strong); }
.line-items .prod-spec { font-size: 12px; color: var(--text-strong); margin-bottom: 4px; }
.line-items td.field-product .select2-container, .line-items td.field-product .related-widget-wrapper { width: 100% !important; max-width: 100%; }
.line-items td.field-product .select2-selection { font-family: var(--mono); font-size: 12px; }
.line-items td.field-vehicle > * { display: block; margin-bottom: 4px; width: fit-content; }
.line-items td.field-quantity input, .line-items td.field-chosen_pcd input, .line-items td.field-chosen_pcd select,
.line-items td.field-chosen_offset input, .line-items td.field-chosen_offset select { width: 100%; box-sizing: border-box; }
.line-items td.field-bore p, .line-items td.field-line_total p { margin: 0; padding-top: 6px; font-family: var(--mono); }
.line-items td.field-line_total p { font-weight: 600; text-align: right; }
.line-items td.field-unit_price_override input { width: 100%; box-sizing: border-box; }
.line-items tr.form-row.is-flagged > td { background: var(--danger-bg); }
.line-items tr.form-row.is-flagged td.field-chosen_pcd input, .line-items tr.form-row.is-flagged td.field-chosen_pcd select,
.line-items tr.form-row.is-flagged td.field-chosen_offset input, .line-items tr.form-row.is-flagged td.field-chosen_offset select { border-color: var(--danger); }
.line-items tr.line-items__flag-row > td { background: var(--danger-bg); border-top: 0; padding: 0 12px 10px 16px; }
/* Remove: a bin icon; the tick box it drives is hidden but still there. */
.line-items td.delete { text-align: center; }
.line-items__remove { display: inline-flex; padding: 5px; border-radius: 5px; color: var(--muted); cursor: pointer; margin-top: 2px; }
.line-items__remove:hover { color: var(--danger); background: var(--danger-bg); }
.line-items__remove input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.line-items__remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line-items tr.form-row:has(td.delete input:checked) > td.delete::after { content: none; }
.lines-summary { flex: none; }

/* -- narrower windows: below this the lines table can't sit beside the rail -- */
@media (max-width: 1359px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-rail { position: static; max-height: none; overflow: visible; }
  .details-row { grid-template-columns: minmax(0, 1fr); }
  .stage-bar { grid-template-columns: minmax(0, 1fr); }
  .next { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hairline); padding-top: 10px; }
  #order_form .order-head { position: static; }
}
.line-items table.lines th.column-lineno, .line-items table.lines td.lineno { padding-left: 16px; }


/* ---- 25. One typeface, aligned digits (2 Oct 2026) ---- */
body, input, select, textarea, button { font-variant-numeric: tabular-nums; }
button, input, select, textarea, optgroup { font-family: inherit; }   /* form controls don't inherit a typeface by default (the copy buttons were falling back to Arial) */

/* ---- 26. Stock sources page: where the catalogue is pulled from ---- */
.source-panel { margin: 0 0 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); font-size: 13px; }
.source-panel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.source-panel__grid > div { min-width: 0; overflow-wrap: anywhere; }
.source-panel .mono-label { margin-bottom: 4px; }
.source-panel__link { font-weight: 600; }
.source-panel__more { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hairline); }
.source-panel__more summary { cursor: pointer; font-weight: 500; color: var(--green-600); }
.source-panel__more p { margin: 8px 0 0; max-width: 90ch; line-height: 1.5; }
.source-panel__lists { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hairline); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.source-panel__lists .mono-label { flex-basis: 100%; margin: 0; }
@media (max-width: 900px) { .source-panel__grid { grid-template-columns: minmax(0, 1fr); } }


/* ======================================================================
   27. Order cancellation: the banner under the order header
   ====================================================================== */
.cancel-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.4; background: var(--warn-bg); color: var(--warn-ink-deep); border: 1px solid var(--warn-border); }
.cancel-banner--done { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-border); }
.cancel-banner__actions { display: inline-flex; gap: 8px; flex: none; }

/* ======================================================================
   28. Dealer account: the Logins panel
   ====================================================================== */
.logins-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.logins-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 0 12px 6px 0; border-bottom: 1px solid var(--border-hairline); }
.logins-table td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border-hairline); vertical-align: top; }

.form-row.field-logins_display label { display: none; }   /* the panel has its own heading */

/* ======================================================================
   Unfold trial: the order page's fields on Unfold's row markup. Our
   widgets carry their own class (mono), which replaces the Tailwind
   classes Unfold would give them, so they are styled here; rows are
   tightened to the compact design and the long help texts hidden (the
   legacy design folded them into "?" tooltips).
   ====================================================================== */
#content-main input[type="text"].mono, #content-main input[type="number"].mono, #content-main input.vTextField.mono, #content-main select.mono, #content-main textarea.mono {
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text-strong); height: 32px; padding: 0 8px; font-size: 13px; max-width: 100%;
}
#order_form textarea { height: auto; padding: 6px 8px; }
#order_form input:focus, #order_form select:focus, #order_form textarea:focus { outline: 2px solid rgba(31, 92, 70, 0.35); outline-offset: 1px; border-color: var(--green-600); }
#content-main .form-row { padding: 6px 12px; }
#content-main .form-row > div > div:first-child { min-width: 128px; width: 128px; height: 32px; line-height: 32px; font-size: 13px; }
#content-main .leading-relaxed.mt-2.text-xs { display: none; }               /* field help text: a ? tooltip instead (unfold-compact.js) */
#content-main fieldset > .leading-relaxed.max-w-4xl { font-size: 12px; margin-bottom: 8px; color: var(--muted); }
#content-main fieldset.module { margin-bottom: 0; }
#content-main .form-rows { border-radius: 10px; box-shadow: var(--shadow-card); }

/* Unfold's sidebar takes ~200px, so the order page's two-column layout needs more room than before. */
@media (max-width: 1279px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-rail { position: static; max-height: none; overflow: visible; }
  #order_form .order-head { position: static; }
}
@media (max-width: 1500px) { .details-row { grid-template-columns: minmax(0, 1fr); } }
#order_form .line-items, #order_form .inline-group { overflow-x: auto; }

/* ======================================================================
   Compact pass for the whole admin on Unfold (business, 6 Oct 2026):
   tighter rows, labels and headings; Unfold's inputs at 32px.
   ====================================================================== */
#content-main input[type="text"], #content-main input[type="number"], #content-main input[type="email"], #content-main input[type="url"], #content-main input[type="search"], #content-main select, #content-main textarea { font-size: 13px; }
#content-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #content-main select { height: 32px; padding-top: 0; padding-bottom: 0; }
#content-main fieldset.module > h2 { height: 32px; margin-bottom: 8px; font-size: 13px; }
#content-main .form-row > div > div.grow .leading-relaxed { display: none; }
#content-main .form-row > div { gap: 8px; }
.help-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--muted); font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle; }
.flex.flex-col.gap-6 { gap: 12px; }

/* Dealer account page: two independent columns (CSS multi-column, so a short
   card never leaves a hole beside a tall one): Dealer, Logins and Contact
   details on the left; Address and Brand discounts on the right. */
body.model-account #account_form > .flex.flex-col { display: block; columns: 2; column-gap: 16px; column-fill: balance; }
body.model-account #account_form > .flex > fieldset, body.model-account #account_form > .flex > .inline-group { display: block; break-inside: avoid; margin: 0 0 12px; }
body.model-account #account_form > .flex > .inline-group > *, body.model-account #account_form > .flex > .inline-group fieldset { break-inside: avoid; }
body.model-account #account_form > .flex > script { display: none; }
body.model-account .field-logins_display > div > div:first-child { display: none; }   /* the empty label column beside the logins table */
body.model-account .field-logins_display > div > div.grow { width: 100%; }
@media (max-width: 1100px) { body.model-account #account_form > .flex.flex-col { columns: 1; } }

/* Confirmation pages (cancel, email to colleague, add / remove login, create account): plain inputs styled like the rest. */
.confirm-card input[type="text"], .confirm-card input[type="email"], .confirm-card select, .confirm-card textarea { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; font-size: 13px; background: var(--surface); color: var(--text-strong); box-sizing: border-box; }
.confirm-card input[type="text"], .confirm-card input[type="email"], .confirm-card select { height: 32px; padding-top: 0; padding-bottom: 0; }
.confirm-card label { font-size: 13px; }
.confirm-card .form-row { padding: 6px 0; }

/* Dark mode: Unfold puts .dark on <html>; the design's dark tokens apply there. */
html.dark {
    --bg: #101113; --surface: #1b1d20; --row-alt: #1e2124; --row-hover: #22252a;
    --bg-chrome: #16181b; --chrome-border: #22252a;
    --border: #2f333a; --border-strong: #3a3f47; --border-hairline: #22252a;
    --text: #e4e6e9; --text-strong: #f2f3f5; --muted: #92959b; --faint: #6b6e74; --empty: #4d5158;
    --masthead: #0b0c0e; --masthead-divider: #2a2d33; --masthead-text: #a8abb1; --masthead-text-2: #c9cbcf; --masthead-pill-open: #22242a;
    --green-600: #3f9c76; --green-500: #54b58b; --green-800: #2f8a64; --primary-ink: #08130e; --link: #54b58b;
    --warn-bg: #241c0d; --warn-ink: #e0a34a; --warn-border: #3d2f14; --warn-tint: #1f1a12; --warn-ink-deep: #e0a34a;
    --danger: #f2836f; --danger-bg: #2a1512; --danger-border: #4a2a26; --danger-ink: #f2836f;
    --success-bg: #0d1a15; --success-border: #1e3a2e; --success-ink: #54b58b;
    --chip-placed-bg: #1c1f23; --chip-placed-ink: #b6b9bf; --chip-placed-border: #2b2f35;
    --chip-review-bg: #241c0d; --chip-review-ink: #e0a34a; --chip-review-border: #3d2f14;
    --chip-quote-bg: #101d2e; --chip-quote-ink: #6ea8e8; --chip-quote-border: #1e344f;
    --chip-queued-bg: #1b1630; --chip-queued-ink: #a48be0; --chip-queued-border: #2d2450;
    --chip-dispatched-bg: #0d1a15; --chip-dispatched-ink: #54b58b; --chip-dispatched-border: #1e3a2e;
    --chip-monthly-bg: #171b21; --chip-monthly-ink: #9db3cc; --chip-monthly-border: #26303b;
    --chip-bacs-bg: #0f1a16; --chip-bacs-ink: #6fc3a0; --chip-bacs-border: #24382f;
    --chip-card-bg: #1e1424; --chip-card-ink: #b98bc4; --chip-card-border: #33203b;
    --tile-review: #e0a34a; --tile-quote: #6ea8e8; --tile-queued: #a48be0; --tile-dispatched: #3f9c76;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --primary-fg: #08130e; --button-fg: var(--text-strong);
    color-scheme: dark;
}
html.dark .stat-tile, html.dark .form-rows, html.dark .confirm-card, html.dark .source-panel, html.dark .order-head, html.dark .delivery-summary { background: var(--surface); color: var(--text); }

/* Read-only rows (products, vehicle fitment): as dense as editable ones. */
#content-main .form-row .flex.flex-col > div, #content-main .form-row dd, #content-main .form-row .readonly { line-height: 20px; }
#content-main fieldset .form-row:has(.readonly) { padding: 4px 12px; }

/* Phones and tablets: the order page's header wraps, the stage bar stacks, the lines table scrolls sideways. */
@media (max-width: 1023px) {
  #content-main .form-row > div > div:first-child { width: auto; min-width: 0; height: auto; line-height: 20px; margin-bottom: 4px; }
  #content-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #content-main select { height: 44px; }
  .button, a.button, button.default { height: 40px; }
}
@media (max-width: 767px) {
  .order-head .head-top, .head-tools { flex-wrap: wrap; row-gap: 6px; }
  .head-tools { width: 100%; justify-content: flex-start; }
  .stage-bar { grid-template-columns: minmax(0, 1fr); }
  .stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .stage__name { font-size: 11px; line-height: 1.2; }
  .stage__meta { font-size: 10px; white-space: normal; }
  .next { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hairline); padding-top: 10px; }
  #order_form .line-items table, #order_form .inline-group table { min-width: 720px; }
  #order_form .inline-group { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Tidy pass after the first live look (7 Oct 2026) ---- */
/* Lines table: the selects were overlapping the next column; fixed widths per column, no sideways scroll on a desktop. */
#order_form .inline-group { overflow-x: visible; }
#order_form .line-items table, #order_form .inline-group table { table-layout: fixed; width: 100%; }
#order_form th.column-lineno, #order_form td.field-lineno { width: 28px; }
#order_form th.column-quantity, #order_form td.field-quantity { width: 64px; }
#order_form th.column-chosen_pcd, #order_form td.field-chosen_pcd { width: 110px; }
#order_form th.column-chosen_offset, #order_form td.field-chosen_offset { width: 96px; }
#order_form th.column-bore, #order_form td.field-bore { width: 60px; }
#order_form th.column-unit_price_override, #order_form td.field-unit_price_override { width: 96px; }
#order_form th.column-line_total, #order_form td.field-line_total { width: 84px; text-align: right; }
#order_form th.column-delete, #order_form td.delete { width: 96px; }
#order_form td.field-quantity input, #order_form td.field-chosen_pcd select, #order_form td.field-chosen_offset select, #order_form td.field-unit_price_override input { width: 100%; min-width: 0; box-sizing: border-box; padding-left: 6px; padding-right: 6px; }
#order_form td.delete a, #order_form td.delete button { white-space: nowrap; font-size: 12px; }
/* Shipping zone select was truncating to "UK …". */
#order_form .fs-shipping select[name="shipping_zone"] { min-width: 170px; }
/* The Payment panel's inner card: less padding, no duplicated frame. */
#order_form .fs-quote .form-rows { box-shadow: none; }
#order_form .fs-quote .form-row { padding: 4px 10px; }
#order_form .fs-quote .quote-panel, #order_form .js-order-totals { padding: 10px 12px; }
/* Card headings carry the "?" from the folded description. */
#content-main fieldset.module > h2 .help-dot { margin-left: 8px; }
#content-main fieldset.module > h2 { padding-right: 10px; }

/* Logins (auth user) page: two independent columns, like the account page. */
body.model-user #user_form > .flex.flex-col { display: block; columns: 2; column-gap: 16px; column-fill: balance; }
body.model-user #user_form > .flex > fieldset { display: block; break-inside: avoid; margin: 0 0 12px; }
body.model-user #user_form > .flex > script { display: none; }
body.model-user .selector { width: 100%; }
@media (max-width: 1100px) { body.model-user #user_form > .flex.flex-col { columns: 1; } }
/* Order page: the three detail cards must shrink to their grid cells rather than push the page wider. */
.details-row > *, .order-layout > * { min-width: 0; max-width: 100%; }
.details-row fieldset.module, .details-row .form-rows { min-width: 0; }
#order_form .fs-shipping .form-row > div { flex-wrap: wrap; }

/* ==========================================================================
   29. Usability pass for less confident staff (7 Oct 2026): page headings,
   a key under the order tiles, the "showing" tile, the next step as the
   loudest thing on an order, a save-state pill, "?" dots that open on
   click, a quiet Delete link, danger actions in the Admin card, the
   dealt-with application banner.
   ========================================================================== */

/* List pages start with their name. */
.page-title { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); }
body.model-order .page-title { margin-bottom: 6px; }

/* Key under the tiles. */
.list-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -4px 0 12px; font-size: 12px; color: var(--muted); }
.list-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.list-legend__swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--warn-tint); border: 1px solid var(--warn-border); box-shadow: inset 3px 0 0 var(--warn-ink); }
.list-legend .paid-tick { margin: 0; }
.list-legend a { color: var(--link); font-weight: 600; }

/* The tile whose orders are on screen. */
.stat-tile.is-active { outline: 2px solid var(--green-600); outline-offset: -1px; background: var(--success-bg); }
.stat-tile__showing { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--green-600); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }

/* Next step: a full-width strip under the stages, button first and big. */
.stage-bar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.next { align-self: stretch; border-left: 0; padding: 10px 14px 12px; background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 8px; }
.next__label { margin-bottom: 8px; color: var(--success-ink); }
.next__body { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
.next__btn.button { height: 44px; padding: 0 24px; font-size: 15px; font-weight: 700; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.next__reason { font-size: 14px; }
.status-override > summary { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Save state: a pill that is always in the same place. */
.autosave-status { padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--success-border); background: var(--success-bg); color: var(--success-ink); font-weight: 600; }
.autosave-status.is-pending, .autosave-status.is-saving { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink-deep); }
.autosave-status.is-pending::before { background: var(--warn-ink); }
.autosave-status.is-error { border-color: var(--danger-border); background: var(--danger-bg); }

/* Lines table: the Unit £ heading says where the faint price comes from. */
.lines th .th-sub { display: block; font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; }

/* Shipping: "Reset to zone rate" sits right under the cost box. */
.fs-shipping .form-row:has(.js-recalc) > div { min-height: 0; padding-top: 0; }
.fs-shipping .form-row:has(.js-recalc) > div > div:first-child { display: none; }

/* Danger actions (Cancel / Delete) in the collapsed Admin card. */
.danger-row { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.danger-row .cell-meta { margin-top: 4px; max-width: 320px; }

/* "?" dots are buttons too; the click panel. */
.help-dot { cursor: pointer; position: relative; }
.help-pop { display: block; margin: 6px 0 2px; padding: 8px 10px; max-width: 420px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text); white-space: normal; text-transform: none; letter-spacing: 0; }
h2 > .help-pop, label > .help-pop { font-size: 12px; }

/* Save bar: Delete as a quiet link, not a red button. */
.submit-delete { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.submit-delete:hover { color: var(--danger-ink); }

/* Dealt-with trade application. */
.notice-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px 16px; border: 1px solid var(--success-border); border-radius: 8px; background: var(--success-bg); font-size: 13px; color: var(--text); }
.notice-bar--muted { background: var(--row-hover); border-color: var(--border); }
.notice-bar__tag { flex: none; padding: 4px 10px; border: 1px solid var(--success-border); border-radius: 4px; background: var(--surface); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-600); }
.notice-bar--muted .notice-bar__tag { color: var(--muted); border-color: var(--border); }
.notice-bar a { color: var(--link); }

@media (max-width: 760px) {
  .next__body { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .next__btn.button { width: 100%; justify-content: center; }
  .list-legend { gap: 4px 14px; }
}

/* ==========================================================================
   30. Lines: product column on two tidy rows (7 Oct 2026): name and spec on
   one line, then the picker with an icon-only copy button beside it; the
   Remove column is just the bin.
   ========================================================================== */
.line-items .prod-head { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; margin-bottom: 5px; line-height: 1.25; }
.line-items .prod-spec { margin-bottom: 0; color: var(--muted); }
.line-items .prod-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.line-items .prod-row .select2-container, .line-items .prod-row .related-widget-wrapper { flex: 1 1 auto; min-width: 0; width: auto !important; }
.line-items .prod-row .select2-selection--single { height: 30px !important; }
.line-items .prod-row .select2-selection--single .select2-selection__rendered { line-height: 28px !important; padding-left: 8px; }
.line-items .prod-row .select2-selection--single .select2-selection__arrow { height: 28px !important; }
.line-items .prod-row .copy-code::after { content: "\2398"; font-size: 15px; line-height: 1; }
.line-items .prod-row .copy-code.is-copied::after { content: "\2713"; }
.line-items .prod-extras { margin-top: 5px; }
.line-items td.field-product { padding-top: 8px; }
.line-items td.lineno { padding-top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.line-items__remove { margin-top: 0; }

/* ==========================================================================
   31. Admin review, 7 Oct 2026 (items 1–27, 29–32).
   ========================================================================== */
/* 1. the rail never scrolls sideways */
.order-rail { overflow-x: hidden; }
/* 6. the rail sits beside the lines from 1280px; the lines table gives a little */
@media (min-width: 1280px) and (max-width: 1500px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .line-items th.column-vehicle { width: 132px; }
  .line-items th.column-unit_price_override { width: 92px; }
  .line-items th.column-line_total { width: 84px; }
}
/* 7. the three dispatch steps */
.steps-hint { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text); line-height: 1.5; }
.fs-dispatch .form-row:has(.steps-hint) > div > div:first-child { display: none; }
.fs-dispatch .form-row:has(.steps-hint) > div { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
/* 8. Remove as a word */
.line-items th.column-delete { width: 76px; }
.line-items__remove { padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface); }
.line-items__remove:hover { color: var(--danger-ink); border-color: var(--danger-border); background: var(--danger-bg); }
/* 10. the how-to line only while a new line is being added */
.line-items .description { display: none; }
.line-items:has(tr.form-row:not(.empty-form):not(.has_original)) .description { display: block; }
/* 12. payment small print on its own line */
.pay__top { flex-wrap: wrap; }
.pay__top .money-sub { flex: 1 1 100%; }
/* 13. the extra tile */
.stat-tile--blocked .stat-tile__kicker { color: var(--danger); }
/* 14. filters that are on */
.active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; }
.active-chips__label { color: var(--muted); font-weight: 600; margin-right: 2px; }
.active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--success-border); background: var(--success-bg); color: var(--success-ink); font-weight: 600; text-decoration: none; }
.active-chip:hover { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-ink); }
.active-chips__clear { margin-left: 6px; color: var(--link); font-weight: 600; }
/* 24. products list: text columns capped so the numbers sit together */
body.model-product #result_list th.column-code_display { width: 190px; }
body.model-product #result_list th.column-name_display { width: 240px; }
/* 27. empty list */
.empty-list { padding: 40px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.empty-list__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--text-strong); }
.empty-list__help { margin: 0 auto 16px; max-width: 520px; font-size: 13px; color: var(--muted); }
.empty-list__actions { display: flex; justify-content: center; gap: 10px; }
/* 29. labelled add button */
a.add-labelled { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px; border-radius: 8px; background: var(--green-600); color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; }
a.add-labelled .material-symbols-outlined { font-size: 18px; }
/* 31. history page */
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.history-head .page-title { margin: 0; }
/* 30. dark mode: chips and help dots keep their contrast */
html.dark .chip { border-color: var(--border-strong); }
html.dark .help-dot { border-color: var(--muted); color: var(--text); }
html.dark .help-pop { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
html.dark .active-chip, html.dark .next { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
html.dark .autosave-status { background: var(--success-bg); color: var(--success-ink); }
html.dark .empty-list, html.dark .notice-bar { background: var(--surface); border-color: var(--border); color: var(--text); }
/* 9. phones: each line as a card with labelled rows */
@media (max-width: 760px) {
  .line-items table.lines, .line-items table.lines tbody { display: block; }
  .line-items table.lines thead { display: none; }
  .line-items table.lines tr.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .line-items table.lines tr.form-row.empty-form { display: none; }
  .line-items table.lines td { display: block; padding: 0; border: 0; width: auto; }
  .line-items table.lines td.original { display: none; }
  .line-items table.lines td.lineno, .line-items table.lines td.field-product, .line-items table.lines td.field-vehicle, .line-items table.lines td.delete { grid-column: 1 / -1; }
  .line-items table.lines td.lineno { padding: 0; font-weight: 700; }
  .line-items table.lines td[class*="field-"]:not(.field-product):not(.field-vehicle)::before { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .line-items table.lines td.field-quantity::before { content: "Qty"; }
  .line-items table.lines td.field-chosen_pcd::before { content: "PCD"; }
  .line-items table.lines td.field-chosen_offset::before { content: "ET"; }
  .line-items table.lines td.field-bore::before { content: "Bore"; }
  .line-items table.lines td.field-unit_price_override::before { content: "Unit £"; }
  .line-items table.lines td.field-line_total::before { content: "Line £"; }
  .line-items table.lines td.field-line_total p { text-align: left; padding-top: 0; }
  .line-items table.lines td.delete { text-align: left; }
  .line-items tr.line-items__flag-row > td { display: block; }
}

/* 7 Oct 2026, after the live look: the picker's wrapper shares the row with the copy button instead of taking all of it; the rail scrolls with the page (no scrollbar of its own). */
.line-items .prod-row > div { flex: 1 1 auto; min-width: 0; width: auto !important; }
.line-items .prod-row .related-widget-wrapper { display: block; min-width: 0; }
.line-items .prod-row .select2-container { width: 100% !important; }
.line-items .prod-row .select2-selection__rendered { overflow: hidden; text-overflow: ellipsis; }
.order-rail { position: static; max-height: none; overflow: visible; }
@media (min-width: 1280px) and (max-width: 1500px) { .line-items th.column-vehicle { width: 120px; } .line-items th.column-chosen_pcd { width: 88px; } .line-items th.column-chosen_offset { width: 66px; } }

/* 7 Oct 2026: a set line shows its code as text; the picker sits behind "Change". */
.line-items .prod-row--set > div { display: none; }
.line-items .prod-row .copy-code { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; width: auto; height: 26px; padding: 0 8px; font-family: var(--mono); color: var(--text-strong); border: 1px solid var(--border); background: var(--surface); border-radius: 6px; gap: 6px; }
.line-items .prod-row .copy-code::after { content: "copy"; font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.line-items .prod-row .copy-code.is-copied::after { content: "copied"; color: var(--green-600); }
.line-items .prod-change { font-size: 12px; color: var(--link); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.line-items .prod-row--changing .copy-code, .line-items .prod-row--changing .prod-change { display: none; }
.line-items .prod-row--changing > div { width: 100% !important; }
.select2-container--open .select2-dropdown { min-width: 260px; }

/* 7 Oct 2026: the wheel's name and size read at a glance, the same size as the boxes beside it. */
.line-items .prod-head { font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.line-items .prod-name { font-size: 15px; font-weight: 700; }
.line-items .prod-spec { font-size: 14px; color: var(--text-strong); font-weight: 500; }
.line-items .vehicle__name { font-size: 14px; }

/* ==========================================================================
   33. Phones: nothing sideways (8 Oct 2026). A <fieldset> will not shrink below
   its widest child, and the lines grid used `1fr` columns (min-content), so one
   wide field made the whole order page wider than the screen and cut the PCD /
   price columns off. Everything may now shrink to the screen, the table loses its
   side margins, and the cards' fields fill their half of the row.
   ========================================================================== */
@media (max-width: 760px) {
  fieldset.module, .line-items, .order-layout > * { min-width: 0; max-width: 100%; }
  .line-items__head { flex-wrap: wrap; gap: 6px 10px; }
  #order_form .line-items table, #order_form .line-items table.lines { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }   /* beats the older 720px sideways-scroll rule above */
  .line-items table.lines tr.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .line-items table.lines td { min-width: 0; }
  .line-items table.lines td * { max-width: 100%; box-sizing: border-box; }
  .line-items table.lines input:not([type="checkbox"]):not([type="hidden"]), .line-items table.lines select { width: 100%; }
  .line-items table.lines td.field-unit_price_override, .line-items table.lines td.field-line_total { text-align: left; }   /* labels sit over their values, not off to the right */
}