/**
 * The desktop CRM's design system — the same one the phone app uses.
 *
 * Before this, four pages each carried their own <style> with their own copy of
 * the same variables: 32 distinct colours, 14 of them used on exactly one page,
 * and nine CSS variables in total. Changing the palette meant editing four
 * files and hoping. The app, meanwhile, had a real token system — so the two
 * halves of one product did not look like one product. Since 2026-09-22 both
 * carry the approval page's theme, so the shop's tools and what the customer
 * sees are one product too.
 *
 * The old variable names are kept and re-pointed. Every existing rule that says
 * var(--blue) or var(--border) keeps working and quietly adopts the app's
 * palette, which is why this is one file rather than a rewrite of four.
 */

:root {
  color-scheme: light;

  /* ── The approval page's palette, so the shop's tools and what the customer
     sees are one product. Tyler, 2026-09-22: "I would also like the app and
     web app to match the theme of our approval pages." White ground, black
     hairlines, one blue for the action, muted grey for everything secondary.
     Mirrored in apps/shop-app/src/constants/tokens.ts. ── */
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --surface-sunken: #F4F6F9;
  --border-c: #D4D5D8;
  --border-strong: #0A0A0A;

  --fg: #0A0A0A;
  --fg-secondary: #62666E;
  --fg-muted: #8A8D94;

  /* Black is the interactive colour. Gold is the accent, spent sparingly on
     money and the one thing that matters most on a screen. */
  /* Blue is the action, as it is on the approval page. Black is ink. */
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --on-primary: #FFFFFF;
  --accent: #2563EB;
  --accent-soft: #DBEAFE;
  --black: #0A0A0A;

  --good: #1F7A45;   --good-soft: #DCFCE7;
  --warn: #B45309;   --warn-soft: #FEF3E7;
  --danger: #B91C1C; --danger-soft: #FEE2E2;
  --info: #1D4ED8;   --info-soft: #DBEAFE;

  /* ── The names the four pages already use, re-pointed ──────────────────────
     Each page defined these itself, in blue. Keeping the names means every
     existing rule adopts the app's palette without being touched. */
  --bg: var(--background);
  --white: var(--surface);
  --border: var(--border-c);
  --text: var(--fg);
  --muted: var(--fg-secondary);
  --blue: var(--primary);          /* the interactive colour is black here */
  --blue-light: var(--surface-sunken);
  --green: var(--good);
  --amber: var(--warn);
  --red: var(--danger);

  /* ── Spacing, on a 4px rhythm ─────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* One radius scale. The pages had three: 10px, 12px and 16px, for the same
     white box under three different names. */
  /* The approval page is square-cornered. A little radius keeps inputs and
     chips friendly without turning the panels back into pillows. */
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────────
     Four levels, and the level says what a surface IS, not how it looks. The
     desktop had exactly one — a flat white box with a 1px border — so a job
     you must act on today and a list of last month's numbers carried the same
     weight. Same scale as the app, so both halves agree. */
  --e-flat: none;
  /* Flat, like the customer's page: a hairline says "panel", not a shadow. */
  --e-raised: none;
  --e-floating: none;
  --e-overlay: 0 12px 24px rgba(12, 10, 9, 0.18);
}

/* NO DARK MODE. Tyler looked at it and said no — the product is black ink and
   one blue on white, like the customer's page. `color-scheme: light` below is what keeps the
   browser from darkening form controls and scrollbars on a Mac that is itself
   in dark mode, which is how this arrived uninvited in the first place. */

/* ── Type ────────────────────────────────────────────────────────────────
   DM Sans for reading, Barlow Condensed in caps for headings — the approval
   page's pairing, at the app's scale. Working text is 14–16px;
   12–13px is for secondary labels; the 11px caps eyebrow is the one small
   size, used to name a thing, never to carry data. */
:root {
  --font: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Barlow Condensed', 'Arial Narrow', 'DM Sans', sans-serif;
  /* Condensed headings run bigger for the same weight on the page. */
  --t-hero: 44px; --t-title: 30px; --t-heading: 22px; --t-body: 16px; --t-small: 14px; --t-label: 11px; --t-meta: 12px;
}
html { font-size: 16px; }
body { font-family: var(--font); font-size: var(--t-body); line-height: 1.5; color: var(--fg); background: var(--background); margin: 0; -webkit-font-smoothing: antialiased; }
.t-hero { font-family: var(--font-heading); font-size: var(--t-hero); line-height: 44px; letter-spacing: .01em; font-weight: 800; text-transform: uppercase; text-wrap: balance; }
.t-title { font-size: var(--t-title); line-height: 32px; letter-spacing: -0.6px; font-weight: 700; text-wrap: balance; }
.t-heading, .section-title { font-family: var(--font-heading); font-size: var(--t-heading); line-height: 26px; letter-spacing: .02em; font-weight: 700; text-transform: uppercase; }
.t-strong { font-size: var(--t-body); font-weight: 600; }
.t-small, .small { font-size: var(--t-small); line-height: 20px; }
.t-meta { font-size: var(--t-meta); line-height: 16px; color: var(--fg-secondary); }
.label, .eyebrow { font-size: var(--t-label); line-height: 14px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 700; color: var(--fg-secondary); }
.label.is-accent { color: var(--accent); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); } .secondary { color: var(--fg-secondary); }
.good { color: var(--good); } .warn { color: var(--warn); } .danger { color: var(--danger); } .info { color: var(--info); }
a { color: inherit; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: var(--s-5); }
.nav { background: var(--black); color: #fff; border-bottom: 0; padding: 0 var(--s-5); display: flex; align-items: center; height: 56px; position: sticky; top: 0; z-index: 40; }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: var(--s-6); text-decoration: none; }
.nav-logo { width: 30px; height: 30px; border-radius: var(--r-sm); overflow: hidden; }
.nav-logo img { width: 100%; height: 100%; object-fit: cover; }
.nav-name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.nav-link { padding: 0 var(--s-4); height: 56px; display: flex; align-items: center; font-size: var(--t-small); font-weight: 600; color: #bbb; text-decoration: none; border-bottom: 2px solid transparent; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; border-bottom-color: var(--primary); }
.nav-spacer { flex: 1; }
.nav-who { font-size: var(--t-meta); color: #bbb; }
.job-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--s-4); align-items: start; margin-top: var(--s-4); }
.job-grid + .section { margin-top: var(--s-4); }
.job-main, .job-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
/* Under ~1180px the quote table starves in a shared row; one column reads better than a squeezed one. */
@media (max-width: 1179px) { .job-grid { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* ── One container, three old names ────────────────────────────────────────
   .card on the board, .panel on Finance, .section on the job page — one white
   box with a 1px border, three radii and three paddings. They are the same
   object and they read as one now. */
.card, .panel, .section { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--e-raised); }
.card.is-quiet, .panel.is-quiet, .section.is-quiet { box-shadow: var(--e-flat); }
.card.is-primary, .panel.is-primary, .section.is-primary { box-shadow: var(--e-floating); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.sunken { background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-4); }
.empty { color: var(--fg-muted); font-size: var(--t-small); padding: var(--s-4) 0; }
.empty-state { text-align: center; padding: var(--s-6) var(--s-4); color: var(--fg-secondary); }
.empty-state .t-strong { color: var(--fg); display: block; margin-bottom: var(--s-1); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 10px var(--s-4); border-radius: var(--r-md); border: 1px solid transparent; font-family: inherit; font-size: var(--t-small); font-weight: 600; line-height: 20px; cursor: pointer; white-space: nowrap; text-decoration: none; background: var(--surface); color: var(--fg); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-blue, .btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-blue:hover, .btn-accent:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-green { background: var(--good); color: #fff; border-color: var(--good); }
.btn-ghost, .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--surface-sunken); }
.btn-quiet { background: transparent; color: var(--fg-secondary); border-color: transparent; }
.btn-quiet:hover { color: var(--fg); background: var(--surface-sunken); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.btn.btn-sm, a.btn-sm { min-height: 36px; padding: 6px var(--s-3); font-size: var(--t-meta); border-radius: var(--r-sm); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; color: var(--fg-muted); }
.btn-primary.is-loading::after { color: var(--on-primary); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.small-link, .add-line { background: none; border: none; padding: 0; font-family: inherit; font-size: var(--t-meta); font-weight: 600; color: var(--accent); cursor: pointer; min-height: 0; }
.small-link:hover, .add-line:hover { text-decoration: underline; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
label { display: block; font-size: var(--t-meta); font-weight: 600; color: var(--fg-secondary); margin-bottom: 6px; }
input, select, textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-c); border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px; font-family: inherit; font-size: var(--t-small); color: var(--fg); background: var(--surface); outline: none; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--primary); }
input[type="file"] { min-height: 0; padding: 6px 0; border: none; background: transparent; }
input:focus, select:focus, textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 3px var(--accent-soft); }
input[readonly] { background: var(--surface-sunken); color: var(--fg-secondary); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input.is-error, select.is-error, textarea.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.field-error { color: var(--danger); font-size: var(--t-meta); margin-top: 4px; }
.field-help { color: var(--fg-secondary); font-size: var(--t-meta); margin-top: 4px; }
.input-sm, .table input, .table select, .q-table input, .q-table select { min-height: 36px; padding: 6px 10px; font-size: var(--t-small); }

/* ── Badges: a word, in a status colour ──────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; line-height: 16px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--fg-secondary); white-space: nowrap; }
.badge-draft, .badge-lead, .badge-neutral { background: var(--surface-sunken); color: var(--fg-secondary); }
.badge-sent, .badge-pending, .badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-accepted, .badge-approved, .badge-paid, .badge-good, .badge-complete { background: var(--good-soft); color: var(--good); }
.badge-changes, .badge-changes_requested, .badge-danger, .badge-failed, .badge-dead { background: var(--danger-soft); color: var(--danger); }
.badge-info, .badge-submitted, .badge-queued { background: var(--info-soft); color: var(--info); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* ── Tables: comparison, aligned numbers, quiet chrome ───────────────────── */
.table, .q-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.q-table { table-layout: fixed; }
.q-table td > input, .q-table td > select { width: 100% !important; }
.table th, .q-table th { text-align: left; font-size: var(--t-label); letter-spacing: 1.1px; text-transform: uppercase; font-weight: 700; color: var(--fg-secondary); padding: 0 var(--s-2) var(--s-2) 0; border-bottom: 1px solid var(--border-c); }
.table td, .q-table td { padding: 10px var(--s-2) 10px 0; vertical-align: top; border-top: 1px solid var(--border-c); }
.table tbody tr:first-child td, .q-table tbody tr:first-child td { border-top: none; }
.table tbody tr:hover, .q-table tbody tr:hover { background: color-mix(in srgb, var(--surface-sunken) 60%, transparent); }
.table td.num, .table th.num, .q-table td.num, .q-table th.num, .q-line-total { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-line-total { font-weight: 700; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--border-c); }
.tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px var(--s-3); font-family: inherit; font-size: var(--t-small); font-weight: 600; color: var(--fg-secondary); cursor: pointer; min-height: 44px; }
.tab:hover { color: var(--fg); } .tab.active { color: var(--fg); border-bottom-color: var(--accent); }

/* ── Chips (stage strip, kind picks) ─────────────────────────────────────── */
.chip, .stage-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-c); background: var(--surface); font-family: inherit; font-size: var(--t-meta); font-weight: 600; color: var(--fg-secondary); cursor: pointer; }
.chip:hover, .stage-btn:hover { color: var(--fg); background: var(--surface-sunken); }
.chip.active, .stage-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.stage-select { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Notices ─────────────────────────────────────────────────────────────── */
.notice, .floor-warn { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; border-radius: var(--r-md); padding: 12px 14px; font-size: var(--t-small); font-weight: 500; margin-top: var(--s-3); border: 1px solid transparent; }
.floor-warn, .notice-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.notice-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.notice-good { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.notice-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.kind-note, .hint { width: 100%; font-size: var(--t-meta); color: var(--fg-secondary); line-height: 16px; }

/* ── Dialog, toast, lightbox ─────────────────────────────────────────────── */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(12,10,9,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--s-5); }
.dialog { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-overlay); padding: var(--s-5); width: 100%; max-width: 520px; }
.toast { position: fixed; bottom: var(--s-5); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--primary); color: var(--on-primary); padding: 12px 18px; border-radius: var(--r-md); font-size: var(--t-small); font-weight: 600; box-shadow: var(--e-overlay); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; max-width: min(90vw, 560px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lightbox { position: fixed; inset: 0; background: rgba(12,10,9,.85); display: none; align-items: center; justify-content: center; z-index: 150; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--r-md); box-shadow: var(--e-overlay); }

/* ── Everything tappable answers ─────────────────────────────────────────── */
a, button, .card, [role="button"], .clickable { transition: box-shadow .15s ease, background-color .15s ease, opacity .15s ease, color .15s ease; }
.card:hover, .clickable:hover, [role="button"]:hover { background: var(--surface-sunken); }
button:active, .card:active, .clickable:active, [role="button"]:active { opacity: .7; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:not(.btn-sm):not(.small-link):not(.tab):not(.q-remove):not(.stage-btn):not(.chip):not(.thumb-x):not(.row-x), [role="button"] { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Page title, KPIs, modal: shared by the board, customers, finance, logistics ── */
h1, .page-title { font-family: var(--font-heading); font-size: var(--t-title); line-height: 32px; letter-spacing: .02em; font-weight: 700; text-transform: uppercase; margin: 0 0 4px; }
.sub { font-size: var(--t-small); color: var(--fg-secondary); margin: 0 0 var(--s-5); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.kpi { background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-lg); padding: var(--s-4) 18px; box-shadow: var(--e-raised); }
.kpi-label { font-size: var(--t-label); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--fg-secondary); }
.kpi-value, .kpi-num { font-size: var(--t-title); line-height: 32px; font-weight: 700; letter-spacing: -0.6px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: var(--t-meta); color: var(--fg-secondary); margin-top: 2px; }
.kpi.hero { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.kpi.hero .kpi-label, .kpi.hero .kpi-sub { color: rgba(250, 250, 249, 0.7); }
.pos { color: var(--good); } .neg { color: var(--danger); }
.overlay { display: none; position: fixed; inset: 0; background: rgba(12,10,9,.45); z-index: 200; align-items: center; justify-content: center; padding: var(--s-5); }
.overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--e-overlay); padding: var(--s-5); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); }
.modal-title { font-size: var(--t-heading); font-weight: 700; letter-spacing: -0.3px; margin-bottom: var(--s-4); }
.modal-header .modal-title { margin-bottom: 0; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--fg-secondary); line-height: 1; min-height: 0; width: 36px; height: 36px; border-radius: var(--r-sm); }
.modal-close:hover { background: var(--surface-sunken); color: var(--fg); }
.field { margin-bottom: var(--s-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
/* Older status classes the pages emit: they read as badges now. */
.flag, .pill, .tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); font-weight: 600; line-height: 16px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--fg-secondary); white-space: nowrap; }
.flag.danger, .tag-red, .pill-est { background: var(--danger-soft); color: var(--danger); }
.flag.warn, .tag-amber { background: var(--warn-soft); color: var(--warn); }
.flag.good, .tag-green, .pill-real { background: var(--good-soft); color: var(--good); }
.tag-blue { background: var(--info-soft); color: var(--info); }
.badge.b-placed { background: var(--surface-sunken); color: var(--fg-secondary); }
.badge.b-shipped { background: var(--warn-soft); color: var(--warn); }
.badge.b-delivered { background: var(--good-soft); color: var(--good); }
.badge.b-received { background: var(--info-soft); color: var(--info); }

/* Keep the single nav row inside the viewport as tools are added. Wrapping a
   fixed-height sticky bar placed links over the first page heading. */
@media (max-width: 720px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; box-sizing: border-box; width: 100%; }
  .nav .nav-brand, .nav .nav-link { flex-shrink: 0; }
  .nav .nav-link { padding-top: 0; padding-bottom: 0; }
  .nav .nav-right { margin-left: auto; }
}