/* ============ 5 Star DMS — design tokens ============ */
:root {
  /* warm charcoal palette (dark default) */
  --bg-0: oklch(0.155 0.005 60);
  --bg-1: oklch(0.195 0.006 60);
  --bg-2: oklch(0.235 0.008 60);
  --bg-3: oklch(0.285 0.010 60);
  --line:  oklch(0.330 0.010 60);
  --line-soft: oklch(0.260 0.008 60);

  /* Phase C accessibility: fg-2/fg-3 lifted so text clears WCAG 4.5:1 on bg-0/1/2
     (fg-3 was 0.46 → 2.3–2.7:1; fg-2 0.62 → 4.6 on bg-2). Hierarchy kept: .97/.82/.68/.62 */
  --fg-0: oklch(0.97 0.005 80);
  --fg-1: oklch(0.82 0.008 75);
  --fg-2: oklch(0.68 0.010 70);
  --fg-3: oklch(0.62 0.010 65);

  /* accents */
  --accent: oklch(0.80 0.135 78);      /* gold */
  --accent-dim: oklch(0.55 0.090 78);
  --accent-soft: oklch(0.32 0.060 78);
  --accent-ink: oklch(0.18 0.020 78);

  --ok: oklch(0.78 0.155 145);
  --ok-soft: oklch(0.33 0.08 145);
  --warn: oklch(0.80 0.155 70);
  --warn-soft: oklch(0.33 0.08 70);
  --danger: oklch(0.70 0.180 25);
  --danger-soft: oklch(0.33 0.10 25);
  --info: oklch(0.74 0.115 235);
  --info-soft: oklch(0.32 0.07 235);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-1: 0 1px 0 oklch(0.10 0 0 / 0.5), 0 0 0 1px var(--line) inset;
  --shadow-2: 0 8px 24px -8px oklch(0 0 0 / 0.5), 0 0 0 1px var(--line) inset;

  /* density */
  --row-pad-y: 12px;
  --row-pad-x: 14px;
  --tile-pad: 18px;

  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* accent variants (Tweaks) */
[data-accent="gold"]   { --accent: oklch(0.80 0.135 78); --accent-dim: oklch(0.55 0.09 78); --accent-soft: oklch(0.32 0.06 78); --accent-ink: oklch(0.18 0.02 78); }
[data-accent="amber"]  { --accent: oklch(0.78 0.165 55); --accent-dim: oklch(0.55 0.10 55); --accent-soft: oklch(0.32 0.07 55); --accent-ink: oklch(0.18 0.02 55); }
[data-accent="blue"]   { --accent: oklch(0.72 0.145 235); --accent-dim: oklch(0.50 0.09 235); --accent-soft: oklch(0.30 0.06 235); --accent-ink: oklch(0.16 0.02 235); }
[data-accent="red"]    { --accent: oklch(0.68 0.180 25); --accent-dim: oklch(0.48 0.11 25); --accent-soft: oklch(0.32 0.08 25); --accent-ink: oklch(0.16 0.02 25); }

/* density */
[data-density="compact"]     { --row-pad-y: 8px;  --row-pad-x: 12px; --tile-pad: 14px; }
[data-density="comfortable"] { --row-pad-y: 12px; --row-pad-x: 14px; --tile-pad: 18px; }
[data-density="spacious"]    { --row-pad-y: 16px; --row-pad-x: 18px; --tile-pad: 24px; }

/* light theme */
[data-theme="light"] {
  --bg-0: oklch(0.985 0.003 80);
  --bg-1: oklch(1.00 0 0);
  --bg-2: oklch(0.97 0.004 80);
  --bg-3: oklch(0.94 0.006 80);
  --line: oklch(0.88 0.008 80);
  --line-soft: oklch(0.93 0.006 80);

  /* Phase C accessibility: fg-3 darkened to clear 4.5:1 on white/bg-2 (was 0.68 → 2.7–2.9:1).
     Hierarchy kept: .18/.32/.50/.52 — secondary stays visibly lighter than primary. */
  --fg-0: oklch(0.18 0.010 60);
  --fg-1: oklch(0.32 0.010 60);
  --fg-2: oklch(0.50 0.010 60);
  --fg-3: oklch(0.52 0.010 60);

  --accent: oklch(0.55 0.165 25);       /* 5 Star red */
  --accent-dim: oklch(0.72 0.10 25);
  --accent-soft: oklch(0.94 0.04 25);
  --accent-ink: #ffffff;

  --ok: oklch(0.55 0.155 145);
  --ok-soft: oklch(0.95 0.04 145);
  --warn: oklch(0.52 0.155 70);   /* Phase C: was 0.60 → 4.06:1 on white; 0.52 → 5.7:1 */
  --warn-soft: oklch(0.96 0.04 70);
  --danger: oklch(0.55 0.180 25);
  --danger-soft: oklch(0.95 0.04 25);
  --info: oklch(0.55 0.135 235);
  --info-soft: oklch(0.95 0.03 235);

  --shadow-1: 0 1px 0 oklch(0.88 0 0 / 0.6), 0 0 0 1px var(--line) inset;
  --shadow-2: 0 8px 24px -8px oklch(0.5 0 0 / 0.12), 0 0 0 1px var(--line) inset;
}
[data-theme="light"][data-accent="blue"] { --accent: oklch(0.55 0.155 235); --accent-soft: oklch(0.94 0.04 235); --accent-ink: #fff; }
[data-theme="light"][data-accent="amber"]{ --accent: oklch(0.52 0.155 55); --accent-soft: oklch(0.95 0.05 55); --accent-ink: #fff; }
[data-theme="light"][data-accent="gold"] { --accent: oklch(0.52 0.135 78); --accent-soft: oklch(0.95 0.05 78); --accent-ink: #fff; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--fg-0);
  font-size: 0.875rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); color: var(--fg-0); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; letter-spacing: 0; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.upcase { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.6875rem; color: var(--fg-2); }

/* ============ App layout ============ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 240px) 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-0);
  transition: grid-template-columns 180ms ease;
}
[data-sidebar="narrow"] .app { --sidebar-w: 64px; }
[data-sidebar="wide"]   .app { --sidebar-w: 240px; }

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line-soft);
  min-height: 56px;
}
.brand-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand-text small { color: var(--fg-3); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
[data-sidebar="narrow"] .brand-text { display: none; }

/* Manual collapse/expand toggle — overrides the auto width at ANY viewport (tablet incl.) */
.sb-collapse {
  margin-left: auto; flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--fg-2);
  cursor: pointer; transition: color 100ms, border-color 100ms, transform 180ms ease;
}
.sb-collapse:hover { color: var(--fg-0); border-color: var(--fg-3); }
.sb-collapse svg { transform: rotate(180deg); }            /* wide: points left (collapse) */
[data-sidebar="narrow"] .sb-collapse svg { transform: rotate(0deg); }  /* narrow: points right (expand) */
[data-sidebar="narrow"] .sidebar-brand { flex-direction: column; gap: 8px; padding: 12px 8px; }
[data-sidebar="narrow"] .sb-collapse { margin-left: 0; }

.sb-section { padding: 14px 10px 6px; }
.sb-section h6 { margin: 0 0 6px; padding: 0 8px; color: var(--fg-3); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
[data-sidebar="narrow"] .sb-section h6 { display: none; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  font-weight: 500;
  background: transparent;
  border: 0; width: 100%;
  text-align: left;
  position: relative;
}
.sb-item .sb-count { margin-left: auto; font-size: 0.6875rem; color: var(--fg-3); font-family: var(--font-mono); }
.sb-item:hover { background: var(--bg-2); color: var(--fg-0); }
.sb-item[aria-current="page"] {
  background: var(--bg-2);
  color: var(--fg-0);
}
.sb-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
}
[data-sidebar="narrow"] .sb-item { justify-content: center; padding: 10px; }
[data-sidebar="narrow"] .sb-item span:not(.sb-count) { display: none; }
[data-sidebar="narrow"] .sb-item .sb-count { display: none; }

.sb-foot {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; align-items: center;
}
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; }
.sb-foot .who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sb-foot .who strong { font-size: 0.75rem; }
.sb-foot .who small { font-size: 0.625rem; color: var(--fg-3); }
[data-sidebar="narrow"] .sb-foot .who { display: none; }
/* Collapsed rail: center the avatar, drop the squeezed name/role + chevron (no squeeze). */
[data-sidebar="narrow"] .sb-foot { justify-content: center; padding: 12px 8px; }
[data-sidebar="narrow"] .sb-foot-btn { justify-content: center; gap: 0; }
[data-sidebar="narrow"] .sb-foot-btn > svg { display: none; }

/* main column */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
  min-height: 56px;
}
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 0.8125rem; min-width: 0; }
.crumbs strong { color: var(--fg-0); font-weight: 600; }
.crumbs .sep { color: var(--fg-3); }

.search {
  flex: 1; max-width: 480px; margin-left: 16px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--fg-2);
  font-size: 0.8125rem;
}
.search:hover { border-color: var(--line); }
.search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem; background: var(--bg-3); color: var(--fg-2); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.iconbtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  position: relative;
}
.iconbtn:hover { background: var(--bg-2); border-color: var(--line-soft); }
.iconbtn .dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-1);
}

/* Mobile nav — hidden on desktop; the mobile block (≤720px) reveals the hamburger + drawer.
   Defaulting to display:none means these new elements have ZERO effect above 720px. */
.topbar-menu {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--fg-1); cursor: pointer; flex-shrink: 0;
  margin-left: -4px;
}
.topbar-menu:hover { background: var(--bg-2); border-color: var(--line-soft); }
.sb-scrim { display: none; }

.content { flex: 1; overflow: auto; }
.content-inner { padding: 24px; max-width: 1600px; margin: 0 auto; }
@media (min-width: 1900px) { .content-inner { max-width: 1760px; } }

/* ============ atoms ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-0);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.8125rem;
  transition: all 120ms ease;
}
.btn:hover { background: var(--bg-3); border-color: var(--fg-3); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--bg-2); color: var(--fg-0); }
.btn-sm { padding: 4px 8px; font-size: 0.75rem; }
/* Disabled buttons must LOOK disabled — without this, "Send for eSign" (disabled until the
   invoice is finalized) rendered like an active button and clicks silently did nothing. */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bg-2); border-color: var(--line); filter: none; }
.btn-primary:disabled:hover { background: var(--accent); border-color: transparent; }
.btn-ghost:disabled:hover { background: transparent; color: var(--fg-1); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-3);
  color: var(--fg-1);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85;
}
.chip-ok { background: color-mix(in oklch, var(--ok-soft) 60%, var(--bg-2)); color: color-mix(in oklch, var(--ok) 72%, var(--fg-0)); border-color: color-mix(in oklch, var(--ok) 30%, var(--line)); }
.chip-warn { background: color-mix(in oklch, var(--warn-soft) 60%, var(--bg-2)); color: color-mix(in oklch, var(--warn) 72%, var(--fg-0)); border-color: color-mix(in oklch, var(--warn) 30%, var(--line)); }
.chip-danger { background: color-mix(in oklch, var(--danger-soft) 60%, var(--bg-2)); color: color-mix(in oklch, var(--danger) 72%, var(--fg-0)); border-color: color-mix(in oklch, var(--danger) 30%, var(--line)); }
.chip-info { background: color-mix(in oklch, var(--info-soft) 60%, var(--bg-2)); color: color-mix(in oklch, var(--info) 72%, var(--fg-0)); border-color: color-mix(in oklch, var(--info) 30%, var(--line)); }
.chip-accent { background: color-mix(in oklch, var(--accent-soft) 80%, var(--bg-2)); color: color-mix(in oklch, var(--accent) 72%, var(--fg-0)); border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); }
.chip-neutral { background: var(--bg-2); color: var(--fg-2); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.card-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.card-hd h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--fg-0); letter-spacing: -0.005em; }
.card-hd .hd-side { margin-left: auto; color: var(--fg-2); font-size: 0.75rem; display: flex; align-items: center; gap: 8px; }
.card-bd { padding: 18px; }
.card-bd.tight { padding: 6px; }

/* KPI tile */
.kpi {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--tile-pad);
  position: relative;
  overflow: hidden;
}
.kpi .label { color: var(--fg-2); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.kpi .value { font-size: 1.875rem; font-weight: 700; margin-top: 8px; letter-spacing: -0.02em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--fg-2); font-size: 0.75rem; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.kpi .spark { position: absolute; right: 12px; bottom: 12px; opacity: 0.6; }
.kpi.accent { background: linear-gradient(160deg, color-mix(in oklch, var(--accent-soft) 30%, var(--bg-1)) 0%, var(--bg-1) 60%); border-color: color-mix(in oklch, var(--accent) 20%, var(--line)); }

.delta-up { color: var(--ok); }
.delta-dn { color: var(--danger); }

/* table */
.dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}
.dtable th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6562rem;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px var(--row-pad-x);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  position: sticky; top: 0;
  white-space: nowrap;
}
.dtable td {
  padding: var(--row-pad-y) var(--row-pad-x);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  white-space: nowrap;
}
.dtable tr { background: var(--bg-1); transition: background 100ms ease; }
.dtable tbody tr:hover { background: var(--bg-2); cursor: pointer; }
.dtable tr.selected { background: color-mix(in oklch, var(--accent-soft) 18%, var(--bg-1)); }
.dtable td.num, .dtable th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* unit photo thumb */
.thumb {
  width: 60px; height: 40px;
  background: var(--bg-3) linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 6px, oklch(0 0 0 / 0.06) 6px 7px);
}

/* progress / stage bar */
.stagebar { display: flex; gap: 2px; align-items: center; }
.stagebar .seg { height: 6px; flex: 1; background: var(--bg-3); border-radius: 2px; min-width: 8px; }
.stagebar .seg.done { background: var(--accent); }
.stagebar .seg.active { background: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; opacity: 0.55; }
.stagebar .seg.skip { background: var(--bg-3); opacity: 0.4; }

/* filter bar */
.filterbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filterbar .sep { width: 1px; height: 20px; background: var(--line-soft); }
.pill {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-1);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.pill:hover { border-color: var(--line); background: var(--bg-3); }
.pill.active { background: color-mix(in oklch, var(--accent-soft) 50%, var(--bg-2)); color: var(--accent); border-color: color-mix(in oklch, var(--accent) 35%, var(--line)); }
.pill .x { opacity: 0.5; }

/* segmented */
.seg-ctrl {
  display: inline-flex; align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.seg-ctrl button {
  padding: 5px 12px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 5px;
}
.seg-ctrl button.on { background: var(--bg-0); color: var(--fg-0); box-shadow: 0 1px 0 var(--line); }
.seg-ctrl button:hover:not(.on) { color: var(--fg-0); }

/* command palette */
.cmd-overlay {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.45);
  backdrop-filter: blur(8px);
  display: grid; place-items: start center;
  padding-top: 14vh;
  z-index: 100;
}
.cmd {
  width: min(640px, 92vw);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.6);
  overflow: hidden;
}
.cmd-input {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cmd-input input {
  flex: 1; background: transparent; border: 0; outline: none; color: var(--fg-0);
  font-size: 1rem; font-family: var(--font-sans);
}
.cmd-list { max-height: 50vh; overflow: auto; padding: 6px; }
.cmd-grp { padding: 6px 12px 4px; color: var(--fg-3); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg-1);
}
.cmd-item .stock { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.cmd-item:hover, .cmd-item.sel { background: var(--bg-2); color: var(--fg-0); }

/* unit detail */
.unit-hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 920px) { .unit-hero { grid-template-columns: 1fr; } }

.unit-photo-main {
  aspect-ratio: 4/3;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--fg-3); font-family: var(--font-mono); font-size: 0.6875rem;
}
.unit-photo-main::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 10px, oklch(0 0 0 / 0.08) 10px 11px);
}
.unit-photo-main .photoct {
  position: absolute; left: 12px; bottom: 12px;
  background: oklch(0 0 0 / 0.5);
  color: var(--fg-0); padding: 4px 8px; border-radius: 6px;
  font-size: 0.6875rem; font-family: var(--font-mono); letter-spacing: 0.04em;
}

.unit-info h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; line-height: 1.1; }
.unit-info .vin { font-family: var(--font-mono); color: var(--fg-2); font-size: 0.8125rem; letter-spacing: 0.02em; }
.unit-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.unit-fact { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; }
.unit-fact .label { color: var(--fg-3); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.unit-fact .value { margin-top: 4px; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; }
.unit-fact .value.fg-pos { color: var(--ok); }
.unit-fact .value.fg-neg { color: var(--danger); }

/* tabs */
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 20px;
}
.tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  color: var(--fg-2);
  font-weight: 500;
  font-size: 0.8125rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
}
.tab .ct { background: var(--bg-2); color: var(--fg-2); padding: 1px 6px; border-radius: 999px; font-size: 0.625rem; font-family: var(--font-mono); }
.tab:hover { color: var(--fg-0); }
.tab[aria-current="page"] { color: var(--fg-0); border-bottom-color: var(--accent); }
.tab[aria-current="page"] .ct { background: color-mix(in oklch, var(--accent-soft) 60%, var(--bg-2)); color: var(--accent); }

/* recon timeline (in unit detail) */
.recon-list { display: flex; flex-direction: column; }
.recon-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.recon-step:last-child { border-bottom: 0; }
.recon-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 0.6875rem; color: var(--fg-3);
  margin-top: 2px;
  position: relative; z-index: 2;
}
.recon-step.done .recon-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.recon-step.active .recon-dot { background: var(--bg-0); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-soft) 60%, transparent); }
.recon-step.skip .recon-dot { opacity: 0.35; }
.recon-step::before {
  content: ""; position: absolute;
  left: 13px; top: 28px; bottom: -1px;
  width: 2px; background: var(--line-soft);
  z-index: 1;
}
.recon-step:last-child::before { display: none; }
.recon-step.done::before { background: var(--accent); opacity: 0.5; }
.recon-step .step-title { font-weight: 600; font-size: 0.8125rem; }
.recon-step .step-sub { color: var(--fg-2); font-size: 0.75rem; margin-top: 2px; }
.recon-step .step-meta { text-align: right; font-size: 0.6875rem; color: var(--fg-2); font-family: var(--font-mono); }

/* kanban */
.kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.kan-col {
  flex: 0 0 280px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 220px);
}
.kan-hd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px;
}
.kan-hd .title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-1); }
.kan-hd .ct { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.kan-hd::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
}
.kan-hd.stage-purchase::before { background: var(--info); }
.kan-hd.stage-transport::before { background: oklch(0.7 0.13 290); }
.kan-hd.stage-intake::before { background: oklch(0.75 0.13 200); }
.kan-hd.stage-inspection::before { background: oklch(0.78 0.14 180); }
.kan-hd.stage-service::before { background: var(--warn); }
.kan-hd.stage-body::before { background: oklch(0.7 0.14 25); }
.kan-hd.stage-detail::before { background: oklch(0.75 0.13 140); }
.kan-hd.stage-photos::before { background: oklch(0.78 0.13 260); }
.kan-hd.stage-ready::before { background: var(--ok); }

.kan-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.kan-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: all 100ms ease;
}
.kan-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.kan-card .top { display: flex; gap: 10px; align-items: center; }
.kan-card .thumb { width: 48px; height: 36px; }
.kan-card .stock { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.kan-card .name { font-weight: 600; font-size: 0.8125rem; line-height: 1.2; }
.kan-card .meta { display: flex; gap: 8px; align-items: center; color: var(--fg-2); font-size: 0.6875rem; }
.kan-card .meta .vendor { display: flex; align-items: center; gap: 4px; }
.kan-card .recon-adv {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft);
}
.recon-edit-adv { width: 24px; height: 24px; flex-shrink: 0; }
.recon-list-btn { padding: 4px 10px; }

/* List it modal */
.listit-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 16px; border-radius: var(--radius);
  background: color-mix(in oklch, var(--warn) 12%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--warn) 30%, var(--line));
  font-size: 0.7812rem; color: var(--fg-1); line-height: 1.35;
}
.listit-warn svg { flex-shrink: 0; margin-top: 1px; color: var(--warn); }
.listit-label { display: block; margin-bottom: 6px; }
.listit-price {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 12px; background: var(--bg-1);
}
.listit-price span { font-size: 1.25rem; color: var(--fg-3); font-weight: 600; }
.listit-price input {
  border: 0; background: transparent; outline: none; flex: 1;
  font-size: 1.5rem; font-weight: 700; padding: 6px 0; color: var(--fg-0);
}
.listit-margin {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-2); font-size: 0.8125rem;
}
.listit-margin .upcase { margin-right: 5px; }
.listit-suggest {
  display: block; width: 100%; text-align: left; margin-top: 10px;
  padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: transparent; cursor: pointer; font: inherit; font-size: 0.7812rem;
  color: var(--accent); font-weight: 600;
}
.listit-suggest:hover { background: var(--bg-2); }
.listit-previewlink {
  display: flex; align-items: center; gap: 7px; margin-top: 14px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 0.8125rem; color: var(--fg-2); padding: 4px 0;
}
.listit-previewlink:hover { color: var(--accent); }

/* messages */
.msg-wrap {
  display: grid;
  grid-template-columns: 240px 360px 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: calc(100vh - 140px);
}
@media (max-width: 1100px) { .msg-wrap { grid-template-columns: 200px 1fr; } .msg-wrap .msg-thread-list { display: none; } }
.msg-channels, .msg-thread-list, .msg-thread { background: var(--bg-1); overflow: auto; }
.msg-channels { padding: 14px 8px; }
.msg-channel {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  background: transparent;
  border: 0; width: 100%; text-align: left;
  font-weight: 500;
}
.msg-channel:hover { background: var(--bg-2); color: var(--fg-0); }
.msg-channel[aria-current="page"] { background: var(--bg-2); color: var(--fg-0); }
.msg-channel .ct { margin-left: auto; font-size: 0.6875rem; color: var(--fg-3); font-family: var(--font-mono); }
.msg-channel .unread { background: var(--accent); color: var(--accent-ink); padding: 1px 6px; border-radius: 999px; font-size: 0.625rem; font-weight: 700; }

.msg-thread-list { padding: 6px; border-left: 0; }
.msg-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.msg-row:hover { background: var(--bg-2); }
.msg-row.sel { background: color-mix(in oklch, var(--accent-soft) 20%, var(--bg-1)); border-left: 2px solid var(--accent); padding-left: 10px; }
.msg-row .r1 { display: flex; align-items: center; gap: 8px; }
.msg-row .who { font-weight: 600; font-size: 0.8125rem; }
.msg-row .when { margin-left: auto; font-size: 0.6875rem; color: var(--fg-3); font-family: var(--font-mono); }
.msg-row .preview { font-size: 0.75rem; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row .tags { display: flex; gap: 6px; }

.msg-thread { display: flex; flex-direction: column; }
.msg-thread-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px;
}
.msg-thread-body { flex: 1; padding: 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.msg-bubble { display: flex; gap: 10px; max-width: 75%; }
.msg-bubble.them { align-self: flex-start; }
.msg-bubble.us { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble .av { width: 28px; height: 28px; flex-shrink: 0; background: var(--bg-3); border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: var(--fg-1); }
.msg-bubble.us .av { background: var(--accent); color: var(--accent-ink); }
.msg-bubble .content { background: var(--bg-2); padding: 10px 14px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.45; }
.msg-bubble.us .content { background: var(--accent); color: var(--accent-ink); }
.msg-bubble .who { font-size: 0.6875rem; color: var(--fg-3); margin-bottom: 4px; }
.msg-thread-compose {
  padding: 14px 18px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; align-items: center;
}
.msg-thread-compose input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; color: var(--fg-0); font: inherit; outline: none;
}
.msg-thread-compose input:focus { border-color: var(--accent); }

/* ===== WhatsApp group feed ===== */
.msg-wrap.feed { grid-template-columns: 240px 1fr; }
@media (max-width: 1100px) { .msg-wrap.feed { grid-template-columns: 200px 1fr; } }

.msg-channel-grp { align-items: flex-start; }
.msg-channel-grp .grp-col { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.msg-channel-grp .grp-sub { font-size: 0.6562rem; color: var(--fg-3); font-weight: 500; }
.msg-channel-grp[aria-current="page"] .grp-sub { color: var(--accent); }

.msg-feed { display: flex; flex-direction: column; background: var(--bg-1); min-height: 0; }
.msg-feed-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
}
.msg-feed-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.6875rem; color: var(--fg-3); font-weight: 500;
}
.msg-feed-live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #2c9e6b);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok, #2c9e6b) 22%, transparent);
}
.msg-feed-body {
  flex: 1; overflow: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--fg-3) 8%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}
.msg-feed-day { display: flex; align-items: center; justify-content: center; margin: 6px 0; }
.msg-feed-day span {
  font-size: 0.6562rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); background: var(--bg-2); border: 1px solid var(--line-soft);
  padding: 3px 12px; border-radius: 999px;
}

.feed-msg { display: flex; gap: 9px; max-width: 78%; }
.feed-msg.them { align-self: flex-start; }
.feed-msg.us { align-self: flex-end; flex-direction: row-reverse; }
.feed-msg-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feed-msg.us .feed-msg-col { align-items: flex-end; }
.feed-msg-who { font-size: 0.7188rem; font-weight: 600; color: var(--fg-2); padding: 0 2px; }
.feed-msg-time { font-size: 0.625rem; color: var(--fg-3); font-weight: 400; font-family: var(--font-mono); margin-left: 5px; }
.feed-msg-time.inline { margin-left: 8px; opacity: 0.8; }
.feed-bubble {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  padding: 9px 13px; border-radius: 13px; border-top-left-radius: 4px;
  font-size: 0.8438rem; line-height: 1.45; color: var(--fg-1);
  display: flex; align-items: flex-end; gap: 2px; flex-wrap: wrap;
}
.feed-msg.us .feed-bubble {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
  border-radius: 13px; border-top-right-radius: 4px;
}
.feed-msg.us .feed-bubble .feed-msg-time { color: var(--accent-ink); }
.feed-text { white-space: pre-wrap; word-break: break-word; }

.feed-msg-foot { display: flex; align-items: center; gap: 6px; min-height: 18px; padding: 0 2px; }
.feed-unit-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6562rem; font-weight: 600; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 6px; cursor: pointer;
  background: color-mix(in oklch, var(--accent) 12%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line-soft));
  color: var(--accent);
}
.feed-unit-chip:hover { background: color-mix(in oklch, var(--accent) 20%, var(--bg-1)); }
.feed-tag-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.625rem; color: var(--fg-3); background: none; border: 0; cursor: pointer;
  opacity: 0; transition: opacity 0.12s; padding: 2px 4px; border-radius: 5px;
}
.feed-msg:hover .feed-tag-btn { opacity: 1; }
.feed-tag-btn:hover { color: var(--fg-1); background: var(--bg-2); }
.feed-tag-sel { font-size: 0.6875rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-1); color: var(--fg-1); max-width: 220px; }

/* ===== Inbox setup · group → channel map ===== */
.ib-map { display: flex; flex-direction: column; gap: 8px; }
.ib-map-row {
  display: grid; grid-template-columns: 1fr auto 170px; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 10px;
}
.ib-map-grp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ib-map-grp svg { color: var(--fg-2); flex: none; }
.ib-map-grp > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ib-map-grp strong { font-size: 0.8125rem; }
.ib-map-row .inv-input { margin: 0; padding: 7px 10px; font-size: 0.7812rem; }
.ib-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 9px; font-size: 0.75rem; color: var(--fg-2);
  background: color-mix(in oklch, var(--accent) 7%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line-soft));
}
.ib-note svg { color: var(--accent); flex: none; margin-top: 1px; }
@media (max-width: 620px) { .ib-map-row { grid-template-columns: 1fr; } .ib-map-row > svg { display: none; } }

/* docs grid */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.doc-tile {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: all 100ms ease;
}
.doc-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.doc-tile .ico { width: 36px; height: 36px; background: var(--bg-3); border-radius: 8px; display: grid; place-items: center; color: var(--fg-1); }
.doc-tile .name { font-weight: 600; font-size: 0.75rem; line-height: 1.3; }
.doc-tile .meta { font-size: 0.6875rem; color: var(--fg-3); font-family: var(--font-mono); }

/* mini sparkline-style bars */
.bars { display: flex; gap: 3px; align-items: flex-end; height: 28px; }
.bars .bar { width: 5px; background: var(--accent); border-radius: 1px; opacity: 0.8; }
.bars .bar.dim { background: var(--bg-3); opacity: 1; }

/* split row sets */
.row-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .row-4 { grid-template-columns: repeat(2, 1fr); } .row-3 { grid-template-columns: 1fr; } .row-2 { grid-template-columns: 1fr; } }

/* deal pipeline */
.deal-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.deal-col { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.deal-col-hd { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; }
.deal-col-bd { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.deal-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px; cursor: pointer; }
.deal-card:hover { border-color: var(--accent); }
.deal-card .nm { font-weight: 600; font-size: 0.8125rem; }
.deal-card .sub { color: var(--fg-2); font-size: 0.6875rem; margin-top: 2px; }
.deal-card .amt { margin-top: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 0.875rem; color: var(--accent); }

/* status / page header */
.page-hd {
  display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px;
}
.page-hd h1 { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.page-hd .sub { color: var(--fg-2); font-size: 0.8125rem; margin-top: 4px; }
.page-hd .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* small money helpers */
.money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); }
.muted-2 { color: var(--fg-3); }
.pill .muted-2 { color: var(--fg-2); }

/* scrollbars */
.content::-webkit-scrollbar, .kan-body::-webkit-scrollbar, .msg-thread-body::-webkit-scrollbar, .msg-thread-list::-webkit-scrollbar { width: 10px; height: 10px; }
.content::-webkit-scrollbar-thumb, .kan-body::-webkit-scrollbar-thumb, .msg-thread-body::-webkit-scrollbar-thumb, .msg-thread-list::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 2px solid var(--bg-0); }
.content::-webkit-scrollbar-track { background: transparent; }

/* ============ Invoice modal ============ */
.inv-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
}
.inv-modal-inner {
  width: min(1400px, 100%);
  height: min(900px, calc(100vh - 40px));
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6);
}

.inv-top {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
}
.inv-type-tabs { display: flex; gap: 2px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 3px; }
.inv-type {
  background: transparent; border: 0;
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--fg-2); font-weight: 500; font-size: 0.75rem;
}
.inv-type:hover { color: var(--fg-0); }
.inv-type.on { background: var(--bg-0); color: var(--fg-0); box-shadow: 0 1px 0 var(--line); }
.inv-meta { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }

.inv-body {
  flex: 1;
  display: grid;
  grid-template-columns: 400px 1fr;
  overflow: hidden;
}

.inv-form {
  display: grid;
  grid-template-rows: auto 1fr;
  border-right: 1px solid var(--line-soft);
  background: var(--bg-1);
  overflow: hidden;
}
.inv-form-nav {
  display: flex; gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}
.inv-form-nav-item {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 9px 11px;
  color: var(--fg-2); font-size: 0.75rem; font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.inv-form-nav-item:hover { color: var(--fg-0); }
.inv-form-nav-item.on { color: var(--fg-0); border-bottom-color: var(--accent); }

.inv-form-body { overflow-y: auto; padding: 18px 20px 100px; }
.inv-form-section h4 { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 600; }

.inv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-row.inv-row-3 { grid-template-columns: 1fr 100px 1fr; }

.inv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.inv-field .upcase { color: var(--fg-2); }
.inv-field-hint { font-size: 0.6875rem; color: var(--fg-3); margin-top: -1px; }

.inv-input {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--fg-0);
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
  width: 100%;
}
.inv-input:focus { border-color: var(--accent); background: var(--bg-0); }
textarea.inv-input { font-family: inherit; resize: vertical; }
select.inv-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%239a8b6a' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.inv-money-input { display: flex; align-items: center; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px; padding-left: 10px; }
.inv-money-input > span { color: var(--fg-3); }
.inv-money-input .inv-input { background: transparent; border: 0; padding-left: 4px; }

.inv-callout {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--info-soft) 25%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--info) 20%, var(--line));
  border-radius: 8px;
  font-size: 0.75rem;
  margin-bottom: 12px;
}
.inv-callout svg { flex-shrink: 0; margin-top: 2px; color: var(--info); }
.inv-callout > div { flex: 1; line-height: 1.5; }
.inv-callout.warn { background: color-mix(in oklch, var(--warn-soft) 25%, var(--bg-2)); border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); }
.inv-callout.warn svg { color: var(--warn); }
.inv-callout.info svg { color: var(--info); }
.inv-callout.success { background: color-mix(in oklch, var(--ok-soft) 25%, var(--bg-2)); border-color: color-mix(in oklch, var(--ok) 25%, var(--line)); }
.inv-callout.success svg { color: var(--ok); }
.inv-check {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 0.75rem; color: var(--fg-1);
  padding: 4px 6px;
  border-radius: 6px;
}
.inv-check input { accent-color: var(--accent); }

.inv-unit-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin: 8px 0 14px;
}

.inv-fi-catalog { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.inv-fi-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8125rem;
}
.inv-fi-row:hover { border-color: var(--line); }
.inv-fi-row.on { background: color-mix(in oklch, var(--accent-soft) 30%, var(--bg-2)); border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); color: var(--fg-0); }
.inv-fi-row input { accent-color: var(--accent); }

.inv-totals-mini {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.inv-totals-mini > div { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; }
.inv-totals-mini .inv-totals-due {
  border-top: 1px solid var(--line);
  padding-top: 10px; margin-top: 4px;
  font-size: 0.9375rem;
}
.inv-totals-mini .inv-totals-due strong:last-child { color: var(--accent); font-size: 1.125rem; }

/* ──── Right side: live document — matches real 5 Star invoice ──── */
.inv-preview {
  overflow: auto;
  padding: 16px;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.inv-doc {
  background: #ffffff;
  color: #000;
  width: 760px;
  height: 985px;
  /* H.4 — every size below is a CSS variable stamped from the SHARED invoiceScale module (points
     are canonical; these px are derived). The fallbacks equal the module's current output so the
     document still renders if the stamp is ever missing. Never hardcode a new px here. */
  padding: var(--invdoc-pad-top, 22.35px) var(--invdoc-pad, 37.25px) var(--invdoc-pad, 37.25px);
  border-radius: 4px;
  box-shadow: 0 24px 60px -10px rgba(0,0,0,0.4);
  font-family: "Bookman Old Style", "Times New Roman", Georgia, serif;
  font-size: var(--invdoc-fs, 11.8px);
  line-height: 1.35;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transform-origin: center center;
}
.inv-doc-fit {
  width: 100%;
  transform-origin: top left;
}

/* Centered logo — the ink-cropped document asset at the shared scale's absolute width, so the
   mark is the same size on screen and on paper and the page is not charged for the padded
   canvas's empty rows (H.4.1). */
/* H.4.2 — the letterhead band is spaced from the module, not from CSS line boxes. The image is a
   BLOCK: as an inline-block it sat in a line box and carried ~4pt of descender leading under it
   that the PDF has no counterpart for, which is most of why the preview's top band read looser
   than the print. */
.invR-logo { text-align: center; margin: 0 0 var(--invdoc-logo-gap, 8.69px); line-height: 0; }
.invR-logo img { display: block; margin: 0 auto; width: var(--invdoc-logo-w, 308.84px); height: auto; }

/* Document title (type-driven heading, e.g. BILL OF SALE) */
.invR-doctitle {
  text-align: center;
  font-weight: 800;
  font-size: var(--invdoc-fs-title, 16.14px);
  letter-spacing: 0.14em;
  /* The heading's whole vertical allowance is one line box = TITLE_LEAD + TITLE_GAP, the same two
     points the composer spends above and below its baseline. No margins of its own (H.4.2). */
  line-height: calc(var(--invdoc-title-band, 18.63px) / var(--invdoc-fs-title, 16.14px));
  margin: 0;
}

/* 3-column header */
.invR-head {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  padding-bottom: 4px;
  font-size: var(--invdoc-fs-hd, 12.42px);
  /* Same line height the composer steps the BILL TO / CONTACT lines by (H.4.2) — the inherited
     1.35 ran the block ~1pt taller per line than the printed one. */
  line-height: calc(var(--invdoc-head-lh, 15.52px) / var(--invdoc-fs-hd, 12.42px));
}
.invR-billto strong, .invR-contact strong { font-weight: 700; }
.invR-lbl { font-weight: 700; margin-bottom: 1px; }
.invR-lbl u { text-decoration: underline; }
.invR-billto { text-align: left; }
.invR-contact { text-align: center; }
.invR-contact .invR-email { color: #2a5fb0; text-decoration: underline; word-break: break-all; }
/* H.4.2 — the reference column steps by REF_ROW_H, exactly like the composer's `ry -= ROWH`.
   It used to be a boxed row on the inherited 1.35 leading plus a separate gap, which ran the
   whole three-row block ~11pt taller than the printed one. */
.invR-refgrid { display: flex; flex-direction: column; gap: 0; align-items: flex-end; min-width: 220px; }
.invR-refrow { display: flex; align-items: center; gap: 8px; height: var(--invdoc-ref-row-h, 19.87px); }
.invR-reflbl { font-weight: 700; text-align: right; min-width: 88px; }
.invR-refval {
  display: inline-block; min-width: var(--invdoc-ref-val-w, 146.54px);
  line-height: 1;
  padding: 2px 8px;
  border: 1px solid #000;
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
  background: #fff;
}
/* Pending invoice number (unsaved draft, no ledger number): a clear state, never a quotable number. */
.invR-refval-pending {
  font-family: inherit;
  font-weight: 400;
  font-style: italic;
  color: #888;
}

.invR-feinrow {
  display: flex; gap: 28px;
  font-size: var(--invdoc-fs-hd, 12.42px);
  margin: 1px 0 4px;
}
.invR-feinrow strong { font-weight: 700; }

/* Main red-grid table */
.invR-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1.5px solid #c8231f;
}
.invR-tbl th {
  background: #d6d6d6;
  color: #000;
  font-size: var(--invdoc-fs-hd, 12.42px);
  font-weight: 700;
  padding: var(--invdoc-head-pad, 6.21px) 8px;
  text-align: center;
  border: 1.5px solid #c8231f;
}
.invR-tbl td {
  padding: 1px 8px;
  vertical-align: top;
  border: 1px solid #c8231f;
  font-size: var(--invdoc-fs, 11.8px);
  line-height: 1.3;
  height: var(--invdoc-row-h, 20.49px);
  word-break: break-word;
}
.invR-tbl td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.invR-tbl td.mono { font-family: var(--font-mono); font-size: var(--invdoc-fs, 11.8px); }
/* H.4.1 — the boilerplate tail (as-is / no-warranty / deposit terms + the storage schedule) in the
   small-print band: smaller type in a shorter row, so it stops competing with the facts above it.
   Same rows the PDF composer draws with FS_FINE / ROW_H_FINE. */
.invR-tbl tr.invR-fine td { font-size: var(--invdoc-fs-fine, 9.31px); height: var(--invdoc-row-h-fine, 16.14px); }

/* Bottom: wire box + totals */
.invR-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border: 1.5px solid #c8231f;
  border-top: 0;
  background: #fff;
}
/* H.4.1 — wire + bank details are boilerplate: the small-print band, like the terms rows. */
.invR-wirebox {
  padding: 5px 12px 8px;
  border-right: 1.5px solid #c8231f;
  font-size: var(--invdoc-fs-fine, 9.31px);
  line-height: calc(var(--invdoc-wire-lh, 11.8px) / var(--invdoc-fs-fine, 9.31px));
}
.invR-wire-hd { font-weight: 700; font-size: var(--invdoc-fs-fine-hd, 10.56px); margin-bottom: 2px; }
.invR-wire-only { font-weight: 700; text-align: center; font-size: var(--invdoc-fs-fine, 9.31px); margin-bottom: 4px; }
.invR-wire-line { font-size: var(--invdoc-fs-fine, 9.31px); }
.invR-wire-line .mono { font-family: var(--font-mono); }
.invR-wire-line strong { font-weight: 700; }
.invR-wire-hd2 { margin-top: 6px; font-weight: 700; font-size: var(--invdoc-fs-fine-hd, 10.56px); }

.invR-totals { padding: 0; }
.invR-totals table { width: 100%; border-collapse: collapse; height: 100%; }
.invR-totals table td {
  padding: var(--invdoc-trow-pad, 4.66px) 12px;
  border: 1px solid #c8231f;
  font-size: var(--invdoc-fs, 11.8px);
  background: #fff;
  font-weight: 700;
}
.invR-totals table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.invR-notes {
  margin: 8px 0;
  padding: 6px 10px;
  background: #fff8f0;
  border-left: 3px solid #c8231f;
  font-size: var(--invdoc-fs, 11.8px);
}
/* Blank buyer-signature line inside the totals box — mirrors the PDF composer's "X ___ Buyer Signature" */
.invR-totals td.invR-sigcell { padding: 9px 10px 5px; font-weight: 400; }
.invR-sigline { display: flex; align-items: flex-end; gap: 6px; }
.invR-sigline-x { font-weight: 700; font-size: var(--invdoc-fs-sig, 13.66px); line-height: 1; }
.invR-sigline-rule { flex: 1; border-bottom: 1px solid #000; height: 11px; }
.invR-sigline-cap { font-size: var(--invdoc-fs-small, 8.69px); color: #555; letter-spacing: 0.04em; margin-top: 2px; }

.invR-sig { margin-top: 8px; padding: 6px 0; border-top: 1px solid #ddd; }
.invR-sig img { height: 40px; max-width: 260px; display: block; }
.invR-sig-lbl { font-size: var(--invdoc-fs-small, 8.69px); color: #555; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px; }

.invR-brand {
  text-align: center;
  font-weight: 800;
  font-size: var(--invdoc-fs-brand, 19.87px);
  letter-spacing: 0.02em;
  margin-top: 10px;
  font-family: "Bookman Old Style", Georgia, serif;
}
.invR-foot {
  text-align: center;
  font-size: var(--invdoc-fs, 11.8px);
  margin-top: 4px;
  color: #000;
}



/* Zoom controls in invoice preview */
.inv-zoom-bar {
  position: absolute;
  top: 10px; right: 14px;
  display: flex; align-items: center; gap: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.inv-zoom-btn, .inv-zoom-pct {
  background: transparent;
  border: 0;
  color: var(--fg-1);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  min-width: 28px;
  display: grid;
  place-items: center;
}
.inv-zoom-btn { font-size: 1rem; line-height: 1; }
.inv-zoom-btn:hover, .inv-zoom-pct:hover { background: var(--bg-2); color: var(--fg-0); }
.inv-zoom-pct { font-family: var(--font-mono); font-size: 0.75rem; min-width: 50px; font-variant-numeric: tabular-nums; }


/* ─── Customer picker (searchable combobox) ─── */
.cust-picker { position: relative; }
/* Per-deal lien/lease role toggle + inline finance-company add (invoice builder) */
.inv-role-seg { display: inline-flex; gap: 0; border: 1px solid var(--line-soft); border-radius: 7px; overflow: hidden; }
.inv-role-btn { font: inherit; font-size: 0.8125rem; padding: 7px 14px; background: var(--bg-2); color: var(--fg-2); border: 0; cursor: pointer; }
.inv-role-btn + .inv-role-btn { border-left: 1px solid var(--line-soft); }
.inv-role-btn.on { background: var(--accent); color: #fff; }
.fc-add { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.fc-add .inv-input { width: 100%; }
.cust-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--fg-0);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 100ms ease;
}
.cust-trigger:hover { border-color: var(--line); }
.cust-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cust-trigger-sel { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cust-trigger-info { display: flex; flex-direction: column; min-width: 0; }
.cust-trigger-info strong { font-weight: 600; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-trigger-sub { font-size: 0.6875rem; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-trigger-empty { display: flex; align-items: center; gap: 8px; color: var(--fg-3); flex: 1; }

/* A4.1: "this buyer is already a customer — link the deal to them" offer, under the picker. */
.cust-link-offer {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--accent-dim); border-radius: var(--radius);
  background: var(--accent-soft); font-size: 0.75rem; line-height: 1.35;
}
.cust-link-offer strong { font-weight: 700; }
.cust-link-offer .btn { flex: none; align-self: center; }

.cust-pop {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
  z-index: 50;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 360px;
}
.cust-pop-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.cust-pop-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--fg-0); font: inherit; font-size: 0.8125rem;
}
.cust-pop-ct {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 999px;
}
.cust-pop-list { overflow-y: auto; padding: 4px; }
.cust-pop-divider {
  padding: 8px 12px 4px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-weight: 600;
}
.cust-pop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg-1);
}
.cust-pop-item strong { font-weight: 600; font-size: 0.8125rem; color: var(--fg-0); }
.cust-pop-item strong mark { background: color-mix(in oklch, var(--accent-soft) 60%, transparent); color: var(--fg-0); padding: 0 2px; border-radius: 2px; }
.cust-pop-item.sel { background: var(--bg-2); }
.cust-pop-item:hover { background: var(--bg-2); }
.cust-pop-sub {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-pop-sub .dot-sep { color: var(--fg-3); }
.cust-pop-sub .mono { font-family: var(--font-mono); }
.cust-pop-meta {
  text-align: right;
  font-size: 0.6875rem;
  color: var(--fg-2);
  flex-shrink: 0;
}
.cust-pop-meta .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cust-pop-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3);
  color: var(--fg-1);
  flex-shrink: 0;
}
.cust-pop-avatar.new {
  background: color-mix(in oklch, var(--accent-soft) 50%, var(--bg-2));
  color: var(--accent);
  border: 1px dashed color-mix(in oklch, var(--accent) 40%, var(--line));
}
.cust-pop-new strong { color: var(--accent); }
.cust-pop-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 16px;
  color: var(--fg-2);
  text-align: center;
  font-size: 0.75rem;
}


/* ============ Locations Kanban ============ */
.loc-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  align-items: flex-start;
  min-height: calc(100vh - 220px);
}
.loc-col {
  flex: 0 0 200px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 220px);
  transition: border-color 100ms, background 100ms;
}
.loc-col.drop-target {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent-soft) 40%, var(--bg-1));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 30%, transparent);
}
.loc-col-adding { border-style: dashed; border-color: var(--accent); }
.loc-col-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.loc-col-hd::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: var(--fg-3);
}
.loc-color-ok::before     { background: var(--ok); }
.loc-color-info::before   { background: var(--info); }
.loc-color-warn::before   { background: var(--warn); }
.loc-color-danger::before { background: var(--danger); }
.loc-color-amber::before  { background: oklch(0.72 0.16 55); }
.loc-color-blue::before   { background: oklch(0.62 0.15 235); }
.loc-color-purple::before { background: oklch(0.62 0.16 295); }

.loc-col-title {
  background: transparent;
  border: 0;
  color: var(--fg-0);
  font: inherit;
  font-size: 0.7812rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: text;
  text-align: left;
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-col-title:hover { background: var(--bg-2); }
.loc-col-rename {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  font: inherit;
  font-size: 0.7812rem;
  font-weight: 700;
  color: var(--fg-0);
  outline: none;
  min-width: 0;
  width: 100%;
}
.loc-col-ct {
  font-size: 0.6875rem;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.loc-col-actions {
  display: flex; gap: 1px;
  opacity: 0;
  transition: opacity 100ms;
}
.loc-col:hover .loc-col-actions { opacity: 1; }
.loc-iconbtn {
  width: 20px; height: 20px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 4px;
  display: grid; place-items: center;
  cursor: pointer;
}
.loc-iconbtn:hover { background: var(--bg-2); color: var(--fg-0); }
.loc-iconbtn:disabled { opacity: 0.3; cursor: default; }
.loc-iconbtn:disabled:hover { background: transparent; color: var(--fg-2); }
.loc-iconbtn-danger:hover { background: var(--danger-soft); color: var(--danger); }

.loc-col-body {
  flex: 1;
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 80px;
}
.loc-col-body::-webkit-scrollbar { width: 6px; }
.loc-col-body::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 999px; }

.loc-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--fg-3);
  border: 1px dashed var(--line-soft);
  border-radius: 6px;
  background: transparent;
}

/* Compact unit cards — designed for hundreds at a glance */
.loc-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: grab;
  user-select: none;
  display: flex; flex-direction: column;
  gap: 1px;
  transition: all 80ms ease;
}
.loc-card:hover {
  border-color: var(--accent);
  background: var(--bg-1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px oklch(0 0 0 / 0.15);
}
.loc-card.dragging { opacity: 0.4; cursor: grabbing; }
.loc-card-line1 {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.loc-card-stock {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  color: var(--fg-0);
}
.loc-card-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-3);
  flex-shrink: 0;
}
/* A6.1 — deposit hold marker on a location card. Tiny by necessity (these cards are dense), with
   holder / amount / expiry in the tooltip; the card edge picks up the same accent so a held truck
   is spottable while scanning a lot column. */
.loc-card-hold {
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 1px 4px; border-radius: 4px; flex-shrink: 0;
  background: color-mix(in oklch, var(--accent) 20%, var(--bg-1));
  color: var(--fg-0);
  border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
}
.loc-card-hold.expired {
  background: color-mix(in oklch, var(--warn) 24%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
}
.loc-card.held { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.loc-card.held.expired { border-color: color-mix(in oklch, var(--warn) 50%, var(--line)); }
.loc-dot-ok { background: var(--ok); }
.loc-dot-warn { background: var(--warn); }
.loc-dot-info { background: var(--info); }
.loc-dot-danger { background: var(--danger); }
.loc-card-line2 {
  font-size: 0.6562rem;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

/* Add-column button */
.loc-add-btn {
  flex: 0 0 180px;
  align-self: stretch;
  background: transparent;
  border: 2px dashed var(--line);
  color: var(--fg-3);
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 120px;
  cursor: pointer;
  transition: all 100ms;
  margin-top: 0;
}
.loc-add-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 30%, transparent); }

/* Density variants */
[data-density="compact"] .loc-card { padding: 4px 7px; }
[data-density="compact"] .loc-card-stock { font-size: 0.75rem; }
[data-density="compact"] .loc-card-line2 { font-size: 0.625rem; }
[data-density="spacious"] .loc-card { padding: 9px 10px; }
[data-density="spacious"] .loc-col { flex-basis: 220px; }


/* ============ Locations: pointer-drag ghost ============ */
.loc-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 12px 30px -6px rgba(0,0,0,0.45), 0 0 0 1px var(--accent) inset;
  transform: rotate(-1.5deg);
  font-family: var(--font-sans);
  user-select: none;
}
.loc-ghost .loc-card-line1 { display: flex; align-items: center; justify-content: space-between; }
.loc-ghost .loc-card-stock { font-family: var(--font-mono); font-weight: 700; font-size: 0.8125rem; color: var(--fg-0); }
.loc-ghost .loc-card-line2 { font-size: 0.6562rem; color: var(--fg-2); margin-top: 2px; }
.loc-ghost .loc-card-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Prevent the page from interpreting drag as scroll on touchscreens */
.loc-card { touch-action: pan-x pan-y; } /* body pans (scroll); touch drag starts from .drag-grip */

/* ============ Locations: DISPLAY MODE (kiosk / TV) ============ */
.loc-page.loc-display {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  color: var(--fg-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  max-width: none;
}
.loc-display-hd {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.loc-display-brand { display: flex; align-items: center; gap: 14px; }
.loc-display-mark {
  width: 44px; height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.375rem;
  font-family: "Bookman Old Style", Georgia, serif;
  font-style: italic;
  letter-spacing: -0.04em;
}
.loc-display-brand strong { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.loc-display-brand small { color: var(--fg-3); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

.loc-display-stats { display: flex; gap: 28px; margin-left: 32px; }
.loc-display-stats > div { display: flex; flex-direction: column; align-items: flex-start; }
.loc-display-stats > div span:first-child { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--fg-0); }
.loc-display-stats > div span:last-child { font-size: 0.6875rem; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase; }
.loc-display-stats .live-dot {
  display: flex; align-items: center; gap: 8px;
  color: var(--ok);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 12px;
}
.loc-display-stats .pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 50%, transparent);
  animation: loc-pulse 1.4s infinite;
}
@keyframes loc-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 60%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--ok) 0%, transparent); }
}

.loc-display-clock { margin-left: auto; text-align: right; }
.loc-display-clock .time { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--fg-0); }
.loc-display-clock .date { font-size: 0.6875rem; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

.loc-display-fs {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-1);
  font-size: 1.25rem;
  width: 40px; height: 40px;
  border-radius: 8px;
  cursor: pointer;
  margin-left: 16px;
}
.loc-display-fs:hover { background: var(--bg-2); color: var(--fg-0); }

/* Bigger columns and cards in display mode */
.loc-kanban-display {
  flex: 1;
  margin: 0;
  padding: 14px;
  gap: 14px;
  min-height: 0;
  height: 100%;
}
.loc-kanban-display .loc-col {
  flex: 1 1 0;
  min-width: 180px;
  max-height: none;
}
.loc-kanban-display .loc-col-hd {
  padding: 14px 12px;
}
.loc-kanban-display .loc-col-hd::before { height: 5px; }
.loc-kanban-display .loc-col-title {
  font-size: 1rem;
  letter-spacing: 0.01em;
  pointer-events: none;
  cursor: default;
}
.loc-kanban-display .loc-col-ct {
  font-size: 0.875rem;
  padding: 3px 10px;
  background: var(--bg-2);
}
.loc-kanban-display .loc-col-body {
  padding: 10px;
  gap: 8px;
}
.loc-kanban-display .loc-card {
  padding: 10px 12px;
}
.loc-kanban-display .loc-card-stock {
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}
.loc-kanban-display .loc-card-dot {
  width: 10px; height: 10px;
}
.loc-kanban-display .loc-card-line2 {
  font-size: 0.8125rem;
}
.loc-kanban-display .loc-empty {
  font-size: 0.8125rem;
  padding: 20px 10px;
}

/* Hide normal app chrome when ?display set on root */
[data-display="locations"] .sidebar,
[data-display="locations"] .topbar {
  display: none !important;
}
[data-display="locations"] .app {
  grid-template-columns: 1fr !important;
}
[data-display="locations"] .main { overflow: visible; }
[data-display="locations"] .content { overflow: visible; padding: 0; }
[data-display="locations"] body { overflow: hidden; }


.loc-fs-toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-1);
  color: var(--fg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: min(640px, calc(100vw - 40px));
  box-shadow: 0 24px 60px -10px oklch(0 0 0 / 0.4);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.loc-fs-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}


/* ─── Invoices: Active / Archive section tabs ─── */
.inv-section-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.inv-section-tab {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  position: relative;
  transition: all 100ms;
}
.inv-section-tab:hover { color: var(--fg-0); border-color: var(--line); }
.inv-section-tab.on {
  background: var(--bg-1);
  color: var(--fg-0);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.inv-section-tab .inv-section-ct {
  background: var(--bg-2);
  color: var(--fg-2);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
}
.inv-section-tab.on .inv-section-ct {
  background: color-mix(in oklch, var(--accent-soft) 70%, var(--bg-2));
  color: var(--accent);
}
.inv-section-tab .inv-section-sub {
  font-size: 0.625rem;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 4px;
}

/* Recon Kanban — pointer-drag styles */
.kan-card { touch-action: pan-x pan-y; cursor: grab; user-select: none; } /* body pans on touch; mouse still drags whole card; touch drag = .drag-grip */
.kan-card.dragging { opacity: 0.4; cursor: grabbing; }
.kan-col.drop-target {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent-soft) 40%, var(--bg-1));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 30%, transparent);
}
.kan-card .stock { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); font-weight: 500; }


/* ============ Add Unit wizard ============ */
.addu-modal {
  width: min(960px, 100%);
  max-height: calc(100vh - 40px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5);
}
.addu-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.addu-title { display: flex; align-items: center; gap: 10px; flex: 1; }
.addu-title h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.addu-stepct { margin-left: 10px; color: var(--fg-3); font-size: 0.75rem; font-family: var(--font-mono); }

.addu-stepper { display: flex; gap: 0; padding: 12px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
.addu-step { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--fg-3); font-size: 0.75rem; font-weight: 500; position: relative; }
.addu-step + .addu-step::before { content: ""; position: absolute; left: -50%; right: calc(50% + 16px); top: 14px; height: 1px; background: var(--line); }
.addu-step.done + .addu-step::before, .addu-step.done.active::before { background: var(--accent); }
.addu-step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; color: var(--fg-3); border: 2px solid var(--line); z-index: 2; }
.addu-step.active { color: var(--fg-0); }
.addu-step.active .addu-step-dot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.addu-step.done { color: var(--fg-1); }
.addu-step.done .addu-step-dot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.addu-body { flex: 1; overflow: auto; padding: 24px 28px; }
.addu-step-content h4 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; }
.addu-step-content > p { margin: 0 0 18px; }

.addu-vin-input { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.addu-vin-meta { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 0.75rem; }

.addu-decode-loader { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; background: var(--bg-2); border-radius: 8px; color: var(--fg-2); font-size: 0.8125rem; }
.addu-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: addu-spin 0.7s linear infinite; }
@keyframes addu-spin { to { transform: rotate(360deg); } }

.addu-decode-result { margin-top: 18px; padding: 18px; background: color-mix(in oklch, var(--ok-soft) 30%, var(--bg-2)); border: 1px solid color-mix(in oklch, var(--ok) 25%, var(--line)); border-radius: 10px; }
.addu-decode-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.addu-decode-grid .inv-field { margin-bottom: 0; }

.addu-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.addu-form-grid .inv-field { margin-bottom: 0; }

.addu-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 36px 20px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  cursor: pointer;
  transition: all 100ms;
}
.addu-dropzone:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 25%, var(--bg-2)); }
.addu-dropzone strong { font-size: 0.8125rem; color: var(--fg-0); }
.addu-photo-meta { margin: 14px 0 8px; font-size: 0.8125rem; }
.addu-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.addu-photo { position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-2); }
.addu-photo img { width: 100%; height: 100%; object-fit: cover; }
.addu-photo-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; }

.addu-drive { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 16px; margin-top: 8px; }
.addu-drive-path { font-size: 0.75rem; color: var(--fg-2); padding: 8px 10px; background: var(--bg-0); border-radius: 6px; margin-bottom: 12px; }
.addu-drive-tree { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.addu-drive-folder { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-1); border-radius: 6px; font-size: 0.8125rem; }
.addu-drive-grp { margin-bottom: 14px; }
.addu-drive-grp-hd { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.addu-drive-flat { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 0.75rem; color: var(--fg-3); }
.addu-drive-flat span { color: var(--fg-3); }

.addu-summary { margin-top: 18px; padding: 14px 18px; background: var(--bg-2); border-radius: 10px; }
.addu-summary h5 { margin: 0 0 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; }
.addu-summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.8125rem; }
.addu-summary-row span { color: var(--fg-2); }

/* APEX sheet step */
.addu-sheet-rowpick { display: flex; gap: 16px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px; }
.addu-rowbox { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; background: var(--bg-0); border: 1px solid var(--line); border-radius: 8px; }
.addu-rowbox-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; }
.addu-sheet-map { margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.addu-sheet-map-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); font-size: 0.75rem; font-weight: 600; color: var(--fg-1); }
.addu-sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); }
.addu-cell { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-0); }
.addu-cell.locked { background: var(--bg-2); }
.addu-cell-col { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--accent-soft, color-mix(in oklch, var(--accent) 16%, transparent)); color: var(--accent); font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono); }
.addu-cell.locked .addu-cell-col { background: var(--bg-1); color: var(--fg-3); }
.addu-cell-label { font-size: 0.6875rem; color: var(--fg-3); }
.addu-cell-val { font-size: 0.8125rem; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addu-cell.empty .addu-cell-val, .addu-cell.locked .addu-cell-val { color: var(--fg-3); }

.addu-foot { display: flex; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line-soft); gap: 8px; }

/* ============ Reports charts ============ */
.rep-chart { display: flex; align-items: flex-end; gap: 12px; padding: 6px 4px 0; min-height: 200px; }
.rep-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.rep-bar { width: 100%; max-width: 48px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 4px; transition: all 200ms; }
.rep-bar-val { font-family: var(--font-mono); font-size: 0.625rem; color: var(--fg-2); margin-bottom: 4px; }
.rep-bar-label { font-size: 0.6875rem; color: var(--fg-2); margin-top: 6px; font-weight: 500; }
.rep-bar-units { font-size: 0.625rem; color: var(--fg-3); }

.rep-progress { position: relative; height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.rep-progress-fill { height: 100%; transition: width 200ms; }
.rep-progress-target { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg-3); border-radius: 1px; }

/* ============ Settings page ============ */
.set-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; }
.set-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--fg-1); font: inherit; font-size: 0.8125rem; font-weight: 500; text-align: left; cursor: pointer; }
.set-nav-item:hover { background: var(--bg-2); color: var(--fg-0); }
.set-nav-item.on { background: var(--bg-2); color: var(--fg-0); position: relative; }
.set-nav-item.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; }
.set-body { min-width: 0; }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.set-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.set-perm-tile { padding: 14px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px; }

@media (max-width: 760px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .addu-form-grid { grid-template-columns: 1fr 1fr; }
  .addu-decode-grid { grid-template-columns: 1fr 1fr; }
}


/* ============ Deal Jacket ============ */
.dj-wrap { display: flex; flex-direction: column; gap: 14px; }

.dj-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.dj-banner.blocked {
  background: color-mix(in oklch, var(--warn-soft) 30%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 30%, var(--line));
}
.dj-banner.ready {
  background: color-mix(in oklch, var(--ok-soft) 30%, var(--bg-1));
  border-color: color-mix(in oklch, var(--ok) 30%, var(--line));
}
.dj-banner-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.dj-banner.blocked .dj-banner-icon { background: var(--warn); }
.dj-banner.ready .dj-banner-icon { background: var(--ok); }
.dj-banner-body { flex: 1; min-width: 0; }
.dj-banner-body strong { display: block; font-size: 0.875rem; }
.dj-banner-sub { font-size: 0.75rem; color: var(--fg-2); margin-top: 2px; }

.dj-progress { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.dj-progress-bar { flex: 1; height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.dj-progress-fill { height: 100%; background: var(--accent); transition: width 240ms cubic-bezier(.4,.7,.4,1); }
.dj-progress-meta { display: flex; gap: 6px; font-size: 0.75rem; color: var(--fg-2); }
.dj-progress-meta .num { font-family: var(--font-mono); color: var(--fg-0); font-weight: 700; }

.dj-group { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.dj-group-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.dj-group-hd strong { font-size: 0.8125rem; }
.dj-group-hd .num { font-family: var(--font-mono); margin-left: auto; }

.dj-list { display: flex; flex-direction: column; }
.dj-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 100ms;
}
.dj-item:last-child { border-bottom: 0; }
.dj-item:hover { background: var(--bg-2); }
.dj-item.checked .dj-item-label { color: var(--fg-2); text-decoration: line-through; }
.dj-item.missing {
  background: color-mix(in oklch, var(--danger-soft) 30%, transparent);
  animation: dj-shake 0.4s ease;
}
@keyframes dj-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.dj-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: var(--bg-1);
  display: grid; place-items: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 120ms;
}
.dj-check.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.dj-check:hover { border-color: var(--accent); }

.dj-item-body { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.dj-item-label { font-size: 0.8125rem; font-weight: 500; flex: 1; }
.dj-item-meta { font-size: 0.6875rem; color: var(--ok); font-family: var(--font-mono); white-space: nowrap; }

.dj-tools { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }

/* ============ Mobile companion — responsive overrides ============ */
@media (max-width: 720px) {
  /* ── Slice 5: nav is a slide-in drawer; content spans the full width ── */
  .app { grid-template-columns: 1fr !important; }
  /* Sidebar detaches into an off-canvas drawer, opened by the topbar hamburger.
     z-index 96 sits above content + the notif/detail slide-overs (90/91) but below every
     slice-4 full-screen modal (100–200), so a modal always covers the nav. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(280px, 84vw);
    z-index: 96;
    overflow-y: auto;
    padding-left: env(safe-area-inset-left);
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 8px 0 40px -12px oklch(0 0 0 / 0.55);
  }
  .sidebar.nav-open { transform: translateX(0); }
  .sb-scrim.on {
    display: block; position: fixed; inset: 0; z-index: 95;
    background: oklch(0 0 0 / 0.45); animation: crm-fade-in 140ms ease;
  }
  [data-theme="light"] .sb-scrim.on { background: oklch(0.5 0 0 / 0.30); }
  body.nav-locked { overflow: hidden; }
  /* Drawer always shows the FULL sidebar (labels, counts, group headers, account name),
     ignoring the desktop narrow/wide tweak — a collapsed desktop rail still opens usable here. */
  .sidebar .brand-text { display: flex !important; }
  .sidebar-brand { flex-direction: row !important; padding: 14px 16px; min-height: 56px; }
  .sb-collapse { display: none; }                 /* desktop-only rail toggle, meaningless in a drawer */
  .sidebar .sb-section h6 { display: block !important; }
  .sidebar .sb-item { justify-content: flex-start !important; padding: 12px 12px; min-height: 44px; }
  .sidebar .sb-item span:not(.sb-count) { display: inline !important; }
  .sidebar .sb-item .sb-count { display: inline !important; }
  .sidebar .sb-foot { justify-content: flex-start !important; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sidebar .sb-foot .who { display: flex !important; }
  /* Hamburger trigger becomes visible in the mobile topbar */
  .topbar-menu { display: grid; }

  .content-inner { padding: 12px; }
  .topbar { padding: 8px 10px; min-height: 48px; gap: 8px; }
  .topbar .search { display: none; }
  .topbar .crumbs { font-size: 0.75rem; }
  .top-actions { gap: 4px; }
  .top-actions .btn span { display: none; }
  .top-actions .btn { padding: 7px; }

  .page-hd { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-hd h1 { font-size: 1.125rem; }
  .page-hd .right { width: 100%; flex-wrap: wrap; }

  .row-2 { grid-template-columns: 1fr !important; }
  .row-3 { grid-template-columns: 1fr !important; }
  .row-4 { grid-template-columns: 1fr 1fr !important; }

  /* Unit hero collapses */
  .unit-hero { grid-template-columns: 1fr; }
  .unit-facts { grid-template-columns: 1fr 1fr; }
  .unit-info h1 { font-size: 1.25rem; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .tab { font-size: 0.75rem; padding: 8px 10px; }
  .tab .ct { display: none; }

  /* Tables horizontal scroll */
  .dtable { font-size: 0.75rem; }
  .card > div[style*="overflow"] { overflow-x: auto; }
  .dtable th, .dtable td { white-space: nowrap; }

  /* Kanbans get larger touch targets */
  .loc-col, .kan-col { flex: 0 0 220px; }

  /* Filterbar wraps cleanly */
  .filterbar { flex-wrap: wrap; }
  .filterbar input { width: 100% !important; }

  /* Messages collapse to single pane */
  .msg-wrap { grid-template-columns: 1fr !important; height: calc(100vh - 200px); }
  .msg-channels, .msg-thread-list { display: none !important; }

  /* Invoice modal becomes fullscreen (100dvh so the footer bar stays above browser chrome) */
  .inv-modal { padding: 0; }
  .inv-modal-inner { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .inv-body { grid-template-columns: 1fr; }
  .inv-form { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .inv-preview { display: none; }
  .inv-foot { flex-wrap: wrap; gap: 8px; }
  .inv-foot-totals { width: 100%; justify-content: space-between; }
  .inv-foot-actions { width: 100%; }
  .inv-foot-actions .btn { flex: 1; justify-content: center; }

  /* Add Unit wizard fullscreen */
  .addu-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .addu-form-grid { grid-template-columns: 1fr; }
  .addu-decode-grid { grid-template-columns: 1fr 1fr; }
  .addu-stepper { padding: 8px 10px; gap: 0; }
  .addu-step span { display: none; }
  .addu-body { padding: 16px; }

  /* Deal jacket */
  .dj-banner { flex-wrap: wrap; }
  .dj-banner button { width: 100%; justify-content: center; margin-left: 0 !important; margin-top: 8px; }
}

/* Honor reduced-motion: the nav drawer snaps open/closed instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
}

@media (max-width: 480px) {
  .row-4 { grid-template-columns: 1fr !important; }
  .kpi .value { font-size: 1.375rem; }
}


/* ─── Invoices: grouped by unit, winner/loser markup ─── */
.inv-groups { display: flex; flex-direction: column; gap: 14px; }
.inv-group {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.inv-group-sold { border-color: color-mix(in oklch, var(--info) 30%, var(--line-soft)); }
.inv-group-active { border-color: color-mix(in oklch, var(--ok) 25%, var(--line-soft)); }

.inv-group-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.inv-group-hd:hover { background: var(--bg-3); }
.inv-group-hd > .col { flex: 0 1 auto; min-width: 0; }
.inv-group-stats { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.inv-group-soldto {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 6px 12px;
  background: color-mix(in oklch, var(--ok-soft) 40%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--ok) 35%, var(--line));
  border-radius: 8px;
}
.inv-group-soldto .upcase { font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--ok); font-weight: 700; }
.inv-group-soldto strong { font-size: 0.8125rem; }

.inv-group-table { width: 100%; }
.inv-group-table th { background: var(--bg-1); }
.inv-row-won { background: color-mix(in oklch, var(--ok-soft) 18%, transparent); }
.inv-row-won:hover { background: color-mix(in oklch, var(--ok-soft) 35%, var(--bg-2)) !important; }
.inv-row-lost { opacity: 0.65; }
.inv-row-lost td { color: var(--fg-2); }
.inv-row-lost:hover { opacity: 1; }
.inv-row-lost .mono { text-decoration: line-through; text-decoration-color: var(--fg-3); }

.inv-group-standalone .inv-group-hd { background: var(--bg-1); }
.inv-group-standalone { border-color: var(--line-soft); }

/* ──── Bottom action bar ──── */
.inv-foot {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
}
.inv-foot-totals { display: flex; align-items: center; gap: 10px; }
.inv-foot-total { font-size: 1.375rem; color: var(--accent); letter-spacing: -0.01em; }
.inv-foot-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* AI route badge */
.ai-route {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in oklch, var(--accent-soft) 50%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--line));
  color: var(--accent);
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}

/* helper */
.flex { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.text-sm { font-size: 0.75rem; } .text-xs { font-size: 0.6875rem; }
.fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .fg-accent { color: var(--accent); }
.w-full { width: 100%; }
.grow { flex: 1; min-width: 0; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ============ Customers / CRM ============ */
.crm-table tbody tr { cursor: pointer; transition: background 80ms ease; }
.crm-table tbody tr:hover { background: var(--bg-2); }
.crm-table tbody tr.row-selected { background: color-mix(in oklch, var(--accent-soft) 35%, var(--bg-1)); box-shadow: inset 3px 0 0 var(--accent); }
.crm-table-card { position: relative; }

/* Drawer */
.crm-scrim {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.42);
  z-index: 90;
  animation: crm-fade-in 140ms ease;
}
[data-theme="light"] .crm-scrim { background: oklch(0.5 0 0 / 0.30); }
.crm-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(620px, 96vw);
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px -16px oklch(0 0 0 / 0.5);
  z-index: 91;
  display: flex; flex-direction: column;
  animation: crm-slide-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes crm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes crm-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.crm-drawer-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-0);
}
.crm-drawer-bd {
  flex: 1; overflow: auto; padding: 22px 24px 32px;
}

.crm-hero {
  display: flex; align-items: flex-start; gap: 14px;
}
.crm-hero h2 { letter-spacing: -0.015em; }

.crm-quick {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.crm-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 18px;
}
.crm-stat {
  padding: 12px 14px;
  background: var(--bg-1);
}
.crm-stat .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem; font-weight: 700;
  margin-top: 4px; letter-spacing: -0.01em;
}
.crm-stat .value.text-base { font-size: 0.8125rem; font-family: var(--font-sans); }

.crm-tabs {
  margin-top: 18px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: -22px;
  background: var(--bg-1);
  z-index: 2;
  padding-top: 2px;
}

.crm-tab-body { padding-top: 18px; }
.crm-section { margin-bottom: 22px; }
.crm-section > h4 {
  margin: 0 0 10px 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-2);
}

.crm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.crm-field .upcase {
  font-size: 0.625rem; margin-bottom: 3px;
}
.crm-field > div:last-child { font-size: 0.8125rem; color: var(--fg-1); }

/* unit card / deal card / thread card / note */
.crm-unit-card, .crm-deal-card, .crm-thread-card, .crm-note {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease;
}
.crm-unit-card { margin-bottom: 0; }
.crm-deal-card, .crm-thread-card { margin-bottom: 8px; }
.crm-thread-card { display: block; cursor: pointer; }
.crm-unit-card:hover, .crm-deal-card:hover, .crm-thread-card:hover {
  border-color: var(--accent-dim);
  background: color-mix(in oklch, var(--bg-2) 85%, var(--accent-soft));
}
.crm-note { cursor: default; display: block; margin-bottom: 8px; }
.crm-note:hover { border-color: var(--line-soft); background: var(--bg-2); }

/* note input */
.crm-note-input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.crm-note-input textarea {
  width: 100%; resize: vertical;
  background: transparent; border: 0; outline: 0;
  font: inherit; color: var(--fg-0);
  font-size: 0.8125rem; line-height: 1.45;
  min-height: 60px;
}
.crm-note-input textarea::placeholder { color: var(--fg-3); }

/* timeline */
.crm-timeline {
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  padding-left: 4px;
}
.crm-tl-item { display: flex; gap: 10px; align-items: flex-start; position: relative; }
.crm-tl-item::before {
  content: "";
  position: absolute; left: 9px; top: 22px; bottom: -14px;
  width: 1px; background: var(--line-soft);
}
.crm-tl-item:last-child::before { display: none; }
.crm-tl-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-2);
  flex-shrink: 0;
  z-index: 1;
}
.crm-tl-dot.ok      { background: color-mix(in oklch, var(--ok-soft) 60%, var(--bg-2)); color: var(--ok); border-color: color-mix(in oklch, var(--ok) 25%, var(--line)); }
.crm-tl-dot.info    { background: color-mix(in oklch, var(--info-soft) 60%, var(--bg-2)); color: var(--info); border-color: color-mix(in oklch, var(--info) 25%, var(--line)); }
.crm-tl-dot.warn    { background: color-mix(in oklch, var(--warn-soft) 60%, var(--bg-2)); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); }
.crm-tl-dot.accent  { background: color-mix(in oklch, var(--accent-soft) 60%, var(--bg-2)); color: var(--accent); border-color: color-mix(in oklch, var(--accent) 25%, var(--line)); }

.crm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  padding: 40px 20px;
}
.crm-empty h4 { margin: 0; font-size: 0.9375rem; }
.crm-empty p { margin: 0; max-width: 320px; font-size: 0.8125rem; line-height: 1.5; }


/* ============ Accounting ============ */
.acc-legend {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  vertical-align: -1px; margin-right: 4px;
}
.acc-legend.in  { background: var(--ok); }
.acc-legend.out { background: var(--danger); }

.acc-cf-chart {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px; padding: 8px 0 0;
}
.acc-cf-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.acc-cf-bars {
  display: flex; gap: 3px; align-items: flex-end;
  height: 140px;
}
.acc-cf-bar {
  width: 14px; border-radius: 3px 3px 0 0;
  transition: opacity 100ms ease;
}
.acc-cf-bar.in  { background: var(--ok); }
.acc-cf-bar.out { background: var(--danger); opacity: 0.78; }
.acc-cf-bar:hover { opacity: 1; }
.acc-cf-label {
  font-size: 0.6875rem; color: var(--fg-2); font-weight: 600; margin-top: 4px;
}

/* P&L */
.acc-pl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  padding: 8px 0;
}
.acc-pl-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 18px;
}
.acc-pl-row.major { font-weight: 600; color: var(--fg-1); }
.acc-pl-row.sub { color: var(--fg-2); font-size: 0.75rem; }
.acc-pl-row.sub.indent { padding-left: 32px; }
.acc-pl-row.total {
  font-weight: 700; color: var(--fg-0);
  border-top: 1px solid var(--line-soft);
  margin-top: 4px; padding-top: 8px; padding-bottom: 6px;
}
.acc-pl-row.total.ok { color: var(--ok); }
.acc-pl-row.final {
  font-weight: 800; font-size: 0.9375rem;
  border-top: 2px solid var(--line);
  margin-top: 6px; padding-top: 12px; padding-bottom: 10px;
  background: color-mix(in oklch, var(--accent-soft) 28%, var(--bg-1));
  margin-left: 0; margin-right: 0;
}
.acc-pl-row.final.positive { color: var(--ok); }
.acc-pl-row.final.negative { color: var(--danger); }

/* table foot */
.dtable tfoot td {
  padding: 12px var(--row-pad-x);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

/* Sales tax grid */
.acc-tax-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.acc-tax-cell {
  display: flex; flex-direction: column;
  padding: 12px; gap: 2px;
  background: var(--bg-2); border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.acc-tax-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 12px;
  background: color-mix(in oklch, var(--accent-soft) 30%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  border-radius: var(--radius);
  font-size: 0.75rem; color: var(--fg-1);
}
.acc-tax-note svg { color: var(--accent); flex-shrink: 0; }

/* 1099 row */
.acc-1099-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* Inventory valuation */
.acc-inv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.acc-inv-stat {
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.acc-inv-bar {
  position: relative;
  height: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 12px;
}
.acc-inv-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent-soft) 70%, transparent), var(--accent));
  transition: width 200ms ease;
}
.acc-inv-marker {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.acc-inv-bar-labels {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px;
  font-size: 0.6875rem; color: var(--fg-0); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 1;
}

/* unit P&L table — slightly tighter */
.acc-unit-pl thead th { font-size: 0.625rem; }

/* delta-down */
.delta-down { color: var(--danger); }


/* ============ Tasks ============ */
.task-show-done {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: var(--fg-2);
  cursor: pointer; user-select: none;
}
.task-show-done input { accent-color: var(--accent); }

/* Quick add */
.task-quickadd-collapsed {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--fg-3);
  font: inherit; font-size: 0.8125rem;
  transition: all 100ms ease;
}
.task-quickadd-collapsed:hover { border-color: var(--accent-dim); color: var(--fg-2); border-style: solid; }
.task-quickadd-collapsed kbd {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.6875rem;
  padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--fg-3);
}
.task-quickadd {
  background: var(--bg-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}
.task-quickadd-input {
  width: 100%; background: transparent; border: 0; outline: 0;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--fg-0);
  padding: 4px 0;
}
.task-quickadd-input::placeholder { color: var(--fg-3); }
.task-quickadd-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.task-input, .task-input-date {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit; font-size: 0.75rem;
  color: var(--fg-1);
  outline: none;
}
.task-input:focus, .task-input-date:focus { border-color: var(--accent); }

/* List view */
.task-list { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.task-section { }
.task-section-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 8px;
}
.task-section-bd {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 100ms ease;
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--bg-2); }
.task-row.is-done { opacity: 0.55; }
.task-row.is-done .task-row-title { text-decoration: line-through; }

.task-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--fg-0);
  margin-top: 2px;
  transition: all 100ms ease;
}
.task-check:hover { border-color: var(--accent); }
.task-check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.task-pri {
  width: 4px; align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}
.task-pri.pri-high { background: var(--danger); }
.task-pri.pri-med  { background: var(--warn); }
.task-pri.pri-low  { background: var(--info); opacity: 0.5; }

.task-row-body { flex: 1; min-width: 0; }
.task-row-title { font-size: 0.8125rem; font-weight: 500; color: var(--fg-0); line-height: 1.35; }
.task-row-notes { font-size: 0.75rem; color: var(--fg-2); margin-top: 3px; line-height: 1.45; }
.task-row-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.task-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 2px 8px; border-radius: 999px;
  cursor: pointer; font-family: var(--font-mono);
}
.task-link:hover { color: var(--accent); border-color: var(--accent-dim); }

.task-row-side {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.task-due {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 76px;
  text-align: right;
}
.task-row-x { opacity: 0; transition: opacity 80ms; }
.task-row:hover .task-row-x { opacity: 1; }

/* Board view */
.task-board {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.task-board-col {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 400px;
}
.task-board-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.task-board-bd {
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.task-board-empty {
  padding: 20px;
  text-align: center;
  color: var(--fg-3);
  font-size: 0.75rem;
}

.task-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: all 100ms ease;
}
.task-card:hover { border-color: var(--accent-dim); }
.task-card-hd { display: flex; align-items: center; gap: 6px; }
.task-card-hd .task-pri { width: 3px; height: 14px; }
.task-card-title { font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.task-card-link {
  font-size: 0.6875rem; color: var(--fg-2);
  font-family: var(--font-mono);
  padding: 4px 0;
}
.task-card-link:hover { color: var(--accent); }
.task-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.task-card-actions { display: flex; gap: 2px; }
.task-card-actions .iconbtn { width: 24px; height: 24px; }

/* Calendar */
.task-cal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.task-cal-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.task-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--line-soft);
  gap: 1px;
  border-bottom: 1px solid var(--line);
}
.task-cal-dow {
  padding: 8px 12px;
  background: var(--bg-2);
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.task-cal-cell {
  background: var(--bg-1);
  border: 0; padding: 6px 8px 8px;
  min-height: 96px;
  display: flex; flex-direction: column;
  text-align: left; cursor: pointer;
  color: var(--fg-0); font: inherit;
  transition: background 80ms;
}
.task-cal-cell.blank { background: var(--bg-0); cursor: default; }
.task-cal-cell:not(.blank):hover { background: var(--bg-2); }
.task-cal-cell.today {
  background: color-mix(in oklch, var(--accent-soft) 35%, var(--bg-1));
}
.task-cal-cell.today .task-cal-day-num { color: var(--accent); font-weight: 800; }
.task-cal-cell.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.task-cal-day-num {
  font-size: 0.75rem; font-weight: 600; color: var(--fg-1);
  margin-bottom: 4px;
}
.task-cal-events {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; overflow: hidden;
}
.task-cal-event {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.625rem; line-height: 1.2;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--bg-2);
  overflow: hidden;
}
.task-cal-event.done { opacity: 0.55; text-decoration: line-through; }
.task-cal-event-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
}
.task-cal-event.pri-high .task-cal-event-dot { background: var(--danger); }
.task-cal-event.pri-med  .task-cal-event-dot { background: var(--warn); }
.task-cal-event.pri-low  .task-cal-event-dot { background: var(--info); }
.task-cal-event-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg-1);
}
.task-cal-more {
  font-size: 0.625rem; color: var(--fg-3); padding: 1px 4px;
}

.task-cal-detail {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.task-cal-detail-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.task-cal-detail-hd h4 { margin: 0; font-size: 0.875rem; }
.task-cal-detail-bd { padding: 0; }
.task-cal-detail-bd .task-row { background: transparent; }

.db-task {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  cursor: default;
}
.db-task .task-pri { width: 3px; }
.db-task .task-check { margin-top: 0; }


/* ============ Notifications panel ============ */
.notif-scrim {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.32);
  z-index: 90;
  animation: crm-fade-in 140ms ease;
}
[data-theme="light"] .notif-scrim { background: oklch(0.5 0 0 / 0.20); }
.notif-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 96vw);
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px -12px oklch(0 0 0 / 0.4);
  z-index: 91;
  display: flex; flex-direction: column;
  animation: crm-slide-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.notif-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-0);
}
.notif-bd {
  flex: 1; overflow: auto;
  padding: 4px 0 16px;
}

.notif-group { margin-bottom: 4px; }
.notif-group-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 6px;
}
.notif-group-hd .upcase {
  font-size: 0.625rem;
}

.notif-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; font: inherit; color: var(--fg-0);
  transition: background 80ms ease;
}
.notif-row:hover { background: var(--bg-2); }
.notif-row.unread { background: color-mix(in oklch, var(--accent-soft) 12%, transparent); }
.notif-row.unread:hover { background: color-mix(in oklch, var(--accent-soft) 22%, var(--bg-2)); }
.notif-row.read { opacity: 0.75; }

.notif-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-1);
}
.notif-icon.danger { background: color-mix(in oklch, var(--danger-soft) 60%, var(--bg-2)); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, var(--line)); }
.notif-icon.warn   { background: color-mix(in oklch, var(--warn-soft) 60%, var(--bg-2));   color: var(--warn);   border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); }
.notif-icon.info   { background: color-mix(in oklch, var(--info-soft) 60%, var(--bg-2));   color: var(--info);   border-color: color-mix(in oklch, var(--info) 25%, var(--line)); }
.notif-icon.ok     { background: color-mix(in oklch, var(--ok-soft) 60%, var(--bg-2));     color: var(--ok);     border-color: color-mix(in oklch, var(--ok) 25%, var(--line)); }

.notif-title-row { display: flex; align-items: center; gap: 8px; }
.notif-title { font-size: 0.8125rem; font-weight: 600; color: var(--fg-0); }
.notif-body  { font-size: 0.75rem; color: var(--fg-1); margin-top: 2px; line-height: 1.4; }
.notif-meta  { font-size: 0.6875rem; color: var(--fg-3); margin-top: 4px; font-family: var(--font-mono); }
.notif-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.notif-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: 64px 24px;
}
.notif-empty h4 { margin: 0; font-size: 0.9375rem; }
.notif-empty p { margin: 0; max-width: 240px; }

/* tweak the topbar dot to be brighter for actual unread state */
.iconbtn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--bg-0);
}


/* ============ Add Customer modal ============ */
.ac-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0 0 0 / 0.45);
  display: grid; place-items: center;
  padding: 24px;
  animation: crm-fade-in 140ms ease;
}
[data-theme="light"] .ac-overlay { background: oklch(0.5 0 0 / 0.30); }
.ac-modal {
  width: min(720px, 100%);
  max-height: 92vh;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -16px oklch(0 0 0 / 0.5), 0 0 0 1px var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ac-pop-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes ac-pop-in {
  from { transform: translateY(8px) scale(0.99); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.ac-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-0);
}
.ac-hd > div:first-child { flex: 1; }
.ac-body {
  flex: 1; overflow: auto;
  padding: 18px 22px;
}
.ac-section { margin-bottom: 20px; }
.ac-section:last-child { margin-bottom: 0; }
.ac-section h4 {
  margin: 0 0 10px 0;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-2);
}
.ac-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
}
.ac-grid > .inv-field:first-child,
.ac-grid > .inv-field:nth-child(2) {
  grid-column: span 2;
}
.ac-req { color: var(--danger); font-weight: 700; }
.ac-err { color: var(--danger); font-size: 0.6875rem; margin-top: 3px; }
.ac-hint { color: var(--fg-3); font-size: 0.6875rem; margin-top: 3px; }
.ac-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-0);
}

/* F&I margin chip in invoice creator */
.inv-fi-margin {
  font-size: 0.625rem;
  font-family: var(--font-mono);
  color: var(--ok);
  background: color-mix(in oklch, var(--ok-soft) 50%, var(--bg-2));
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 8px;
  border: 1px solid color-mix(in oklch, var(--ok) 20%, var(--line));
}
.inv-fi-row.on .inv-fi-margin {
  background: var(--ok);
  color: var(--bg-0);
  border-color: var(--ok);
}
[data-theme="light"] .inv-fi-row.on .inv-fi-margin { color: #fff; }


/* ============ Photo Gallery ============ */
.pg-wrap { display: flex; flex-direction: column; gap: 14px; }

.pg-stat-bar {
  display: flex; align-items: center; gap: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.pg-stat .upcase { font-size: 0.625rem; }
.pg-stat .num { margin-top: 4px; }

.pg-completeness {
  display: flex; align-items: center; margin-top: 4px;
}
.pg-completeness-bar {
  flex: 1; height: 8px;
  background: var(--bg-2);
  border-radius: 4px; overflow: hidden;
}
.pg-completeness-fill {
  height: 100%; background: linear-gradient(90deg, var(--warn), var(--ok));
  transition: width 200ms ease;
}

/* Cover hero */
.pg-cover {
  position: relative;
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
}
.pg-cover-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 20px;
  display: flex; align-items: flex-end; gap: 12px;
  background: linear-gradient(to top, oklch(0 0 0 / 0.72), transparent);
  pointer-events: none;
}
.pg-cover-overlay > div:first-child { flex: 1; }
.pg-cover-overlay .btn { pointer-events: auto; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(8px); }

.pg-filterbar { margin: 0; }

/* Grid */
.pg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.pg-cell {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 100ms ease;
}
.pg-cell:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px oklch(0 0 0 / 0.4);
}
.pg-cell.is-cover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 30%, transparent);
}
.pg-cell .pg-tile { aspect-ratio: 4 / 3; }
.pg-cell-meta { padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.pg-cell-label { font-size: 0.75rem; font-weight: 600; color: var(--fg-1); }

.pg-cover-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: var(--accent-ink);
  padding: 3px 8px; border-radius: 999px;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.pg-cell-actions {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity 100ms;
}
.pg-cell:hover .pg-cell-actions { opacity: 1; }
.pg-cell-actions .iconbtn {
  width: 26px; height: 26px;
  background: oklch(0 0 0 / 0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.pg-cell-actions .iconbtn:hover { background: oklch(0 0 0 / 0.75); }

.pg-empty-category {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 40px 20px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* Tile — colored placeholder with stripes + label */
.pg-tile {
  position: relative;
  width: 100%; height: 100%;
  background: oklch(0.42 0.06 var(--tile-hue, 220));
  overflow: hidden;
  color: #fff;
}
[data-theme="light"] .pg-tile {
  background: oklch(0.78 0.05 var(--tile-hue, 220));
  color: oklch(0.20 0.04 var(--tile-hue, 220));
}
.pg-tile.hero { font-size: 0.875rem; }
.pg-tile-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -28deg,
    transparent 0 14px,
    rgba(255,255,255,0.04) 14px 28px
  );
}
[data-theme="light"] .pg-tile-stripes {
  background-image: repeating-linear-gradient(
    -28deg,
    transparent 0 14px,
    rgba(0,0,0,0.03) 14px 28px
  );
}
.pg-tile-v0 { background: oklch(0.40 0.07 var(--tile-hue, 220)); }
.pg-tile-v1 { background: oklch(0.45 0.06 calc(var(--tile-hue, 220) + 15)); }
.pg-tile-v2 { background: oklch(0.38 0.08 calc(var(--tile-hue, 220) - 10)); }
[data-theme="light"] .pg-tile-v0 { background: oklch(0.80 0.05 var(--tile-hue, 220)); }
[data-theme="light"] .pg-tile-v1 { background: oklch(0.78 0.06 calc(var(--tile-hue, 220) + 15)); }
[data-theme="light"] .pg-tile-v2 { background: oklch(0.82 0.05 calc(var(--tile-hue, 220) - 10)); }

.pg-tile-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 12px;
  text-align: center;
  font-family: var(--font-mono);
  z-index: 1;
}
.pg-tile-make { font-size: 0.5625rem; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.12em; }
.pg-tile-label { font-size: 0.75rem; font-weight: 700; margin-top: 4px; }
.pg-tile.hero .pg-tile-make { font-size: 0.6875rem; }
.pg-tile.hero .pg-tile-label { font-size: 1.125rem; margin-top: 8px; letter-spacing: -0.01em; }

.pg-tile-badge {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(0,0,0,0.45);
  padding: 3px 7px; border-radius: 4px;
  font-family: var(--font-sans);
  z-index: 1;
}
[data-theme="light"] .pg-tile-badge { background: rgba(255,255,255,0.5); color: oklch(0.25 0 0); }

/* Lightbox */
.pg-lightbox {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.92);
  z-index: 100;
  display: grid; grid-template-rows: 1fr auto;
  padding: 60px 80px 0;
  animation: crm-fade-in 160ms ease;
}
[data-theme="light"] .pg-lightbox { background: oklch(0.10 0 0 / 0.90); }
.pg-lb-stage {
  display: grid; place-items: center;
  overflow: hidden;
  height: 100%;
}
.pg-lb-stage .pg-tile {
  width: min(900px, 100%); height: min(70vh, 600px);
  border-radius: var(--radius);
}
.pg-lb-stage .pg-tile-label { font-size: 1.375rem; }

.pg-lb-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  color: #fff; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.pg-lb-close:hover { background: rgba(255,255,255,0.20); }
.pg-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  color: #fff; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.pg-lb-nav.prev { left: 20px; }
.pg-lb-nav.next { right: 20px; }
.pg-lb-nav:hover { background: rgba(255,255,255,0.20); }

.pg-lb-info {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  color: #eee;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pg-lb-info h3 { color: #fff; }
.pg-lb-info .upcase { color: rgba(255,255,255,0.55) !important; }
.pg-lb-info .fg-3 { color: rgba(255,255,255,0.5) !important; }
.pg-lb-info .btn {
  background: rgba(255,255,255,0.12);
  color: #fff; border-color: rgba(255,255,255,0.25);
}
.pg-lb-info .btn:hover { background: rgba(255,255,255,0.20); }


/* ============ Deal drawer specifics ============ */
.deal-drawer { width: min(580px, 96vw); }
.deal-stats { grid-template-columns: repeat(5, 1fr); }
.deal-stats .crm-stat .value { font-size: 0.875rem; }
.deal-stats .crm-stat .upcase { font-size: 0.5625rem; }
.deal-link-cust {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: var(--accent);
  background: color-mix(in oklch, var(--accent-soft) 35%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  padding: 3px 9px; border-radius: 999px;
  cursor: pointer; font: inherit;
}
.deal-link-cust:hover { background: color-mix(in oklch, var(--accent-soft) 55%, var(--bg-2)); }
.deal-unit-card { padding: 14px; }
.deal-inv-card { padding: 12px 14px; }
.deal-thread { padding: 12px 14px; }
.deal-resolve { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.deal-resolve-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}

/* ============ Reports v2 ============ */
.rep-yoy {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.rep-yoy-col {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.rep-yoy-bars {
  display: flex; gap: 6px; align-items: flex-end;
  height: 180px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rep-yoy-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  transition: opacity 80ms;
}
.rep-yoy-bar:hover { opacity: 0.85; }
.rep-yoy-bar.rev   { background: color-mix(in oklch, var(--accent) 55%, var(--bg-3)); }
.rep-yoy-bar.gross { background: var(--accent); }
.rep-yoy-bar.net   { background: var(--ok); }
.rep-yoy-year {
  font-size: 0.875rem; color: var(--fg-1);
  margin-top: 2px;
}
.rep-yoy-row {
  display: flex; justify-content: space-between;
  font-size: 0.6875rem;
}
.rep-yoy-row .upcase { font-size: 0.625rem; }
.rep-yoy-delta {
  margin-top: 4px; padding-top: 6px;
  border-top: 1px dashed var(--line-soft);
  font-size: 0.6875rem; font-family: var(--font-mono); font-weight: 600;
  text-align: right;
}
.rep-yoy-legend {
  display: flex; gap: 18px; justify-content: center;
  font-size: 0.6875rem; color: var(--fg-2);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.rep-yoy-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; vertical-align: -2px; margin-right: 5px;
}
.rep-yoy-swatch.rev   { background: color-mix(in oklch, var(--accent) 55%, var(--bg-3)); }
.rep-yoy-swatch.gross { background: var(--accent); }
.rep-yoy-swatch.net   { background: var(--ok); }

/* Class comparison cards */
.rep-class-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rep-class-card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  position: relative;
}
.rep-class-card.class-8 { border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); }
.rep-class-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.rep-class-stat .upcase { font-size: 0.625rem; }
.rep-class-stat .num { margin-top: 2px; }

/* Best / worst ranking */
.rep-rank { display: flex; flex-direction: column; gap: 8px; }
.rep-rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.rep-rank-pos {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-weight: 800; font-size: 0.8125rem;
  font-family: var(--font-mono);
  background: var(--bg-3);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--line));
}
.rep-rank-pos.warn { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, var(--line)); }
.rep-rank-sep {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); font-weight: 600;
  text-align: center;
  margin: 8px 0 4px;
  display: flex; align-items: center; gap: 10px;
}
.rep-rank-sep::before, .rep-rank-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

/* Bigger grid for vendor modal */
.ac-modal .ac-grid .inv-field.span-full { grid-column: 1 / -1; }


/* ============ Buying / Acquisition pipeline ============ */
.buying-pipe .deal-col { min-width: 280px; }

.buying-card .buying-card-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.buying-card-prices {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.buying-card-prices .upcase { font-size: 0.5625rem; }
.buying-card-prices .num { font-size: 0.75rem; }
.buying-card-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.buying-gross {
  flex: 1;
  font-size: 0.6875rem; color: var(--fg-2);
}
.buying-gross.good strong { color: var(--ok); }
.buying-gross strong { font-family: var(--font-mono); font-weight: 700; }

.buying-hot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
}
.buying-hot:hover { background: var(--bg-2); }

/* Drawer */
.buying-drawer { width: min(560px, 96vw); }

/* Won pipeline */
.buying-won-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.buying-won-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-align: center;
}
.buying-won-step.done {
  background: color-mix(in oklch, var(--ok-soft) 50%, var(--bg-2));
  border-color: color-mix(in oklch, var(--ok) 30%, var(--line));
  color: var(--ok);
}
.buying-won-step.pending {
  color: var(--fg-2);
}
.buying-won-step span { font-size: 0.75rem; font-weight: 600; }
.buying-won-step .btn-sm { font-size: 0.6875rem; padding: 4px 10px; }


/* ============ Vendor drawer ============ */
.vendor-drawer { width: min(620px, 96vw); }
.vendor-stats { grid-template-columns: repeat(4, 1fr); }
.vendor-units-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vendor-unit-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 100ms ease;
}
.vendor-unit-tile:hover {
  border-color: var(--accent-dim);
  background: color-mix(in oklch, var(--bg-2) 85%, var(--accent-soft));
}
.vendor-drawer .dtable tbody tr { cursor: pointer; }
.vendor-drawer .dtable tbody tr:hover { background: var(--bg-2); }


/* ============ Internal team chat — log entry kind ============ */
.msg-log {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.msg-log-hd {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.msg-log-hd .upcase {
  font-size: 0.625rem; font-weight: 600;
  color: var(--fg-2); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.msg-log-hd .upcase strong { color: var(--fg-0); }
.msg-log-body {
  font-size: 0.8125rem; color: var(--fg-1);
  line-height: 1.5;
  padding-left: 17px;
  font-style: italic;
}

/* ============ Inventory · Advanced filters & sort menu ============ */
.inv-adv {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
  margin-bottom: 14px;
}
.inv-adv-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}
.inv-adv-field { display: flex; flex-direction: column; gap: 6px; }
.inv-adv-field > label.upcase {
  font-size: 0.625rem; letter-spacing: 0.06em; font-weight: 600;
  color: var(--fg-3); text-transform: uppercase;
}
.inv-adv-range { display: flex; align-items: center; gap: 6px; }
.inv-adv-range .inv-input { padding: 6px 8px; font-size: 0.75rem; flex: 1 1 0; min-width: 0; }
.inv-adv-range > span { font-size: 0.6875rem; }

.inv-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 4px;
  min-width: 250px;
}
.inv-sort-item {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
  font: inherit;
  font-size: 0.7812rem;
  color: var(--fg-1);
  cursor: pointer;
}
.inv-sort-item:hover { background: var(--bg-2); }
.inv-sort-item.active { color: var(--accent); background: var(--bg-2); }

/* trunc helper used in tables */
.trunc {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; max-width: 100%; vertical-align: bottom;
}

/* Editable remarks textarea inline state */
.remarks-edit {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--fg-0);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 80px;
}
.remarks-edit:focus { border-color: var(--accent); background: var(--bg-0); outline: 0; }
.remarks-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }

/* ===== Remarks audit log ===== */
.remark-compose { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.remark-log { display: flex; flex-direction: column; gap: 14px; }
.remark-item { display: flex; gap: 11px; }
.remark-body {
  flex: 1; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 9px 13px;
}
.remark-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.remark-meta strong { font-size: 0.7812rem; color: var(--fg-0); }
.remark-time { font-size: 0.6562rem; color: var(--fg-3); margin-left: auto; white-space: nowrap; }
.remark-text { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-1); white-space: pre-wrap; word-break: break-word; }

/* ===== Recon timeline · interactive ===== */
.recon-help {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; margin-bottom: 16px; border-radius: 9px;
  font-size: 0.75rem; line-height: 1.5; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.recon-help svg { color: var(--fg-3); flex: none; margin-top: 1px; }
.recon-help strong { color: var(--fg-1); }

.recon-step .step-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step-badge {
  font-size: 0.5938rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px;
}
.step-badge.todo { background: var(--bg-3); color: var(--fg-3); }
.step-badge.skip { background: var(--bg-3); color: var(--fg-3); opacity: 0.7; }

.recon-step .step-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.step-cost { font-weight: 700; font-size: 0.8125rem; color: var(--fg-1); font-family: var(--font-mono); }
.step-btns { display: flex; align-items: center; gap: 6px; }
.recon-step.editing { background: color-mix(in oklch, var(--accent) 5%, var(--bg-1)); }

.recon-step-edit { grid-column: 1 / -1; margin-top: 12px; }
.step-editor {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 14px;
}
.step-editor-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.se-field { display: flex; flex-direction: column; gap: 5px; }
.se-field .upcase { font-size: 0.625rem; color: var(--fg-3); }
.se-field .inv-input { padding: 7px 10px; font-size: 0.7812rem; margin: 0; }
.se-field .inv-money-input { margin: 0; }
.step-editor-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.step-editor-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .step-editor-grid { grid-template-columns: 1fr; } }

/* ===== Google source bar (Sheets / Drive) ===== */
.src-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 14px;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 10px;
}
.src-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.src-ico.sheets { background: #1a8a52; }
.src-ico.drive  { background: #3367d6; }
.src-text { flex: 1; min-width: 0; }
.src-title { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--fg-0); }
.src-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-synced {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 0.6562rem; font-weight: 600; color: var(--ok, #2c9e6b);
}
.src-synced .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #2c9e6b); }
.src-readonly {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 0.625rem; font-weight: 600; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  padding: 1px 7px 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
}
.src-sub { font-size: 0.7188rem; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* clickable police-book rows */
.dtable tr.row-click { cursor: pointer; }
.dtable tr.row-click:hover { background: var(--bg-2); }
.dtable td.row-arrow { width: 28px; text-align: center; color: var(--fg-3); }
.dtable tr.row-click:hover td.row-arrow { color: var(--accent); }

/* police-book line drawer */
.pbl-amount { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pbl-amount-val { font-size: 1.625rem; font-weight: 700; font-family: var(--font-mono); color: var(--fg-0); }
.pbl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pbl-field .upcase { font-size: 0.625rem; color: var(--fg-3); }
.pbl-field > div:last-child { margin-top: 3px; }
.pbl-cell { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.pbl-cell:last-child { border-bottom: 0; }
.pbl-cell-col { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); width: 120px; flex: none; }
.pbl-cell-val { font-size: 0.7812rem; color: var(--fg-1); word-break: break-word; }
.pbl-doc {
  display: flex; align-items: center; gap: 11px; margin-top: 18px;
  padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px;
}

/* google format modal */
.fmt-kv { font-size: 0.8125rem; color: var(--fg-1); }
.fmt-cols { display: flex; flex-direction: column; gap: 6px; }
.fmt-col { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 0.7812rem; color: var(--fg-1); }
.fmt-col-letter { width: 20px; height: 20px; border-radius: 5px; background: var(--bg-3); display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: var(--fg-2); flex: none; }

/* document subfolders */
.doc-folder { margin-bottom: 18px; }
.doc-folder-hd {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.doc-folder-name { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2); }
.doc-folder-hd .ct { font-size: 0.625rem; font-family: var(--font-mono); color: var(--fg-3); background: var(--bg-2); padding: 1px 7px; border-radius: 999px; }
.doc-tile[role="button"] { cursor: pointer; }

/* ============ Sidebar add-on badge ============ */
.sb-addon-pill {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 16%, var(--bg-1));
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  margin-left: auto;
  white-space: nowrap;
}
.sb-item.sb-addon .sb-count { margin-left: 6px; }
.sb-item.sb-addon[aria-current="page"] .sb-addon-pill {
  background: color-mix(in oklch, var(--accent) 22%, var(--bg-1));
}

/* ============ Accounting Add-on landing screen ============ */
.addon-hero {
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 6%, var(--bg-1)) 0%, var(--bg-1) 100%);
  border-radius: 14px;
  padding: 36px 40px 32px;
  position: relative;
  overflow: hidden;
}
.addon-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in oklch, var(--accent) 14%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.addon-hero-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.6562rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 16%, var(--bg-1));
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  position: relative; z-index: 1;
  white-space: nowrap;
}
.addon-hero h1 {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 14px 0 10px;
  color: var(--fg-0);
  position: relative; z-index: 1;
}
.addon-hero p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-1);
  max-width: 640px;
  margin: 0;
  position: relative; z-index: 1;
}
.addon-hero-cta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.addon-price {
  display: flex; flex-direction: column; gap: 2px;
  padding-right: 14px;
  border-right: 1px solid var(--line-soft);
}
.addon-price-amt {
  font-size: 1.625rem; font-weight: 700; color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.addon-price-per { font-size: 0.875rem; color: var(--fg-3); font-weight: 500; margin-left: 2px; }
.addon-price-note { font-size: 0.6875rem; color: var(--fg-3); }
.addon-hero-cta .btn { font-size: 0.8125rem; padding: 10px 16px; }
.addon-hero-sub {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: var(--fg-2);
  position: relative; z-index: 1;
}

.addon-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.addon-feat {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 18px 20px;
}
.addon-feat-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
  border-radius: 9px;
  color: var(--accent);
  margin-bottom: 10px;
}
.addon-feat h4 { margin: 0 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--fg-0); }
.addon-feat p { margin: 0; font-size: 0.7812rem; line-height: 1.5; color: var(--fg-2); }

.addon-preview-wrap {
  margin-top: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-1);
  overflow: hidden;
}
.addon-preview-label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.addon-preview-label .upcase {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2);
}
.addon-preview {
  padding: 20px;
  position: relative;
}
.addon-preview-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.addon-preview-card {
  background: var(--bg-0);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.addon-preview-card .upcase {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-3);
}
.addon-preview-big {
  font-size: 1.375rem; font-weight: 700; color: var(--fg-0);
  margin: 4px 0 4px;
  font-variant-numeric: tabular-nums;
}
.addon-preview-pl {
  background: var(--bg-0);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; flex-direction: column;
}
.addon-pl-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-size: 0.8125rem;
}
.addon-pl-row.sub { color: var(--fg-2); padding-left: 14px; font-size: 0.7812rem; }
.addon-pl-row.total {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px; padding-top: 8px;
  font-weight: 600;
}
.addon-pl-row.final {
  border-top: 2px solid var(--fg-1);
  margin-top: 6px; padding-top: 10px;
  font-size: 0.9375rem; font-weight: 700; color: var(--fg-0);
}
.addon-preview-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--bg-1));
  pointer-events: none;
}

.addon-int {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
}
.addon-int-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--fg-1);
}

.addon-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.addon-incl li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.8125rem; color: var(--fg-1);
  line-height: 1.5;
}
.addon-incl li svg { color: var(--ok); flex-shrink: 0; margin-top: 2px; }

.addon-foot-cta {
  margin-top: 20px;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.btn.btn-lg { font-size: 0.875rem; padding: 12px 22px; }

@media (max-width: 900px) {
  .addon-hero h1 { font-size: 1.625rem; }
  .addon-preview-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Settings edit modals ============ */
.set-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.set-comm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 560px) { .set-comm-grid { grid-template-columns: 1fr; } }
.set-comm-locked {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 12px 14px; font-size: 0.8125rem; color: var(--fg-2);
}
.set-comm-locked svg { color: var(--fg-3); }
.set-perm-tile.clickable {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.set-perm-tile.clickable:hover { border-color: var(--fg-3); }
.set-perm-tile.clickable.on {
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 38%, var(--line-soft));
}
.set-perm-tile.clickable:active { transform: scale(0.99); }

.set-color-swatch {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  outline: 1px solid var(--line-soft);
}
.set-color-swatch.on {
  border-color: var(--fg-0);
  outline-color: var(--accent);
  outline-width: 2px;
}

/* ============ Staff settings · role chips ============ */
.set-role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  font-size: 0.7812rem;
  color: var(--fg-1);
}
.set-role-chip.in-use {
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 26%, var(--line-soft));
  color: var(--fg-0);
  font-weight: 500;
}
.set-role-chip.custom {
  border-style: dashed;
}
.set-role-count {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.6562rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.set-role-x {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 0;
  background: var(--bg-0);
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
}
.set-role-x:hover { background: var(--danger); color: white; }

/* ============ Inline "+ Add role" pill ============ */
.set-role-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--fg-2);
  font-size: 0.7812rem;
  font-weight: 500;
  cursor: pointer;
  font: inherit;
  font-size: 0.7812rem;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.set-role-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.set-role-add-btn svg { color: currentColor; }

.set-role-add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border: 1px solid var(--accent);
  outline: 2px solid color-mix(in oklch, var(--accent) 18%, transparent);
}
.set-role-add svg { color: var(--accent); flex-shrink: 0; }
.set-role-add input {
  background: transparent;
  border: 0; outline: 0;
  font: inherit;
  font-size: 0.7812rem;
  color: var(--fg-0);
  width: 200px;
  padding: 1px 0;
}
.set-role-add input::placeholder { color: var(--fg-3); font-weight: 400; }

/* ============ Drive "no folder" toast ============ */
.dv-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 320;
  display: flex; align-items: center; gap: 12px;
  width: min(460px, calc(100% - 32px));
  padding: 12px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn, #d9a23a);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  animation: dv-toast-in 0.22s cubic-bezier(.2,.8,.2,1);
}
@keyframes dv-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dv-toast-ico {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in oklch, var(--warn, #d9a23a) 16%, transparent);
  color: var(--warn, #d9a23a);
}

/* ============ Drive Drawer ============ */
.dv-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 18, 0.55);
  z-index: 200;
  display: flex; justify-content: flex-end;
  animation: dv-fade 0.18s ease-out;
}
@keyframes dv-fade { from { opacity: 0; } to { opacity: 1; } }
.dv-drawer {
  width: min(620px, 100%);
  height: 100%;
  background: var(--bg-0);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  animation: dv-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.18);
}
@keyframes dv-slide { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.dv-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.dv-brand { display: flex; align-items: center; gap: 10px; flex: 1; }
.dv-brand-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-0));
  color: var(--accent);
  border-radius: 8px;
}

.dv-crumbs {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--fg-2);
  min-height: 38px;
}
.dv-back {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  border: 0; background: var(--bg-2);
  border-radius: 5px;
  cursor: pointer; color: var(--fg-1);
  padding: 0;
}
.dv-back:hover { background: var(--bg-0); }
.dv-crumb { color: var(--fg-1); }
.dv-crumb.root { color: var(--fg-3); }
.dv-sep { color: var(--fg-3); }

.dv-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.dv-search {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}
.dv-search input {
  background: transparent; border: 0; outline: 0;
  flex: 1;
  font: inherit; font-size: 0.8125rem;
  color: var(--fg-0);
}

.dv-body {
  flex: 1; overflow-y: auto;
  padding: 6px;
}
.dv-section { margin-bottom: 8px; }
.dv-section-hd {
  padding: 10px 12px 6px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--fg-3);
}
.dv-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fg-1);
  transition: background 0.1s;
}
.dv-row:hover { background: var(--bg-1); }
.dv-row.active { background: color-mix(in oklch, var(--accent) 8%, var(--bg-1)); }
.dv-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 7px;
  flex-shrink: 0;
}
.dv-ico.folder { background: color-mix(in oklch, var(--warn) 16%, var(--bg-2)); color: var(--warn); }
.dv-ico.pdf    { background: color-mix(in oklch, var(--danger) 14%, var(--bg-2)); color: var(--danger); }
.dv-ico.image  { background: color-mix(in oklch, var(--accent) 14%, var(--bg-2)); color: var(--accent); }
.dv-ico.sheet  { background: color-mix(in oklch, var(--ok) 14%, var(--bg-2)); color: var(--ok); }
.dv-ico.doc    { background: color-mix(in oklch, var(--info) 14%, var(--bg-2)); color: var(--info); }

.dv-empty {
  padding: 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.dv-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-1);
}

/* ============ Mark SOLD modal · success state ============ */
.ac-modal.sold-done .sold-done-body {
  padding: 36px 36px 28px;
  text-align: center;
}
.sold-done-mark {
  width: 64px; height: 64px;
  background: color-mix(in oklch, var(--ok) 16%, var(--bg-0));
  color: var(--ok);
  border: 2px solid color-mix(in oklch, var(--ok) 40%, var(--bg-0));
  border-radius: 999px;
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.sold-done-body h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg-0);
}
.sold-done-body p {
  margin: 0;
  color: var(--fg-1);
  font-size: 0.875rem;
  line-height: 1.55;
}
.sold-done-summary {
  margin: 22px auto 18px;
  max-width: 360px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; flex-direction: column;
  text-align: left;
}
.sold-done-row {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  font-size: 0.8125rem;
  color: var(--fg-1);
}
.sold-done-row.total {
  border-top: 1px solid var(--line-soft);
  margin-top: 6px; padding-top: 8px;
  font-weight: 600;
  font-size: 0.875rem;
}
.sold-done-next {
  text-align: left;
  background: color-mix(in oklch, var(--accent) 6%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line-soft));
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.sold-done-next .upcase {
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 8px;
}
.sold-done-next ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sold-done-next ul li {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem;
  color: var(--fg-1);
}
.sold-done-next ul svg { color: var(--ok); flex-shrink: 0; }
.sold-done-actions {
  display: flex; justify-content: center; gap: 10px;
}

/* ============ Web listing preview ============ */
.ac-modal.weblist-modal { padding: 0; }
.weblist-modal .ac-body { padding: 0; }
.weblist-warn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: color-mix(in oklch, var(--warn) 12%, var(--bg-1));
  border-bottom: 1px solid color-mix(in oklch, var(--warn) 28%, transparent);
  color: var(--warn);
}
.weblist-warn strong { color: var(--fg-0); }
.weblist-frame {
  padding: 20px;
  display: flex; justify-content: center;
  overflow-y: auto;
  max-height: calc(92vh - 220px);
}
.weblist-frame.desktop .weblist-browser { width: 100%; max-width: 920px; }
.weblist-frame.mobile  .weblist-browser { width: 380px; }
.weblist-browser {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0,0,0,0.15);
  color: #1a1a1d;
}
.weblist-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #f3f3f5;
  border-bottom: 1px solid #e4e4e8;
}
.weblist-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.weblist-dot.r { background: #fc5e59; }
.weblist-dot.y { background: #fcbb40; }
.weblist-dot.g { background: #34c84a; }
.weblist-url {
  flex: 1;
  margin-left: 14px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #dadadd;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: #5a5a60;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.weblist-page { padding: 0; background: white; color: #1a1a1d; }
.weblist-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid #ececef;
  background: white;
}
.weblist-nav strong { font-size: 1rem; color: #d75240; letter-spacing: -0.01em; }

.weblist-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  padding: 28px;
  background: #fafafb;
}
.weblist-frame.mobile .weblist-hero { grid-template-columns: 1fr; }
.weblist-hero-img {
  display: flex; flex-direction: column; gap: 10px;
}
.weblist-hero-thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #e8e8eb, #d0d0d4);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  color: #777;
  font-size: 0.8125rem;
}
.weblist-hero-thumb.empty { background: repeating-linear-gradient(45deg, #ececef, #ececef 8px, #f5f5f7 8px, #f5f5f7 16px); }
.weblist-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.weblist-thumb {
  aspect-ratio: 1 / 1;
  background: #e0e0e3;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #888;
}
.weblist-thumb.more {
  background: #1a1a1d;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
}

.weblist-hero-info h1 {
  font-size: 1.625rem;
  font-weight: 700;
  margin: 8px 0 4px;
  color: #1a1a1d;
  letter-spacing: -0.01em;
}
.weblist-tag {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #c44a3a;
}
.weblist-trim { color: #5a5a60; font-size: 0.8125rem; margin-bottom: 14px; }
.weblist-price { padding: 14px 0; border-top: 1px solid #ececef; border-bottom: 1px solid #ececef; }
.weblist-price .amt {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1d;
  font-variant-numeric: tabular-nums;
}
.weblist-cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.weblist-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 7px;
  background: white;
  border: 1px solid #d0d0d4;
  font-size: 0.75rem;
  font-weight: 500;
  color: #1a1a1d;
  cursor: pointer;
}
.weblist-btn.primary { background: #d75240; border-color: #d75240; color: white; }
.weblist-trust {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 0.6875rem; color: #5a5a60;
  margin-top: 10px;
}
.weblist-trust span { display: inline-flex; align-items: center; gap: 4px; }
.weblist-trust svg { color: #34a04a; }

.weblist-sections {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.weblist-section h3 {
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: #1a1a1d;
}
.weblist-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.weblist-spec {
  padding: 10px 12px;
  background: #fafafb;
  border: 1px solid #ececef;
  border-radius: 7px;
  font-size: 0.8125rem;
  color: #1a1a1d;
}
.weblist-spec .upcase {
  font-size: 0.5625rem; font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.weblist-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 0.8125rem; }
.weblist-frame.mobile .weblist-features { grid-template-columns: 1fr; }
.weblist-features li { display: flex; align-items: center; gap: 6px; color: #1a1a1d; }
.weblist-features svg { color: #34a04a; }
.weblist-remarks {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #fafafb;
  border-left: 3px solid #d75240;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #3a3a40;
}
.weblist-cta-block {
  text-align: center;
  padding: 24px;
  background: #fafafb;
  border-radius: 10px;
}
.weblist-cta-block p { color: #5a5a60; font-size: 0.8125rem; margin: 0 0 12px; max-width: 480px; margin: 0 auto 12px; }
.weblist-cta-block .weblist-cta { justify-content: center; }
.weblist-foot {
  padding: 16px 28px;
  border-top: 1px solid #ececef;
  font-size: 0.6875rem;
  color: #888;
}

/* listing — real-site layout (wl-*) */
.wl-util { display:flex; justify-content:space-between; align-items:center; background:#16181d; color:#c8c9cd; font-size: 0.6875rem; padding:7px 28px; }
.wl-util-l { display:flex; gap:16px; }
.wl-util-l span { display:inline-flex; align-items:center; gap:5px; }
.wl-util-social { display:flex; gap:7px; }
.wl-soc { width:18px; height:18px; border-radius:3px; background:#2a2d35; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size: 0.5625rem; font-weight:700; }
.weblist-frame.mobile .wl-util-email { display:none; }

.wl-header { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; background:#fff; border-bottom:1px solid #ececef; }
.wl-logo { font-weight:800; font-size: 1.0625rem; letter-spacing:0.02em; color:#16181d; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.wl-logo-star { color:#d92b2b; font-size: 1.125rem; }
.wl-logo-sub { color:#d92b2b; }
.wl-nav { display:flex; gap:15px; font-size: 0.7812rem; font-weight:600; color:#3a3d44; }
.wl-nav span { cursor:pointer; white-space:nowrap; }
.wl-nav span.on, .wl-nav span:hover { color:#d92b2b; }
.wl-burger { display:flex; flex-direction:column; gap:3px; }
.wl-burger span { width:20px; height:2px; background:#16181d; border-radius:2px; }

.wl-gallery { padding:18px 28px 0; }
.wl-hero-img { aspect-ratio:16/9; border-radius:8px; background:linear-gradient(180deg,#e8e8eb,#cfd0d4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#7c7d82; font-size: 0.8125rem; }
.wl-hero-img.empty { background:repeating-linear-gradient(45deg,#ececef,#ececef 10px,#f5f5f7 10px,#f5f5f7 20px); }
.wl-thumbs { display:flex; gap:8px; margin-top:8px; }
.wl-thumb { flex:1; aspect-ratio:4/3; border-radius:5px; background:#e0e0e3; display:flex; align-items:center; justify-content:center; color:#999; }
.wl-thumb.more { background:#16181d; color:#fff; font-size: 0.75rem; font-weight:700; }

.wl-headline { padding:20px 28px; }
.wl-headline h1 { font-size: 1.5rem; font-weight:800; color:#16181d; margin:0 0 8px; letter-spacing:-0.01em; line-height:1.15; }
.wl-miles { font-size: 0.875rem; color:#5a5a60; font-weight:600; }
.wl-price { font-size: 1.875rem; font-weight:800; color:#d92b2b; margin:6px 0 14px; font-variant-numeric:tabular-nums; }
.wl-quick { list-style:none; margin:0 0 16px; padding:14px 0; border-top:1px solid #ececef; border-bottom:1px solid #ececef; display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size: 0.8125rem; color:#3a3d44; }
.wl-quick strong { color:#16181d; }
.wl-cta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.wl-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 15px; border-radius:6px; border:1px solid #d4d4d8; background:#fff; color:#16181d; font-size: 0.7812rem; font-weight:700; cursor:pointer; text-decoration:none; }
.wl-btn.primary { background:#d92b2b; border-color:#d92b2b; color:#fff; }
.wl-desc { font-size: 0.8438rem; line-height:1.6; color:#3a3d44; }
.wl-desc p { margin:0 0 10px; }
.wl-inspected { background:#f6f7f9; border-left:3px solid #34a04a; padding:10px 14px; border-radius:0 6px 6px 0; }
.wl-inspected svg { color:#34a04a; vertical-align:-2px; margin-right:4px; }

.wl-details { padding:8px 28px 24px; }
.wl-details h3, .wl-related h3 { font-size: 1rem; font-weight:800; color:#16181d; margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid #d92b2b; display:inline-block; }
.wl-spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.wl-spec-grid.mobile { grid-template-columns:1fr; }
.wl-spec-group { border:1px solid #ececef; border-radius:8px; overflow:hidden; }
.wl-spec-group-hd { background:#16181d; color:#fff; font-size: 0.75rem; font-weight:700; padding:9px 14px; text-transform:uppercase; letter-spacing:0.04em; }
.wl-spec-rows { padding:4px 0; }
.wl-spec-row { display:flex; justify-content:space-between; gap:12px; padding:7px 14px; font-size: 0.7812rem; border-bottom:1px solid #f1f1f4; }
.wl-spec-row:last-child { border-bottom:0; }
.wl-spec-k { color:#7c7d82; }
.wl-spec-v { color:#16181d; font-weight:700; }

.wl-related { padding:8px 28px 24px; }
.wl-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.wl-related-grid.mobile { grid-template-columns:1fr 1fr; }
.wl-rel-card { border:1px solid #ececef; border-radius:8px; overflow:hidden; background:#fff; }
.wl-rel-img { aspect-ratio:4/3; background:linear-gradient(180deg,#e8e8eb,#cfd0d4); display:flex; align-items:center; justify-content:center; color:#9a9b9f; }
.wl-rel-title { font-size: 0.75rem; font-weight:700; color:#16181d; padding:8px 10px 2px; line-height:1.25; }
.wl-rel-miles { font-size: 0.6875rem; color:#7c7d82; padding:0 10px; }
.wl-rel-price { font-size: 0.9375rem; font-weight:800; color:#d92b2b; padding:4px 10px 10px; }

.wl-footer { background:#16181d; color:#b9bac0; padding:24px 28px; }
.wl-foot-logo { font-weight:800; font-size: 0.9375rem; color:#fff; display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.wl-foot-cols { display:flex; gap:40px; flex-wrap:wrap; font-size: 0.75rem; line-height:1.9; }
.wl-foot-col strong { color:#fff; display:block; margin-bottom:4px; }
.wl-foot-copy { margin-top:18px; padding-top:14px; border-top:1px solid #2a2d35; font-size: 0.6875rem; color:#76777d; }

/* ============ Email digest preview ============ */
.email-preview {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}
.email-preview-hd {
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.email-preview-bd {
  padding: 14px 18px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fg-1);
}
.email-preview-bd p { margin: 0 0 10px; }
.email-preview-bd ul { margin: 0 0 10px; padding-left: 18px; }

/* ============ QBO stats grid ============ */
.qbo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.qbo-stat {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
}
.qbo-stat .num { font-size: 1.375rem; font-weight: 700; color: var(--fg-0); }
.qbo-stat .upcase {
  font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 2px;
}

/* ============ Topic / source tile grids (quick-modals) ============ */
.thread-topic-grid,
.ext-src-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.thread-topic,
.ext-src {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--fg-1);
  font-size: 0.7812rem;
  font-weight: 500;
  transition: border-color 0.12s, background 0.12s;
}
.thread-topic:hover,
.ext-src:hover { border-color: var(--fg-3); }
.thread-topic.on,
.ext-src.on {
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 40%, var(--line-soft));
  color: var(--accent);
}
.thread-topic.on svg,
.ext-src.on svg { color: var(--accent); }

/* ============ Routing rules editor ============ */
.rr-section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rr-list { display: flex; flex-direction: column; gap: 8px; }
.rr-rule {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}
.rr-rule.off { opacity: 0.5; }
.rr-rule.fired {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--line-soft));
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
}
.rr-rank { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: none; width: 22px; }
.rr-rank .num { font-size: 0.75rem; color: var(--fg-2); font-weight: 600; }
.rr-arrow {
  display: grid; place-items: center;
  width: 18px; height: 14px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--fg-3); border-radius: 4px;
}
.rr-arrow:hover:not(:disabled) { color: var(--fg-0); background: var(--bg-2); }
.rr-arrow:disabled { opacity: 0.25; cursor: default; }

.rr-body { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; min-width: 0; }
.rr-kw { font-size: 0.75rem; color: var(--fg-2); font-weight: 500; white-space: nowrap; }
.rr-body .inv-input { width: auto; padding: 6px 9px; font-size: 0.7812rem; margin: 0; }
.rr-body select.inv-input { padding-right: 26px; }
.rr-val { flex: 1; min-width: 130px; }

.rr-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.rr-fired-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent);
}
.rr-del { color: var(--fg-3); }
.rr-del:hover { color: var(--danger); }

/* mini switch */
.rr-switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; cursor: pointer; }
.rr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rr-switch i {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line); transition: background 0.15s;
}
.rr-switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform 0.15s;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
}
.rr-switch input:checked + i { background: var(--accent); }
.rr-switch input:checked + i::after { transform: translateX(15px); }

/* fallback radios */
.rr-fallback { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-fb-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rr-fb-opt:hover { border-color: var(--fg-3); }
.rr-fb-opt.on {
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 40%, var(--line-soft));
}
.rr-fb-opt input { margin-top: 2px; accent-color: var(--accent); }
.rr-fb-opt svg { margin-top: 1px; color: var(--fg-2); flex: none; }
.rr-fb-opt.on svg { color: var(--accent); }
.rr-fb-opt > div { display: flex; flex-direction: column; gap: 2px; }
.rr-fb-opt strong { font-size: 0.8125rem; }

/* tester */
.rr-test { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: stretch; }
.rr-test-inputs { display: flex; flex-direction: column; gap: 8px; }
.rr-test-inputs .inv-input { margin: 0; }
.rr-samples { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-test-out {
  background: var(--bg-0);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center;
}
.rr-out-line { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--fg-1); margin-bottom: 10px; }
.rr-out-line .upcase { font-size: 0.625rem; }
.rr-out-chips { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 720px) {
  .rr-fallback, .rr-test { grid-template-columns: 1fr; }
}

/* ============ Photo gallery · drag-to-reorder ============ */
.pg-cell {
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: element;
}
.pg-cell.dragging {
  opacity: 0.5;
  transform: scale(0.96);
  transition: transform 0.15s, opacity 0.15s;
}

/* ============ Sales pipeline · drag-to-update stage ============ */
.deal-col {
  transition: background 0.12s, border-color 0.12s;
}
.deal-col.drop-target {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  border-color: var(--accent);
  outline: 2px dashed color-mix(in oklch, var(--accent) 40%, transparent);
  outline-offset: -2px;
}
.deal-card { cursor: grab; user-select: none; }
.deal-card:active { cursor: grabbing; }
.deal-card.dragging {
  opacity: 0.5;
  transform: scale(0.96) rotate(-1deg);
  transition: transform 0.1s;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* ============ Invoices page (invX-* namespace) ============ */
/* KPI strip at the top: 4 tiles, first two are clickable for active/archive */
.invX-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.invX-kpi {
  display: flex; flex-direction: column;
  align-items: stretch;
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.invX-kpi.invX-kpi-static {
  cursor: default;
  background: var(--bg-1);
}
.invX-kpi:hover:not(.invX-kpi-static) { border-color: var(--fg-3); }
.invX-kpi.on {
  background: color-mix(in oklch, var(--accent) 7%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 42%, var(--line-soft));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 36%, transparent) inset;
}
.invX-kpi-hd {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.invX-kpi-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--fg-3);
}
.invX-dot-active { background: var(--accent); }
.invX-dot-archive { background: var(--info); }
.invX-kpi-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.invX-kpi.on .invX-kpi-label { color: var(--accent); }
.invX-kpi-num {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 2px;
}
.invX-kpi-num .num {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.invX-kpi-unit {
  font-size: 0.75rem;
  color: var(--fg-3);
  font-weight: 500;
}
.invX-kpi-sub {
  font-size: 0.7188rem;
  color: var(--fg-2);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Filter bar: search input + pills on one row */
.invX-filter {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.invX-search {
  flex: 0 0 320px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.invX-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--fg-0);
}
.invX-search input::placeholder { color: var(--fg-3); }
.invX-search-clear {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border: 0; padding: 0;
  background: var(--bg-2);
  color: var(--fg-2);
  border-radius: 999px;
  cursor: pointer;
}
.invX-search-clear:hover { background: var(--fg-3); color: var(--bg-0); }
.invX-pills {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}

/* Empty state */
.invX-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  padding: 48px 32px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.invX-empty-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg-0);
  margin-top: 4px;
}

/* Groups list */
.invX-groups {
  display: flex; flex-direction: column;
  gap: 14px;
}

/* Each unit's group card */
.invX-group {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  overflow: hidden;
}
.invX-group-sold {
  border-color: color-mix(in oklch, var(--info) 28%, var(--line-soft));
}
.invX-group-standalone {
  border-style: dashed;
}

/* Group header bar — clickable, shows the unit + headline price */
.invX-group-hd {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s;
}
.invX-group-hd:hover {
  background: color-mix(in oklch, var(--accent) 5%, var(--bg-2));
}
.invX-group-sold .invX-group-hd {
  background: color-mix(in oklch, var(--info) 5%, var(--bg-2));
}

.invX-stand-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 7px;
  flex-shrink: 0;
}

.invX-group-meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.invX-group-title {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.invX-group-title strong {
  font-size: 0.875rem;
  color: var(--fg-0);
  font-weight: 700;
}
.invX-group-ymm {
  font-size: 0.8438rem;
  color: var(--fg-1);
  font-weight: 500;
}
.invX-group-sub {
  font-size: 0.7188rem;
  color: var(--fg-3);
}
/* A6.1 — the deposit hold, stated on the group header where the unit's deals are worked. Same
   accent/warn language as the unit page banner and the status chip, so a held truck reads the
   same everywhere. */
.invX-group-hold {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--fg-1);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 34%, transparent);
}
.invX-group-hold.expired {
  background: color-mix(in oklch, var(--warn) 12%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 46%, transparent);
}

/* Right side stats cluster on the group header */
.invX-group-stats {
  display: flex; align-items: center; gap: 18px;
  flex-shrink: 0;
}
.invX-soldto {
  display: flex; flex-direction: column;
  align-items: flex-end;
}
.invX-soldto-lbl {
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.invX-soldto strong {
  font-size: 0.8125rem;
  color: var(--fg-0);
}
.invX-headline {
  display: flex; flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.invX-headline-lbl {
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.invX-headline strong {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.invX-group-sold .invX-headline strong { color: var(--ok); }
.invX-counts {
  display: flex; align-items: center; gap: 6px;
}

/* Invoice table inside each group */
.invX-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.invX-tbl thead th {
  text-align: left;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
}
.invX-tbl thead th.num { text-align: right; }
.invX-tbl tbody tr {
  cursor: pointer;
  transition: background 0.08s;
}
.invX-tbl tbody tr:hover {
  background: color-mix(in oklch, var(--accent) 4%, var(--bg-1));
}
.invX-tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-1);
  vertical-align: middle;
}
.invX-tbl tbody tr:last-child td { border-bottom: 0; }
.invX-tbl tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Won row treatment */
.invX-row-won {
  background: color-mix(in oklch, var(--ok) 4%, transparent);
}
.invX-row-won td {
  border-bottom-color: color-mix(in oklch, var(--ok) 14%, var(--line-soft));
}
.invX-row-lost td {
  color: var(--fg-3);
}
.invX-row-lost .invX-cust { color: var(--fg-2); }

.invX-marker {
  width: 36px;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 0 !important;
}
.invX-num {
  font-weight: 600;
  color: var(--fg-0);
  font-size: 0.8125rem;
}
.invX-cust {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-0);
}
.invX-cust-sub {
  font-size: 0.7188rem;
  color: var(--fg-3);
  margin-top: 1px;
}
.invX-lost-reason {
  font-size: 0.6875rem;
  color: var(--fg-3);
  font-style: italic;
  margin-top: 2px;
}

/* Inline state chips inside the State column */
.invX-state {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.invX-state-won {
  background: color-mix(in oklch, var(--ok) 14%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in oklch, var(--ok) 28%, transparent);
}
.invX-state-lost {
  background: var(--bg-2);
  color: var(--fg-3);
  border: 1px solid var(--line-soft);
}

@media (max-width: 1100px) {
  .invX-kpis { grid-template-columns: repeat(2, 1fr); }
  .invX-filter { flex-wrap: wrap; }
  .invX-search { flex: 1 1 100%; }
  .invX-group-stats { gap: 12px; }
  .invX-soldto { display: none; }
}

/* ============ Settings · Recon stages list ============ */
.set-stage-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.set-stage-row {
  display: grid;
  grid-template-columns: 24px 28px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  cursor: grab;
  transition: background 0.1s, border-color 0.1s;
}
.set-stage-row:hover {
  background: var(--bg-1);
  border-color: var(--line-soft);
}
.set-stage-row.dragging {
  opacity: 0.5;
  transform: scale(0.99);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.set-stage-row:active { cursor: grabbing; }
.set-stage-grip {
  display: grid; place-items: center;
  color: var(--fg-3);
}
.set-stage-row:hover .set-stage-grip { color: var(--fg-1); }
.set-stage-num {
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--fg-3);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 3px 0;
}
.set-stage-name {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0;
}
.set-stage-name strong {
  font-size: 0.875rem;
  color: var(--fg-0);
  font-weight: 600;
}
.set-stage-short {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-2);
  background: var(--bg-2);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-soft);
}
.set-stage-meta {
  display: flex; align-items: center; gap: 8px;
}
.set-stage-lock {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--info) 14%, transparent);
  color: var(--info);
}
.set-stage-inuse {
  font-size: 0.6562rem;
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}
.set-stage-actions {
  display: flex; gap: 4px;
}
.set-stage-actions .iconbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.set-stage-edit {
  display: flex; gap: 6px;
  grid-column: 3 / -1;
  align-items: center;
}
.set-stage-edit .inv-input { padding: 6px 10px; font-size: 0.7812rem; flex: 1; }
.set-stage-edit .inv-input.mono { max-width: 130px; }

/* ============ Titles · action queues ============ */
.title-queues {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.title-queue {
  display: flex; flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.title-queue:hover { border-color: var(--fg-3); }
.title-queue.on {
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 42%, var(--line-soft));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 32%, transparent) inset;
}
.title-queue-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.title-queue.urgent .title-queue-hd { color: var(--danger); }
.title-queue-num {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.title-queue.urgent .title-queue-num { color: var(--danger); }
.title-queue.on .title-queue-num { color: var(--accent); }
.title-queue-sub {
  font-size: 0.7188rem;
  color: var(--fg-2);
  margin-top: 4px;
}

.title-row-urgent {
  background: color-mix(in oklch, var(--danger) 4%, transparent);
}
.title-row-urgent td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* Document progress bar in the table */
.title-docprog {
  display: flex; align-items: center; gap: 8px;
  min-width: 110px;
}
.title-docprog-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.title-docprog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 70%, var(--ok)));
  transition: width 0.2s;
}

/* Source vendor row */
.title-src-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

/* ============ Title detail drawer ============ */
.td-drawer { width: min(640px, 100%); }
.td-body { padding: 0 16px 20px; }

.td-quick {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.td-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.td-section:first-child { border-top: 0; padding-top: 14px; }
.td-section h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 10px;
}
.td-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.td-section-hd h4 { margin: 0; }
.td-section-count {
  font-size: 0.6875rem;
  color: var(--fg-2);
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

.td-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.td-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td-field-wide { grid-column: 1 / -1; }
.td-field .upcase {
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.td-field strong, .td-field span:not(.mono):not([class*='Chip']) {
  font-size: 0.8125rem;
  color: var(--fg-0);
}
.td-field .inv-input { font-size: 0.8125rem; padding: 7px 10px; }

/* Document checklist */
.td-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.td-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.td-check:hover { border-color: var(--fg-3); }
.td-check.done {
  background: color-mix(in oklch, var(--ok) 8%, var(--bg-1));
  border-color: color-mix(in oklch, var(--ok) 32%, var(--line-soft));
}
.td-check-box {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 5px;
  border: 1.5px solid var(--fg-3);
  background: var(--bg-0);
  color: var(--ok);
  flex-shrink: 0;
}
.td-check.done .td-check-box {
  background: var(--ok);
  border-color: var(--ok);
  color: white;
}
.td-check strong { font-size: 0.8125rem; color: var(--fg-0); font-weight: 500; }
.td-check.done strong { color: var(--fg-0); }

.td-prep-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.8125rem;
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  cursor: pointer;
}
.td-prep-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Follow-up log */
.td-log {
  display: flex; flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px 2px;
}
.td-log-entry {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.td-log-entry:last-child { border-bottom: 0; }
.td-log-empty {
  padding: 20px;
  text-align: center;
  background: var(--bg-1);
  border-radius: 7px;
  border: 1px dashed var(--line);
}
.td-log-add {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.td-log-add .inv-input { font-size: 0.8125rem; padding: 8px 12px; }

/* ============ Title pipeline stepper (in drawer) ============ */
.td-pipeline {
  display: flex; flex-direction: column;
  gap: 0;
}
.td-pipe-step {
  display: flex; gap: 12px;
  padding: 4px 0;
}
.td-pipe-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 26px;
  flex-shrink: 0;
}
.td-pipe-dot {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--bg-0);
  color: var(--fg-3);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.td-pipe-num { font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-pipe-line {
  flex: 1;
  width: 2px;
  min-height: 22px;
  background: var(--line);
  margin-top: 2px;
}
.td-pipe-step.done .td-pipe-dot {
  background: var(--ok);
  border-color: var(--ok);
  color: white;
}
.td-pipe-step.done + .td-pipe-step .td-pipe-line,
.td-pipe-step.done .td-pipe-line {
  background: var(--ok);
}
.td-pipe-step.current .td-pipe-dot {
  background: var(--bg-0);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent);
}
.td-pipe-body {
  flex: 1;
  padding-bottom: 14px;
  padding-top: 1px;
  min-width: 0;
}
.td-pipe-label {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.td-pipe-label strong {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-0);
}
.td-pipe-step:not(.done):not(.current) .td-pipe-label strong { color: var(--fg-2); }
.td-pipe-when {
  font-size: 0.6875rem;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.td-pipe-hint {
  font-size: 0.7188rem;
  color: var(--fg-3);
  margin-top: 2px;
  line-height: 1.45;
}
.td-pipe-actions {
  margin-top: 6px;
  display: flex; gap: 6px;
}
.td-pipe-actions .btn.btn-sm { font-size: 0.6875rem; padding: 4px 10px; }

/* ============ Pipeline mini (in titles table) ============ */
.title-pipe-mini {
  display: flex; align-items: center; gap: 7px;
  min-width: 170px;
}
.title-pipe-mini-tag {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--fg-2);
  flex-shrink: 0;
}
.title-pipe-mini.buy .title-pipe-mini-tag {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}
.title-pipe-mini.sell .title-pipe-mini-tag {
  background: color-mix(in oklch, var(--info) 16%, transparent);
  color: var(--info);
}
.title-pipe-mini-bar {
  display: flex; gap: 2px;
  flex: 1;
  max-width: 80px;
}
.title-pipe-mini-seg {
  flex: 1;
  height: 5px;
  border-radius: 2px;
  background: var(--bg-2);
}
.title-pipe-mini-seg.done {
  background: var(--ok);
}
.title-pipe-mini.buy .title-pipe-mini-seg.done {
  background: var(--accent);
}
.title-pipe-mini.sell .title-pipe-mini-seg.done {
  background: var(--info);
}
.title-pipe-mini-seg.current {
  background: var(--fg-1);
  box-shadow: 0 0 0 1px var(--fg-1);
}
.title-pipe-mini-step {
  font-size: 0.6562rem;
  color: var(--fg-2);
  font-weight: 500;
  white-space: nowrap;
}
.title-stage-done {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem;
  color: var(--ok);
  font-weight: 600;
}

/* ============ Sortable table headers (Titles page) ============ */
.title-th-sort {
  cursor: pointer;
  user-select: none;
  transition: color 0.1s, background 0.1s;
}
.title-th-sort:hover {
  color: var(--fg-0);
  background: var(--bg-2);
}
.title-th-sort.active {
  color: var(--accent);
}
.title-th-arrow {
  display: inline-block;
  font-size: 0.5625rem;
  margin-left: 2px;
}
.title-th-sort.active .title-th-arrow {
  color: var(--accent);
}

/* ============ Dashboard · Direct messages card ============ */
.dm-card {
  margin-bottom: 16px;
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line-soft));
  background: color-mix(in oklch, var(--accent) 3%, var(--bg-1));
}
.dm-card .card-hd h3 {
  display: inline-flex; align-items: center; gap: 8px;
}
.dm-unread-badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  background: var(--accent);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.dm-card .hd-side {
  display: inline-flex; align-items: center; gap: 10px;
}

.dm-row {
  display: flex; align-items: stretch;
  position: relative;
  transition: background 0.1s;
}
.dm-row:hover {
  background: color-mix(in oklch, var(--accent) 5%, transparent);
}
.dm-row.unread {
  background: color-mix(in oklch, var(--accent) 4%, transparent);
}
.dm-row.unread::before {
  content: "";
  width: 3px;
  background: var(--accent);
  border-radius: 999px;
  flex: none;
}
.dm-row-main {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 12px 14px 17px;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--fg-1);
}
.dm-read {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  margin-right: 14px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--fg-2);
  font-size: 0.6875rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dm-read:hover {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.dm-more {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-2);
  font: inherit; font-size: 0.75rem; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.dm-more:hover {
  background: color-mix(in oklch, var(--accent) 5%, transparent);
  color: var(--fg-0);
}

/* @mention highlight + deep-link flash */
.mention {
  font-weight: 600;
  color: var(--fg-2);
}
.mention-me {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}
@keyframes msg-flash-kf {
  0%   { background: color-mix(in oklch, var(--accent) 30%, transparent); }
  100% { background: transparent; }
}
.msg-flash {
  animation: msg-flash-kf 2.2s ease-out;
  border-radius: 10px;
}
.msg-bubble.msg-flash, .feed-msg.msg-flash, .msg-log.msg-flash {
  outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent);
  outline-offset: 3px;
}
.dm-row-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 3px;
}
.dm-row-hd {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.dm-row-hd strong {
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--fg-0);
}
.dm-row-when {
  margin-left: auto;
}
.dm-row-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.005em;
}
.dm-row-preview {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dm-row.unread .dm-row-preview {
  color: var(--fg-0);
}
.dm-row-foot {
  display: flex; gap: 6px;
  margin-top: 4px;
}

/* ============ Unit hold banner ============ */
.unit-hold-banner {
  margin-top: 12px;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--accent) 9%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
  border-radius: 8px;
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--fg-0);
}
.unit-hold-banner svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.unit-hold-banner strong { color: var(--fg-0); font-weight: 600; }
/* A6 — an EXPIRED hold is a decision waiting on a human, so it takes the warn treatment and stays
   put until someone acts. Nothing auto-releases a truck; this loud styling IS the flag. */
.unit-hold-banner.expired {
  background: color-mix(in oklch, var(--warn) 11%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 45%, transparent);
}
.unit-hold-banner.expired svg { color: var(--warn); }
/* A6 — the deal builder's deposit block. */
.dep-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dep-state { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.8125rem;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent); }
.dep-state.warn { background: color-mix(in oklch, var(--warn) 10%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 42%, transparent); }
.dep-state.done { background: var(--bg-1); border-color: var(--line); }

/* ============ Sales deal-card overlays ============ */
.deal-card-held {
  border-color: color-mix(in oklch, var(--ok) 38%, var(--line-soft));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ok) 14%, transparent);
}
.deal-card-blocked {
  opacity: 0.7;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--warn) 32%, var(--line-soft));
}
.deal-card-hold-banner,
.deal-card-blocked-banner,
.deal-card-compete-banner {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.deal-card-hold-banner {
  background: color-mix(in oklch, var(--ok) 14%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in oklch, var(--ok) 30%, transparent);
}
.deal-card-blocked-banner {
  background: color-mix(in oklch, var(--warn) 14%, transparent);
  color: var(--warn);
  border: 1px solid color-mix(in oklch, var(--warn) 30%, transparent);
}
.deal-card-compete-banner {
  background: var(--bg-1);
  color: var(--fg-2);
  border: 1px solid var(--line-soft);
}

/* ============ Helcim payments ============ */
.hcm-logo {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f06322, #e04015);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.hcm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ok) 14%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in oklch, var(--ok) 32%, transparent);
}

.hcm-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.hcm-type-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1.5px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--fg-1);
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.hcm-type-tab:hover { border-color: var(--fg-3); }
.hcm-type-tab.on {
  background: color-mix(in oklch, var(--accent) 7%, var(--bg-1));
  border-color: var(--accent);
  color: var(--fg-0);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.hcm-type-tab.on svg { color: var(--accent); }
.hcm-type-tab strong { font-size: 0.8125rem; font-weight: 600; }

.hcm-summary {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.hcm-summary-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: var(--fg-1);
}
.hcm-summary-row.total {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px; padding-top: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fg-0);
}

.hcm-receipt {
  margin: 18px auto 0;
  max-width: 320px;
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px 18px;
}
.hcm-receipt-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: var(--fg-1);
}
.hcm-receipt-row.total {
  border-top: 1px solid var(--line-soft);
  margin-top: 6px; padding-top: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--fg-0);
}

.hcm-spinner {
  width: 40px; height: 40px;
  margin: 0 auto;
  border: 3px solid var(--bg-1);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: hcm-spin 0.9s linear infinite;
}
.hcm-spinner-sm {
  width: 14px; height: 14px;
  border-width: 2px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px 0 0;
}
@keyframes hcm-spin { to { transform: rotate(360deg); } }

/* ============ APEX integration ============ */
.apex-logo {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1f8a5b, #16623f);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.apex-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent);
}
.apex-services {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.apex-service {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-3);
  border: 1px solid var(--line-soft);
}
.apex-service.on {
  background: color-mix(in oklch, var(--ok) 12%, transparent);
  color: var(--ok);
  border-color: color-mix(in oklch, var(--ok) 30%, transparent);
}
.apex-service.on svg { color: var(--ok); }
.apex-service:not(.on) svg { color: var(--danger); }

.apex-drop {
  margin: 6px 0 4px;
  padding: 48px 32px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  color: var(--fg-2);
}
.apex-drop:hover, .apex-drop.over {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--bg-1));
  color: var(--fg-0);
}
.apex-drop svg { color: var(--accent); }
.apex-drop h3 { font-size: 1rem; margin: 4px 0 0; color: var(--fg-0); font-weight: 600; }
.apex-drop p { margin: 0; font-size: 0.8125rem; color: var(--fg-3); }

.apex-split {
  display: flex; flex-direction: column;
  gap: 6px;
}
.apex-split-row {
  display: flex; gap: 6px;
  align-items: center;
}
.apex-split-row .inv-input { padding: 7px 10px; font-size: 0.7812rem; }
.apex-split-row .inv-money-input { flex: 1; max-width: 160px; }

.apex-receipt {
  margin: 18px auto 0;
  max-width: 360px;
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px 18px;
}
.apex-receipt-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: var(--fg-1);
}
.apex-receipt-row.total {
  border-top: 1px solid var(--line-soft);
  margin-top: 6px; padding-top: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--fg-0);
}

/* ============ eSign / Documenso integration ============ */
.esign-logo {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6b46c1, #4c1d95);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.esign-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, #6b46c1 14%, transparent);
  color: #8b5cf6;
  border: 1px solid color-mix(in oklch, #6b46c1 32%, transparent);
}
.esign-doc-tile {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--fg-1);
  transition: border-color 0.12s, background 0.12s;
}
.esign-doc-tile:hover { border-color: var(--fg-3); }
.esign-doc-tile.on {
  background: color-mix(in oklch, var(--accent) 7%, var(--bg-1));
  border-color: color-mix(in oklch, var(--accent) 38%, var(--line-soft));
  color: var(--fg-0);
  font-weight: 500;
}
.esign-doc-tile input { margin: 0; }

.esign-review {
  display: flex; flex-direction: column;
  height: 70vh;
  background: var(--bg-2);
}
.esign-review-tabs {
  display: flex; gap: 4px;
  padding: 10px 14px 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
}
.esign-review-tab {
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 0.75rem;
  color: var(--fg-2);
  cursor: pointer;
}
.esign-review-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.esign-review-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
}
.esign-review-pdf {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}
.esign-review-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--bg-1);
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  color: var(--fg-3);
}
.esign-review-hint svg { color: var(--accent); flex-shrink: 0; }

/* ============ eSign uploaded-title signature placer ============ */
.esign-title-placer {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  min-height: 0;
}
.esign-tp-head { display: flex; align-items: center; gap: 8px; }
.esign-tp-head svg { color: var(--accent); flex-shrink: 0; }
.esign-tp-toolbar { display: flex; align-items: center; gap: 10px; }
.esign-tp-zoom { display: flex; align-items: center; gap: 4px; }
.esign-tp-zoom .iconbtn {
  width: 26px; height: 26px; font-size: 1rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.esign-tp-zoomval {
  min-width: 46px; text-align: center;
  font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--fg-2);
}
/* The fixed scroll window; the stage grows past it when zoomed and pans via scroll. */
.esign-tp-viewport {
  position: relative;
  flex: 1;
  min-height: 220px;
  max-height: 56vh;
  overflow: auto;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.esign-tp-stage {
  position: relative;
  margin: 10px auto;              /* centred when it fits; scroll-safe when larger */
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.esign-tp-stage.err { cursor: default; background: var(--bg-1); }
/* Absolute inset:0 pins the image to the stage box on all four edges, so its size
   is defined by the stage (page aspect × zoom) and NEVER by its own intrinsic
   pixels — a DPI swap or aspect mismatch can't letterbox or resize it. */
.esign-tp-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.esign-tp-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; padding: 20px;
}
.esign-tp-empty span {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 0.75rem; padding: 8px 14px; border-radius: 20px;
}
.esign-tp-box {
  position: absolute; box-sizing: border-box;
  border: 2px solid var(--accent);
  background: rgba(56, 132, 255, 0.16);
  cursor: move;
}
.esign-tp-box-label {
  position: absolute; top: -18px; left: -2px; white-space: nowrap;
  font-size: 0.625rem; font-weight: 600; line-height: 1.4;
  color: #fff; background: var(--accent);
  padding: 1px 6px; border-radius: 3px;
  pointer-events: none;
}
.esign-tp-handle {
  position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  background: var(--accent); border: 2px solid #fff; border-radius: 3px;
  cursor: nwse-resize;
}

/* ============ eSign expanded form ============ */
.esign-truck-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.esign-truck-card strong { font-size: 0.875rem; color: var(--fg-0); }

.esign-totals {
  margin-top: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #6b46c1, #4c1d95);
  color: white;
  border-radius: 10px;
}
.esign-totals-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}
.esign-totals-row.sub {
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: 4px; padding-top: 8px;
}
.esign-totals-row.total {
  border-top: 1px solid rgba(255,255,255,0.4);
  margin-top: 6px; padding-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #fbbf24;
}

/* ============ Title upload editor ============ */
.tu-empty {
  padding: 14px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}
.tu-empty-body {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px;
  cursor: pointer;
  color: var(--fg-2);
  border-radius: 7px;
}
.tu-empty-body:hover { background: var(--bg-2); color: var(--fg-0); }
.tu-empty-body svg { color: var(--accent); }
.tu-empty-body strong { font-size: 0.875rem; color: var(--fg-0); }
.tu-empty-body span { font-size: 0.75rem; color: var(--fg-3); }
.tu-error {
  margin: 8px 0;
  padding: 8px 12px;
  background: color-mix(in oklch, var(--danger) 12%, var(--bg-1));
  border: 1px solid var(--danger);
  border-radius: 7px;
  font-size: 0.75rem;
  color: var(--danger);
}

.tu-editor {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.tu-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.tu-hd strong { font-size: 0.8125rem; color: var(--fg-0); }

.tu-workspace {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  padding: 12px;
  align-items: start;
}
.tu-canvas-wrap {
  position: relative;
  background: #2a2a2e;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: auto;
  max-height: 520px;
  display: flex; justify-content: center;
  padding: 12px;
}
.tu-canvas {
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: block;
  user-select: none;
}
.tu-drop-hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.tu-field {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 2px solid;
}
.tu-field-ok    { background: color-mix(in oklch, var(--ok) 22%, white); border-color: var(--ok); color: var(--ok); }
.tu-field-info  { background: color-mix(in oklch, var(--info) 22%, white); border-color: var(--info); color: var(--info); }
.tu-field-warn  { background: color-mix(in oklch, var(--warn) 22%, white); border-color: var(--warn); color: #b25800; }
.tu-field-glyph { font-size: 0.875rem; }
.tu-field-label { font-size: 0.6562rem; letter-spacing: 0.02em; }
.tu-field-x {
  position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px;
  border: 0; padding: 0;
  background: var(--danger);
  color: white;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.tu-field-resize {
  position: absolute; bottom: -4px; right: -4px;
  width: 12px; height: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid currentColor;
  border-radius: 2px;
  cursor: nwse-resize;
}

.tu-palette {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 520px;
  overflow-y: auto;
}
.tu-palette-hd {
  font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3);
  padding: 4px 6px 8px;
}
.tu-palette-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: var(--bg-1);
  border: 1.5px solid var(--line-soft);
  border-radius: 7px;
  cursor: grab;
  font-size: 0.7812rem;
  font-weight: 500;
  color: var(--fg-1);
  user-select: none;
}
.tu-palette-item:active { cursor: grabbing; }
.tu-palette-item:hover { border-color: var(--fg-3); }
.tu-palette-ok    { border-left: 4px solid var(--ok); }
.tu-palette-info  { border-left: 4px solid var(--info); }
.tu-palette-warn  { border-left: 4px solid var(--warn); }
.tu-palette-glyph { font-size: 0.875rem; }
.tu-placed {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: var(--bg-1);
  border-radius: 6px;
  font-size: 0.6875rem;
  position: relative;
}
.tu-placed-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
}
.tu-placed-coords {
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-size: 0.625rem;
  margin-left: auto;
  padding-right: 18px;
}

.tu-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
}

/* QR on success */
.esign-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 14px 0;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.esign-qr-label {
  font-size: 0.75rem; font-weight: 600;
  color: var(--fg-1);
  margin-bottom: 6px;
}
.esign-qr img { border-radius: 6px; }

/* ============ Title follow-up reminders ============ */
/* Reminder card inside the title detail drawer */
.td-remind-section { padding-top: 14px; }
.td-remind {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
}
.td-remind.overdue { border-color: color-mix(in oklch, var(--danger) 40%, var(--line)); background: color-mix(in oklch, var(--danger-soft) 22%, var(--bg-1)); }
.td-remind.today   { border-color: color-mix(in oklch, var(--warn) 42%, var(--line)); background: color-mix(in oklch, var(--warn-soft) 24%, var(--bg-1)); }
.td-remind.ok      { border-color: var(--line-soft); }
.td-remind.paused  { border-color: var(--line-soft); opacity: 0.9; }

.td-remind-top { display: flex; align-items: flex-start; gap: 10px; }
.td-remind-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line-soft);
}
.td-remind.overdue .td-remind-icon { background: color-mix(in oklch, var(--danger) 16%, var(--bg-2)); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, var(--line)); }
.td-remind.today .td-remind-icon   { background: color-mix(in oklch, var(--warn) 16%, var(--bg-2)); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 30%, var(--line)); }
.td-remind-status { font-size: 0.875rem; font-weight: 600; color: var(--fg-0); line-height: 1.3; }
.td-remind-sub { font-size: 0.75rem; color: var(--fg-2); margin-top: 2px; font-family: var(--font-mono); }
.td-remind-pill {
  flex-shrink: 0;
  font-size: 0.75rem; font-weight: 700; font-family: var(--font-mono);
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--line-soft);
}
.td-remind-pill.overdue { background: color-mix(in oklch, var(--danger) 16%, var(--bg-2)); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, var(--line)); }
.td-remind-pill.today   { background: color-mix(in oklch, var(--warn) 16%, var(--bg-2)); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 30%, var(--line)); }

.td-remind-who {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.td-remind-actions { margin-top: 12px; }
.td-remind-lbl {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); display: block; margin-bottom: 6px;
}
.td-remind-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.td-remind-row { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.td-remind-mini { flex: 1; min-width: 130px; }
.td-remind-date { width: 100%; }
.td-remind-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.td-remind-cadence { display: flex; align-items: center; gap: 8px; }
.td-remind-cadence .td-remind-lbl { margin-bottom: 0; }
.td-remind-cadence .inv-input { width: auto; padding: 4px 8px; }

/* Follow-up chip in the Titles table status cell */
.title-followup {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--fg-2);
}
.title-followup.due { color: var(--danger); }
.title-followup.paused { color: var(--fg-3); }

/* Dashboard "Title follow-ups due" card */
.title-fu-card .card-hd h3 { display: inline-flex; align-items: center; }
.title-fu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
}
.title-fu-row .col { cursor: pointer; }
.title-fu-badge {
  flex-shrink: 0;
  font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono);
  padding: 4px 9px; border-radius: 8px; min-width: 64px; text-align: center;
}
.title-fu-badge.overdue { background: color-mix(in oklch, var(--danger) 16%, var(--bg-2)); color: color-mix(in oklch, var(--danger) 72%, var(--fg-0)); }
.title-fu-badge.today   { background: color-mix(in oklch, var(--warn) 16%, var(--bg-2)); color: color-mix(in oklch, var(--warn) 72%, var(--fg-0)); }
.title-fu-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ============ Transport quote ============ */
.tq-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.tq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tq-field .upcase, .tq-rate .upcase { margin-bottom: 0; }
.tq-arrow { display: grid; place-items: center; color: var(--fg-3); padding-bottom: 9px; }
.tq-miles-row { display: flex; gap: 10px; align-items: end; }
.tq-miles { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; }
.tq-rates { display: flex; gap: 10px; }
.tq-rate { display: flex; flex-direction: column; gap: 6px; flex: 1; }

.tq-result {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.tq-result.in { grid-template-columns: 1fr; }
.tq-result-main {
  padding: 16px 18px;
  background: color-mix(in oklch, var(--accent-soft) 35%, var(--bg-2));
  border-right: 1px solid var(--line-soft);
}
.tq-result.in .tq-result-main { border-right: 0; border-bottom: 1px solid var(--line-soft); }
.tq-big { font-family: var(--font-mono); font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; }
.tq-split { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.tq-split-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; color: var(--fg-2); }
.tq-split-row.margin { font-weight: 700; color: var(--fg-1); font-size: 0.9375rem; }
.tq-split-row.margin .num { color: var(--ok); }
.tq-note {
  display: flex; gap: 9px; padding: 14px 18px; align-items: flex-start;
  color: var(--fg-2); font-size: 0.75rem; line-height: 1.5;
}
.tq-note svg { flex-shrink: 0; margin-top: 1px; color: var(--fg-3); }

.tq-saved {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); cursor: pointer; transition: border-color 120ms;
}
.tq-saved:hover { border-color: var(--accent); }
.tq-saved-ico {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent-soft) 50%, var(--bg-1)); color: var(--accent);
}

/* Inbound transport: estimate vs. billed */
.itp { display: flex; flex-direction: column; gap: 10px; }
.itp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); cursor: pointer; transition: border-color 120ms;
}
.itp-row[role="button"]:hover { border-color: var(--accent); }
.itp-row.billed { background: color-mix(in oklch, var(--ok) 8%, var(--bg-2)); border-color: color-mix(in oklch, var(--ok) 35%, var(--line)); cursor: default; }
.itp-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
}
.itp-ico.est { background: color-mix(in oklch, var(--warn) 16%, var(--bg-1)); color: var(--warn); }
.itp-ico.billed { background: color-mix(in oklch, var(--ok) 18%, var(--bg-1)); color: var(--ok); }
.itp-tag {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; margin-top: 2px;
}
.itp-tag.est { background: color-mix(in oklch, var(--warn) 18%, var(--bg-2)); color: var(--warn); }
.itp-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.75rem; line-height: 1.45; color: var(--fg-2);
  padding: 9px 11px; border-radius: var(--radius);
  background: var(--bg-2);
}
.itp-note.warn { background: color-mix(in oklch, var(--warn) 12%, var(--bg-2)); color: color-mix(in oklch, var(--warn) 75%, var(--fg-1)); }
.itp-note svg { flex-shrink: 0; margin-top: 1px; }
.itp-bill {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
}
.itp-bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Multi-unit invoice line prices */
.inv-line-prices { display: flex; flex-direction: column; gap: 8px; }
.inv-line-price {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
}
.inv-line-price .inv-money-input { width: 140px; flex-shrink: 0; }
.inv-line-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius);
  background: color-mix(in oklch, var(--accent-soft) 35%, var(--bg-2));
  font-size: 0.8125rem; margin-top: 2px;
}
.inv-line-total strong { font-size: 1rem; }

/* Deal: multi-unit cards */
.deal-unit-card { display: flex; align-items: center; gap: 10px; }
.deal-unit-card .crm-unit-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.deal-unit-card + .deal-unit-card { margin-top: 8px; }
.deal-add-unit { margin-top: 10px; width: 100%; }
.iconbtn-sm {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--fg-3); cursor: pointer;
}
.iconbtn-sm:hover { border-color: var(--danger); color: var(--danger); }

/* ============ Sale channels (retail / wholesale / export) ============ */
.chan-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chan-pill {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--bg-1); cursor: pointer; text-align: left; transition: all 120ms;
}
.chan-pill:hover { border-color: var(--fg-3); }
.chan-pill-lbl { font-size: 0.8125rem; font-weight: 700; color: var(--fg-1); }
.chan-pill-sub { font-size: 0.6562rem; color: var(--fg-3); letter-spacing: .02em; }
.chan-pill.on.chan-retail    { border-color: var(--fg-2); background: color-mix(in oklch, var(--fg-2) 8%, var(--bg-1)); }
.chan-pill.on.chan-wholesale { border-color: var(--accent); background: var(--accent-soft); }
.chan-pill.on.chan-wholesale .chan-pill-lbl { color: var(--accent); }
.chan-pill.on.chan-export    { border-color: var(--info, #2a6fdb); background: color-mix(in oklch, var(--info, #2a6fdb) 12%, var(--bg-1)); }
.chan-pill.on.chan-export .chan-pill-lbl { color: var(--info, #2a6fdb); }

/* A5.1: TAX TREATMENT pills (Buyer tab). The bare `.on` state had NO rule at all, so a chosen
   treatment rendered pixel-identical to unchosen — the focus ring after a click read as the
   "selection" and its disappearance on blur read as a revert. The chosen pill must be
   unmistakable at a glance; unchosen pills stay neutral so "nothing picked" never looks like
   a default. */
.tt-pill { position: relative; }
.tt-pill.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.tt-pill.on .chan-pill-lbl { color: var(--accent); }
.tt-check {
  position: absolute; top: 6px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--bg-1);
}
/* Treatment labels can be long ("Rolling stock (interstate carrier)") — leave room for the check. */
.tt-pill .chan-pill-lbl { padding-right: 18px; }

/* A5.1: read-only treatment echo on Pricing & fees — the choice lives on the Buyer tab. */
.tt-echo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-echo-val { font-size: 0.8125rem; font-weight: 700; color: var(--fg-1); display: inline-flex; align-items: center; gap: 5px; }
.tt-echo-val.on { color: var(--accent); }
.tt-echo-val.warn { color: var(--warn); }
.tt-echo-link { margin-left: auto; }

.chan-dest { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chan-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  font-size: 0.75rem; line-height: 1.45; color: var(--fg-2);
  padding: 9px 11px; border-radius: var(--radius); background: var(--bg-2);
}
.chan-note svg { flex-shrink: 0; margin-top: 1px; color: var(--fg-3); }

/* Compact tag on deal cards / rows */
.chan-tag {
  flex-shrink: 0; font-size: 0.5938rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.chan-tag.chan-wholesale { background: var(--accent-soft); color: var(--accent); }
.chan-tag.chan-export    { background: color-mix(in oklch, var(--info, #2a6fdb) 16%, var(--bg-2)); color: var(--info, #2a6fdb); }

/* Pipeline filter row */
.chan-filter { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.chan-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-1); cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2);
  transition: all 120ms;
}
.chan-filter-chip:hover { border-color: var(--fg-3); color: var(--fg-1); }
.chan-filter-chip.on { background: var(--fg-1); color: var(--bg-1); border-color: var(--fg-1); }
.chan-filter-chip.on.chan-wholesale { background: var(--accent); border-color: var(--accent); color: #fff; }
.chan-filter-chip.on.chan-export { background: var(--info, #2a6fdb); border-color: var(--info, #2a6fdb); color: #fff; }
.chan-filter-ct {
  font-size: 0.6875rem; font-weight: 700; padding: 0 6px; border-radius: 999px;
  background: color-mix(in oklch, currentColor 16%, transparent);
}

/* ============ Commissions ============ */
.comp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.comp-sum-stat { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: var(--bg-1); }
.comp-sum-val { font-family: var(--font-mono); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 2px; }
.comp-sum-val.accent { color: var(--accent); }

.comp-grid { display: flex; flex-direction: column; gap: 16px; }
.comp-card { border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: var(--bg-1); overflow: hidden; }
.comp-card-hd { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }

.comp-payout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.comp-stat { padding: 16px 18px; border-right: 1px solid var(--line-soft); }
.comp-stat.total { background: color-mix(in oklch, var(--ok) 7%, var(--bg-1)); border-right: 0; }
.comp-val { font-family: var(--font-mono); font-size: 1.1875rem; font-weight: 700; margin-top: 4px; }
.comp-val.accent { color: var(--accent); }
.comp-val.big { font-size: 1.4375rem; font-weight: 800; color: var(--ok); }

.comp-sales { padding: 14px 18px 16px; border-top: 1px solid var(--line-soft); }
.comp-sales-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comp-sale-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.comp-sale-row:last-child { border-bottom: 0; }

.comp-foot-note {
  display: flex; gap: 8px; align-items: center; margin-top: 18px;
  font-size: 0.75rem; color: var(--fg-3); padding: 10px 12px;
  background: var(--bg-2); border-radius: var(--radius);
}
.comp-foot-note svg { flex-shrink: 0; }

/* Plan editor */
.comp-editor { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; background: var(--bg-2); }
.comp-field { display: flex; flex-direction: column; gap: 6px; }
.comp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comp-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comp-method {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--bg-1); cursor: pointer; text-align: left;
}
.comp-method strong { font-size: 0.8125rem; }
.comp-method small { font-size: 0.6562rem; color: var(--fg-3); }
.comp-method.on { border-color: var(--accent); background: var(--accent-soft); }
.comp-method.on strong { color: var(--accent); }

/* ── Commission model band ── */
.comm-model-band {
  border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
  background: var(--bg-1); margin-bottom: 20px; overflow: hidden;
}
.comm-model-band.previewing { border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent); }
.cmb-main { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.cmb-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.cmb-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.cmb-label .upcase { font-size: 0.625rem; letter-spacing: 0.08em; color: var(--fg-3); text-transform: uppercase; }
.cmb-name { font-size: 1rem; letter-spacing: -0.01em; }
.cmb-preview-tag {
  font-size: 0.5938rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); padding: 2px 7px; border-radius: 999px;
}
.comm-model-band.readonly .cmb-icon { background: var(--bg-3); color: var(--fg-2); }

.comm-params {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 22px;
  padding: 16px 18px; border-top: 1px solid var(--line-soft); background: var(--bg-2);
}
.comm-param-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.comm-param-hd .upcase { font-size: 0.6562rem; letter-spacing: 0.06em; color: var(--fg-2); text-transform: uppercase; }
.comm-param-val { font-size: 0.875rem; font-weight: 700; color: var(--accent); }
.comm-param-suf { font-size: 0.6875rem; color: var(--fg-3); margin-left: 2px; font-weight: 500; }
.comm-range { width: 100%; accent-color: var(--accent); cursor: pointer; }

.cmb-apply {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--line-soft); background: color-mix(in oklch, var(--accent-soft) 22%, var(--bg-1));
}
.cmb-apply .text-sm { color: var(--fg-2); }

/* ── Model gallery ── */
.comm-gallery { width: min(940px, 96vw); }
.comm-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.comm-model-card {
  display: flex; flex-direction: column; gap: 7px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-1); padding: 14px; font: inherit;
  transition: border-color 120ms, background 120ms, transform 80ms;
}
.comm-model-card:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.comm-model-card.current { border-color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 30%, var(--bg-1)); }
.cmc-top { display: flex; justify-content: space-between; align-items: center; }
.cmc-live { display: inline-flex; align-items: center; gap: 3px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ok); }
.cmc-name { font-size: 0.9062rem; letter-spacing: -0.01em; }
.cmc-blurb { font-size: 0.75rem; line-height: 1.45; color: var(--fg-2); margin: 0; flex: 1; }
.cmc-foot { font-size: 0.6562rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Payout breakdown ── */
.comp-breakdown { padding: 4px 18px 12px; display: flex; flex-direction: column; gap: 1px; }
.comp-bd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.comp-bd-row:last-child { border-bottom: 0; }
.comp-bd-label { font-size: 0.7812rem; color: var(--fg-2); }
.comp-bd-sub { color: var(--fg-3); font-size: 0.6875rem; }
.comp-bd-val { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.comp-bd-val.neg { color: var(--warn); }

/* View-as switcher */
.viewas { position: relative; width: 100%; }
.sb-foot-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 0; text-align: left;
}
.sb-foot-btn .who { min-width: 0; flex: 1; }
.sb-foot-btn:hover { opacity: 0.85; }
.viewas-menu {
  position: absolute; bottom: calc(100% + 10px); left: 0; right: 0;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3); padding: 6px; z-index: 1000;
}
.viewas-hd { font-size: 0.6562rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); padding: 8px 10px 6px; }
.viewas-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: 8px; text-align: left;
}
.viewas-opt:hover { background: var(--bg-2); }
.viewas-opt.on { background: var(--accent-soft); }
.viewas-tag { font-size: 0.5938rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; }
.viewas-note { font-size: 0.6875rem; color: var(--fg-3); padding: 8px 10px 4px; line-height: 1.4; border-top: 1px solid var(--line-soft); margin-top: 4px; }

/* ============ Parts ============ */
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.linkish:hover { text-decoration: underline; }
.inv-callout.danger { background: color-mix(in oklch, var(--danger-soft) 22%, var(--bg-2)); border-color: color-mix(in oklch, var(--danger) 25%, var(--line)); }
.inv-callout.danger svg { color: var(--danger); }

/* vendor chip */
.pv-chip { display: inline-flex; align-items: center; gap: 7px; }
.pv-ini {
  display: grid; place-items: center; border-radius: 6px;
  background: var(--bg-3); color: var(--fg-1);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.625rem;
  flex-shrink: 0; letter-spacing: -0.02em;
}
.pv-name { font-size: 0.7812rem; color: var(--fg-1); white-space: nowrap; }

/* catalog filter bar */
.parts-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 6px 10px; min-width: 320px; flex: 1; max-width: 460px;
}
.parts-search input { flex: 1; background: none; border: 0; color: var(--fg-0); font-size: 0.8125rem; outline: none; }
.parts-search input::placeholder { color: var(--fg-3); }
.filterbar-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* catalog table */
.parts-table td { vertical-align: middle; }
.parts-new {
  display: inline-block; margin-left: 7px; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--accent-ink); background: var(--accent); padding: 1px 5px; border-radius: 4px; vertical-align: 1px;
}

/* purchases */
.parts-purchase-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.parts-expand-row td { background: var(--bg-0); }
.parts-receipt-lines { padding: 6px 14px 12px 28px; display: flex; flex-direction: column; gap: 2px; }
.parts-rl {
  display: grid; grid-template-columns: 200px 1fr 130px 110px; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 6px;
}
.parts-rl:hover { background: var(--bg-2); }
.parts-rl-pn { text-align: left; font-size: 0.75rem; }
.parts-rl-desc { font-size: 0.8125rem; color: var(--fg-1); }

/* retail */
.parts-retail-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(120deg, color-mix(in oklch, var(--accent-soft) 32%, var(--bg-1)) 0%, var(--bg-1) 70%);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
}
.prb-badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 60%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line)); padding: 5px 9px; border-radius: 999px;
}
.prb-markup { text-align: right; }
.prb-markup .upcase { display: block; font-size: 0.625rem; color: var(--fg-3); letter-spacing: 0.08em; }
.prb-markup .num { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; color: var(--accent); }

.parts-store { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; }
@media (max-width: 1080px) { .parts-store { grid-template-columns: 1fr; } }
.parts-store-card { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-1); }
.psc-img {
  height: 110px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 10px, var(--bg-3) 10px, var(--bg-3) 20px);
  color: var(--fg-3);
}
.psc-img .mono { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--bg-1); padding: 3px 8px; border-radius: 4px; }
.psc-bd { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.psc-desc { font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.psc-price { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-top: 6px; }

/* part drawer */
.parts-drawer-bd { flex: 1; overflow: auto; padding: 22px 24px 28px; }
.parts-dh { margin-bottom: 18px; }
.parts-dh h2 { margin: 0; font-size: 1.375rem; letter-spacing: -0.01em; }
.parts-dh-desc { font-size: 0.9375rem; font-weight: 500; color: var(--fg-1); margin-top: 4px; }
.parts-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; }
.parts-stat { background: var(--bg-1); padding: 12px 14px; }
.parts-stat .upcase { font-size: 0.625rem; letter-spacing: 0.08em; color: var(--fg-3); text-transform: uppercase; }
.parts-stat .num { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.parts-sec { margin-bottom: 20px; }
.parts-sec h4 { margin: 0 0 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); }
.parts-vendor-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.parts-hist { display: flex; flex-direction: column; }
.parts-hist-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); }
.parts-hist-row:last-child { border-bottom: 0; }
.crm-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-0); }

/* scan modal */
.parts-scan-modal { width: min(720px, 96vw); }
.parts-scan-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.parts-scan-tabs button {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  padding: 11px 12px; font-size: 0.8125rem; font-weight: 500; color: var(--fg-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.parts-scan-tabs button:hover { color: var(--fg-0); }
.parts-scan-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.parts-scan-body { min-height: 280px; }

.parts-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 220px; border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-2); cursor: pointer; transition: border-color 120ms, background 120ms; text-align: center; padding: 24px;
}
.parts-dropzone:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 12%, var(--bg-2)); }
.parts-dropzone.drag { border-color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 22%, var(--bg-2)); }
.parts-dropzone.busy { cursor: default; border-style: solid; }
.parts-dropzone strong { font-size: 0.9375rem; }
.parts-reading { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.parts-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid color-mix(in oklch, var(--accent) 25%, var(--line));
  border-top-color: var(--accent); animation: parts-spin 700ms linear infinite; margin-bottom: 4px;
}
@keyframes parts-spin { to { transform: rotate(360deg); } }
.parts-ai-note { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--fg-3); margin-top: 8px; }
.parts-ai-note svg { color: var(--accent); }

/* review */
.parts-review { display: flex; flex-direction: column; gap: 16px; }
.parts-review-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.parts-review-lines { display: flex; flex-direction: column; gap: 6px; }
.prl-head, .prl-row { display: grid; grid-template-columns: 1.3fr 1.7fr 64px 96px 32px; gap: 8px; align-items: center; }
.prl-head { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); padding: 0 2px; }
.prl-head .num { text-align: right; }
.prl-pn { position: relative; display: flex; align-items: center; gap: 6px; }
.prl-tag { font-size: 0.5312rem; font-weight: 800; letter-spacing: 0.04em; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
.prl-tag.new { color: var(--accent-ink); background: var(--accent); }
.prl-tag.known { color: var(--fg-3); background: var(--bg-3); }
.prl-row .inv-input { padding: 6px 8px; font-size: 0.7812rem; }
.prl-row .inv-input.num { text-align: right; }
.parts-review-summary { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--fg-2); padding: 12px 14px; background: var(--bg-2); border-radius: var(--radius-sm); }
.parts-review-summary .num { font-family: var(--font-mono); }

/* done */
.parts-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 28px 20px; }
.parts-done-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--ok-soft) 50%, var(--bg-1)); color: var(--ok); margin-bottom: 10px; }
.parts-done-sub { margin-top: 8px; max-width: 380px; }

/* quantity steppers (catalog row + drawer adjust) */
.parts-qty-cell { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.parts-qty { min-width: 22px; text-align: center; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.parts-step {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-1);
  font-size: 0.9375rem; line-height: 1; display: grid; place-items: center; padding: 0; font-family: var(--font-mono);
}
.parts-step:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg-0); }
.parts-step:disabled { opacity: 0.35; cursor: not-allowed; }
.parts-step.lg { width: 32px; height: 32px; font-size: 1.125rem; }
.parts-adjust { display: flex; align-items: center; gap: 8px; }
.parts-edit-modal { width: min(640px, 96vw); }

/* ============ Reminders ============ */
.rem-list { display: flex; flex-direction: column; gap: 18px; }
.rem-section-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rem-section-bd { display: flex; flex-direction: column; gap: 8px; }

.rem-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color 120ms;
}
.rem-row:hover { border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); }
.rem-row.is-overdue { border-left: 3px solid var(--danger); }
.rem-row.is-done { opacity: 0.62; }
.rem-row.is-done .rem-title { text-decoration: line-through; }

.rem-check {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg-2);
  cursor: pointer; display: grid; place-items: center; color: var(--accent-ink); transition: all 100ms;
}
.rem-check:hover { border-color: var(--accent); }
.rem-check.on { background: var(--ok); border-color: var(--ok); color: #fff; }

.rem-when { width: 96px; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rem-when-main { font-size: 0.7812rem; font-weight: 600; }
.rem-when-rel { font-size: 0.6875rem; color: var(--fg-3); }

.rem-body { flex: 1; min-width: 0; }
.rem-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-title { font-size: 0.875rem; font-weight: 500; }
.rem-recur {
  display: inline-flex; align-items: center; gap: 3px; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent);
  background: var(--accent-soft); padding: 2px 6px; border-radius: 999px;
}
.rem-note { font-size: 0.7812rem; color: var(--fg-2); margin-top: 3px; line-height: 1.4; }
.rem-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.rem-recip { display: inline-flex; align-items: center; gap: 7px; }
.rem-avs { display: flex; }
.rem-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.5938rem; font-weight: 700;
  background: var(--bg-3); color: var(--fg-1); border: 1.5px solid var(--bg-1); margin-left: -5px;
}
.rem-avs .rem-av:first-child { margin-left: 0; }
.rem-av.more { background: var(--bg-2); color: var(--fg-3); }

.rem-link, .rem-emailed {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.7188rem;
  background: none; border: 0; cursor: pointer; color: var(--accent); padding: 0; font: inherit;
}
.rem-link:hover { text-decoration: underline; }
.rem-emailed { color: var(--fg-3); cursor: default; }

.rem-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.rem-snooze-wrap { position: relative; }
.rem-snooze-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 4px; min-width: 150px;
}
.rem-snooze-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 6px; font-size: 0.8125rem; color: var(--fg-1);
}
.rem-snooze-menu button:hover { background: var(--bg-2); }

/* recipient picker (modal) */
.rem-recip-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.rem-recip-chip {
  display: flex; align-items: center; gap: 9px; cursor: pointer; font: inherit; text-align: left;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-1); padding: 8px 10px;
}
.rem-recip-chip:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.rem-recip-chip.on { border-color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 30%, var(--bg-1)); }
.rem-recip-chip .col { flex: 1; }

/* toasts */
.rem-toasts {
  position: fixed; top: 70px; right: 20px; z-index: 5000;
  display: flex; flex-direction: column; gap: 12px; width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}
.rem-toast {
  pointer-events: auto;
  background: var(--bg-1); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,0.34);
  padding: 14px 16px; animation: rem-toast-in 260ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes rem-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.rem-toast-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rem-toast-hd strong { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); }
.rem-toast-ic {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.rem-toast-title { font-size: 0.9062rem; font-weight: 600; line-height: 1.3; }
.rem-toast-note { font-size: 0.7812rem; color: var(--fg-2); margin-top: 3px; line-height: 1.4; }
.rem-toast-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 9px 0 11px; font-size: 0.7188rem; color: var(--fg-3); }
.rem-toast-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ============ Period dropdown (Dashboard) ============ */
.period-dd { position: relative; }
.period-dd-scrim { position: fixed; inset: 0; z-index: 40; }
.period-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 16px 44px rgba(0,0,0,0.28);
  padding: 6px; min-width: 184px; display: flex; flex-direction: column; gap: 2px;
}
.period-dd-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 0.8125rem;
  color: var(--fg-1); text-align: left;
}
.period-dd-menu button:hover { background: var(--bg-2); }
.period-dd-menu button.on { color: var(--accent); font-weight: 600; }

/* ============ Reports sub-nav tabs ============ */
.rep-tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.rep-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px 11px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.8438rem; font-weight: 600; color: var(--fg-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rep-tabs button:hover { color: var(--fg-0); }
.rep-tabs button.on { color: var(--fg-0); border-bottom-color: var(--accent); }

/* ============ Monthly reports ============ */
.mrep { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.mrep-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; max-height: calc(100vh - 220px); overflow-y: auto; }
.mrep-month {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border: 1px solid var(--line-soft); background: var(--bg-1);
  border-radius: var(--radius); cursor: pointer; text-align: left; font: inherit;
  transition: border-color 120ms, background 120ms;
}
.mrep-month:hover { border-color: var(--line); background: var(--bg-2); }
.mrep-month.on { border-color: var(--accent); background: color-mix(in oklch, var(--accent-soft) 26%, var(--bg-1)); }
.mrep-month strong { font-size: 0.8438rem; display: flex; align-items: center; gap: 6px; }
.mrep-month-gross { font-size: 0.75rem; font-weight: 600; color: var(--fg-2); }
.mrep-prog {
  font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent);
  padding: 1px 5px; border-radius: 4px;
}
.mrep-body { min-width: 0; }
.mrep-years {
  display: flex; gap: 4px; background: var(--bg-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 3px;
}
.mrep-years button {
  flex: 1; padding: 7px 10px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2);
  border-radius: var(--radius-sm);
}
.mrep-years button:hover:not(.on) { color: var(--fg-0); }
.mrep-years button.on { background: var(--bg-0); color: var(--fg-0); box-shadow: 0 1px 0 var(--line); }
.mrep-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.mrep-head h2 { font-size: 1.3125rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.mrep-head-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.mrep-kpis .kpi { padding: 16px 18px; }
.mrep-stat {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 14px 16px;
}
.mrep-stat-v { font-size: 1.375rem; font-weight: 700; margin-top: 6px; letter-spacing: -0.01em; }

.mrep-invrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mrep-inv {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 14px; background: var(--bg-2);
}
.mrep-inv.max { border-color: color-mix(in oklch, var(--accent) 32%, var(--line)); background: color-mix(in oklch, var(--accent-soft) 22%, var(--bg-1)); }
.mrep-inv.min { border-color: color-mix(in oklch, var(--ok) 30%, var(--line)); background: color-mix(in oklch, var(--ok) 8%, var(--bg-1)); }
.mrep-inv-v { font-size: 1.25rem; font-weight: 700; margin: 6px 0 3px; letter-spacing: -0.01em; }
.mrep-foot {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft); font-size: 0.8125rem;
}
.mrep-foot .upcase { margin-right: 6px; }
.mrep-foot .num { font-weight: 600; }
.mrep-pct {
  display: inline-block; margin-left: 8px; font-size: 0.7188rem; font-weight: 600;
  color: var(--fg-2); font-variant-numeric: tabular-nums;
}

.mrep-bw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mrep-bw-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: var(--radius); background: var(--bg-2);
  border: 1px solid var(--line-soft);
}
.mrep-bw-cell strong { font-size: 0.8125rem; }
.mrep-bw-cell.up { border-left: 3px solid var(--ok); }
.mrep-bw-cell.down { border-left: 3px solid var(--warn); }

.mrep-table tfoot td { border-top: 2px solid var(--line); padding-top: 12px; }
.mrep-total td { font-weight: 600; background: var(--bg-2); }
.mrep-table tr.no-link:hover { background: transparent; }

/* Sale detail modal */
.sale-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
  padding: 16px; background: var(--bg-2); border-radius: var(--radius);
  border: 1px solid var(--line-soft); margin-bottom: 16px;
}
.sale-fact { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sale-fact strong { font-size: 0.875rem; }
.sale-fin { display: flex; flex-direction: column; }
.sale-fin-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 2px; border-bottom: 1px solid var(--line-soft);
}
.sale-fin-row.strong { font-weight: 600; }
.sale-fin-row.strong .sale-fin-val { font-weight: 700; }
.sale-fin-label { font-size: 0.8438rem; display: flex; flex-direction: column; gap: 1px; }
.sale-fin-sub { font-size: 0.6875rem; color: var(--fg-3); font-weight: 400; }
.sale-fin-val { font-size: 0.875rem; }
.sale-fin-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: color-mix(in oklch, var(--ok) 12%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--ok) 30%, var(--line));
  font-size: 0.9375rem; font-weight: 700;
}
.sale-fin-total .num { font-size: 1.125rem; color: var(--ok); }

@media (max-width: 980px) {
  .mrep { grid-template-columns: 1fr; }
  .mrep-rail { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; }
  .mrep-rail .upcase { width: 100%; }
  .mrep-years { width: 100%; }
  .mrep-month { flex: 1 1 200px; }
  .mrep-invrow { grid-template-columns: 1fr; }
}
.rem-toast-actions { display: flex; align-items: center; gap: 6px; }

/* ============================================================================
   Login screen — two-column brand + form (see client/js/login.jsx)
   Form panel uses the live theme tokens; brand panel has a self-contained dark
   palette so it stays dark regardless of theme.
   ============================================================================ */
:root {
  --d-bg0: oklch(0.155 0.005 60);
  --d-bg2: oklch(0.235 0.008 60);
  --d-line: oklch(0.330 0.010 60);
  --d-fg0: oklch(0.97 0.005 80);
  --d-fg2: oklch(0.62 0.010 70);
  --d-fg3: oklch(0.46 0.010 65);
  --d-red: oklch(0.62 0.190 25);
}

.login { display: grid; grid-template-columns: 1.05fr 1fr; height: 100vh; min-height: 600px; }

/* ---- Left · brand panel ---- */
.brandpane {
  position: relative; background: var(--d-bg0); color: var(--d-fg0);
  display: flex; flex-direction: column; padding: 48px 56px; overflow: hidden; isolation: isolate;
}
.brandpane::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(circle at 1px 1px, oklch(0.97 0.005 80 / 0.05) 1px, transparent 0);
  background-size: 26px 26px;
}
.brandpane::after {
  content: ""; position: absolute; z-index: -1; right: -200px; bottom: -180px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, color-mix(in oklch, var(--d-red) 26%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.brand-watermark {
  position: absolute; z-index: -1; right: -90px; bottom: -70px; width: 460px; height: 460px;
  opacity: 0.06; filter: grayscale(1) brightness(2.4); pointer-events: none; user-select: none;
}
.brand-watermark img { width: 100%; height: 100%; object-fit: contain; }

.bp-top { display: flex; align-items: center; gap: 13px; }
.bp-mark {
  width: 46px; height: 46px; border-radius: 11px; background: #fff; display: grid; place-items: center;
  flex-shrink: 0; overflow: hidden; box-shadow: 0 6px 20px -6px oklch(0 0 0 / 0.5);
}
.bp-mark img { width: 100%; height: 100%; object-fit: contain; }
.bp-word { display: flex; flex-direction: column; line-height: 1.12; }
.bp-word strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.bp-word small { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--d-fg3); margin-top: 3px; }

.bp-center { margin-top: auto; margin-bottom: auto; max-width: 460px; }
.bp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-red); font-weight: 600; margin-bottom: 22px;
}
.bp-eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--d-red);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--d-red) 22%, transparent);
}
.bp-center h1 { font-size: 2.5rem; line-height: 1.06; font-weight: 800; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.bp-center p { color: var(--d-fg2); font-size: 0.9375rem; line-height: 1.6; margin: 20px 0 0; max-width: 400px; }

.bp-feats { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.bp-feat { display: flex; align-items: center; gap: 13px; font-size: 0.875rem; color: var(--d-fg2); font-weight: 500; }
.bp-feat .tick {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  background: color-mix(in oklch, var(--d-red) 18%, var(--d-bg2)); color: var(--d-red);
}
.bp-foot { display: flex; align-items: center; gap: 14px; font-size: 0.75rem; color: var(--d-fg3); }

/* ---- Right · form panel ---- */
.formpane { background: var(--bg-1); display: grid; place-items: center; padding: 40px; overflow-y: auto; }
.formcard { width: 100%; max-width: 372px; }

.fc-head h2 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--fg-0); }
.fc-head p { color: var(--fg-2); font-size: 0.875rem; margin: 8px 0 0; }

.field { margin-top: 18px; }
.field > label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 7px; }
.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap .lead { position: absolute; left: 12px; color: var(--fg-3); display: grid; place-items: center; pointer-events: none; }
.login-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px 12px 40px; color: var(--fg-0); font: inherit; font-size: 0.875rem; outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.login-input::placeholder { color: var(--fg-3); }
.login-input:focus { border-color: var(--accent); background: var(--bg-1); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.login-input.err { border-color: var(--danger); }
.login-input.err:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent); }
.pw-toggle {
  position: absolute; right: 6px; background: transparent; border: 0; color: var(--fg-3);
  width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; cursor: pointer;
}
.pw-toggle:hover { color: var(--fg-1); background: var(--bg-3); }

.label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.label-row label { margin: 0; }
.field-row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--fg-1); cursor: pointer; user-select: none; }
.remember input { accent-color: var(--accent); width: 15px; height: 15px; }

.signin-btn {
  width: 100%; margin-top: 22px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius);
  padding: 13px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px; transition: filter 120ms ease, transform 60ms ease;
}
.signin-btn:hover { filter: brightness(1.07); }
.signin-btn:active { transform: translateY(1px); }
.signin-btn:disabled { opacity: 0.6; cursor: default; filter: none; transform: none; }
.signin-btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--accent-ink) 40%, transparent); border-top-color: var(--accent-ink);
  animation: login-spin 0.7s linear infinite; display: none;
}
.signin-btn.loading .spinner { display: block; }
.signin-btn.loading .label { opacity: 0.85; }
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-error {
  margin-top: 16px; display: flex; align-items: center; gap: 9px;
  background: color-mix(in oklch, var(--danger) 12%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--danger) 45%, var(--line));
  color: var(--danger); border-radius: var(--radius); padding: 10px 12px; font-size: 0.8125rem; font-weight: 500;
}

.fc-altrow { margin-top: 16px; text-align: center; }
.link-btn { background: none; border: 0; color: var(--accent); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--fg-3); cursor: default; text-decoration: none; }

.totp-qr { margin-top: 18px; display: grid; place-items: center; }
.totp-qr img { background: #fff; border-radius: var(--radius); padding: 8px; border: 1px solid var(--line); }
.totp-secret { margin-top: 12px; font-size: 0.75rem; color: var(--fg-3); text-align: center; word-break: break-all; }
.totp-secret .mono { font-family: var(--font-mono); color: var(--fg-2); }

.auth-note {
  margin-top: 16px; background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px 13px; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-1);
}
.fc-legal { margin-top: 26px; font-size: 0.7188rem; color: var(--fg-3); line-height: 1.5; }

.mobile-brand { display: none; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .brandpane { display: none; }
  .formpane { align-items: flex-start; padding-top: 56px; }
  .mobile-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
  .mobile-brand .bp-mark { width: 40px; height: 40px; border-radius: 10px; }
  .mobile-brand strong { font-size: 0.9375rem; font-weight: 800; }
  .mobile-brand small { display: block; font-size: 0.5938rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin-top: 2px; }
}

/* ============================================================================
   Phase B — Responsive foundations (phone ≤720px + touch). DESKTOP / mouse
   (pointer:fine, ≥721px) is intentionally untouched. See the responsive audit.
   ============================================================================ */

/* 1) Shared opt-in table -> stacked cards on phone. Tables carrying `.rcard`
   (Inventory, Parts catalog, Invoices list, unit-detail Invoices tab, Sales list)
   become one card per row, each cell a "LABEL: value" line via data-label. Other
   .dtable tables keep their horizontal-scroll behavior. */
@media (max-width: 720px) {
  table.rcard, table.rcard tbody, table.rcard tr { display: block; width: auto; }
  table.rcard thead { display: none; }
  table.rcard colgroup, table.rcard col { display: none; }
  table.rcard tr {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm, 10px);
    background: var(--bg-1);
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  table.rcard td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 0 !important;
    padding: 6px 0;
    text-align: right;
    white-space: normal;
    width: auto !important;
    max-width: none !important;   /* neutralize inline cell maxWidth on phone */
  }
  table.rcard td::before {
    content: attr(data-label);
    margin-right: auto;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--fg-3); text-align: left;
    flex: 0 0 auto;
  }
  /* Marker / action cells have no data-label: no label, right-aligned controls */
  table.rcard td:not([data-label])::before,
  table.rcard td[data-label=""]::before { content: none; }
  table.rcard td:not([data-label]) { justify-content: flex-end; }
}

/* 2) Boards never crush on phone. The Sales board becomes the same horizontal-
   scroll flex board the recon .kanban already is. (Receiving .recv-kanban now
   reuses .kanban; a min-width:721 rule below keeps its desktop 2-up look.) */
@media (max-width: 720px) {
  .deal-pipe { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 4px; }
  .deal-pipe .deal-col { flex: 0 0 280px; }
}
/* Receiving: desktop/tablet keeps two equal full-width columns (was an inline
   1fr 1fr grid); phone falls through to .kanban flex (scroll) like recon. */
@media (min-width: 721px) {
  .recv-kanban .kan-col { flex: 1 1 0; min-width: 0; max-height: none; }
}

/* 3) Finger-sized tap targets on touch devices (mouse/pointer:fine unchanged).
   Inline width/height:28px row buttons still expand because min-* wins over a
   smaller width/height. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .iconbtn { min-width: 44px; min-height: 44px; }
  .tab { min-height: 44px; }
  .top-actions .btn { min-width: 44px; min-height: 44px; }
  .dtable .iconbtn, table.rcard .iconbtn { min-width: 44px; min-height: 44px; }
}

/* 4) Sales period dropdown stays fully on-screen at phone width. */
@media (max-width: 720px) {
  .period-dd-menu { right: 0; left: auto; max-width: calc(100vw - 16px); }
}

/* ============================================================================
   Kanban drag grip — deliberate dragging on touch (see usePointerDrag).
   Touch/pen drags start from this handle; a swipe on the card body scrolls.
   The board containers + card bodies pan; only the grip owns the drag gesture.
   ============================================================================ */
.kanban, .loc-kanban { touch-action: pan-x pan-y; }
.drag-grip {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; min-height: 26px;
  color: var(--fg-3);
  font-size: 0.9375rem; line-height: 1;
  cursor: grab;
  touch-action: none;          /* the grip OWNS the gesture */
  user-select: none;
  border-radius: 6px;
}
.drag-grip:hover { color: var(--fg-1); background: var(--bg-2); }
.drag-grip:active { cursor: grabbing; }
/* Finger-sized on touch devices (mouse stays compact). */
@media (pointer: coarse) {
  .drag-grip { min-width: 44px; min-height: 44px; font-size: 1.125rem; }
}

/* ============================================================================
   Mobile Slice 3 — boards polish + the grouped vendor-spend table. DESKTOP /
   mouse (≥721px, pointer:fine) is untouched: every rule below is inside a
   max-width:720px or pointer:coarse query.
   ============================================================================ */

/* A) Boards read without zoom on phones: a column is ~one screen wide with the
   next peeking, instead of the cramped 220/280px. (Overrides the earlier
   .kan-col / .deal-col mobile widths — this rule is later + more specific.) */
@media (max-width: 720px) {
  .kanban .kan-col,
  .loc-kanban .loc-col,
  .deal-pipe .deal-col,
  .buying-pipe .deal-col { flex: 0 0 min(86vw, 320px); }
  /* a touch more breathing room in the cards for finger use */
  .deal-pipe .deal-card, .kanban .kan-card { padding: 12px; }
}

/* Deal board: HTML5 drag is mouse-only. On phones each card carries a native
   "Move to" stage picker (great touch UX, no fragile drag). Hidden on desktop
   so the drag experience there is byte-for-byte unchanged. */
.deal-move { display: none; }
@media (max-width: 720px) {
  .deal-move {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--line-soft);
  }
  .deal-move-lbl {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-3);
  }
  .deal-move select {
    flex: 1; min-height: 40px; padding: 6px 10px;
    border: 1px solid var(--line-soft); border-radius: 8px;
    background: var(--bg-1); color: var(--fg-1); font-size: 0.8125rem; font-weight: 600;
  }
}
@media (pointer: coarse) { .deal-move select { min-height: 44px; } }

/* B) Grouped vendor-spend table -> grouped SECTIONS on phone (a flat card stack
   would lose the group→lines→subtotal meaning). Each .vgroup-head becomes a
   section heading with its subtotal; each .vgroup-line becomes a label:value
   card beneath it. Desktop keeps the real grouped table (this is media-gated). */
@media (max-width: 720px) {
  table.vgroup, table.vgroup tbody, table.vgroup tr { display: block; width: auto; }
  table.vgroup thead { display: none; }

  table.vgroup tr.vgroup-head {
    display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px;
    margin: 16px 0 8px; padding: 0 0 6px;
    background: transparent !important;
    border-bottom: 2px solid var(--line-soft);
  }
  table.vgroup tr.vgroup-head td { display: inline; border: 0; padding: 0; white-space: normal; }
  table.vgroup tr.vgroup-head td:nth-child(1) { font-size: 0.8125rem; font-weight: 800; }
  table.vgroup tr.vgroup-head td:nth-child(2) { font-size: 0.6875rem; color: var(--fg-3); }
  table.vgroup tr.vgroup-head td:nth-child(3) { margin-left: auto; font-size: 0.8125rem; font-weight: 800; }
  table.vgroup tr.vgroup-head td:nth-child(4) { display: none; }

  table.vgroup tr.vgroup-line {
    border: 1px solid var(--line-soft); border-radius: 10px;
    background: var(--bg-1); padding: 8px 12px; margin-bottom: 8px;
  }
  table.vgroup tr.vgroup-line td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 0; padding: 5px 0; text-align: right; white-space: normal; width: auto;
  }
  table.vgroup tr.vgroup-line td::before {
    content: attr(data-label); margin-right: auto;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--fg-3); text-align: left;
  }
  table.vgroup tr.vgroup-line td:not([data-label])::before { content: none; }
}


/* ============================================================ */
/* ============ Receiving section (Slice 1) ================== */
/* Lifted from design/receiving/receiving.css. Card/row touch-  */
/* action is pan-x pan-y so body swipes scroll; drag via grip. */
/* ============================================================ */
/* ---------- RECEIVING STYLES ---------- */

/* ============================================================ */
/* ============ Receiving — Kanban, drawer, drop-folder ======= */
/* ============================================================ */

.rcv-howbar {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; margin-bottom: 14px;
  background: color-mix(in oklch, var(--info-soft) 26%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--info) 22%, var(--line-soft));
  border-radius: var(--radius); font-size: 0.7812rem; color: var(--fg-1); line-height: 1.45;
}
.rcv-howbar svg { flex-shrink: 0; margin-top: 1px; color: var(--info); }
.rcv-kpis { margin-bottom: 16px; }

/* lane accents */
.rcv-lane-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rcv-lane-dot.info { background: var(--info); }
.rcv-lane-dot.warn { background: var(--warn); }
.rcv-lane-dot.accent { background: var(--accent); }
.rcv-lane-dot.ok { background: var(--ok); }

/* board */
.rcv-kanban {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity;
  overscroll-behavior: contain;   /* board scroll never rubber-bands the page */
}
.rcv-col {
  flex: 1 1 0; min-width: 280px; scroll-snap-align: start;
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 320px);
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.rcv-col.drop-target {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent-soft) 32%, var(--bg-1));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 30%, transparent);
}
.rcv-col-hd { display: flex; align-items: center; gap: 8px; padding: 14px 14px 4px; }
.rcv-col-title { font-weight: 700; font-size: 0.8438rem; letter-spacing: -0.01em; }
.rcv-col-ct { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-2); background: var(--bg-2); padding: 2px 9px; border-radius: 20px; }
.rcv-col-sub { padding: 0 14px 10px; font-size: 0.6875rem; color: var(--fg-3); line-height: 1.3; border-bottom: 1px solid var(--line-soft); }
.rcv-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 60px; }
.rcv-empty { padding: 24px 8px; text-align: center; color: var(--fg-3); font-size: 0.75rem; border: 1px dashed var(--line-soft); border-radius: var(--radius); }

/* card */
.rcv-card {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
  cursor: grab; touch-action: pan-x pan-y; user-select: none;
  transition: border-color 100ms, transform 100ms, box-shadow 100ms;
}
.rcv-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.rcv-card.dragging { opacity: 0.35; cursor: grabbing; }
.rcv-card.flagged { border-left: 3px solid var(--danger); }
.rcv-card-top { display: flex; align-items: center; gap: 8px; }
.rcv-po { font-weight: 700; font-size: 0.8125rem; color: var(--fg-0); letter-spacing: 0.01em; }
.rcv-src { margin-left: auto; color: var(--fg-3); display: flex; }
.rcv-card-vendor { display: flex; align-items: center; gap: 9px; }
.rcv-vendor-name { font-weight: 600; font-size: 0.8125rem; line-height: 1.2; }

.rcv-prog { display: flex; align-items: center; gap: 8px; }
.rcv-prog-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.rcv-prog-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 200ms; }
.rcv-prog-txt { font-size: 0.6875rem; color: var(--fg-2); }

.rcv-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rcv-meta-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; white-space: nowrap; color: var(--fg-2); background: var(--bg-1); border: 1px solid var(--line-soft); padding: 3px 8px; border-radius: 20px; }
.rcv-meta-chip.warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 35%, var(--line-soft)); }
.rcv-meta-chip.ok { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 30%, var(--line-soft)); }
.rcv-truck-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 0; padding: 3px 8px; border-radius: 20px; }
.rcv-card-foot { display: flex; align-items: center; gap: 7px; padding-top: 9px; border-top: 1px dashed var(--line-soft); }

/* drag ghost */
.rcv-ghost {
  position: fixed; pointer-events: none; z-index: 9000;
  background: var(--bg-2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-2);
  transform: rotate(-1.5deg); opacity: 0.95;
}
.rcv-ghost-l1 { display: flex; align-items: center; justify-content: space-between; }
.rcv-ghost-l1 .mono { font-weight: 700; font-size: 0.8125rem; color: var(--fg-0); }
.rcv-ghost-l2 { font-size: 0.6875rem; color: var(--fg-2); margin-top: 2px; }
.rcv-ghost-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* badges */
.rcv-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 20px; background: var(--accent); color: var(--accent-ink); font-size: 0.6562rem; font-weight: 700; font-family: var(--font-mono); }
.rcv-badge.soft { background: var(--bg-3); color: var(--fg-2); }

/* detail drawer */
.rcv-drawer { width: min(560px, 96vw); }
.rcv-drawer-bd { flex: 1; overflow: auto; padding: 20px 22px 28px; }
.rcv-dh h2 { font-size: 1.375rem; margin: 0 0 12px; letter-spacing: 0.01em; }
.rcv-dh-vendor { display: flex; align-items: center; gap: 10px; }
.rcv-lane-move { display: flex; gap: 6px; margin: 18px 0 4px; background: var(--bg-1); padding: 4px; border-radius: var(--radius); border: 1px solid var(--line-soft); }
.rcv-lane-btn { flex: 1; padding: 8px 4px; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; color: var(--fg-2); transition: background 100ms, color 100ms; }
.rcv-lane-btn:hover { color: var(--fg-0); background: var(--bg-2); }
.rcv-lane-btn.on { color: var(--fg-0); }
.rcv-lane-btn.on.info { background: color-mix(in oklch, var(--info) 22%, var(--bg-2)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--info) 40%, transparent); }
.rcv-lane-btn.on.warn { background: color-mix(in oklch, var(--warn) 22%, var(--bg-2)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn) 40%, transparent); }
.rcv-lane-btn.on.accent { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent); }
.rcv-lane-btn.on.ok { background: color-mix(in oklch, var(--ok) 22%, var(--bg-2)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ok) 40%, transparent); }

.rcv-facts { margin: 18px 0 4px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.rcv-fact { display: flex; gap: 12px; padding: 9px 12px; font-size: 0.8125rem; align-items: baseline; }
.rcv-fact:nth-child(odd) { background: var(--bg-1); }
.rcv-fact .upcase { width: 78px; flex-shrink: 0; }

.rcv-sec { margin-top: 22px; }
.rcv-sec h4 { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 700; }
.rcv-docs { display: flex; flex-direction: column; gap: 8px; }
.rcv-doc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); color: var(--fg-1); transition: border-color 100ms; }
.rcv-doc:hover { border-color: var(--accent); }
.rcv-doc > svg:first-child { color: var(--accent); flex-shrink: 0; }

/* receive lines */
.rcv-lines { display: flex; flex-direction: column; gap: 8px; }
.rcv-line { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; transition: border-color 120ms, background 120ms; }
.rcv-line.done { background: color-mix(in oklch, var(--ok-soft) 22%, var(--bg-1)); border-color: color-mix(in oklch, var(--ok) 28%, var(--line-soft)); }
.rcv-line.flagged { border-color: color-mix(in oklch, var(--danger) 40%, var(--line-soft)); }
.rcv-line-main { display: flex; align-items: center; gap: 10px; }
.rcv-line-recv { display: flex; align-items: center; gap: 4px; }
.rcv-step { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); font-size: 1.1875rem; font-weight: 600; color: var(--fg-1); display: grid; place-items: center; line-height: 1; }
.rcv-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rcv-step:disabled { opacity: 0.4; cursor: not-allowed; }
.rcv-recv-n { min-width: 52px; text-align: center; font-size: 0.9375rem; font-weight: 700; }
.rcv-recv-n.ok { color: var(--ok); }
.rcv-recv-n.over { color: var(--warn); }
.rcv-flag-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-3); display: grid; place-items: center; }
.rcv-flag-btn:hover { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 40%, var(--line)); }
.rcv-flag-btn.on { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.rcv-flag-row { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); flex-wrap: wrap; }
.rcv-flag-types { display: flex; gap: 5px; }
.rcv-flag-pill { padding: 6px 11px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); font-size: 0.7188rem; font-weight: 600; color: var(--fg-2); text-transform: capitalize; }
.rcv-flag-pill.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.rcv-flag-note { flex: 1; min-width: 140px; }

/* email preview */
.rcv-mail-preview { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; }
.rcv-mail-row { display: flex; gap: 10px; font-size: 0.7812rem; padding: 3px 0; align-items: baseline; }
.rcv-mail-row .upcase { width: 40px; flex-shrink: 0; }
.rcv-mail-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); font-size: 0.7812rem; color: var(--fg-1); line-height: 1.5; }

/* toasts */
.rcv-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 8000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.rcv-toast { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--ok); border-radius: var(--radius); box-shadow: var(--shadow-2); animation: rcv-toast-in 220ms ease; text-align: left; width: 100%; }
@keyframes rcv-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.rcv-toast-ico { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in oklch, var(--ok) 20%, var(--bg-2)); color: var(--ok); display: grid; place-items: center; flex-shrink: 0; }
.rcv-toast strong { font-size: 0.8125rem; }

/* sent drawer */
.rcv-sent-drawer { width: min(480px, 96vw); }
.rcv-sent-card { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 12px; }
.rcv-sent-hd { display: flex; align-items: center; gap: 8px; }
.rcv-sent-to { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.rcv-to-chip { font-size: 0.6875rem; background: var(--bg-2); border: 1px solid var(--line-soft); padding: 3px 8px; border-radius: 20px; }
.rcv-sent-body { font-size: 0.7812rem; color: var(--fg-1); line-height: 1.5; white-space: pre-wrap; padding-top: 9px; border-top: 1px dashed var(--line-soft); }

/* drop-folder modal */
.rcv-inbox-modal { width: min(720px, 100%); }
.rcv-exchange-ico { width: 36px; height: 36px; border-radius: 9px; background: color-mix(in oklch, var(--info) 22%, var(--bg-2)); color: var(--info); display: grid; place-items: center; flex-shrink: 0; }
.rcv-inbox-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.rcv-inbox-tabs button { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border: 0; background: transparent; color: var(--fg-2); font-size: 0.8125rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rcv-inbox-tabs button.on { color: var(--fg-0); border-bottom-color: var(--accent); }
.rcv-inbox-body { max-height: min(560px, 66vh); overflow: auto; }
.rcv-inbox-sec { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--fg-3); margin: 6px 0 10px; }
.rcv-inbox-sec:not(:first-child) { margin-top: 22px; }
.rcv-email { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 8px; text-align: left; transition: border-color 100ms, transform 100ms; }
.rcv-email.pending:hover { border-color: var(--accent); transform: translateX(2px); cursor: pointer; }
.rcv-email-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.rcv-email-r { align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rcv-kind-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6562rem; color: var(--fg-2); background: var(--bg-2); padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.rcv-port-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7188rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 6px 11px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.rcv-email.parsed { opacity: 0.78; }
.rcv-parsed-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--ok); font-family: var(--font-mono); flex-shrink: 0; }
.rcv-inbox-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding: 11px 13px; background: var(--bg-1); border: 1px dashed var(--line); border-radius: var(--radius); font-size: 0.75rem; color: var(--fg-2); line-height: 1.5; }
.rcv-inbox-note svg { flex-shrink: 0; margin-top: 1px; color: var(--info); }
.rcv-review-from { display: flex; align-items: center; gap: 7px; font-size: 0.7812rem; color: var(--fg-2); margin-bottom: 14px; padding: 8px 11px; background: color-mix(in oklch, var(--info-soft) 22%, var(--bg-1)); border-radius: var(--radius); }
.rcv-review-from svg { color: var(--info); }
.rcv-review-meta { grid-template-columns: repeat(3, 1fr) !important; }

/* ============ Kiosk / display mode ============ */
.rcv-display { position: fixed; inset: 0; background: var(--bg-0); display: flex; flex-direction: column; padding: 18px 20px 20px; z-index: 50; }
.rcv-display-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rcv-display-brand { display: flex; align-items: center; gap: 12px; }
.rcv-display-brand .brand-mark { width: 40px; height: 40px; }
.rcv-display-brand strong { display: block; font-size: 1.1875rem; letter-spacing: -0.01em; }
.rcv-display-brand span { font-size: 0.8125rem; color: var(--fg-2); }
.rcv-display-actions { margin-left: auto; display: flex; gap: 8px; }
.rcv-kanban-display { flex: 1; max-height: none; }
.rcv-kanban-display .rcv-col { max-height: 100%; min-width: 240px; }
.rcv-kanban-display .rcv-col-title { font-size: 1rem; }
.rcv-kanban-display .rcv-card { padding: 14px; }
.rcv-kanban-display .rcv-po { font-size: 0.9375rem; }
.rcv-kanban-display .rcv-vendor-name { font-size: 0.875rem; }

/* tablet / touch + portrait. Landscape ≥1024 keeps the base equal-width 3-up (lanes fill when the
   collapsed sidebar gives them room); portrait ~768–834 gets fixed-width lanes that scroll-snap. */
@media (max-width: 1000px) {
  /* lanes fill the available width (so collapsing the sidebar widens them) but never shrink below
     300px — when they don't fit, the board scrolls + snaps. */
  .rcv-col { min-width: 300px; flex: 1 1 300px; }
  .rcv-kanban { scroll-snap-type: x proximity; }
  .rcv-review-meta { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .rcv-col { min-width: 82vw; flex: 0 0 82vw; }
  .rcv-kanban { scroll-snap-type: x mandatory; }
  .rcv-review-meta { grid-template-columns: 1fr !important; }
}
@media (pointer: coarse) {
  .rcv-step, .rcv-flag-btn { width: 42px; height: 42px; }
}

/* ============ Receiving — organize toolbar ============ */
.rcv-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 9px 11px;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.rcv-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; min-width: 220px; flex: 1 1 240px; max-width: 360px;
}
.rcv-search input { border: 0; background: transparent; color: var(--fg-0); font: inherit; font-size: 0.8125rem; width: 100%; outline: none; }
.rcv-vendor-sel { width: auto; min-width: 130px; padding: 8px 10px; font-size: 0.8125rem; }
.rcv-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--fg-2); font-size: 0.8125rem; font-weight: 600;
}
.rcv-filter-btn:hover { color: var(--fg-0); border-color: var(--fg-3); }
.rcv-filter-btn.on { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.rcv-tb-spacer { flex: 1 1 auto; }
.rcv-tb-group { display: flex; align-items: center; gap: 7px; }
.rcv-tb-lbl { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--fg-3); }
.rcv-toolbar.compact { background: transparent; border: 0; padding: 0 0 4px; }

/* in-lane group subheaders (sticky) */
.rcv-group-hd {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; margin: 2px 0 1px;
  font-size: 0.6562rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3);
  background: color-mix(in oklch, var(--bg-1) 92%, transparent);
  backdrop-filter: blur(4px); border-radius: var(--radius-sm);
}
.rcv-group-hd.urgent { color: var(--warn); }
.rcv-group-ct { font-family: var(--font-mono); color: var(--fg-3); font-weight: 600; }
.rcv-group-hd.urgent .rcv-group-ct { color: var(--warn); }

/* compact single-row card */
.rcv-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 8px 10px;
  cursor: grab; touch-action: pan-x pan-y; user-select: none;
  transition: border-color 100ms, transform 100ms;
}
.rcv-row:hover { border-color: var(--accent); transform: translateX(1px); }
.rcv-row.dragging { opacity: 0.35; cursor: grabbing; }
.rcv-row.flagged { border-left: 3px solid var(--danger); }
.rcv-row .rcv-po { font-size: 0.75rem; flex: 0 1 auto; min-width: 0; }
.rcv-row-flag { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.rcv-row-units { flex-shrink: 0; }
.rcv-row-prog { font-size: 0.6562rem; color: var(--accent); flex-shrink: 0; }
.rcv-row .rcv-meta-chip.sm { margin-left: auto; }
.rcv-meta-chip.sm { font-size: 0.625rem; padding: 2px 6px; gap: 3px; }
.rcv-truck-chip.sm { font-size: 0.625rem; padding: 2px 6px; flex-shrink: 0; }
.rcv-kanban.dense .rcv-col-body { gap: 6px; }

@media (max-width: 760px) {
  .rcv-toolbar { gap: 8px; }
  .rcv-tb-spacer { display: none; flex-basis: 100%; }
  .rcv-search { max-width: none; }
}

/* ============ Receiving — truck parts-only view (locked role) ============ */
.rcv-truck-modal { width: min(640px, 100%); }
.rcv-truck-badge { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.rcv-truck-body { max-height: min(620px, 70vh); overflow: auto; }
.rcv-truck-order { display: block; width: 100%; text-align: left; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; transition: border-color 100ms, transform 100ms; }
.rcv-truck-order:hover { border-color: var(--accent); transform: translateX(2px); }
.rcv-truck-order-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rcv-truck-order-hd .rcv-po { font-size: 0.8125rem; }
.rcv-truck-order-hd .trunc { flex: 1; min-width: 0; }
.rcv-truck-lines { display: flex; flex-direction: column; gap: 5px; padding: 9px 0; border-top: 1px dashed var(--line-soft); border-bottom: 1px dashed var(--line-soft); }
.rcv-truck-line { display: flex; align-items: center; gap: 8px; }
.rcv-truck-order-ft { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--fg-3); }

/* ============================================================ */
/* ============ Receiving — visual polish layer =============== */
/* ============================================================ */

/* Per-lane color token, inherited by everything inside the column */
.rcv-col.rcv-lane-incoming { --lane: var(--info);   --lane-soft: var(--info-soft); }
.rcv-col.rcv-lane-partial  { --lane: var(--accent); --lane-soft: var(--accent-soft); }
.rcv-col.rcv-lane-received { --lane: var(--ok);     --lane-soft: var(--ok-soft); }

/* Column: colored cap bar + soft depth */
.rcv-col {
  border-top: 3px solid var(--lane, var(--line));
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 6px 16px -10px oklch(0 0 0 / 0.18);
  overflow: hidden;
}
.rcv-col-hd {
  padding: 13px 14px 7px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--lane-soft) 30%, var(--bg-1)) 0%, var(--bg-1) 100%);
}
.rcv-col-hd .rcv-lane-dot { display: none; }
.rcv-col-title { font-size: 0.875rem; letter-spacing: -0.01em; }
.rcv-col-ct {
  background: color-mix(in oklch, var(--lane) 18%, var(--bg-2));
  color: var(--lane);
  font-weight: 700;
}
.rcv-col-sub { padding: 0 14px 11px; }
.rcv-col-body { padding: 11px; }

/* Group subheader: tiny lane tick + cleaner type */
.rcv-group-hd {
  padding: 7px 9px; margin: 3px 0 2px;
  background: color-mix(in oklch, var(--bg-1) 88%, transparent);
}
.rcv-group-hd.urgent {
  background: color-mix(in oklch, var(--warn-soft) 32%, var(--bg-1));
  color: var(--warn);
}

/* Cards: lane-colored left accent + lift on hover */
.rcv-card {
  border-left: 3px solid color-mix(in oklch, var(--lane) 42%, var(--line-soft));
  box-shadow: 0 1px 1px oklch(0 0 0 / 0.03);
}
.rcv-card:hover { border-color: color-mix(in oklch, var(--lane) 55%, var(--line)); border-left-color: var(--lane); }
.rcv-card.flagged { border-left-color: var(--danger); }
.rcv-row { border-left: 3px solid color-mix(in oklch, var(--lane) 42%, var(--line-soft)); }
.rcv-row.flagged { border-left-color: var(--danger); }

/* Received lane reads as "settled" */
.rcv-lane-received .rcv-card .rcv-po,
.rcv-lane-received .rcv-row .rcv-po { color: var(--fg-1); }

/* Vendor avatar picks up the lane tint */
.rcv-card-vendor .pv-ini { background: color-mix(in oklch, var(--lane) 16%, var(--bg-3)); color: var(--fg-0); }
.rcv-po { font-size: 0.8125rem; letter-spacing: 0.02em; }
.rcv-vendor-name { font-size: 0.8438rem; }
.rcv-card-foot { padding-top: 8px; }

/* ETA / status chips: filled when they need attention */
.rcv-meta-chip.warn {
  background: color-mix(in oklch, var(--warn) 16%, var(--bg-1));
  color: var(--warn); border-color: color-mix(in oklch, var(--warn) 32%, var(--line-soft)); font-weight: 600;
}
.rcv-meta-chip.ok {
  background: color-mix(in oklch, var(--ok) 14%, var(--bg-1));
  color: var(--ok); border-color: color-mix(in oklch, var(--ok) 28%, var(--line-soft)); font-weight: 600;
}
/* Partial progress bar: rounded, lane-tinted track */
.rcv-prog-bar { background: color-mix(in oklch, var(--accent) 12%, var(--bg-3)); height: 7px; }
.rcv-prog-bar span { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }

/* KPI tiles: icon badge + colored value, tinted top edge */
.rcv-kpis .kpi { position: relative; border-top: 2px solid var(--kpi-tone, var(--line-soft)); }
.rcv-kpi-ico {
  position: absolute; top: 13px; right: 13px;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--kpi-tone, var(--fg-3)) 16%, var(--bg-2));
  color: var(--kpi-tone, var(--fg-2));
}
.rcv-kpis .kpi .value { color: color-mix(in oklch, var(--kpi-tone, var(--fg-0)) 70%, var(--fg-0)); }
.rcv-kpi-incoming { --kpi-tone: var(--info); }
.rcv-kpi-soon     { --kpi-tone: var(--warn); }
.rcv-kpi-partial  { --kpi-tone: var(--accent); }
.rcv-kpi-flagged  { --kpi-tone: var(--danger); }

/* Drop-folder button shouldn't be the loudest thing — let the board breathe */
.rcv-howbar { border-radius: var(--radius-lg); }

/* Received archive — keep the Received lane lean */
.rcv-archive-link {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px 11px; margin-top: 2px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-2); font-size: 0.75rem; font-weight: 600;
}
.rcv-archive-link span { flex: 1; text-align: left; }
.rcv-archive-link:hover { border-color: var(--ok); color: var(--ok); background: color-mix(in oklch, var(--ok) 8%, transparent); }
.rcv-archive-drawer { width: min(460px, 96vw); }
.rcv-archive-search {
  display: flex; align-items: center; gap: 7px; margin: 0 18px 4px; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rcv-archive-search input { border: 0; background: transparent; color: var(--fg-0); font: inherit; font-size: 0.8125rem; width: 100%; outline: none; }
.rcv-arch-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--radius); margin-bottom: 7px; transition: border-color 100ms, transform 100ms;
}
.rcv-arch-row:hover { border-color: var(--ok); transform: translateX(2px); }

/* Collapsible group headers — fold away what you don't need at volume */
.rcv-group-hd {
  width: 100%; border: 0; cursor: pointer; font: inherit;
  gap: 6px;
}
.rcv-group-chev { flex-shrink: 0; transition: transform 130ms ease; color: var(--fg-3); }
.rcv-group-hd.urgent .rcv-group-chev { color: var(--warn); }
.rcv-group-hd.collapsed .rcv-group-chev { transform: rotate(-90deg); }
.rcv-group-lbl { flex: 1; text-align: left; }
.rcv-group-hd:hover { filter: brightness(1.08); }
.rcv-group-hd.collapsed { opacity: 0.78; }

/* Received lane summary — see the volume without scrolling cards */
.rcv-recv-stat {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: color-mix(in oklch, var(--ok-soft) 26%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--ok) 24%, var(--line-soft));
  border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--fg-1);
}
.rcv-recv-stat svg { color: var(--ok); flex-shrink: 0; }
.rcv-recv-stat strong { color: var(--ok); font-size: 0.875rem; font-family: var(--font-mono); }

/* ============================================================ */
/* ============ Receiving — tablet + kiosk pass =============== */
/* ============================================================ */

/* Kiosk: a quiet "updated HH:MM" auto-refresh indicator */
.rcv-display-sync {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  background: var(--bg-1); border: 1px solid var(--line-soft);
  color: var(--fg-2); font-size: 0.8125rem; white-space: nowrap;
}
.rcv-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: rcv-sync-pulse 2.4s ease-out infinite; }
@keyframes rcv-sync-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* Kiosk board: lanes fill the width in landscape; large, across-the-shop type */
.rcv-kanban-display { gap: 16px; }
.rcv-kanban-display .rcv-col { flex: 1 1 0; min-width: 240px; max-height: 100%; }
.rcv-kanban-display .rcv-col-sub { font-size: 0.75rem; }
.rcv-kanban-display .rcv-card { padding: 16px; gap: 11px; }
.rcv-kanban-display .rcv-card-meta { font-size: 0.7812rem; }
.rcv-kanban-display .rcv-meta-chip { font-size: 0.7812rem; padding: 4px 10px; }
.rcv-kanban-display .rcv-recv-stat { font-size: 0.8438rem; }
.rcv-kanban-display .rcv-card-move { display: none; }   /* kiosk is read-only */

/* A more obvious drag-grip — reads as a real handle, not just a glyph */
.drag-grip {
  border-radius: 6px; color: var(--fg-3);
  background: color-mix(in oklch, var(--line-soft) 60%, transparent);
}
.drag-grip:hover { background: var(--bg-3); color: var(--fg-1); }

/* On-card tap-to-move-lane controls (the easy touch path; drag is the bonus) */
.rcv-card-move {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 2px; padding: 9px 12px;
  border: 1px solid color-mix(in oklch, var(--lane, var(--accent)) 40%, var(--line-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--lane, var(--accent)) 12%, var(--bg-1));
  color: color-mix(in oklch, var(--lane, var(--accent)) 72%, var(--fg-0));
  font-size: 0.7812rem; font-weight: 700; cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.rcv-card-move:hover { background: color-mix(in oklch, var(--lane, var(--accent)) 20%, var(--bg-1)); border-color: var(--lane, var(--accent)); }
.rcv-row-check {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklch, var(--lane, var(--accent)) 40%, var(--line-soft));
  background: color-mix(in oklch, var(--lane, var(--accent)) 12%, var(--bg-1));
  color: color-mix(in oklch, var(--lane, var(--accent)) 72%, var(--fg-0)); cursor: pointer;
}
.rcv-row-check:hover { border-color: var(--lane, var(--accent)); }

/* ── Touch targets: ≥44px hit areas on coarse pointers ── */
@media (pointer: coarse) {
  .rcv-search { padding: 10px 12px; }
  .rcv-search input { font-size: 1rem; }      /* ≥16px also stops iOS zoom-on-focus */
  .rcv-vendor-sel { min-height: 44px; }
  .rcv-filter-btn { min-height: 44px; }
  .rcv-toolbar .seg-ctrl button { min-height: 44px; padding: 0 16px; }
  .rcv-lane-btn { min-height: 44px; }
  .rcv-card-move { min-height: 44px; }
  .rcv-row-check { width: 40px; height: 40px; }
  .rcv-truck-chip { min-height: 36px; }
  .rcv-display-actions .btn { min-height: 44px; }
  .rcv-display-sync { min-height: 44px; }
}

/* Tablet portrait: let the toolbar breathe + keep the intake modal off the edges */
@media (max-width: 834px) {
  .rcv-toolbar { gap: 8px; }
  .rcv-search { flex: 1 1 100%; max-width: none; }
  .ac-overlay { padding: 12px; }
}

/* ── Kiosk = a truly FIXED display: the board never pans; only a too-tall lane scrolls vertically ── */
.rcv-display { overflow: hidden; overscroll-behavior: none; touch-action: none; }
.rcv-display-hd { flex-wrap: wrap; }
.rcv-display-actions { flex-wrap: wrap; justify-content: flex-end; }
.rcv-kanban-display { overflow: hidden; overscroll-behavior: none; touch-action: none; }   /* no horizontal pan/bounce */
.rcv-kanban-display .rcv-col { flex: 1 1 0; min-width: 0; max-height: 100%; min-height: 0; }
.rcv-kanban-display .rcv-col-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }  /* only this scrolls, vertically */

/* ── Vendor combobox (searchable + add-new) ── */
.rcv-combo { position: relative; }
.rcv-combo-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  max-height: 240px; overflow-y: auto; padding: 4px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.rcv-combo-opt, .rcv-combo-add {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent; color: var(--fg-1);
  border-radius: var(--radius-sm); font-size: 0.8125rem; cursor: pointer;
}
.rcv-combo-opt.hi, .rcv-combo-opt:hover, .rcv-combo-add:hover { background: var(--bg-2); }
.rcv-combo-add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--line-soft); margin-top: 2px; }
/* Open upward when the field sits low in the viewport (keyboard / screen bottom won't cover it). */
.rcv-combo-menu.up { top: auto; bottom: calc(100% + 4px); }

/* Intake = a full-height sheet on a tablet/phone, so a focused field can scroll above the keyboard. */
@media (max-width: 900px) {
  .ac-overlay:has(.rcv-inbox-modal) { padding: 0; }
  .rcv-inbox-modal { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .rcv-inbox-body { max-height: none; flex: 1; }
}

/* ── Undo / Move-back: neutral (not lane-tinted), so it reads as a corrective action ── */
.rcv-card-move.undo, .rcv-row-check.undo {
  border-color: var(--line); background: var(--bg-1); color: var(--fg-2);
}
.rcv-card-move.undo:hover, .rcv-row-check.undo:hover { border-color: var(--warn); color: var(--warn); background: color-mix(in oklch, var(--warn) 8%, var(--bg-1)); }


/* ============ Unit Specifications panel (editable spec-sheet data) ============ */
.us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.us-row { min-width: 0; }
.us-row .upcase { display: flex; align-items: center; gap: 6px; }
.us-row .chip { font-size: 0.5625rem; padding: 1px 6px; }
@media (max-width: 760px) { .us-grid { grid-template-columns: 1fr; } }


/* ============ Mobile Slice 4 — forms & modals as full-screen sheets (≤720px) ============ */
/* DESKTOP UNTOUCHED: every rule below is gated to a phone-width viewport, so nothing above
   720px changes on any device. The dominant shared modal is .ac-overlay/.ac-modal (58 call
   sites) — fixing it here converts add/edit customer, vendor, cost, deal, reminders,
   lead-import, email-digest, mark-sold, new-deal, etc. to full-screen sheets in ONE place.
   Slide-overs (.crm-drawer, .dv-drawer, .notif-panel) go full-bleed. The bespoke .inv-modal
   (invoice builder) and .addu-modal (add-unit) were already made full-screen above. */
@media (max-width: 720px) {
  /* Shared centered modal → full-screen sheet with its own header + pinned footer.
     Modal fills the overlay, so it closes via the header ✕ / Escape (no backdrop gap to tap). */
  .ac-overlay { padding: 0; place-items: stretch; }
  .ac-modal {
    width: 100%; max-width: none;
    height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0;
  }
  .ac-hd { padding: 14px 16px; }
  .ac-body { padding: 16px; }
  .ac-foot {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .ac-foot > .btn, .ac-foot > button.btn { flex: 1 1 auto; justify-content: center; }
  /* Stack the multi-column field grid; drop the span-2 spotlight on the first two fields */
  .ac-grid { grid-template-columns: 1fr; }
  .ac-grid > .inv-field:first-child,
  .ac-grid > .inv-field:nth-child(2) { grid-column: auto; }

  /* Shared slide-overs go full-bleed so they read as sheets, not narrow rails */
  .crm-drawer, .dv-drawer, .notif-panel { width: 100vw; max-width: none; }

  /* Invoice builder top bar: let type-tabs + meta + close wrap instead of clipping */
  .inv-top { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }

  /* iOS zoom-on-focus fix: every form control ≥16px so focusing never triggers a page zoom.
     !important because several inline inputs carry higher-specificity 12–13px overrides. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 1rem !important; }

  /* Comfortable 44px tap targets on the text-like controls */
  .inv-input, .login-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select { min-height: 44px; }
  textarea { min-height: 72px; }
}

/* A4.1: the Documents review shell's BASE size, moved here from esign.jsx's inline style (an
   inline width can't be overridden by a media query, which is why B4's full-screen rule below
   never took effect). These are the exact values the inline style imposed, and they sit AFTER
   the ≤720px block on purpose so the ≤720 sheet rules can't change what phones already render.
   The ≥721px block below overrides them for the desktop full-screen treatment. */
.ac-modal.ac-modal-review { width: min(1500px, calc(100vw - 24px)); max-height: 92vh; }

/* ═══════════ Phase C — desktop readability & zoom tolerance (≥721px only) ═══════════
   Layout, type, and zoom fixes for the desktop band. Everything here is fenced to
   (min-width: 721px) so the finished ≤720px mobile layer renders exactly as before.
   Behavior unchanged — these rules only affect reflow, type size, and scroll fences. */
@media (min-width: 721px) {
  /* ── Zoom-tolerant reflow: browser zoom shrinks the LOGICAL viewport; nothing may
        push .content into horizontal scroll. Overflow-prone rows get their own fences. */
  /* overflow-y must be pinned: overflow-x:auto alone computes overflow-y to auto,
     and the active tab's underline (margin-bottom:-1px) overhangs the row by 1px —
     that phantom vertical overflow drew stray scrollbar arrows on every tab row. */
  .tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: thin; }
  /* Grid/flex children default to min-width:auto and refuse to shrink below content —
     the root cause of the dashboard/sales page-level overflow at 125–200% zoom. */
  .row-2 > *, .row-3 > *, .row-4 > * { min-width: 0; }
  .unit-hero > * { min-width: 0; }
  .unit-chips { flex-wrap: wrap; }
  .unit-facts > * { min-width: 0; }
  .page-hd { flex-wrap: wrap; }
  .card-hd { flex-wrap: wrap; row-gap: 6px; }
  .deal-pipe { overflow-x: auto; padding-bottom: 4px; }
  .deal-pipe > * { min-width: 0; }
  .card-bd { min-width: 0; }
  /* A table wider than its card scrolls INSIDE the card instead of widening the page. */
  .card-bd:has(.dtable) { overflow-x: auto; }
  .invX-search { flex: 0 1 320px; min-width: 160px; }
  /* Inventory filterbar search: shrinkable on desktop; the inline width stays authoritative ≤720. */
  .inv-qwrap { flex: 0 1 236px; min-width: 120px; }
  .inv-qwrap input { width: 100% !important; min-width: 0; }

  /* ── Sale-flow type raise: the dense builder + Documents modal read at 13px minimum
        (equivalents at the default 16px root; rem so OS/browser font settings apply). */
  .inv-modal-inner .text-sm, .ac-overlay .text-sm { font-size: 0.875rem; }    /* 14px */
  .inv-modal-inner .text-xs, .ac-overlay .text-xs { font-size: 0.8125rem; }   /* 13px */
  .inv-modal-inner .inv-input, .ac-overlay .inv-input { font-size: 0.875rem; }
  .inv-modal-inner .inv-field-hint, .ac-overlay .inv-field-hint { font-size: 0.8125rem; }
  .inv-modal-inner .upcase, .ac-overlay .upcase, .ac-overlay .ac-section h4 { font-size: 0.75rem; } /* 12px labels — uppercase + tracking */
  .inv-totals-mini > div { font-size: 0.875rem; }
  .esign-doc-tile { font-size: 0.875rem; }
  .inv-form-section h4 { font-size: 0.875rem; }

  /* ── The invoice builder is a full-screen surface: the form and the live document
        get the whole display instead of a 1400×900 window inside the workspace. */
  .inv-modal { padding: 0; }
  .inv-modal-inner { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .inv-body { grid-template-columns: minmax(340px, 440px) 1fr; }

  /* ── Documents modal, review step: the SAME full-screen treatment the builder gets above —
        the packet PDF takes the whole display instead of a centred window with a gutter.
        (B4 set only the height here; the 1500px inline width in esign.jsx outranked any width
        rule, so the surface stayed a box. That inline width is gone — see the base rule above.)
        Scoped with :has() so the ~58 other .ac-overlay modals keep their centred shell. */
  .ac-overlay:has(.ac-modal-review) { padding: 0; }
  .ac-modal.ac-modal-review {
    width: 100vw; height: 100dvh;
    max-width: none; max-height: none;
    border: 0; border-radius: 0;
  }
  .ac-modal-review .ac-body { display: flex; flex-direction: column; }
  .ac-modal-review .esign-review { flex: 1; height: auto; min-height: 0; }
  /* The placer's 56vh cap was sized for a windowed modal; full-screen it only letterboxes. */
  .ac-modal-review .esign-tp-viewport { max-height: none; }

  /* ── Title placer: scrollbars must never feed back into the fit measurement
        (appearing bars shrank the viewport → stage shrank → bars vanished → shake). */
  .esign-tp-viewport { scrollbar-gutter: stable both-edges; }
}

/* Squeezed desktop band (721–1200 logical px — e.g. 200% zoom on 1920, 150% on 1366):
   the unit hero's 4-across fact tiles drop to 2×2 instead of forcing overflow. */
@media (min-width: 721px) and (max-width: 1200px) {
  .unit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Document preview pane: the page centers when smaller than the pane (auto margins)
   and scrolls from the true top-left when zoomed past it — a transform-scaled child
   with centered flex alignment clips its leading edges instead. (All widths: the
   preview pane is desktop-only anyway — mobile hides it.) */
.inv-preview { align-items: flex-start; justify-content: flex-start; }
.inv-doc-stage { margin: auto; flex: none; }
.inv-doc-stage .inv-doc { transform-origin: top left; }

/* ═════════════════ Settings · F&I Rate Book grid (Slice D.1) ═════════════════
   The grid mirrors the SOURCE Truck Master sheet: terms down the side, every plan
   across the page, mileage bands nested under each plan. The table hugs its content
   (no width:100% stretch), so the first price column sits right beside the row
   label — no dead gap. The wrap is the ONLY horizontal scroller (page never
   overflows), which also carries the layout to 200% zoom and to phones — the 293
   cells pan inside it, no phone redesign. All-new class names: nothing outside
   this screen changes. */

/* Table tabs: three fixed tabs — wrap, never scroll. The desktop .tabs treatment
   makes tab rows scroll containers; on this short row that affordance is pure
   noise, so the scroller is removed entirely (two-class specificity beats both
   the desktop and mobile .tabs rules). */
.tabs.fi-tabs { overflow: visible; flex-wrap: wrap; margin-bottom: 14px; }
.fi-tabs .tab.on { color: var(--fg-0); border-bottom-color: var(--accent); }

.fi-grid-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line-soft); border-radius: 8px; }
.fi-grid-wrap + .fi-grid-wrap { margin-top: 10px; }
/* separate borders (not collapse): collapsed borders detach from position:sticky
   cells and would scroll away under the pinned term column. */
.fi-grid { border-collapse: separate; border-spacing: 0; }
.fi-grid th, .fi-grid td { border-bottom: 1px solid var(--line-soft); }
.fi-grid tbody tr:last-child > td { border-bottom: 0; }
/* Plan-group boundary: a full line between plans; bands inside a plan stay open. */
.fi-grid .fi-plan-hd, .fi-grid .fi-plan-start { border-left: 1px solid var(--line); }

/* Header: plan names span their band columns; band labels sit beneath. */
.fi-plan-hd {
  padding: 7px 10px 5px; text-align: center; font-weight: 600; font-size: 0.8125rem;
  color: var(--fg-0); background: var(--bg-2); white-space: nowrap; border-bottom: 0;
}
.fi-band-hd {
  padding: 2px 10px 6px; text-align: right; font-weight: 500; font-size: 0.6875rem;
  color: var(--fg-2); background: var(--bg-2); white-space: nowrap;
}
.fi-corner {
  padding: 6px 10px; text-align: left; vertical-align: bottom; font-weight: 500;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2);
  background: var(--bg-2);
}

/* Section rows: one header per age band (heavy) / term family (medium) — the row
   labels below never repeat the band. The label stays visible while the wrap pans
   (inline-block + sticky rides the horizontal scroll). */
.fi-section td {
  padding: 8px 10px 6px; background: var(--bg-2); color: var(--fg-1);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
}
.fi-section td > span { position: sticky; left: 10px; display: inline-block; }

/* Row label column: hugs its content (width:1% + nowrap = no dead gap) and pins
   to the left edge while the wrap scrolls. */
.fi-term, .fi-corner { position: sticky; left: 0; z-index: 2; }
.fi-term {
  padding: 4px 8px 4px 10px; width: 1%; white-space: nowrap; text-align: left;
  vertical-align: middle; font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--fg-1); background: var(--bg-1);
}

/* Price cells: retail is the figure; cost + max discount (retail − cost) ride
   beneath it, smaller and lighter but still ≥4.5:1 (fg-2). */
.fi-cell { padding: 3px 6px; text-align: right; vertical-align: middle; min-width: 5.5rem; }
.fi-cell:not(.fi-cell-na) { cursor: pointer; }
.fi-cell:not(.fi-cell-na):not(.fi-cell-edit):hover { background: color-mix(in oklch, var(--accent-soft) 22%, transparent); }
.fi-retail {
  display: block; font-family: var(--font-mono); font-weight: 600; font-size: 0.875rem;
  line-height: 1.25; color: var(--fg-0);
}
.fi-sub { display: block; font-size: 0.6875rem; line-height: 1.2; color: var(--fg-2); white-space: nowrap; }

/* Hatched (not offered on the sheet): struck text on a diagonal-striped field —
   unmistakably different from a priced cell, never a bare dash. */
.fi-cell-na {
  cursor: default; text-align: center; vertical-align: middle;
  background: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in oklch, var(--fg-3) 16%, transparent) 5px 7px);
}
.fi-cell-na s { font-size: 0.6875rem; color: var(--fg-2); }

/* Inline edit: retail over cost, right-aligned like the display state. */
.fi-cell-edit { padding: 4px 6px; }
.fi-cell-edit .inv-input {
  display: block; width: 5.75rem; margin: 0 0 4px auto; padding: 3px 7px;
  font-size: 0.75rem; text-align: right;
}
.fi-edit-btns { display: flex; gap: 4px; justify-content: flex-end; }
.fi-edit-btns .btn { padding: 2px 8px; font-size: 0.6875rem; }

.fi-opt-hd { margin: 18px 0 8px; font-size: 0.8125rem; }
.fi-opt-hd .text-xs { font-weight: 400; }
.fi-flag { padding: 3px 12px; text-align: center; vertical-align: middle; font-size: 0.75rem; color: var(--fg-1); white-space: nowrap; }

/* ── Invoice builder · F&I picker (Slice E) — rides the existing inv-fi-row look. ── */
.fi-pick-basis {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
  padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px;
}
.fi-pick-basis-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fi-pick-basis-row .inv-input { width: 8rem; padding: 4px 8px; text-align: right; }
.fi-pick-routing strong { color: var(--fg-1); font-weight: 600; }
.fi-pick-hd { font-size: 0.8125rem; font-weight: 600; margin: 14px 0 6px; }
.fi-pick-hd .text-xs { font-weight: 400; }
.fi-pick-group { margin-bottom: 8px; }
.fi-pick-plan-hd {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); margin: 6px 0 3px;
}
.fi-pick-badge {
  margin-left: 8px; padding: 1px 6px; border-radius: 999px; font-size: 0.625rem;
  background: color-mix(in oklch, var(--warn) 18%, var(--bg-2)); color: var(--fg-1);
}
.fi-pick-badge.ok { background: color-mix(in oklch, var(--ok) 16%, var(--bg-2)); }
.fi-pick-off { opacity: 0.6; }
.fi-pick-off input { cursor: not-allowed; }
.fi-pick-price {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 2px 0 8px; padding-left: 26px;
}
.fi-pick-price .inv-input { width: 6.5rem; padding: 3px 8px; text-align: right; }
.fi-pick-legacy { margin-top: 14px; }
.fi-pick-contract { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding-left: 26px; }
.fi-pick-contract .inv-input { width: 12rem; padding: 3px 8px; }

/* ── Slice G: the drawer's deal-record surface (read-only). ── */
.deal-rec-print { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.deal-rec-block { margin: 10px 0; }
.deal-rec-block .upcase { margin-bottom: 4px; }
.deal-rec-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 3px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.8125rem;
}
.deal-rec-row:last-child { border-bottom: 0; }
.deal-rec-row .grow { flex: 1; min-width: 8rem; }

/* ── Slice G: LOCKED BUT NAVIGABLE (executed deals) — replaces the whole-form
      pointer-events:none + opacity 0.6 dead state. Text keeps full contrast and stays
      selectable; only the CONTROLS dim, and .lock-editable ones (contract numbers,
      internal notes) stay live. Activation/typing is blocked by the capture guards in
      the builder; this layer is the visual affordance. ── */
.inv-form-locked :is(input, select, textarea):not(.lock-editable) {
  background: var(--bg-2); border-color: var(--line-soft); color: var(--fg-1);
  cursor: default; caret-color: transparent;
}
.inv-form-locked .inv-form-body button:not(.lock-editable),
.inv-form-locked .inv-form-body .inv-role-btn,
.inv-form-locked .inv-form-body .chan-pill { opacity: 0.6; cursor: default; }
.inv-form-locked .inv-form-body label.inv-check, .inv-form-locked .inv-form-body .inv-fi-row { opacity: 0.8; }
.inv-form-locked .lock-editable { outline: 1px dashed color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 1px; }

/* ═══════════ Slice H.1 — presentation, readability, destructive-action safety ═══════════
   Single-layer follow-up to Phase C, extending its standard to the 13 screens that never
   got it. Everything zoom/type-related is fenced to (min-width: 721px) so the finished
   ≤720px mobile layer stays byte-identical. Document replicas (.invR-* invoice preview)
   and the F&I rate-sheet grid (a deliberate sheet-density surface) are exempt from the
   type floor — they mirror paper, not UI. */
@media (min-width: 721px) {
  /* ── Type floor: 13px (0.8125rem) minimum for functional text. The audit measured
        9px pills, 10–10.5px table headers/KPI labels, 11px mono VINs — size, not
        contrast, was the remaining readability problem. */
  .text-sm { font-size: 0.875rem; }
  .text-xs { font-size: 0.8125rem; }
  .upcase { font-size: 0.8125rem; letter-spacing: 0.05em; }
  .dtable { font-size: 0.875rem; }
  .dtable th { font-size: 0.8125rem; letter-spacing: 0.04em; }
  .kpi .label { font-size: 0.8125rem; }
  .kpi .sub { font-size: 0.8125rem; }
  .btn-sm { font-size: 0.8125rem; }
  .pill { font-size: 0.8125rem; }
  .card-hd .hd-side { font-size: 0.8125rem; }
  .tab .ct, .sb-count, .sb-item .sb-count, .kan-hd .ct, .kan-card .stock, .kan-card .meta,
  .msg-channel .ct, .msg-row .when, .msg-row .preview, .cmd-item .stock,
  .recon-step .step-meta, .recon-step .step-sub, .feed-msg-time { font-size: 0.8125rem; }
  .sb-section h6, .cmd-grp, .unit-fact .label, .brand-text small, .sb-foot .who small,
  .search kbd { font-size: 0.75rem; }
  .kan-hd .title { font-size: 0.8125rem; }
  .deal-card .sub { font-size: 0.8125rem; }
  .deal-col-hd { font-size: 0.8125rem; }
  .title-pipe-mini-tag { font-size: 0.8125rem; }
  .title-pipe-mini-step { font-size: 0.8125rem; }
  .rep-bar-val, .rep-bar-units { font-size: 0.8125rem; }
  .unit-info .vin { font-size: 0.875rem; }

  /* ── Identity-column freeze: horizontal scroll INSIDE a card is correct (Phase C),
        but panning must never leave rows unattributable. The first column (the record's
        identity on every wide table — Unit / Name / Make / Stock) pins to the left edge
        while the card scrolls; the row background rides along (td inherits the tr, so
        hover/selected states stay correct). The 1px shadow marks the frozen edge. */
  .card-bd:has(.dtable) .dtable th:first-child {
    position: sticky; left: 0; z-index: 4; background: var(--bg-1);
    box-shadow: 1px 0 0 var(--line-soft);
  }
  .card-bd:has(.dtable) .dtable td:first-child {
    position: sticky; left: 0; z-index: 1; background: inherit;
    box-shadow: 1px 0 0 var(--line-soft);
  }
  .card-bd:has(.dtable) .dtable tr { background: var(--bg-1); } /* ensure inherit has a value */

  /* ── Recon board (2,994px wide, 9 stages): both scrollbars must live ON-SCREEN, not
        below the fold. The board caps to the viewport and scrolls internally — the
        horizontal bar sits at the board's bottom edge inside the viewport, and the
        column set visibly continues past the right edge (the affordance). */
  .kanban { max-height: calc(100dvh - 230px); overflow: auto; overscroll-behavior-x: contain; }

  /* ── Sales pipeline: cards must stay readable at zoom — columns keep a usable floor
        width and the pipe scrolls instead of crushing names to "Test Compan…". */
  .deal-pipe { grid-template-columns: repeat(4, minmax(13.5rem, 1fr)); overflow-x: auto; }
  /* Buyer + unit lines clamp to 2 lines instead of single-line ellipsis. */
  .deal-card .nm.trunc, .deal-card .text-xs.trunc {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  }

  /* ── Sidebar on short viewports: the rail scrolls with a VISIBLE thin scrollbar;
        brand and account stay pinned so the scroll region is evident. */
  .sidebar { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  .sidebar-brand { position: sticky; top: 0; background: var(--bg-1); z-index: 3; }
  .sb-foot { position: sticky; bottom: 0; background: var(--bg-1); z-index: 3; }
}
/* Squeezed desktop band: the rail narrows instead of eating a third of the screen. */
@media (min-width: 721px) and (max-width: 1100px) {
  .app, [data-sidebar="wide"] .app { --sidebar-w: 200px; }
}

/* ── Destructive control (Settings · Deactivate): unmistakable, never plain grey text.
      Outline style — present but not shouting next to the page's primary actions. */
.btn-danger-outline {
  color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, var(--line));
  background: transparent;
}
.btn-danger-outline:hover {
  background: var(--danger-soft, color-mix(in oklch, var(--danger) 12%, transparent));
  border-color: var(--danger); color: var(--danger);
}

/* H.1 mobile-identity gates: the finished ≤720px layer must not shift. Desktop-only content
   additions (scroll hints, list ordinals) vanish on mobile, and the Locations gutter fix
   (the one screen that lacked .content-inner) is neutralized in the mobile band so its
   geometry stays exactly as shipped. */
@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .content-inner.loc-page { padding: 0; max-width: none; }
}

/* H.1 type-floor overrides (audit-driven, ≥721px): every rule the 20-screen sweep measured
   below 13px, raised to 0.8125rem. Identicon initials (avatar/thumb/av/pv-ini/rem-av) are
   exempt — pictographic monograms, not read text. */
@media (min-width: 721px) {
  .chip { font-size: 0.8125rem; }
  .brand-text small, .sb-section h6, .sb-foot .who strong, .sb-foot .who small, .search kbd { font-size: 0.8125rem; }
  .invX-tbl { font-size: 0.875rem; }
  .invX-tbl thead th { font-size: 0.8125rem; letter-spacing: 0.04em; }
  .invX-kpi-label, .invX-kpi-unit, .invX-kpi-sub, .invX-group-sub, .invX-headline-lbl { font-size: 0.8125rem; }
  .chan-tag, .chan-filter-ct { font-size: 0.8125rem; }
  .buying-gross { font-size: 0.8125rem; }
  .title-th-arrow { font-size: 0.8125rem; }
  .title-queue-sub, .title-followup, .title-fu-badge { font-size: 0.8125rem; }
  .rep-rank-sep, .rep-yoy-delta, .rep-bar-label { font-size: 0.8125rem; }
  .rcv-tb-lbl, .rcv-col-sub, .rcv-col-ct, .rcv-empty { font-size: 0.8125rem; }
  .loc-card-ymm, .loc-card-stock, .loc-col-ct, .loc-col-title, .loc-empty, .loc-card-line2 { font-size: 0.8125rem; }
  .rem-when-main, .rem-when-rel, .rem-note, .rem-toast-note, .rem-recur { font-size: 0.8125rem; }
  .set-role-count, .set-role-chip { font-size: 0.8125rem; }
  .kan-empty, .ai-route, .pv-name { font-size: 0.8125rem; }
  .inv-group-soldto .upcase, .deal-stats .crm-stat .upcase, .buying-card-prices .upcase { font-size: 0.8125rem; letter-spacing: 0.05em; }

  /* ── Identity freeze, wrapper-agnostic: settings/inventory/parts wrap tables in bare
        .card or anonymous scroll divs, not only .card-bd — pin the first column on EVERY
        data table (sticky is inert when nothing scrolls). */
  .dtable th:first-child { position: sticky; left: 0; z-index: 4; background: var(--bg-1); box-shadow: 1px 0 0 var(--line-soft); }
  .dtable td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 1px 0 0 var(--line-soft); }
  .dtable tr { background: var(--bg-1); }
  /* A wide table inside a bare .card scrolls the CARD, never the page (Settings at 200%). */
  .card:has(> .dtable) { overflow-x: auto; }
}

/* H.1 inline-size tokens + last audit stragglers. Inline styles can't be overridden by a
   media query, so tiny inline sizes reference --fs-* tokens: mobile keeps the px fallback
   (geometry untouched), the desktop band floors them at 13px. */
@media (min-width: 721px) {
  :root { --fs-10: 0.8125rem; --fs-11: 0.8125rem; --fs-12: 0.8125rem; }
  .seg-ctrl button { font-size: 0.8125rem; }
  .task-quickadd-collapsed kbd { font-size: 0.8125rem; }
  .invX-cust-sub { font-size: 0.8125rem; }
  [data-density="compact"] .loc-card-stock { font-size: 0.8125rem; }
  [data-density="compact"] .loc-card-line2 { font-size: 0.8125rem; }
  .rem-toast-meta { font-size: 0.8125rem; }
  .rcv-recv-stat, .rcv-recv-stat .fg-3 { font-size: 0.8125rem; }
  .rep-yoy-row .upcase, .rep-class-stat .upcase { font-size: 0.8125rem; }
  .buying-pipe .num, .buying-card-prices .num { font-size: 0.8125rem; }
  .rcv-howbar { font-size: 0.8125rem; }
  .rep-yoy-row { font-size: 0.8125rem; }
  .rem-toast-hd, .rem-toast-hd strong { font-size: 0.8125rem; }
  .loc-add-btn { font-size: 0.8125rem; }
  .deal-card-hold-banner, .deal-card-blocked-banner, .deal-card-compete-banner { font-size: 0.8125rem; }
  .task-show-done { font-size: 0.8125rem; }
  .title-queue-hd { font-size: 0.8125rem; }
  .set-role-add-btn { font-size: 0.8125rem; }
  .comp-foot-note { font-size: 0.8125rem; }
  .rep-yoy-legend { font-size: 0.8125rem; }
}