/* ═══════════════════════════════════════════════════════════════════════════
   West Penn Vehicle Specialist — Application Stylesheet
   ═══════════════════════════════════════════════════════════════════════════
   Editorial × tech aesthetic, dark, cyan accent, Rajdhani display + DM Sans body.
   Matches ClientBridgeUSA's design system so the brand reads consistently.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polish pass, 8 Aug 2026 ────────────────────────────────────────────
   The original was built overnight for a demo and read like it: 14px body,
   11px buttons, 9px labels, flat surfaces, and tap targets around 26px on a
   phone. This pass keeps the identity — dark, cyan, Rajdhani display — and
   fixes the execution.

   Rules that hold everywhere below:
     • Nothing interactive is smaller than 44px on a touch screen.
     • Body text has a floor of 13px; anything smaller is a diagram label,
       not typography.
     • Form controls are 16px on mobile. Anything less and iOS Safari zooms
       the page on focus, which feels broken.
     • Every focusable thing gets a visible ring. Colour alone was the only
       focus signal before, which fails for anyone who tabs.
     • Surfaces get real elevation. Flat-on-flat was the single biggest
       reason it read as cheap.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Color tokens.
     Neutrals carry a faint blue undertone now (#0b0c0e rather than #0a0a0a).
     A pure-grey dark UI reads as unfinished; the cast is barely perceptible
     on its own but it is what makes the cyan sit in the palette instead of
     floating on top of it. */
  --black: #0b0c0e;
  --deep: #070809;
  --card: #141619;
  --card-light: #1a1d21;
  --card-lighter: #22262b;
  --border: #24282e;
  --border-light: #2f343b;
  --border-lighter: #3c424a;
  --white: #f4f6f8;
  --muted: #9aa3ad;            /* lifted from #888 — 4.5:1 on --card */
  --muted-light: #c2c9d1;      /* lifted from #aaa */
  --muted-dark: #6b747e;       /* lifted from #555, which was unreadable */
  --accent: #22e0f5;           /* cyan, a touch deeper so white text can sit on it */
  --accent-dim: #0e8ea6;
  --accent-soft: rgba(34, 224, 245, 0.12);
  --accent2: #8b45ff;          /* purple */
  --green: #22e08a;
  --warn: #ffb224;
  --danger: #ff5a72;

  /* Elevation. Three steps, used consistently: resting cards, raised
     surfaces (dropdowns, sticky bars), and overlays (modals, drawers). */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px rgba(34, 224, 245, 0.35);

  /* Type scale. Named by role, not by size, so a future adjustment is one
     edit rather than a search for "12px". */
  --text-xs: 12px;   /* the floor for real text — badges, table meta */
  --text-sm: 13.5px; /* secondary text, table cells */
  --text-base: 15px; /* body */
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* The minimum any finger should have to hit. */
  --tap: 44px;

  /* Light-color markers for diagrams */
  --light-red: #ff3333;
  --light-blue: #3366ff;
  --light-amber: #ffaa00;
  --light-white: #ffffff;
  --light-red-blue: #9933ff;
  --light-green: #00cc66;

  /* Typography */
  --font-display: 'Rajdhani', 'Inter', sans-serif;
  --font-body: 'DM Sans', 'Inter', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Sizing. Radii went up across the board — 6px on a 40px-tall button reads
     as an accident; 10px reads as a decision. */
  --header-height: 60px;
  --mobile-header-height: 58px;
  --sidebar-width: 252px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Stops a long doc number or VIN from pushing the whole page sideways on a
   phone — horizontal scroll was the most common mobile complaint. */
body { overflow-x: hidden; }

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--white); }

/* ⚠ Focus. Previously the only focus signal was a border-colour change on
   inputs, and nothing at all on buttons and links — unusable by keyboard.
   :focus-visible keeps the ring off mouse clicks. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Respect a user who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Grain overlay — subtle */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* ─── Typography utilities ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-xl); }
/* h3 was 16px UPPERCASE with letter-spacing in a condensed face — the least
   readable combination in the whole stylesheet, used for section headings.
   Now sentence case at a normal tracking. */
h3 {
  font-size: var(--text-lg);
  color: var(--muted-light);
  letter-spacing: -0.005em;
}
.serif-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.muted-light { color: var(--muted-light); }
.accent { color: var(--accent); }
.green { color: var(--green); }
.danger { color: var(--danger); }
.warn { color: var(--warn); }

/* ─── Layout shell ─────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}
/* ⚠ A grid item defaults to min-width:auto, which means it REFUSES to shrink
   below the widest thing inside it. With a 620px-min table in .main that made
   the whole page 620px wide on a 375px phone — the layout slid sideways and
   the table-wrap's own overflow-x never engaged, because the wrap was never
   the thing being squeezed. min-width:0 lets .main shrink so the scrolling
   happens INSIDE the table box, which is the whole point of .table-wrap.
   Measured: eight pages overflowed before this line. */
.app-shell > *, .main { min-width: 0; }

.sidebar {
  background: var(--deep);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.sidebar-brand .logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sidebar-brand .logo .accent { color: var(--accent); }
.sidebar-brand .sub {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 4px;
}

.sidebar-nav { flex: 1; padding: 0 12px; }
.sidebar-nav .group-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted-dark);
  padding: 18px 12px 8px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  min-height: var(--tap);
  margin-bottom: 2px;
  border-radius: var(--radius);
  color: var(--muted-light);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover {
  background: var(--card-light);
  color: var(--white);
}
/* The active item used to shift 2px left because the border was added
   without compensating the padding, so switching pages nudged the whole
   list. It is an inset pseudo-element now, which changes nothing in flow. */
/* Sub-views of Documents. The indent was 34px against a 12px parent, and
   that 22px step read as a ragged left edge rather than as hierarchy. Pulled
   in, with a hairline rail connecting the group so the offset looks deliberate.

   The rail is a background gradient rather than a pseudo-element because
   ::before is already the active-item accent bar, and an active sub-item needs
   both. Sized slightly over 100% so the 2px gap between rows does not dash it. */
.sidebar-nav a.nav-sub {
  padding-left: 30px;
  background-image: linear-gradient(var(--border-light), var(--border-light));
  background-size: 1px calc(100% + 2px);
  background-position: 15px 0;
  background-repeat: no-repeat;
}
/* The active state paints its own background, which would wipe the rail out —
   it has the accent bar instead, so that is fine and deliberate. */
.sidebar-nav a.nav-sub:hover { background-position: 15px 0; }

.sidebar-nav a.active {
  position: relative;
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  color: var(--white);
  font-weight: 600;
}
.sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sidebar-nav a.active svg { color: var(--accent); }
.sidebar-nav a.coming-soon {
  opacity: 0.4;
  pointer-events: none;
}
.sidebar-nav a.coming-soon::after {
  content: 'SOON';
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted-dark);
}
.sidebar-nav svg { width: 16px; height: 16px; stroke-width: 1.75; }

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.sidebar-footer .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-footer .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--black);
}
.sidebar-footer .who { flex: 1; }
.sidebar-footer .who .name { color: var(--white); font-size: 13px; font-weight: 500; }
.sidebar-footer .who .role { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.sidebar-footer .signout {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  color: var(--muted-light);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sidebar-footer .signout svg { width: 12px; height: 12px; }
.sidebar-footer .signout:hover {
  color: var(--white);
  border-color: var(--accent);
  background: var(--card);
}

/* ─── Main content area ───────────────────────────────────────────────── */
.main {
  padding: 32px 40px;
  min-height: 100vh;
}
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.page-header .crumb {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.page-header h1 { font-size: var(--text-2xl); }
.page-header .meta { font-size: var(--text-sm); color: var(--muted); margin-top: 7px; }
/* Buttons in a page header wrap instead of overflowing on a narrow screen. */
/* The ACTIONS side of a page header, so buttons sit in a row and wrap on a
   narrow screen.
   ⚠ :not(:first-child) is load-bearing. Without it, a header with no buttons
   has exactly one child — the crumb/title/meta block — and :last-child
   matched THAT, laying the title out in a row beside its own breadcrumb.
   Reports, Account and Time Corrections all looked wrong; Documents did not,
   purely because it happens to have a New Estimate button. */
.page-header > div:last-child:not(:first-child) { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ─── Cards & containers ──────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}
/* A one-pixel highlight along the top edge. This is the cheapest trick in
   dark UI: it suggests a light source, so cards read as physical objects
   rather than as differently-coloured rectangles. */
.card {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 90px);
}
.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.005em;
  color: var(--white);
  margin-bottom: 16px;
}

/* ─── Tables ──────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  /* A wide table scrolls INSIDE its own box instead of widening the page.
     Combined with body{overflow-x:hidden} this is what stops the whole
     layout sliding sideways on a phone. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.t {
  width: 100%;
  border-collapse: collapse;
}
table.t th, table.t td {
  padding: 14px 18px;
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
}
table.t th {
  background: var(--card-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-light);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.t tbody tr { cursor: pointer; transition: background 0.12s; }
table.t tbody tr:hover { background: var(--card-light); }
table.t tbody tr:last-child td { border-bottom: none; }
/* Row actions sit in a flex row so three buttons (Edit / Disable / Delete)
   stay on one line and keep their spacing. */
table.t td .btn + .btn { margin-left: 6px; }
table.t .num { text-align: right; font-variant-numeric: tabular-nums; }
table.t .col-narrow { width: 1%; white-space: nowrap; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
/* ⚠ Buttons were 13px UPPERCASE at 9px vertical padding — about 33px tall,
   and .btn-sm was 26px. Both are well under the 44px a fingertip needs, and
   uppercase condensed text at 11px is the hardest thing here to read.
   Sentence case, real height, real weight. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--card-light);
  color: var(--white);
  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { background: var(--card-lighter); border-color: var(--border-light); }
/* A 1px press. Small enough to feel mechanical rather than bouncy. */
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn-primary {
  background: linear-gradient(180deg, #3ae8fb, var(--accent));
  color: #04252b;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { background: linear-gradient(180deg, #5cedfc, #2ae4f8); color: #04252b; border-color: transparent; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--muted-light);
}
.btn-ghost:hover { color: var(--white); border-color: var(--border-lighter); background: var(--card-light); }
.btn-success { background: var(--green); color: var(--black); }
.btn-success:hover { background: #33ff99; color: var(--black); }
.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--white); }
.btn-warn { background: var(--warn); color: var(--black); }
.btn-warn:hover { background: #ffbb33; color: var(--black); }
.btn-sm { padding: 8px 14px; min-height: 36px; font-size: var(--text-sm); }
.btn-lg { padding: 14px 26px; min-height: 52px; font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }

/* ─── Forms ──────────────────────────────────────────────────────────── */
/* Labels keep the uppercase treatment — on a short word above a field it
   reads as structure rather than as body copy — but at a legible size. */
label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-light);
  margin-bottom: 7px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  color: var(--white);
  padding: 11px 14px;
  min-height: var(--tap);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--muted-dark); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card-lighter);
  box-shadow: var(--ring);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ─── Status pills ────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
}
.pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Document type-specific colors */
.pill-estimate     { color: var(--accent);    border-color: rgba(0, 229, 255, 0.3); background: rgba(0, 229, 255, 0.06); }
.pill-sales_order  { color: var(--warn);      border-color: rgba(255, 170, 0, 0.3);  background: rgba(255, 170, 0, 0.06); }
.pill-work_order   { color: var(--accent2);   border-color: rgba(123, 47, 255, 0.3); background: rgba(123, 47, 255, 0.06); }
.pill-invoice      { color: var(--green);     border-color: rgba(0, 255, 136, 0.3);  background: rgba(0, 255, 136, 0.06); }
.pill-warranty_hold{ color: var(--danger);    border-color: rgba(255, 68, 102, 0.3); background: rgba(255, 68, 102, 0.06); }

.pill-status-draft, .pill-status-pending, .pill-status-assigned { color: var(--muted-light); border-color: var(--border-light); background: var(--card-light); }
.pill-status-sent, .pill-status-in_progress, .pill-status-scheduled { color: var(--warn); border-color: rgba(255, 170, 0, 0.3); background: rgba(255, 170, 0, 0.06); }
.pill-status-accepted, .pill-status-completed, .pill-status-pushed { color: var(--green); border-color: rgba(0, 255, 136, 0.3); background: rgba(0, 255, 136, 0.06); }
.pill-status-paid { color: var(--green); border-color: rgba(0, 255, 136, 0.5); background: rgba(0, 255, 136, 0.12); }
.pill-status-declined, .pill-status-cancelled, .pill-status-void { color: var(--danger); border-color: rgba(255, 68, 102, 0.3); background: rgba(255, 68, 102, 0.06); }
.pill-status-pending_qbo_push { color: var(--accent); border-color: rgba(0, 229, 255, 0.3); background: rgba(0, 229, 255, 0.06); }

/* Preset layout scope pills */
.pill-system-scope   { color: var(--accent2);   border-color: rgba(123, 47, 255, 0.3); background: rgba(123, 47, 255, 0.06); }
.pill-customer-scope { color: var(--accent);    border-color: rgba(0, 229, 255, 0.3);  background: rgba(0, 229, 255, 0.06); }
.pill-neutral        { color: var(--muted-light); border-color: var(--border-light);   background: var(--card-light); text-transform: capitalize; }

/* ─── Stat tiles (for dashboard) ──────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.035), transparent 70px);
}
.stat .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  margin-bottom: 10px;
}
.stat .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 6px; }
.stat.accent .val { color: var(--accent); }
.stat.warn .val { color: var(--warn); }
.stat.green .val { color: var(--green); }

/* ─── Modals ──────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in 0.15s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: modal-in 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { transform: translateY(12px) scale(0.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-header h2 { font-size: var(--text-xl); }
/* The close X was an 8px hit area. Now a proper target. */
.modal-header .close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  width: var(--tap);
  height: var(--tap);
  margin: -10px -12px -10px 0;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-header .close:hover { color: var(--white); }
.modal-body { padding: 24px; }
.modal-header .close:hover { background: var(--card-lighter); }

/* ─── Empty states ────────────────────────────────────────────────────── */
.empty {
  padding: 72px 24px;
  text-align: center;
  color: var(--muted);
}
.empty .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.4;
}
.empty h3 { color: var(--white); margin-bottom: 8px; font-size: var(--text-lg); }
.empty p { font-size: var(--text-base); margin-bottom: 24px; }
.empty .icon { width: 56px; height: 56px; }

/* ─── Toast notifications ────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--card-lighter);
  border: 1px solid var(--border-lighter);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: var(--radius);
  min-width: 280px;
  max-width: min(420px, calc(100vw - 32px));
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--danger); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── Document detail timeline ───────────────────────────────────────── */
.lifecycle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.lifecycle-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
  white-space: nowrap;
}
.lifecycle-step.done { color: var(--muted-light); }
.lifecycle-step.current { color: var(--accent); background: rgba(0, 229, 255, 0.08); }
.lifecycle-arrow { color: var(--muted-dark); }

/* ─── Document detail two-column ─────────────────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
.detail-grid .sidebar-col { display: flex; flex-direction: column; gap: 16px; }

/* ─── Line items editor ──────────────────────────────────────────────── */
.line-items {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.line-items-header, .line-item-row {
  display: grid;
  grid-template-columns: 1fr 80px 110px 110px 40px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.line-items-header {
  background: var(--card-light);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-light);
}
.line-item-row {
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.line-item-row.breakage { background: rgba(255, 68, 102, 0.04); }
.line-item-row.breakage .item-name { color: var(--danger); }
.line-items-totals {
  border-top: 1px solid var(--border);
  padding: 16px;
  background: var(--card-light);
}
.totals-row {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
  padding: 4px 0;
  font-size: 14px;
}
.totals-row.grand {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.totals-row.grand .val { color: var(--accent); }
.totals-row .lbl { color: var(--muted-light); }
.totals-row .val { color: var(--white); font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }

/* ─── Action bar (transition buttons) ─────────────────────────────────── */
.action-bar {
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--card), rgba(0, 229, 255, 0.04));
}
.action-bar .text { flex: 1; }
.action-bar .text h3 { color: var(--accent); }
.action-bar .text p { font-size: 14px; color: var(--muted-light); margin-top: 4px; }
.action-bar .actions { display: flex; gap: 10px; }

/* ─── Customer detail / vehicle preview ──────────────────────────────── */
.kv-list { display: flex; flex-direction: column; gap: 10px; }
.kv-list .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv-list .row .k { color: var(--muted); }
.kv-list .row .v { color: var(--white); text-align: right; }

/* ─── Loading state ──────────────────────────────────────────────────── */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-lighter);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

/* ─── Search bar ─────────────────────────────────────────────────────── */
.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 16px;
  max-width: 400px;
}
.searchbar input {
  background: none;
  border: none;
  flex: 1;
  padding: 2px 0;
}
.searchbar input:focus { background: none; }
.searchbar svg { width: 14px; height: 14px; color: var(--muted); }

/* ─── Responsive ──────────────────────────────────────────────────────── */
/* The mobile top bar and drawer. Hidden on desktop, where the sidebar is a
   normal grid column. Markup comes from renderShell() in app.js. */
.mobile-topbar { display: none; }
.nav-scrim { display: none; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(11, 12, 14, 0.88);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu-btn {
    width: var(--tap);
    height: var(--tap);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    color: var(--white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-btn:active { background: var(--card-light); }
  .mobile-menu-btn svg { width: 22px; height: 22px; }
  .mobile-topbar-logo { height: 26px; width: auto; }
  .mobile-topbar .avatar {
    margin-left: auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--black);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Off-canvas via transform, not display or left — it animates on the GPU
     and the nav stays in the accessibility tree while closed. */
  .sidebar {
    display: flex;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(310px, 86vw);
    height: 100%;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
    box-shadow: var(--shadow-xl);
    padding-top: env(safe-area-inset-top);
  }
  body.nav-open .sidebar { transform: none; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* Sub-items drop their indent on a phone — the group label already carries
     the hierarchy and horizontal space is scarce. */
  .sidebar-nav a.nav-sub { padding-left: 12px; background-image: none; }
  .sidebar-nav a { min-height: 48px; font-size: var(--text-base); }

  .main { padding: 20px 16px 40px; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 22px;
  }
  .page-header h1 { font-size: var(--text-xl); }
  .page-header > div:last-child:not(:first-child) .btn { flex: 1; min-height: var(--tap); }

  .card { padding: 18px 16px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .stat .val { font-size: var(--text-2xl); }

  /* ⚠ 16px minimum on form controls. Below that iOS Safari zooms the page
     when a field takes focus and never zooms back — it reads as a bug. */
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"], select, textarea {
    font-size: var(--text-md);
    min-height: 48px;
  }

  .btn { min-height: var(--tap); font-size: var(--text-md); }
  .btn-sm { min-height: 40px; padding: 9px 14px; }

  /* Sheet-style from the bottom: the native idiom on a phone, and it puts
     the controls in thumb reach instead of up under the notch. */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: sheet-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  #toast-container { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }

  table.t th, table.t td { padding: 12px 14px; }
  /* Let a data table keep readable column widths and SCROLL inside its
     wrapper, rather than compressing "Johnstown Police Department" onto
     three lines. .table-wrap already has overflow-x: auto.
     ⚠ SCOPED TO .table-wrap ON PURPOSE. Applied to every table.t it also hit
     the BARE tables on app.html and customer.html, which have no wrapper and
     therefore no scroll container — those pages went 682px and 653px wide on
     a 375px screen. A bare table gets block-level scrolling of its own
     instead. */
  .table-wrap table.t { min-width: 620px; }
  .main > table.t, .card table.t {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* A hint that there is more to the right — without it the scroll is
     invisible and people assume the columns are just cut off. */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(11, 12, 14, 0.85));
  }

  /* Keep the last rows clear of the install banner. */
  body.has-install-banner .main { padding-bottom: 116px; }

  /* ── Overflow safety net ──────────────────────────────────────────────
     Measured at 375px: app.html came out 920px wide, customer.html 670,
     document.html 510. Three different causes, all the same shape — a
     container that cannot shrink.

     1. Pages define two-column layouts with an INLINE style
        (app.html: "grid-template-columns: 2fr 1fr"). A media query cannot
        reach inline CSS by specificity, so it is matched by attribute and
        overridden. Blunt, but in a codebase with no build step this is the
        only way to collapse them, and a nested two-column grid is never
        right on a phone anyway.
     2. Grid and flex children default to min-width:auto and refuse to
        shrink below their content.
     3. .lifecycle already had overflow-x:auto but its steps were being
        squeezed rather than scrolled. */
  .main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* min-width:auto is the default for grid and flex ITEMS, so every column
     wrapper needs releasing too — not just the shell. The unnamed <div>
     column inside .doc-page was the last thing holding document.html at
     493px. */
  .card, .stat, .table-wrap, .lifecycle, .qbo-doc,
  .detail-grid > *, .doc-page > * { min-width: 0; }
  .lifecycle-step, .lifecycle-arrow { flex-shrink: 0; }

  /* .doc-page kept a hard 300px sidebar at every width — document.html was
     the last page still sliding sideways at 375px. */
  .doc-page { grid-template-columns: 1fr; gap: 16px; }

  /* The transition buttons ran off the edge: two nested flex rows, neither
     allowed to wrap. Stacked and full-width, they are also a much better
     target for the actions that move a job through its lifecycle. */
  .action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .action-bar .actions { flex-wrap: wrap; }
  .action-bar .actions .btn { flex: 1 1 auto; min-width: 140px; }
}

/* A coarse pointer gets full-size targets whatever the viewport width — a
   tablet in landscape is still a touch screen. */
@media (pointer: coarse) {
  .btn { min-height: var(--tap); }
  .sidebar-nav a { min-height: 48px; }
}

/* ─── Logo light bars ────────────────────────────────────────────────────
   Emergency-light beams sweeping out from behind the keystone badge: red
   above, blue below, brightest where they pass behind the mark.

   Done in CSS rather than baked into the PNG for two reasons. The artwork
   stays a clean transparent badge that also works on the light customer-facing
   estimate page, where cop lights would be wrong. And the beams sit BEHIND the
   logo — only possible because the logo has a real alpha channel now, so the
   glow shows through around the keystone instead of being clipped to a box.

   ⚠ Not applied to the mobile top bar (26px tall — the blur becomes mud) or to
   view-estimate.html, which is a formal document a customer prints. */
.wp-logo {
  position: relative;
  display: block;
  isolation: isolate;      /* keeps the blur off anything behind the header */
}
.wp-logo img {
  position: relative;
  z-index: 1;
  display: block;
}
.wp-logo::before,
.wp-logo::after {
  content: '';
  position: absolute;
  z-index: 0;
  height: 11%;
  min-height: 5px;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(8px);
}
/* Red, riding just above the wordmark band. */
.wp-logo::before {
  top: 40%;
  left: -42%;
  right: -42%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 48, 48, 0.55) 14%,
    rgba(255, 60, 60, 0.95) 34%,
    rgba(255, 240, 240, 0.98) 50%,
    rgba(255, 60, 60, 0.95) 66%,
    rgba(255, 48, 48, 0.55) 86%,
    transparent 100%);
}
/* Blue, just below it. */
.wp-logo::after {
  top: 56%;
  left: -36%;
  right: -36%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56, 104, 255, 0.55) 16%,
    rgba(70, 120, 255, 0.95) 35%,
    rgba(220, 232, 255, 0.98) 50%,
    rgba(70, 120, 255, 0.95) 65%,
    rgba(56, 104, 255, 0.55) 84%,
    transparent 100%);
}

/* The sidebar is a narrow panel that clips horizontally, so the full sweep
   gets sliced off square against its edge. Pulled in to land inside. */
.sidebar-brand .wp-logo::before { left: -13%; right: -13%; }
.sidebar-brand .wp-logo::after  { left: -9%;  right: -9%; }
.sidebar-brand .wp-logo::before,
.sidebar-brand .wp-logo::after { filter: blur(6px); }

/* A slow alternating pulse, ONLY on the sign-in screen. The sidebar logo is on
   screen all day and anything moving there becomes an irritation; the login
   page is looked at for a few seconds. */
.wp-logo.wp-logo-live::before { animation: bar-red 2.6s ease-in-out infinite; }
.wp-logo.wp-logo-live::after  { animation: bar-blue 2.6s ease-in-out infinite; }
@keyframes bar-red  { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0.28; } 100% { opacity: 1; } }
@keyframes bar-blue { 0%, 44% { opacity: 0.28; } 50%, 94% { opacity: 1; } 100% { opacity: 0.28; } }

/* The global prefers-reduced-motion rule near the top already collapses these
   to a stop; this pins them at full brightness rather than mid-fade. */
@media (prefers-reduced-motion: reduce) {
  .wp-logo.wp-logo-live::before,
  .wp-logo.wp-logo-live::after { animation: none; opacity: 1; }
}

/* ─── Add to home screen ─────────────────────────────────────────────────
   The banner is shown once to a tech on a phone and remembers dismissal.
   The sidebar link is the way back for anyone who dismissed it. */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgba(26, 29, 33, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-lighter);
  box-shadow: var(--shadow-xl);
  animation: banner-in 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes banner-in {
  from { transform: translateY(140%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* 36px, not 40, and a 12px gap. Measured at 375px the title needed exactly
   the width it had — zero slack — so a 360px phone or a longer string would
   have clipped. This buys ~16px. */
.install-banner { gap: 12px; }
.install-banner-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
/* ⚠ Everything here is sized to keep the banner ONE ROW at 375px. It first
   shipped at 127px tall because the copy wrapped to three lines, and it sat
   on top of the second job card. Keep the strings short and the nowrap. */
.install-banner-text { flex: 1; min-width: 0; line-height: 1.3; }
.install-banner-text strong {
  display: block;
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.install-banner-text span {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.install-banner .btn { flex-shrink: 0; }
.install-banner-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.install-banner-close:hover { color: var(--white); background: var(--card-lighter); }

.install-link {
  display: none;               /* only meaningful on a touch device */
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 11px 12px;
  min-height: var(--tap);
  background: transparent;
  border: 1px dashed var(--border-lighter);
  border-radius: var(--radius);
  color: var(--muted-light);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.install-link:hover { color: var(--white); border-color: var(--accent); }
.install-link svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (pointer: coarse) { .install-link { display: flex; } }
/* Already installed — hide both routes, they would do nothing. */
@media (display-mode: standalone) {
  .install-link, .install-banner { display: none !important; }
}

/* ─── Tax exempt badge ───────────────────────────────────────────────── */
.tax-exempt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─── Shortage warning card ──────────────────────────────────────────── */
.shortage-card {
  border-color: var(--danger) !important;
  background: linear-gradient(135deg, var(--card), rgba(255, 68, 102, 0.04));
}
.shortage-card .card-title { color: var(--danger); }
.shortage-line {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px 90px;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.shortage-line.short { background: rgba(255, 68, 102, 0.04); }
.shortage-line.ok { color: var(--muted); }
.shortage-line .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ─── Toggle switch (for tax exempt etc) ─────────────────────────────── */
.toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  vertical-align: middle;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--card-lighter);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  transition: 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: var(--muted-light);
  border-radius: 50%;
  transition: 0.2s;
}
.toggle input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(16px);
  background: var(--black);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.toggle-row .label-text {
  flex: 1;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin: 0;
}
.toggle-row .label-text .hint {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
  font-weight: 400;
}

/* ─── Search-as-you-type for line item picker ────────────────────────── */
.item-search-wrap { position: relative; }
.item-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card-lighter);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius);
  margin-top: 4px;
  z-index: 20;
  display: none;
}
.item-search-results.open { display: block; }
.item-search-result {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.item-search-result:hover, .item-search-result.highlighted {
  background: var(--card-light);
}
.item-search-result:last-child { border-bottom: none; }
.item-search-result .name { font-weight: 500; }
.item-search-result .sku { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.item-search-result .meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.item-search-result .right { text-align: right; }
.item-search-result .price { font-family: var(--font-mono); font-weight: 600; }
.item-search-result .avail { font-size: 12px; color: var(--muted); margin-top: 2px; }
.item-search-result .avail.short { color: var(--danger); }
.item-search-result .avail.ok { color: var(--green); }
.item-search-result .cat-tag {
  display: inline-block;
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 6px;
}

/* ─── Category filter pills ──────────────────────────────────────────── */
.category-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cat-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--muted-light);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}
.cat-pill:hover { color: var(--white); border-color: var(--border-lighter); }
.cat-pill.active { background: var(--accent); color: var(--black); border-color: var(--accent); }

/* ─── QBO-style document layout ──────────────────────────────────────── */

.qbo-doc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

/* Top section: BILL TO (left) + metadata (right) */
.qbo-doc-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}

.qbo-bill-to {
  font-size: 14px;
}
.qbo-bill-to .section-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 8px;
}
.qbo-bill-to .company-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 2px;
}
.qbo-bill-to .contact { font-size: 13px; color: var(--muted-light); }
.qbo-bill-to .addr { font-size: 13px; color: var(--muted-light); margin-top: 6px; line-height: 1.5; }
.qbo-bill-to .badges { margin-top: 10px; display: flex; gap: 6px; }

.qbo-doc-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  align-content: start;
  font-size: 13px;
}
.qbo-doc-meta .k {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}
.qbo-doc-meta .v {
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.qbo-doc-meta .v.editable {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px dashed transparent;
}
.qbo-doc-meta .v.editable:hover {
  border-color: var(--border-light);
  background: var(--card-light);
}
.qbo-doc-meta input[type="date"], .qbo-doc-meta input[type="text"] {
  font-size: 13px;
  padding: 4px 8px;
  width: auto;
}

/* Line items table — QBO style */
.qbo-items {
  width: 100%;
}
.qbo-items-head {
  display: grid;
  grid-template-columns: 32px 2fr 2fr 70px 100px 110px 32px;
  gap: 12px;
  padding: 10px 28px;
  background: var(--deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.qbo-items-head .num, .qbo-row .num { text-align: right; }
.qbo-row {
  display: grid;
  grid-template-columns: 32px 2fr 2fr 70px 100px 110px 32px;
  gap: 12px;
  padding: 10px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  transition: background 0.1s;
}
.qbo-row:hover { background: var(--card-light); }
.qbo-row.breakage { background: rgba(255, 68, 102, 0.03); }
.qbo-row.breakage:hover { background: rgba(255, 68, 102, 0.06); }
.qbo-row .row-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-dark);
}
.qbo-row .product-cell .name {
  font-weight: 500;
  color: var(--white);
}
.qbo-row .product-cell .sku {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.qbo-row .product-cell .breakage-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--danger);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 68, 102, 0.1);
  border: 1px solid rgba(255, 68, 102, 0.3);
  vertical-align: middle;
}
.qbo-row .amount { font-family: var(--font-mono); font-weight: 600; }

/* Inline editing inputs */
.qbo-cell-editable {
  cursor: text;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.qbo-cell-editable:hover { border-color: var(--border-light); background: var(--card-lighter); }
.qbo-cell-editable.editing { border-color: var(--accent); background: var(--card-lighter); }
.qbo-inline-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 14px;
  padding: 0;
  outline: none;
  font-family: var(--font-body);
}
.qbo-inline-input.num {
  text-align: right;
  font-family: var(--font-mono);
}
.qbo-row .delete-row {
  background: none;
  border: none;
  color: var(--muted-dark);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
}
.qbo-row .delete-row:hover {
  color: var(--danger);
  background: rgba(255, 68, 102, 0.08);
}

.qbo-add-row {
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

/* Totals stacked right */
.qbo-totals {
  padding: 16px 28px 20px;
  display: flex;
  justify-content: flex-end;
}
.qbo-totals-inner {
  width: 340px;
  font-size: 14px;
}
.qbo-totals-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  padding: 6px 0;
  align-items: baseline;
}
.qbo-totals-row .lbl { color: var(--muted-light); text-align: right; padding-right: 16px; }
.qbo-totals-row .val { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.qbo-totals-row.grand {
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 18px;
}
.qbo-totals-row.grand .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
}
.qbo-totals-row.grand .val {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}

/* Message + Terms section (QBO footer) */
.qbo-footer-section {
  padding: 20px 28px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.qbo-footer-section h3 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 8px;
}
.qbo-footer-section textarea {
  width: 100%;
  background: var(--card-light);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 80px;
  resize: vertical;
}
.qbo-footer-section textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.qbo-footer-section .readonly-note {
  font-size: 14px;
  color: var(--muted-light);
  white-space: pre-wrap;
  min-height: 40px;
  padding: 10px 12px;
  background: var(--card-light);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Document page two-column layout (main + right sidebar) */
.doc-page {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.doc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

@media (max-width: 1100px) {
  .doc-page { grid-template-columns: 1fr; }
  .doc-sidebar { position: static; }
  .qbo-doc-top { grid-template-columns: 1fr; }
  .qbo-items-head, .qbo-row { grid-template-columns: 24px 1fr 1fr 60px 80px 90px 28px; gap: 8px; padding: 8px 14px; }
  .qbo-footer-section { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
   VEHICLE CONFIGURATOR — three-column drag-and-drop editor
   ═════════════════════════════════════════════════════════════════════ */

.cfg-shell {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  gap: 16px;
  height: calc(100vh - 180px);
  min-height: 600px;
}

.cfg-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cfg-panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--deep);
}
.cfg-panel-header h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin: 0;
}
.cfg-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.cfg-panel-footer { padding: 14px 18px; border-top: 1px solid var(--border); background: var(--deep); }

.cfg-section-label {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-dark);
  margin: 12px 0 6px;
}
.cfg-section-label:first-child { margin-top: 0; }

/* Vehicle picker — large select-like cards */
.cfg-vehicle-list { display: flex; flex-direction: column; gap: 6px; }
.cfg-vehicle-item {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  color: var(--muted-light);
  transition: all 0.1s;
}
.cfg-vehicle-item:hover { border-color: var(--border-lighter); color: var(--white); background: var(--card-light); }
.cfg-vehicle-item.active {
  border-color: var(--accent);
  background: rgba(0, 229, 255, 0.06);
  color: var(--white);
}
.cfg-vehicle-item .vname { font-weight: 600; font-family: var(--font-display); }
.cfg-vehicle-item .vsub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Layout picker — select element styled */
.cfg-layout-select {
  width: 100%;
  margin-bottom: 8px;
}

/* Color legend */
.cfg-legend { display: flex; flex-direction: column; gap: 6px; }
.cfg-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted-light);
}
.cfg-legend-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--black);
}

/* Center canvas */
.cfg-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f7;  /* Light grey so the white vehicle artwork stands out */
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.cfg-canvas {
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  cursor: default;
  user-select: none;
}
.cfg-canvas .silhouette-host { pointer-events: none; }
.cfg-canvas .silhouette-host * { pointer-events: none; }

/* Region label in the right-panel lights list */
.cfg-region-label {
  display: inline-block;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Selected light row in the right panel */
.cfg-light-row {
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.cfg-light-row:hover { background: var(--card-light); }
.cfg-light-row.selected {
  background: rgba(0, 229, 255, 0.06);
  border-color: var(--accent);
}

.cfg-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 40px 20px;
}

/* Light markers in the SVG */
.cfg-marker {
  cursor: grab;
  transition: filter 0.1s;
}
.cfg-marker:hover { filter: drop-shadow(0 0 6px var(--accent)); }
.cfg-marker.selected { filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 12px rgba(0, 229, 255, 0.5)); }
.cfg-marker.dragging { cursor: grabbing; opacity: 0.85; }
.cfg-marker-circle { stroke: #0a0a0a; stroke-width: 1.5; }
.cfg-marker-label {
  fill: #ffffff; font-family: 'Rajdhani', sans-serif; font-size: 7px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle;
  pointer-events: none;
  letter-spacing: 0;
}

/* Anchor hints (when snap is on) */
.cfg-anchor-hint {
  fill: rgba(0, 229, 255, 0.15);
  stroke: rgba(0, 229, 255, 0.4);
  stroke-width: 0.5;
  stroke-dasharray: 2 2;
  pointer-events: none;
}

/* Toolbar above canvas */
.cfg-toolbar {
  padding: 10px 18px;
  background: var(--deep);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cfg-toolbar .info { flex: 1; font-size: 14px; color: var(--muted-light); }
.cfg-toolbar .info strong { color: var(--white); font-family: var(--font-display); }

/* Right panel — lights list */
.cfg-light-row {
  display: grid;
  grid-template-columns: 28px 1fr 36px;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
}
.cfg-light-row:last-child { border-bottom: none; }
/* The disc grew with its label. The number inside went 9px → 12px in the
   readability pass, and a two-digit marker would have touched the edge of
   the old 22px circle. */
.cfg-light-row .marker-preview {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--black);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: #fff;
}
.cfg-light-row .name { font-weight: 500; color: var(--white); }
.cfg-light-row .sku { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cfg-light-row .qty { font-size: 13px; color: var(--muted-light); margin-top: 2px; }
.cfg-light-row .remove-btn {
  background: none; border: none; color: var(--muted-dark);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 4px;
}
.cfg-light-row .remove-btn:hover { color: var(--danger); }

.cfg-totals-mini {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.cfg-totals-mini .row {
  display: flex; justify-content: space-between;
  padding: 3px 0; font-size: 13px; color: var(--muted-light);
}
.cfg-totals-mini .row.grand {
  border-top: 1px solid var(--border-light);
  padding-top: 8px; margin-top: 4px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--white);
}
.cfg-totals-mini .row.grand .val { color: var(--accent); }

/* Add-light selector */
.cfg-add-light {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 12px;
}
.cfg-add-light label {
  font-size: 12px; margin-bottom: 4px;
}

/* Toggle row in toolbar */
.cfg-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted-light);
  cursor: pointer;
}
.cfg-toggle input[type="checkbox"] { cursor: pointer; }

/* View tabs above the canvas */
.cfg-view-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: var(--deep);
  padding: 0 18px;
}
.cfg-view-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-light);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.cfg-view-tab:hover { color: var(--white); }
.cfg-view-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.cfg-view-tab .view-count {
  background: var(--card-light);
  color: var(--muted-light);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.cfg-view-tab.active .view-count {
  background: rgba(0, 229, 255, 0.15);
  color: var(--accent);
}

/* Tiny tabs (used in the right-panel lights list) */
.cfg-tiny-tab {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  color: var(--muted-light);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
}
.cfg-tiny-tab:hover { border-color: var(--border-lighter); color: var(--white); }
.cfg-tiny-tab.active {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* Solo / Duo / Trio mode toggle */
.cfg-lens-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.cfg-lens-mode-btn {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  color: var(--muted-light);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
}
.cfg-lens-mode-btn:hover { color: var(--white); border-color: var(--border-lighter); }
.cfg-lens-mode-btn.active {
  background: rgba(0, 229, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* Per-lens color picker rows */
.cfg-lens-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.cfg-lens-row:last-child { border-bottom: none; }
.cfg-lens-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-light);
  min-width: 50px;
}
.cfg-lens-swatches {
  display: flex;
  gap: 4px;
  flex: 1;
}
.cfg-lens-swatch {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.1s;
  padding: 0;
}
.cfg-lens-swatch:hover {
  border-color: var(--accent);
  transform: scale(1.1);
}
.cfg-lens-swatch.active {
  border-color: var(--white);
  box-shadow: 0 0 0 2px var(--accent);
}

@media (max-width: 1200px) {
  .cfg-shell { grid-template-columns: 220px 1fr 300px; }
}
@media (max-width: 1000px) {
  .cfg-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }
  .cfg-canvas-wrap { min-height: 480px; }
}