/* ==========================================================================
   Best Choice Doors - one stylesheet, plain CSS, no framework.
   Look: CPS (quiet grey canvas, white rounded cards, small type, soft badges)
   in the Best Choice brand (navy #302f4a, teal #0e7384). See BRAND.md and
   CPS-STYLE-NOTES.md. To retheme, change the variables in section 1 only.

   Sections
    1  Tokens (colours, sizes)        11  Forms
    2  Fonts                          12  Buttons
    3  Base                           13  Tabs
    4  Layout shell (sidebar, top bar) 14  Flash, alerts, empty states
    5  Page head                      15  Login / bare pages
    6  Cards                          16  Price a door
    7  Work queue                     17  Order page
    8  Tables                         18  Utilities
    9  Status badges                  19  Print
   10  Filter bar, search, chips
   ========================================================================== */

/* ---- 1  Tokens -------------------------------------------------------- */
:root {
  /* Brand (BRAND.md) */
  --brand-navy: #302f4a;     /* logo navy */
  --brand-teal: #188fa2;     /* logo teal: decorative / large text only (3.8:1 on white) */
  --brand-green: #93bf34;    /* logo tick: never behind white text */
  --brand-ink: #1a191d;

  /* Working colours */
  --primary: #0e7384;        /* buttons, links, focus. White on it = 5.5:1 */
  --primary-dark: #0b5e6c;   /* hover, link text */
  --primary-soft: #e3f1f4;   /* pale teal tint */
  --navy: #302f4a;           /* sidebar, headings on dark */
  --navy-light: #43425f;
  --heading: #1d2630;
  --text: #1a191d;
  --muted: #5f636b;
  --bg: #f6f7f8;             /* page canvas */
  --card: #ffffff;
  --border: #d8d8d8;
  --border-soft: #e7eaee;    /* table hairlines */
  --hover-row: rgba(14, 115, 132, .05);
  --focus: #0e7384;          /* focus ring: 5.5:1 on white and on the grey canvas */
  --select-bg: #cfe8ed;      /* text selection: pale teal, dark text 12:1 */

  --danger: #a12a1f;  --danger-bg: #fdecea;
  --ok: #3f6212;      --ok-bg: #eef5dc;
  --warn: #7a4a00;    --warn-bg: #fff4e0;

  /* Shape */
  --radius: 8px;             /* inputs, buttons */
  --radius-lg: 12px;         /* cards */
  --shadow-card: 0 8px 24px rgba(27, 46, 94, .08);

  /* Type */
  --font: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: .8125rem;   /* 13px */
  --text-xs: .75rem;     /* 12px */
  --text-xxs: .6875rem;  /* 11px */

  /* Layout */
  --sidebar-w: 232px;
  --topbar-h: 56px;
}

/* ---- 2  Fonts (self-hosted: the CSP only allows our own files) ------------ */
/* One variable woff2 file covers weights 400 to 700 (latin subset). Roboto is OFL / Apache licensed. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/roboto-latin-variable.woff2") format("woff2");
}

/* ---- 3  Base ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scrollbar-color: #b4b8c0 transparent; scrollbar-width: thin; }
body { margin: 0; font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); }
h1, h2, h3 { color: var(--heading); font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1rem; }
h3 { font-size: .9375rem; }
p { margin: 0 0 12px; }
a { color: var(--primary-dark); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary); text-decoration-thickness: 2px; }
::selection { background: var(--select-bg); color: var(--heading); }
input, textarea { caret-color: var(--primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3c7ce; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9fa4ad; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: #fff; }
.sidebar ::selection { background: var(--primary); color: #fff; }
[hidden] { display: none !important; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* ---- 4  Layout shell ------------------------------------------------------ */
/* Logged in:  [ sidebar ][ top bar          ]
                          [ page content     ]                                    */
.shell { display: flex; min-height: 100vh; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 24px 28px 48px; }

/* Sidebar (navy, white logo) */
.sidebar { width: var(--sidebar-w); flex: none; background: var(--navy); color: #d9dae6; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar { scrollbar-color: #5a597a transparent; }
.side-brand { display: block; padding: 18px 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.side-brand img { display: block; width: 150px; height: auto; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; flex: 1; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: #d9dae6; text-decoration: none; font-size: 14px; position: relative; }
.side-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-nav a.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 500; }
.side-nav a.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand-green); }
.side-nav a.active .i { color: var(--brand-green); }
.side-foot { padding: 14px 20px; font-size: var(--text-xs); color: #9a9bb3; border-top: 1px solid rgba(255, 255, 255, .1); }

/* Top bar: page title left, user menu right */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 28px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.topbar-title { flex: 1; margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; border-radius: var(--radius); color: var(--navy); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.nav-toggle:hover { background: var(--border-soft); }
.nav-backdrop { display: none; }

/* User menu (<details>, no JS needed to open it) */
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 20px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--border-soft); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-green); color: var(--navy); font-size: var(--text-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.user-name { font-size: 14px; font-weight: 500; }
.user-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 6px; z-index: 30; }
.user-pop form { margin: 0; }
.user-pop-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; display: flex; flex-direction: column; font-size: var(--text-sm); }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--border-soft); }
a.menu-item { text-decoration: none; }

.site-footer { padding: 14px 28px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: var(--text-xs);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-footer-plain { border-top: 0; justify-content: center; }
/* Developer credit (Dbsquared), shown on every page */
.dev-credit { color: var(--muted); text-decoration: none; }
.dev-credit:hover { color: var(--primary-dark); text-decoration: underline; }

/* Phones and small tablets: sidebar becomes a slide-in drawer.
   Only when JS is running (html.js); without JS the sidebar just stacks above the page. */
@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar { width: auto; height: auto; position: static; }
  .side-nav { flex-direction: row; flex-wrap: wrap; padding: 8px 10px; }
  .side-foot { display: none; }
  .js .sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(280px, 82vw); height: 100vh; transform: translateX(-100%); transition: transform .2s ease; }
  .js .side-nav { flex-direction: column; flex-wrap: nowrap; padding: 14px 10px; }
  .js .side-foot { display: block; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-open .sidebar { transform: none; }
  .js .nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(26, 25, 29, .45); }
  .topbar { padding: 0 12px; }
  .user-name { display: none; }
  .content { padding: 16px 14px 40px; }
  .site-footer { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .js .sidebar { transition: none; } }

/* ---- 5  Page head --------------------------------------------------------- */
/* Title row inside the page: optional sub-line on the left, actions on the right.
   (The page title itself lives in the top bar.) */
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.page-head h1, .page-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.5rem; }
.page-head .sub { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }   /* secondary first, primary last (right) */

/* ---- 6  Cards -------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 20px; }
.card-body { padding: 20px; }
.card-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; }
.card-head small { display: block; color: var(--muted); font-size: var(--text-xs); }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card .table-scroll { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.stack { background: #1e2024; color: #ddd; padding: 12px; overflow: auto; font-size: .8rem; border-radius: var(--radius); }

/* ---- 7  Work queue (dashboards) -------------------------------------------------- */
/* One row per list: icon, what it is, how many, and an arrow. A row with something waiting turns red. */
.queue { list-style: none; margin: 0; padding: 0; }
.queue li + li { border-top: 1px solid var(--border-soft); }
.queue-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; min-height: 52px; color: var(--heading); text-decoration: none; transition: background-color .15s; }
.queue-row:hover { background: var(--hover-row); color: var(--heading); }
.queue-row:active { background: rgba(14, 115, 132, .1); }
.queue-row > .i:first-child { color: var(--navy-light); }
.queue-row > .i:last-child { color: var(--muted); transition: transform .15s; }
.queue-row:hover > .i:last-child { transform: translateX(2px); color: var(--primary-dark); }
.queue-label { flex: 1; font-weight: 500; }
.queue-count { min-width: 2.25rem; text-align: center; padding: 3px 10px; border-radius: 999px; background: #eef0f2; color: var(--heading); font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.queue-row.is-alert > .i:first-child { color: var(--danger); }
.queue-row.is-alert .queue-count { background: var(--danger); color: #fff; }

/* ---- 8  Tables ---------------------------------------------------------------- */
/* One card per table; the card is the frame, so the table itself has no outer border. */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; white-space: nowrap; }
thead th { font-size: var(--text-xs); font-weight: 600; color: #3e4853; text-transform: uppercase; letter-spacing: .03em; background: #f8f9fa; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--hover-row); }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
table { font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; min-width: 220px; }
td .sub { display: block; font-size: var(--text-xs); color: var(--muted); }
td.row-actions { text-align: right; white-space: nowrap; }
td.row-actions > * + * { margin-left: 6px; }
tr.inactive td { color: var(--muted); }
tr.is-cancelled td:first-child a { color: var(--muted); text-decoration: line-through; }
tfoot td { font-weight: 500; background: #f8f9fa; border-bottom: 0; }
tfoot tr:first-child td { border-top: 1px solid var(--border); }
tfoot tr:hover { background: none; }
tr.total-row td { font-size: 1.05rem; font-weight: 700; background: var(--primary-soft); color: var(--heading); }
.empty-row td { text-align: center; color: var(--muted); padding: 32px 14px; white-space: normal; }
.empty-row:hover { background: none; }
.tag { background: #eef0f2; color: #33383e; border-radius: 6px; font-size: var(--text-xxs); padding: 2px 7px; margin-left: 4px; }
.tag-warn { background: #ffeccc; color: #8a5300; }
.tag.access-open { background: var(--ok-bg); color: var(--ok); margin-left: 0; }
.tag.access-closed { background: var(--danger-bg); color: var(--danger); margin-left: 0; }

/* ---- 9  Status badges ----------------------------------------------------------- */
/* Soft pairs (pale background, dark text) from CPS; solid only for the loudest state. */
.badge, .status { display: inline-block; border-radius: 6px; padding: 5px 9px; font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; background: #eef0f2; color: #33383e; }
.status-draft         { background: #eef0f2; color: #33383e; }
.status-quoted        { background: #ffeccc; color: #8a5300; }
.status-confirmed     { background: #d9f2f8; color: #11616f; }
.status-in_production { background: #e0ecff; color: #1b4fa0; }
.status-ready         { background: #eef5dc; color: #3f6212; }
.status-despatched    { background: #2f6b3a; color: #fff; }
.status-invoiced      { background: #e4e3ee; color: #302f4a; }
.status-cancelled     { background: #fde2e4; color: #a52834; }
.status-lg { font-size: var(--text-sm); padding: 7px 12px; }

/* ---- 10  Filter bar, search, chips ------------------------------------------------- */
/* Lives in a .card-head: small controls on the right. */
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.filter input, .filter select { margin: 0; padding: 6px 10px; font-size: var(--text-sm); width: auto; min-width: 150px; }
.filter input[type=search] { width: 240px; max-width: 100%; }
.filter label { margin: 0; }
.filter .btn { padding: 6px 12px; font-size: var(--text-sm); }
.head-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chips { display: inline-flex; flex-wrap: wrap; }
.chip { padding: 5px 12px; font-size: var(--text-sm); border: 1px solid var(--border); background: #fff; color: #3e4853; text-decoration: none; margin-left: -1px; }
.chip:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.chip:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.chip:hover { background: var(--primary-soft); }
.chip:focus-visible { position: relative; z-index: 1; border-radius: var(--radius); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- 11  Forms ------------------------------------------------------------------------ */
label { display: block; font-weight: 500; font-size: var(--text-xs); color: var(--heading); margin-bottom: 14px; }
label.inline { font-size: 14px; font-weight: 400; display: flex; align-items: center; gap: 8px; }
input, select, textarea { display: block; width: 100%; font: inherit; font-size: 14px; font-weight: 400; color: var(--text); padding: 8px 10px; margin-top: 4px; border: 1px solid #ced4da; border-radius: var(--radius); background: #fff; }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--primary); }
input[type=number], input.qty { font-variant-numeric: tabular-nums; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #9aa3ad; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(14, 115, 132, .16); }
::placeholder { color: #6b7078; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: #f3f4f5; color: var(--muted); cursor: not-allowed; }
textarea { resize: vertical; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.form-card { max-width: 760px; }
.form-card .card-body > label:last-child { margin-bottom: 0; }
.form-section { margin: 0 0 18px; }
.form-section > h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: #3e4853; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; margin: 4px 0 14px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; align-items: start; }
.field-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hint { font-size: var(--text-xs); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
input.qty { width: 5em; margin: 0; padding: 4px 8px; }

/* ---- 12  Buttons ------------------------------------------------------------------------ */
/* .btn = primary (dark teal). Variants: .btn-secondary (outline), .btn-danger, .btn-soft, .btn-link */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font: 500 14px/1.4 var(--font); border-radius: var(--radius); border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled, .btn.is-busy { opacity: .6; cursor: not-allowed; transform: none; }
.btn.is-busy { cursor: progress; }
.btn-secondary:active { background: #e6e8eb; }
.btn-small { padding: 4px 10px; font-size: var(--text-sm); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--border); }
.btn-secondary:hover { background: #f1f2f4; border-color: #bdbdbd; color: var(--navy); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #7e2018; border-color: #7e2018; }
.btn-soft { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-dark); }
.btn-soft:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-link, .link-button { background: none; border: 0; padding: 4px 6px; font: inherit; color: var(--primary-dark); cursor: pointer; text-decoration: none; border-radius: 6px; }
.btn-link:hover, .link-button:hover { background: var(--primary-soft); color: var(--primary-dark); text-decoration: underline; }
.link-button.danger { color: var(--danger); }
.link-button.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---- 13  Tabs ----------------------------------------------------------------------------- */
/* Server-side links (the active one comes from the URL), so they survive a refresh. */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; padding: 0; list-style: none; }
.tabs a { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px; color: var(--muted); text-decoration: none; font-size: 14px; }
.tabs a:hover { color: var(--text); border-color: var(--border-soft); }
.tabs a.active { background: var(--bg); color: var(--text); border-color: var(--border); border-bottom-color: var(--bg); font-weight: 500; box-shadow: inset 0 3px 0 var(--primary); }
/* Count pill on each status tab; an empty status is greyed so the busy ones stand out. */
.tab-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; line-height: 18px; }
.tab-count.is-zero { background: var(--border-soft); color: var(--muted); font-weight: 500; }
.tabs a.active .tab-count { background: var(--primary); color: #fff; }
@media (max-width: 700px) { .tabs { flex-wrap: nowrap; overflow-x: auto; } .tabs a { white-space: nowrap; } }

/* ---- 14  Flash, alerts, empty states ----------------------------------------------------- */
.notice, .alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); margin: 0 0 16px; border: 1px solid transparent; font-size: 14px; }
.notice { background: var(--ok-bg); color: var(--ok); border-color: #d6e6b0; transition: opacity .4s; }
.notice.fade { opacity: 0; }
.alert { background: var(--danger-bg); color: var(--danger); border-color: #f3c3be; }
.alert > div { flex: 1; }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: #f2d9a8; }
.alert.info { background: var(--primary-soft); color: var(--primary-dark); border-color: #bfe0e7; }
.alert div + div { margin-top: 4px; }
.alert .i, .notice .i { margin-top: 2px; }
.alert-action { margin: -2px 0; }
.form-note { margin: 14px 0 0; font-size: 13px; }
.empty { text-align: center; color: var(--muted); padding: 32px 16px; }
.empty .btn { margin-top: 12px; }
.filter-empty { text-align: center; color: var(--muted); padding: 24px 14px; margin: 0; }

/* ---- 15  Login / bare pages --------------------------------------------------------------- */
.bare-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(180deg, #ecedf2 0, var(--bg) 60%); }
.bare-main > .notice { width: 100%; max-width: 420px; }
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-card .card-body { padding: 28px; }
.auth-logo { display: block; width: 190px; height: auto; margin: 0 auto 20px; }
.auth-card h1 { text-align: center; font-size: 1.25rem; margin-bottom: 18px; }
.auth-card .btn { width: 100%; padding: 10px 16px; }
.auth-foot { margin-top: 16px; text-align: center; font-size: var(--text-xs); color: var(--muted); }

/* ---- 16  Price a door ----------------------------------------------------------------------- */
/* Two columns on desktop: configure on the left, drawing + price on the right (sticky).
   One column on phones, with a fixed price bar at the bottom. */
.price-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 20px; align-items: start; }
.price-side { position: sticky; top: calc(var(--topbar-h) + 16px); }
.price-side .card:last-child { margin-bottom: 0; }
.price-config .card-head .head-tools { gap: 12px; }
.price-config .card-head select { margin: 0; width: auto; font-size: var(--text-sm); padding: 5px 8px; }
.unit-tag { font-size: var(--text-xs); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1rem; }
.price-config .card-body + .card-body { border-top: 1px solid var(--border-soft); }

/* Door type: big radio tiles (the radio is visually hidden but still keyboard-focusable) */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 4px; }
.type-grid label { margin: 0; }
.type-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-grid span { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 86px; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-size: var(--text-xs); font-weight: 400; color: var(--muted); cursor: pointer; transition: border-color .15s, background-color .15s; }
.type-grid b { font-size: 1.5rem; line-height: 1.1; color: var(--heading); }
.type-grid b small { font-size: .75rem; font-weight: 400; margin-left: 2px; }
.type-grid span:hover { border-color: var(--primary); }
.type-grid input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-dark); }
.type-grid input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Size inputs: big number with "mm" inside the box */
.dim-field { position: relative; display: block; }
.dim-field input { padding-right: 44px; font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.dim-field span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin-top: 2px; font-size: .8125rem; font-weight: 400; color: var(--muted); pointer-events: none; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; margin-top: 4px; }
.check-grid label { margin-bottom: 10px; }

/* Right-hand column */
.drawing-card .card-body { padding: 8px 12px 14px; }
.door-svg { display: block; width: 100%; height: auto; }
@media (min-width: 1400px) {
  .price-layout { grid-template-columns: minmax(0, 1fr) clamp(480px, 34vw, 540px); }
}
.dim-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.dim-tiles div { background: #f8f9fa; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 6px 8px; }
.dim-tiles span { display: block; font-size: var(--text-xxs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 520px) {
  .dim-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dim-tiles strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dim-tiles em { font-style: normal; font-size: var(--text-xxs); color: var(--muted); margin-left: 2px; }
.price-card { border-top: 4px solid var(--primary); }
.price-total { font-size: 2.4rem; line-height: 1.1; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 4px 0 2px; }
.price-total.is-quote { font-size: 1.4rem; color: var(--warn); }
.price-caption { color: var(--muted); font-size: var(--text-sm); }
.price-lines { margin: 16px 0 0; border-top: 1px solid var(--border-soft); padding-top: 4px; }
.price-lines-label { font-size: var(--text-xxs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 2px; }
.price-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: var(--text-sm); border-bottom: 1px dashed var(--border-soft); }
.price-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-line.is-included span:last-child { color: var(--muted); }
.price-line.sum { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; font-size: .9375rem; }
.issues { margin-top: 14px; }
.issues .alert { margin-bottom: 10px; font-size: var(--text-sm); }
.review-notes { display: block; }
.review-notes summary { cursor: pointer; font-weight: 500; }
.review-notes div { margin-top: 4px; }
.sizes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 0; }
.sizes div { background: #f8f9fa; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 7px 10px; }
.sizes dt { color: var(--muted); font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: .04em; }
.sizes dd { margin: 0; font-weight: 500; font-size: var(--text-sm); }
.sizes-title { margin: 18px 0 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
#price-live { transition: opacity .15s; }
#price-live.is-busy { opacity: .55; }
#price-live.is-error { opacity: 1; }
.live-error { margin-bottom: 12px; }
.mobile-price { display: none; }

@media (max-width: 1100px) {
  .price-layout { grid-template-columns: minmax(0, 1fr) 390px; }
}
@media (max-width: 900px) {
  .price-layout { grid-template-columns: minmax(0, 1fr); }
  .price-side { position: static; }
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .js .mobile-price { display: flex; position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 3px solid var(--brand-green); box-shadow: 0 -4px 20px rgba(48, 47, 74, .12); }
  .mobile-price strong { display: block; font-size: 1.3rem; line-height: 1.2; }
  .mobile-price small { color: var(--muted); font-size: var(--text-xxs); }
  .js .price-page .content { padding-bottom: 96px; }
  .dim-field input { font-size: 1.5rem; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }   /* stops iOS zooming on focus */
}

/* ---- 17  Order page ------------------------------------------------------------------------------ */
.order-head .card-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; align-items: flex-start; }
.order-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-id h2 { font-size: 1.5rem; margin: 0; }
.order-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 8px 0 0; color: var(--muted); font-size: var(--text-sm); }
.order-meta strong { color: var(--text); font-weight: 500; }
.status-form { padding: 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.status-actions label { margin: 0; flex: 1 1 220px; max-width: 320px; }
.status-bar { border-top: 1px solid var(--border-soft); padding: 14px 20px; }
.totals { display: flex; justify-content: flex-end; padding: 0 20px 20px; }
.totals dl { width: 320px; max-width: 100%; margin: 0; font-size: 14px; }
.totals dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .gross { border-bottom: 0; border-top: 2px solid var(--heading); margin-top: 4px; padding-top: 10px; font-size: 1.15rem; font-weight: 700; }
.totals .gross dt { color: var(--heading); }
.card-note { padding: 0 20px 16px; margin: 0; color: var(--muted); font-size: var(--text-xs); }
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.details-grid .full { grid-column: 1 / -1; }

/* ---- 18  Utilities ------------------------------------------------------------------------------- */
.muted { color: var(--muted); }
.num { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.js .no-js-only { display: none !important; }

/* Touch: bigger hit areas for phones (trade customers work from their phone on site). */
@media (max-width: 900px), (pointer: coarse) {
  .btn-small, .link-button, .btn-link { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .btn-small { padding-left: 14px; padding-right: 14px; }
  .filter input, .filter select, .filter .btn { padding-top: 10px; padding-bottom: 10px; }
  .chip { padding: 10px 14px; }
  td > a { display: inline-block; padding: 8px 0; }
  .dev-credit { display: inline-block; padding: 8px 0; }
  .queue-row { padding-top: 16px; padding-bottom: 16px; }
  input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; }
}

/* ---- 19  Print ----------------------------------------------------------------------------------- */
@media print {
  .sidebar, .nav-backdrop, .topbar, .site-footer, .mobile-price, .tabs, .filter, .no-print, .row-actions, .card-foot .btn, .page-head .actions { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .shell, .shell-main { display: block; }
  .content { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .card-head { border-bottom-color: #999; }
  th, .status, tr.total-row td, .queue-count { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  thead th { background: #eee !important; }
  a { color: inherit; text-decoration: none; }
  td.wrap { min-width: 0; }
  .table-scroll { overflow: visible; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ---- 17  Price a door: modes, window rows, other extras, price adjustment ------------------- */
/* The mode picker reuses the big radio tiles, but there are seven of them with a short hint each. */
/* Seven compact tiles, icon on the left and a two-line label, so they read as a list of choices rather
   than seven billboards. Four across on a desktop card, two on a phone; every tile in a row is the same height. */
.mode-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mode-grid span {
  display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto 1fr; column-gap: 10px; align-items: start;
  justify-content: stretch; text-align: left; height: 100%; min-height: 0; padding: 10px 12px; color: var(--heading);
}
.mode-grid .i {
  grid-row: 1 / 3; width: 36px; height: 36px; padding: 7px; border-radius: 8px;
  background: var(--bg); color: var(--navy); stroke-width: 1.6;
}
.mode-grid b { font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--heading); align-self: end; }
.mode-hint { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: var(--text-xxs); line-height: 1.35; }
.mode-grid label { display: block; height: 100%; }
.mode-grid span:hover .i { background: var(--primary-soft); color: var(--primary-dark); }
.mode-grid input:checked + span .i { background: var(--primary); color: #fff; }
.mode-grid input:checked + span b { color: var(--primary-dark); }
.mode-grid input:checked + span .mode-hint { color: var(--primary-dark); }
@media (max-width: 560px) {
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-grid span { grid-template-columns: 28px 1fr; column-gap: 8px; padding: 9px 10px; }
  .mode-grid .i { width: 28px; height: 28px; padding: 5px; }
}
#f-bought-type span { font-weight: 600; color: var(--heading); font-size: .875rem; }
/* A price in the box with the currency symbol on the left (the adjust-the-price field). */
.dim-field .pre { right: auto; left: 12px; }
.dim-field .pre + input { padding-left: 28px; padding-right: 12px; }
/* Rows of curtain windows */
.window-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 12px; align-items: end; }
@media (max-width: 560px) { .window-row { grid-template-columns: 1fr 1fr; } }
/* Other extras: tick the extra and its quantity / detail boxes open up (works without JavaScript). */
.extras { display: block; }
.extra-row { border-bottom: 1px solid var(--border-soft); padding: 8px 0 2px; }
.extra-row:last-child { border-bottom: 0; }
.extra-row > label { margin-bottom: 6px; }
.extra-row .extra-fields { display: none; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; padding: 4px 0 6px 26px; }
.extra-row:has(input[name="extra"]:checked) .extra-fields { display: grid; }
.extra-row .extra-fields .full { grid-column: 1 / -1; }
/* The office price adjustment */
.override-box { background: #fffaf0; }
.override-box .step small { font-weight: 400; color: var(--muted); }
.adjust-line { color: var(--warn); }
.adjust-line small { display: block; color: var(--muted); font-size: var(--text-xxs); }
.spec-list { grid-template-columns: 1fr; margin-top: 0; }
/* On the order page: a line whose price was changed by hand */
.price-adjusted { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--warn); }
.no-sheet { font-size: var(--text-xs); color: var(--muted); }

/* ---- Trade portal and currency settings ---- */
.status-submitted     { background: #fff3bf; color: #7a5a00; }
.tag-new              { background: var(--brand-green); color: var(--navy); font-weight: 600; }
tr.is-new-trade td    { background: #f6fbe8; }
.change-log .before-after { color: var(--muted); font-size: var(--text-xxs); }
.rate-box { max-width: 14rem; }
.mode-choices { display: grid; gap: 10px; }
.mode-choices label { display: flex; gap: 10px; align-items: flex-start; }
.mode-choices small { display: block; color: var(--muted); }
.pending-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pending-form input[name="unit_price"] { width: 8rem; }

/* ---- 20  Door form pickers: swatches, cards, icon tiles, segmented control, stepper ------------------ */
/* Every picker is a plain radio or checkbox (same name and value as the dropdown it replaced), hidden
   visually but still focusable, followed by a .pick-face that draws the tile. The checked and focus states
   come from the input, so it all works with no JavaScript and from the keyboard.
   The colour chips take their colour from /css/swatches.css (generated from lib/colour-swatches.js). */
.pick-set { margin: 0 0 18px; }
.pick-legend { display: block; margin: 0 0 6px; padding: 0; font-size: var(--text-xs); font-weight: 500; color: var(--heading); }
.pick-legend small { margin-left: 6px; font-weight: 400; color: var(--muted); }
.pick-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; }
.pick-group { margin: 14px 0 6px; font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pick-group:first-child { margin-top: 0; }
.pick-groups .pick-grid + .pick-group { margin-top: 14px; }

.pick-grid { display: grid; gap: 8px; }
.pick-swatches { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pick-cards { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.pick-sides { grid-template-columns: repeat(2, 1fr); }
.pick-canopies { grid-template-columns: repeat(3, 1fr); }
.pick-controls { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pick-extras { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pick-grid:has(.pick-big:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } /* a two-choice row (Wired / Wireless) */

.pick { position: relative; display: block; margin: 0; font-size: var(--text-sm); font-weight: 400; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick-face {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-content: center; align-items: center;
  min-height: 44px; height: 100%; padding: 8px 28px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--heading); line-height: 1.3; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.pick-face b { grid-column: 2; font-weight: 500; font-size: var(--text-sm); }
.pick-face small { grid-column: 2; margin-top: 1px; font-size: var(--text-xxs); color: var(--muted); }
.pick-face .i, .pick-face .sw { grid-row: 1 / span 2; grid-column: 1; }
.pick-face .i { width: 24px; height: 24px; color: var(--navy); stroke-width: 1.6; }
.pick-face:hover { border-color: var(--primary); }
.pick input:checked + .pick-face { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-dark); }
.pick input:checked + .pick-face .i, .pick input:checked + .pick-face small { color: var(--primary-dark); }
.pick input:focus-visible + .pick-face { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The tick on a chosen tile: drawn with borders, so no glyph or extra markup. */
.pick input:checked + .pick-face::after { content: ""; position: absolute; top: 50%; right: 11px; width: 5px; height: 10px; margin-top: -7px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Colour chip */
.sw { display: block; width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
/* Drive and motor cards: text only, name over spec */
.pick-card .pick-face { grid-template-columns: 1fr; }
.pick-card .pick-face b, .pick-card .pick-face small { grid-column: 1; }
/* Big tiles (side, canopy, safety edge): sketch on top, label under */
.pick-big .pick-face { grid-template-columns: 1fr; justify-items: center; row-gap: 2px; padding: 10px 6px 8px; text-align: center; }
.pick-big .pick-face .i { grid-row: auto; grid-column: 1; width: 40px; height: 40px; stroke-width: 1.4; }
.pick-big .pick-face b, .pick-big .pick-face small { grid-column: 1; }
.pick-big input:checked + .pick-face::after { top: 8px; right: 8px; margin-top: 0; }

/* Three-way segmented control */
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.seg-opt { position: relative; display: block; margin: 0; font-size: var(--text-sm); font-weight: 400; }
.seg-opt + .seg-opt { border-left: 1px solid var(--border); }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 44px; padding: 0 16px; color: var(--heading); cursor: pointer; transition: background-color .15s, color .15s; }
.seg-opt span:hover { background: var(--primary-soft); }
.seg-opt input:checked + span { background: var(--primary); color: #fff; font-weight: 500; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -4px; }
.seg-opt input:checked:focus-visible + span { outline-color: #fff; }

/* Number stepper: the - and + buttons exist only when JavaScript runs, so without it this is a plain number box */
.field { margin-bottom: 14px; }
.field > label { margin-bottom: 4px; }
.stepper { display: inline-flex; align-items: stretch; max-width: 100%; }
.stepper input { width: 5rem; height: 44px; margin: 0; text-align: center; font-size: 1.125rem; font-weight: 500; border-radius: 0; }
.stepper input:focus-visible { position: relative; z-index: 1; }
.js .stepper input { appearance: textfield; -moz-appearance: textfield; }
.js .stepper input::-webkit-inner-spin-button, .js .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ced4da; background: #fff; color: var(--navy); cursor: pointer; transition: background-color .15s, border-color .15s; }
.stepper-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-right: -1px; }
.stepper-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.stepper-btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); position: relative; z-index: 1; }
.stepper-btn:active { background: #d4e9ee; }
.stepper-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; z-index: 2; }
.stepper-btn .i { width: 18px; height: 18px; }
.extra-fields .field { margin-bottom: 8px; }

/* Drawing card: Enlarge button and the big view. The button needs JavaScript, so it is hidden without it. */
.drawing-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.enlarge { display: none; }
.js .enlarge { display: inline-flex; }
.drawing-dialog { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(27, 26, 46, .35); color: var(--text); }
.drawing-dialog::backdrop { background: rgba(26, 25, 29, .55); }
.drawing-dialog .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.drawing-dialog h2 { margin: 0; font-size: 1rem; }
#drawing-dialog-body { padding: 12px 16px 16px; }
#drawing-dialog-body .door-svg { max-height: calc(94vh - 90px); }

/* ---- Sidebar section heading (the Stock section, store and admin only) ---- */
.side-heading { margin: 14px 12px 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--text-xxs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9bb3; }

/* ==== Price page parity with Caleb's screen (PRICE-PAGE-PARITY.md): price card extras, workshop and supplier cards, dialogs ==== */
.price-total-btn { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 2.4rem; font-weight: 700; line-height: 1.1; color: var(--heading); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 4px 0 2px; border-radius: 4px; }
.price-total-btn:hover { text-decoration: underline dotted; text-underline-offset: 6px; }
.price-total-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.edit-price-link { display: inline-block; margin: 0 0 4px -6px; font-size: var(--text-sm); }
.price-availability { margin: 10px 0 4px; padding: 8px 12px; background: var(--warn-bg); color: var(--warn); border: 1px solid #f2d9a8; border-radius: var(--radius); font-size: var(--text-sm); }
.price-line.is-missing span:last-child { color: var(--warn); font-weight: 500; }
.price-adjustment { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; background: var(--primary-soft); border-radius: var(--radius); font-size: var(--text-sm); color: var(--primary-dark); }
.source-note { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--border-soft); font-size: var(--text-xs); color: var(--muted); }
.conversion { margin: 10px 0 0; padding: 8px 12px; background: #f6f7f9; border-radius: var(--radius); font-size: var(--text-sm); color: var(--text); }
.stock-summary { display: grid; gap: 2px; margin: 10px 0 0; padding: 8px 12px; background: #f6f7f9; border-radius: var(--radius); font-size: var(--text-sm); }
.motor-card { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.motor-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.motor-card .eyebrow { display: block; font-size: var(--text-xxs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.motor-card strong { font-size: 1.05rem; color: var(--heading); }
.motor-card.is-advisory strong { color: var(--muted); }
.motor-plate { font-size: var(--text-sm); color: var(--muted); }
.motor-assembly { margin-top: 8px; font-size: var(--text-sm); }
.motor-assembly summary { cursor: pointer; color: var(--primary-dark); }
.card-title-sm { margin: 0 0 4px; font-size: 1.05rem; }
.doc-buttons { display: grid; gap: 8px; margin: 8px 0; }
.doc-buttons .btn { width: 100%; justify-content: center; }
.doc-buttons-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.doc-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: var(--text-sm); }
.workshop-actions { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.workshop-actions summary { cursor: pointer; font-weight: 500; color: var(--heading); }
.workshop-actions-list { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.is-disabled { opacity: .5; pointer-events: none; }
.extra-rate { display: block; margin: 0 0 4px 26px; color: var(--muted); font-size: var(--text-xs); }
.error-text { color: var(--danger); font-size: var(--text-sm); min-height: 1.2em; margin: 6px 0; }
.price-dialog { width: min(94vw, 520px); padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(27, 26, 46, .35); color: var(--text); }
.price-dialog::backdrop { background: rgba(26, 25, 29, .55); }
.price-dialog .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.price-dialog h2 { margin: 0; font-size: 1.05rem; }
.price-dialog .dialog-body { display: grid; gap: 10px; padding: 14px 16px 18px; }
.price-dialog .dialog-body p { margin: 0; }
.price-dialog label { display: grid; gap: 4px; }
.mobile-price-actions { display: flex; gap: 8px; align-items: center; }
.narrow { max-width: 640px; }
.supplier-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .supplier-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.email-text { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
@media (max-width: 900px) {
  .js .mobile-price { transition: transform .2s ease; }
  .js .mobile-price.price-in-view { transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce) { .js .mobile-price { transition: none; } }
.price-card .price-total-btn[disabled] { cursor: default; }
/* The results column is now taller than a short screen: let it scroll by itself while it sticks, so the price is always reachable. */
@media (min-width: 901px) {
  .price-side { max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; padding: 2px 6px 2px 2px; margin: -2px -6px -2px -2px; overscroll-behavior: contain; }
}
/* ==== end of price page parity section ==== */

/* ---- Monday.com history (Office > History) ---- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.history-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; margin: 0; }
.history-fields > div { padding: 8px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.history-fields dt { color: var(--muted); font-size: var(--text-xs); }
.history-fields dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.field-text { white-space: pre-wrap; }
.comment { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.comment:last-child { border-bottom: 0; }
.comment > header { font-size: var(--text-sm); }
.comment-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }   /* keeps the comment's own line breaks */
.comment-reply { margin: 8px 0 0 24px; padding: 8px 0 8px 14px; border-bottom: 0; border-left: 1px solid var(--border); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0; }
.file-grid a { display: block; border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.file-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.file-list { margin: 6px 0; padding-left: 18px; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.doc-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); min-width: 0; }
.doc-list a { display: flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.doc-list small { padding-left: 26px; }
.file-pending { margin: 4px 0; }

/* ---- Jotform history photos ---- */
.photo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: var(--text-xs); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.photo-badge:hover { background: #cfe7ec; text-decoration: none; }
.photo-badge .i { width: 16px; height: 16px; }
.filter .check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); white-space: nowrap; }
.filter .check-inline input { min-width: 0; width: auto; }
.photos-card { scroll-margin-top: 16px; }
.photos-card h2 { display: flex; align-items: center; gap: 8px; }
.photos-card .card-body > * + * { margin-top: 16px; }
.file-grid-big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.file-grid-big figure { margin: 0; border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.file-grid-big figure a { border: 0; border-radius: 0; }
.file-grid-big img { aspect-ratio: 4 / 3; }
.file-grid-big figcaption { padding: 6px 10px; font-size: var(--text-xs); color: var(--muted, #5b6470); overflow-wrap: anywhere; }

/* ---- Price page: collapsible sections ---- */
/* Each part of the price form is a native <details class="fold"> (views/partials/door-form.ejs). The header is the
   <summary>: the section name, a one-line "what is chosen in here" (written by public/js/price.js, shown only while the
   section is closed) and a chevron. Closing a section only hides it; its boxes still post. */
.fold > .fold-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 2px 30px 2px 0; position: relative; cursor: pointer; list-style: none; min-height: 32px; border-radius: 6px; }
.fold > .fold-head::-webkit-details-marker { display: none; }
.fold > .fold-head::marker { content: ""; }
.fold > .fold-head::after { content: ""; position: absolute; right: 2px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background-color: var(--muted, #5b6470);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.fold[open] > .fold-head::after { transform: rotate(180deg); }
.fold > .fold-head:hover .step { color: var(--primary-dark, inherit); }
.fold > .fold-head:focus-visible { outline: 2px solid var(--focus, #2563eb); outline-offset: 3px; }
.fold > .fold-head .step { margin: 0; flex: 0 0 auto; }
.fold > .fold-head .fold-sum { flex: 1 1 14rem; min-width: 0; font-size: var(--text-sm, .875rem); color: var(--muted, #5b6470); overflow-wrap: anywhere; }
.fold > .fold-head .fold-sum:empty,
.fold[open] > .fold-head .fold-sum { display: none; }
.fold > .fold-body { padding-top: 14px; }
.fold + .fold { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, #e5e7eb); }
/* A section that is just a closed header does not need the full card padding. */
.price-config .card-body:has(> .fold:not([open])) { padding-top: 12px; padding-bottom: 12px; }
.price-config .card-body:has(> .fold:not([open])) .fold + .fold { margin-top: 10px; padding-top: 10px; }
@media (max-width: 560px) {
  .fold > .fold-head { padding-right: 26px; }
  .fold > .fold-head .fold-sum { flex-basis: 100%; }
}

/* ---- Search box for long dropdowns (public/js/site.js section 9) ---- */
.search-select { position: relative; }
.search-select input { width: 100%; }
.search-select-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.search-select-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: var(--text-sm); }
.search-select-list li.active, .search-select-list li:hover { background: var(--primary-soft); color: var(--primary-dark); }
.search-select-list li.empty { color: var(--muted); cursor: default; background: none; }

/* ---- Customers list: search and filters ---- */
.customer-filters { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.customer-search { display: flex; align-items: center; gap: 8px; position: relative; }
.customer-search > .i { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.customer-search input[type=search] { flex: 1; margin: 0; padding-left: 38px; min-width: 0; }
.customer-filters select.is-set { border-color: var(--primary); background-color: var(--primary-soft); color: var(--primary-dark); }
.customer-filters .sort-by { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--text-sm); color: var(--muted); }
.card-head-slim { border-bottom: 0; padding-bottom: 4px; }
@media (max-width: 700px) { .customer-filters .sort-by { margin-left: 0; } }

/* ---- Dashboard charts ---- */
/* Server-drawn SVG: no inline styles or scripts, so everything here is class-based. Colours: teal = Jotform history, navy = new system. */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 8px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 14px 18px; color: var(--heading); text-decoration: none; display: block; }
.kpi-link:hover { background: var(--hover-row); color: var(--heading); }
.kpi-label { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
.kpi-label::before { content: ""; display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--brand-green); margin-bottom: 8px; }
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: var(--text-xs); color: var(--muted); }
.kpi-up { color: var(--ok); }
.kpi-down { color: var(--warn); }
.kpi-source { margin: 0 0 20px; font-size: var(--text-xs); color: var(--muted); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.chart-grid .chart-wide { grid-column: 1 / -1; }
.chart-card .card-body { padding: 16px 20px 18px; }
.chart-card .card-head h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--brand-green); margin-right: 8px; vertical-align: middle; }
.chart-card .empty { margin: 0; color: var(--muted); }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--text-xs); color: var(--text); }
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-history, .seg-history { background: var(--brand-teal); fill: var(--brand-teal); }
.swatch-live, .seg-live { background: var(--navy); fill: var(--navy); }

.chart { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.chart .grid { stroke: var(--border-soft); stroke-width: 1; }
.chart .baseline { stroke: var(--border); stroke-width: 1; }
.chart .axis-text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .peak-text { fill: var(--heading); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .nodata { stroke: var(--border); stroke-width: 2; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; }
.chart .col:hover .hit { fill: var(--hover-row); }
.chart .col:hover .seg { opacity: .85; }

.hbar-list { list-style: none; margin: 0; padding: 0; }
.hbar-row + .hbar-row { margin-top: 12px; }
.hbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; font-size: var(--text-sm); }
.hbar-label { color: var(--heading); font-weight: 500; overflow-wrap: anywhere; }
a.hbar-label { color: var(--primary-dark); }
.hbar-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar-val small { color: var(--muted); font-size: var(--text-xs); }
.hbar { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.hbar-track { fill: #eef0f2; }
.hbar-fill { fill: var(--primary); }
.is-other .hbar-fill { fill: #7b8794; }
.is-other .hbar-label { color: var(--muted); font-weight: 400; }

/* Ring chart (door mix). Slice colours in order; Other is always grey. */
.donut-wrap { display: flex; align-items: center; gap: 20px; }
.donut { flex: 0 0 168px; width: 168px; height: 168px; }
.donut path { stroke: var(--card); stroke-width: 1.5; }
.donut path:hover { opacity: .85; }
.donut-total { fill: var(--heading); font-size: 20px; font-weight: 700; font-family: var(--font); }
.donut-unit { fill: var(--muted); font-size: 9px; font-family: var(--font); }
.donut-key { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; font-size: var(--text-sm); }
.donut-key li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.donut-key li + li { border-top: 1px solid var(--border-soft); }
.donut-label { flex: 1; color: var(--heading); overflow-wrap: anywhere; }
.pie-0 { fill: var(--primary); background: var(--primary); }
.pie-1 { fill: var(--navy); background: var(--navy); }
.pie-2 { fill: var(--brand-green); background: var(--brand-green); }
.pie-3 { fill: #6fb7c4; background: #6fb7c4; }
.pie-4 { fill: #8a89a8; background: #8a89a8; }
.pie-5 { fill: #d39b2a; background: #d39b2a; }
.pie-other { fill: #b4bac2; background: #b4bac2; }
@media (max-width: 420px) { .donut-wrap { flex-direction: column; align-items: stretch; } .donut { align-self: center; } }

.chart-table { margin-top: 12px; font-size: var(--text-sm); }
.chart-table summary { cursor: pointer; color: var(--primary-dark); padding: 4px 0; }
.chart-table table { margin-top: 8px; }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .kpi { padding: 12px 14px; }
  .kpi-value { font-size: 1.625rem; }
  .chart-card .card-body { padding: 14px; }
}
@media print { .chart-table summary { display: none; } }

/* ---- Login security ---- */
/* Sign-in, code, forgot / reset pages, the password boxes with a Show button, and the My account security tables. */
.auth-lead { margin: 0 0 16px; color: var(--muted); font-size: var(--text-sm); }
.auth-links { margin: 16px 0 0; text-align: center; font-size: var(--text-sm); }
.auth-card .alert { font-size: var(--text-sm); }
.auth-card .btn + .auth-links, .auth-card form + .auth-links { margin-top: 18px; }
.auth-card label.remember { margin: 4px 0 18px; }
.auth-card p > a.btn { width: 100%; text-align: center; }
.auth-split { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }
.auth-split .btn-link { font-size: var(--text-sm); min-height: 40px; }
.btn-link:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; background: none; }
.code-input { font-size: 1.75rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; padding: 10px; margin-bottom: 16px; }

/* Password box + Show button. The button only appears when JavaScript is running (the .js class comes from js-flag.js). */
.pw-field { margin-bottom: 14px; }
.pw-field > label { margin-bottom: 0; }
.pw-wrap { display: flex; align-items: stretch; margin-top: 4px; }
.pw-wrap input { margin-top: 0; min-width: 0; }
.js .pw-wrap input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.pw-toggle { display: none; flex: none; min-width: 64px; padding: 0 12px; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--primary-dark); background: #fff; border: 1px solid #ced4da; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; }
.js .pw-toggle { display: block; }
.pw-toggle:hover { background: var(--primary-soft); }
.pw-toggle:focus-visible { position: relative; z-index: 1; }
.pw-caps { margin: 6px 0 0; font-size: var(--text-xs); font-weight: 500; color: var(--warn); }
@media (max-width: 700px) { .pw-toggle { min-height: 44px; } .code-input { font-size: 1.5rem; } }
@media (prefers-reduced-motion: no-preference) { .pw-toggle { transition: background-color .15s; } }

/* Apply for a trade account (public /register) and the office's Applications pages. */
.auth-card.auth-card-wide { max-width: 640px; }
.auth-links-quiet { margin-top: 8px; color: var(--muted); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.side-count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--brand-green); color: var(--navy); font-size: 12px; font-weight: 600; text-align: center; line-height: 18px; font-variant-numeric: tabular-nums; }
.tag.app-pending { background: var(--warn-bg); color: var(--warn); margin-left: 0; }
.tag.app-approved { background: var(--ok-bg); color: var(--ok); margin-left: 0; }
.tag.app-declined { background: var(--danger-bg); color: var(--danger); margin-left: 0; }
.app-choice { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.app-choice > legend { font-size: var(--text-xs); font-weight: 500; color: var(--heading); padding: 0 4px; }
.app-choice-pick { margin: 0 0 10px; }
.app-message { white-space: pre-wrap; margin: 0; }