/* ============================================
   NORAND ERP v2.0 REFINED · Unified Design System
   Internal + External one language
   Hairlines · mono · whitespace · restraint
============================================ */

:root {
  /* SURFACES */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F5F4F0;
  --surface-3: #ECEAE3;
  --card: var(--surface);
  --card-inset: var(--surface-2);
  --bg-deep: var(--surface-2);
  --pill-bg: var(--surface-2);

  /* INK */
  --ink: #1A1A18;
  --ink-soft: #4A4640;
  --ink-2: #6B6864;
  --ink-mute: #A8A5A0;
  --ink-inverse: #FFFFFF;   /* text on a solid accent or flag fill */
  --ink-3: var(--ink-mute);
  --ink-4: #D8D5D0;

  /* HAIRLINE */
  --line: rgba(26, 26, 24, 0.06);
  --line-strong: rgba(26, 26, 24, 0.12);
  --line-soft: rgba(26, 26, 24, 0.04);

  /* BRAND ACCENTS */
  --brand-dark: #3E342C;
  --brand-warm: #C9B8A3;
  --accent: #3E342C;
  --accent-strong: #2A2017;
  --accent-soft: rgba(62, 52, 44, 0.06);
  --accent-warm: var(--accent);
  --accent-flag: #8B3A3A;
  --accent-go: #4A6741;

  --shadow: 0 1px 2px rgba(26, 26, 24, 0.04), 0 8px 24px rgba(26, 26, 24, 0.04);

  /* RADIUS */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --radius-sm: var(--r-sm);
  --radius: var(--r-md);

  /* LAYOUT */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --bottomtabs-h: 64px;

  /* TYPE — two faces, one ladder.
     Sans carries prose: names, headings, body, control labels.
     Mono carries data: figures, identifiers, codes, micro-labels.
     Every size and every letter-spacing in this file comes from the
     ladder below. A raw px value is drift (REQ-PLT-10 rule 8). */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --t-3xs: 9px;    /* smallest tag */
  --t-2xs: 10px;   /* micro-label, meta */
  --t-xs: 11px;    /* secondary data, small control */
  --t-sm: 12px;    /* dense data */
  --t-md: 13px;    /* primary data, control */
  --t-base: 14px;  /* body */
  --t-lg: 16px;    /* heading */
  --t-xl: 19px;    /* page title */
  --t-2xl: 22px;   /* figure */
  --t-3xl: 28px;   /* large figure */
  --t-4xl: 38px;   /* shop-floor board */

  --ls-tighter: -0.02em;  /* large figures */
  --ls-tight: -0.01em;    /* body, data */
  --ls-wide: 0.04em;      /* mono data */
  --ls-wider: 0.08em;     /* label */
  --ls-widest: 0.12em;    /* micro-label, uppercase */
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum", "ss01", "cv11";
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; outline: none; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-weight: 400; letter-spacing: var(--ls-tight); }

/* ============ TOPBAR ============ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-name { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--ls-widest); color: var(--ink); }
.brand-sub { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-2xs); padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line-strong); letter-spacing: var(--ls-wider); }
.live-time { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: var(--ls-wider); padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line-strong); }

.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-action {
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--ink-2);
  background: var(--bg);
  transition: all 160ms;
  flex-shrink: 0;
}
.topbar-action:hover { color: var(--ink); border-color: var(--ink); }
.topbar-action svg { width: 14px; height: 14px; }
.topbar-action svg path, .topbar-action svg rect, .topbar-action svg circle, .topbar-action svg line, .topbar-action svg polyline { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.bell {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wider);
  background: var(--bg);
  color: var(--ink-2);
  transition: all 160ms;
}
.bell:hover { border-color: var(--ink); color: var(--ink); }
.bell-icon { display: none; width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bell-count { position: absolute; top: -4px; right: -4px; background: var(--accent); color: var(--ink-inverse); font-size: var(--t-3xs); font-weight: 600; padding: 1px 5px; border-radius: 999px; min-width: 14px; text-align: center; line-height: 1.4; }
.role-pill { display: flex; align-items: center; gap: 8px; }
.role-pill label { font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: none; color: var(--ink-mute); letter-spacing: var(--ls-tight); }
.role-select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 7px 12px;
  font-size: var(--t-sm);
  font-family: var(--font-mono);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  letter-spacing: var(--ls-wide);
}
.role-select:focus { border-color: var(--ink); }

/* ============ SHELL · SIDEBAR · CONTENT ============ */
.shell { padding-top: var(--topbar-h); }
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  overflow-y: auto;
}
.nav-section { margin-bottom: 16px; }
.nav-section-title {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: none;
  letter-spacing: var(--ls-tight);
  color: var(--ink-mute);
  padding: 0 8px 8px;
  margin-bottom: 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 140ms;
  width: 100%;
  text-align: left;
  margin-bottom: 1px;
  text-transform: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-icon { width: 14px; height: 14px; flex-shrink: 0; }
.nav-icon path, .nav-icon rect, .nav-icon circle, .nav-icon line { stroke: currentColor; stroke-width: 1.5; fill: none; }
.nav-label { flex: 1; }
.nav-badge {
  background: var(--accent);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  letter-spacing: var(--ls-wide);
}
.nav-item.active .nav-badge { background: var(--accent); color: var(--ink-inverse); }

.content { margin-left: var(--sidebar-w); padding: 28px 36px; max-width: 2400px; }

/* Mobile navigation. The toggle and its overlay exist only below 900px, where
   the sidebar goes off-canvas (RESPONSIVE block); above it the sidebar is
   always on screen and both would be dead chrome. */
.nav-toggle { display: none; }
.sidebar-overlay { position: fixed; inset: 0; top: var(--topbar-h); background: rgba(26, 26, 24, 0.4); backdrop-filter: blur(4px); z-index: 45; display: none; }

/* ============ VIEWS ============ */
.view { display: none; }
.view.active { display: block; animation: fade 280ms ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.view-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.view-header h1 { font-size: var(--t-3xl); font-weight: 300; letter-spacing: var(--ls-tighter); line-height: 1.15; color: var(--ink); margin-bottom: 6px; }
.view-header h1 strong { font-weight: 500; }
.view-header h1 .mono { font-weight: 400; color: var(--ink-2); letter-spacing: var(--ls-tight); }
.view-header p { font-size: var(--t-md); color: var(--ink-2); }

/* ============ KPI GRID ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--line);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  gap: 1px;
  margin-bottom: 24px;
  overflow: hidden;
}
.kpi { padding: 20px 22px; background: var(--surface); }
.kpi-label { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 300;
  letter-spacing: var(--ls-tighter);
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub.go { color: var(--accent-go); }
.kpi-sub.flag { color: var(--accent-flag); }
.kpi.emphasized { background: var(--accent-soft); }
.kpi.emphasized .kpi-value { color: var(--accent); }
/* A word in a figure slot — a tier, a term, a route name. It is still the
   value of the KPI, so it keeps the role and takes a named size rather
   than one chosen per screen (REQ-PLT-10 rule 9). */
.kpi-value.is-text { font-size: var(--t-lg); overflow: hidden; text-overflow: ellipsis; }

/* ============ CALLOUT · NOTE ============ */
.callout {
  background: var(--accent-soft);
  border: 1px solid rgba(62, 52, 44, 0.15);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.callout strong { color: var(--accent); font-weight: 500; }
.callout .small { color: var(--ink-2); font-size: var(--t-sm); }

.note {
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  padding: 12px 16px;
  font-size: var(--t-md);
  color: var(--ink-2);
  margin-bottom: 24px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.note strong { color: var(--ink); font-weight: 500; }

/* Returning contact on the New Lead form (REQ-CRM-01 rule 19) — prototype
   .match-panel / .choice. */
.match-panel { background: var(--accent-soft); border: 1px solid rgba(62, 52, 44, 0.15); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; }
.match-panel-title { font-weight: 500; color: var(--ink); font-size: var(--t-md); }
.match-panel-text { font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }
.match-choice { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; cursor: pointer; }
.match-choice input { margin-top: 3px; }
.match-choice-label { font-weight: 500; color: var(--ink); font-size: var(--t-md); }
.match-choice-help { font-size: var(--t-sm); color: var(--ink-2); }
.match-choice.is-disabled { cursor: not-allowed; }
.match-choice.is-disabled .match-choice-label, .match-choice.is-disabled .match-choice-help { opacity: 0.5; }
.match-choice-blocked { font-size: var(--t-sm); color: var(--accent-flag); margin-top: 2px; }
#lead-match-open { margin-top: 10px; }

/* ============ SECTIONS ============ */
.section { margin-bottom: 28px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: var(--t-lg); font-weight: 500; letter-spacing: var(--ls-tight); color: var(--ink); }
.section-head .meta { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); color: var(--ink-mute); text-transform: none; }
.section-body { padding: 0; }

/* ============ TABLES ============ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: left;
  padding: 10px 14px 10px 0;
  font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: transparent;
}
.table thead th:first-child { padding-left: 4px; }
.table thead th.num { text-align: right; padding-right: 4px; }
.table tbody td {
  padding: 12px 14px 12px 0;
  font-size: var(--t-md);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.table tbody td:first-child { padding-left: 4px; }
/* ONE FACE PER TABLE BODY (REQ-PLT-10 rule 11). A column drawn in a
   different typeface from the column beside it reads as a different KIND of
   data even when it is not. Inside a table the distinction is carried by
   colour, size and alignment instead — the face is the table's.

   The number columns keep `tnum`, so the digits stay fixed-width and the
   decimal points still line up: alignment was what the mono face was buying
   here, and Inter Tight gives it too. The header row is NOT covered — it is
   the label role (rule 10) and is deliberately mono. */
.table tbody td,
.table tbody td .mono,
.table tbody td .num,
.table tbody td .cell-sub,
.table tbody td .cell-secondary { font-family: var(--font-sans); }
.table tbody td.num,
.table tbody td .num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.table tbody td.num { text-align: right; font-weight: 400; letter-spacing: var(--ls-tight); padding-right: 4px; }

/* TWO TREATMENTS PER CELL, AND NO THIRD (REQ-PLT-10 rule 12).
     main — 13px, --ink, regular      (the stock table's In Stock column)
     sub  — 11px, --ink-mute, regular (its Reorder Pt column)
   A cell wearing 12px, or --ink-2, or bold, claimed to be a third kind of
   thing when the table only has two. `.mono` no longer carries a size or an
   ink of its own — it marked a code, and a code is main content like any
   other; `.t-xs` inside a cell is what marks the sub line. */
.table tbody td.mono { font-size: var(--t-md); color: var(--ink); }
.table tbody td.t-xs,
.table tbody td .t-xs,
.table tbody td .cell-sub { font-size: var(--t-xs); color: var(--ink-mute); }
.table tbody td strong,
.table tbody td b { font-weight: 400; }
.table tbody tr { transition: background 140ms; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr[data-clickable] { cursor: pointer; }
.table tbody tr:last-child td { border-bottom: none; }

.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.cell-primary { font-size: var(--t-md); color: var(--ink); }
.cell-sub { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }
.cell-secondary { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }

/* ============ TAGS · STATUS ============ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--ink-2);
  text-transform: none;
  background: var(--bg);
  white-space: nowrap;
}
.tag.ok { color: var(--accent-go); border-color: rgba(74, 103, 65, 0.3); }
.tag.warn { color: var(--accent-flag); border-color: rgba(139, 58, 58, 0.3); }
.tag.flag { color: var(--ink-inverse); background: var(--accent-flag); border-color: var(--accent-flag); }
.tag.draft { color: var(--ink-mute); border-color: var(--line); }
.tag.channel-direct { color: var(--accent); border-color: rgba(62, 52, 44, 0.25); background: var(--accent-soft); }
.tag.channel-trading { color: var(--ink-2); border-color: var(--line-strong); background: var(--surface-2); }
.tag.sm { padding: 1px 6px; }  /* density only — the tag rung is already t-3xs */

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  transition: all 160ms;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink); }
.btn.solid { background: var(--accent); color: var(--ink-inverse); border-color: var(--accent); }
.btn.solid:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* A ghost button is a QUIETER button, not a text link: it keeps the same
   --line-strong hairline as .btn and gives up only the fill. Row actions
   (Edit / Deactivate / Remove) read as pressable targets that way, and the
   fill is left to carry importance on its own — .solid for the primary
   action, .danger.solid for a destructive one. The old rule dropped the
   border to transparent and handed it back only inside .toolbar; that
   exception is gone, so every ghost is outlined the same on every page. */
.btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }
.btn.is-active { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.btn.danger { color: var(--accent-flag); border-color: rgba(139, 58, 58, 0.3); }
.btn.danger:hover { background: rgba(139, 58, 58, 0.06); border-color: var(--accent-flag); }
.btn.danger.solid { background: var(--accent-flag); color: var(--ink-inverse); border-color: var(--accent-flag); }
.btn.danger.solid:hover { background: #6F2E2E; }

/* ============ TOOLBAR · SEARCH ============ */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
.search {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: var(--t-sm);
  color: var(--ink);
  width: 220px;
  letter-spacing: var(--ls-tight);
}
.search::placeholder { color: var(--ink-mute); }
.search:focus { border-color: var(--ink); background: var(--surface); }

/* ============ EMPTY · META · CAP-TIGHT ============ */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-xs); text-transform: none; letter-spacing: var(--ls-tight); }
.meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.cap-tight { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.small { font-size: var(--t-sm); color: var(--ink-2); }

/* ============ FORMS ============ */
/* TWO TREATMENTS INSIDE A FORM OR A DIALOG, AND NO THIRD (REQ-PLT-10 rule 13).
     label — sans, control rung, medium, tight, Title Case. The field label,
             and every control the form carries, wear the same one.
     help  — sans, one rung down, regular, tight, sentence case. It sits BELOW
             the field it qualifies, and the placeholder inside that field is
             the same treatment.
   A treatment is a face, a size, a weight, a tracking and a case. Colour is a
   separate axis: it carries state (the error), emphasis (the required marker)
   and quiet (help, a ghost control), and never a third type. A value the form
   DISPLAYS is data, not a label, and keeps the data face (rule 9). */
.field { margin-bottom: 16px; }
.field-label, .form-field label { display: block; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink); margin-bottom: 6px; }
.field-label.req::after { content: ' *'; color: var(--accent); }
/* A label that IS the control — the checkbox sits inside it — so it aligns to
   the box rather than stacking above it. The treatment is unchanged; only the
   box model is. It exists as a class because three screens had inlined it. */
.field-label.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* A value the form shows but never edits — rendered as data, never as a
   disabled control, because a disabled control submits nothing. */
.field-static { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: var(--t-md); color: var(--ink); }
.field-input, .field-select, .field-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: var(--t-md);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  font-family: var(--font-sans);
}
.field-input.mono { font-family: var(--font-mono); }
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--ink); }
.field-textarea { resize: vertical; min-height: 70px; }
/* A returning contact's BD owner and keyed-in by/at, and an edited lead's
   source and received time: shown, never edited. */
#lead-duplicate-fields .field-input, #lead-locked-fields .field-input, #form-lead-phone-locked { background: var(--surface-2); border-style: dashed; color: var(--ink-2); cursor: not-allowed; }
/* The help treatment. `margin-top` is the half of it that is not type: help
   belongs BELOW the field it qualifies, never appended to the label, where it
   is read as part of the field's name. */
.field-help { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-top: 6px; }
/* A placeholder is help sitting inside the field, so it takes the help
   treatment whatever face the field itself wears — which is also what keeps a
   sample visibly a sample and not a value already entered. */
input::placeholder, textarea::placeholder {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  text-transform: none;
  color: var(--ink-mute);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

.order-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.order-line {
  display: grid;
  grid-template-columns: 1fr 80px 100px 120px 32px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.order-line select, .order-line input {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 6px 10px; font-size: var(--t-sm);
  font-family: var(--font-mono);
}
.line-subtotal { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); text-align: right; padding-right: 4px; }
.line-remove {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--ink-mute);
  font-size: var(--t-lg);
  transition: all 140ms;
}
.line-remove:hover { background: rgba(139, 58, 58, 0.08); color: var(--accent-flag); }
.order-add-line {
  align-self: flex-start;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: var(--ls-tight);
  text-transform: none;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  transition: all 140ms;
}
.order-add-line:hover { border-color: var(--ink); color: var(--ink); }
.order-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}
.order-total-row .label { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink); }
.order-total-row .val { font-family: var(--font-mono); font-size: var(--t-2xl); font-weight: 300; color: var(--ink); letter-spacing: var(--ls-tighter); }

/* ============ MODAL · SLIDEOVER ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 24, 0.4);
  backdrop-filter: blur(4px);
  z-index: 450;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.active { display: flex; animation: fade 200ms ease both; }
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.lg { max-width: 880px; }
.modal.xl { max-width: 1100px; }
.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.modal-head h2 { font-size: var(--t-xl); font-weight: 500; letter-spacing: var(--ls-tight); color: var(--ink); }
.modal-head .meta { margin-top: 4px; }
.modal-close {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  text-transform: none;
  color: var(--ink-mute);
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: all 140ms;
  white-space: nowrap;
}
.modal-close:hover { color: var(--ink); border-color: var(--ink); }
.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
/* Build integration: unlike the prototype's div modals, built modals wrap
   head/body/foot in a real <form> — without these rules that wrapper is one
   unconstrained block, the body cannot scroll and the footer clips off. */
/* The same panel, standing on a page instead of over an overlay — how a
   modal fragment renders when it is reached by a normal navigation. */
.modal.is-static { margin: 0 auto; max-height: none; }
.modal > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }
.modal > form > .modal-body { min-height: 0; }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--surface-2);
}

.slideover-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 24, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
}
.slideover-overlay.active { display: block; animation: fade 200ms ease both; }
.slideover {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 540px;
  z-index: 110;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.slideover.active { transform: translateX(0); }
.slideover-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.slideover-head h2 { font-size: var(--t-2xl); font-weight: 300; letter-spacing: var(--ls-tighter); color: var(--ink); }
.slideover-head .meta { margin-top: 6px; }
.slideover-body { padding: 24px; overflow-y: auto; flex: 1; }
.slideover-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: var(--surface-2); }

/* ============ DETAIL BLOCKS (slideover) ============ */
.detail-block { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.detail-block:last-child { border-bottom: none; }
.detail-block-title { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-bottom: 12px; }
.detail-grid { display: grid; gap: 8px; }
.detail-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; }
.detail-key { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); }
.detail-val { font-size: var(--t-md); color: var(--ink); }
.detail-val.mono { font-family: var(--font-mono); font-size: var(--t-sm); }

/* ============ PL-ROW (financial breakdown) ============ */
.pl-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  font-size: var(--t-md);
  border-bottom: 1px solid var(--line);
}
.pl-row:last-child { border-bottom: none; }
.pl-row.indent { padding-left: 24px; color: var(--ink-2); font-size: var(--t-sm); }
.pl-row.sum { font-weight: 500; padding-top: 14px; border-top: 1px solid var(--line-strong); border-bottom: none; }

/* ============ TOAST ============ */
#toast-stack { position: fixed; bottom: 130px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  min-width: 260px;
  max-width: 380px;
  font-size: var(--t-md);
  color: var(--ink);
  animation: toastIn 240ms ease both;
}
.toast.removing { animation: toastOut 200ms ease both; }
.toast-x { background: none; border: none; font-size: var(--t-lg); color: var(--ink-mute); cursor: pointer; padding: 0 2px; line-height: 1; margin-left: 4px; }
.toast-x:hover { color: var(--ink); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-4px); } }
.toast-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.toast-mark.warn { background: rgba(139, 58, 58, 0.1); color: var(--accent-flag); }
.toast-mark.info { background: var(--surface-2); color: var(--ink-2); }
/* A flash message may list one item per line. Its text is escaped by the
   controller, so a real newline is the only way it can break a line. */
.toast-text { white-space: pre-line; }
.toast-text strong { font-weight: 500; }

/* ============ APPROVALS ============ */
.approval-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: opacity 240ms, transform 240ms;
}
.approval-item:last-child { border-bottom: none; }
.approval-item.removing { opacity: 0; transform: translateX(8px); }
.approval-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.approval-type { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-tight); padding: 2px 8px; border: 1px solid rgba(62, 52, 44, 0.25); border-radius: var(--r-xs); color: var(--accent); background: var(--accent-soft); }
.approval-id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.approval-summary { font-size: var(--t-base); color: var(--ink); line-height: 1.5; }
.approval-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 700px) { .approval-item { grid-template-columns: 1fr; } .approval-actions { justify-content: flex-end; } }

/* ============ LEDGER ROWS (BD home) ============ */
.ledger-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; margin-bottom: 4px; }
.ledger-customer { font-size: var(--t-md); color: var(--ink); }
.ledger-value-stack { text-align: right; }
.ledger-value { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 400; color: var(--ink); letter-spacing: var(--ls-tight); }
.ledger-rate { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); margin-top: 2px; }

/* ============ LEADERBOARD (Director) ============ */
.lb-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.lb-rank.top { color: var(--accent); font-weight: 500; }
.lb-name { font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.lb-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); margin-top: 2px; }
.lb-value { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 400; color: var(--ink); text-align: right; letter-spacing: var(--ls-tight); }
.lb-tier { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); margin-top: 2px; text-align: right; letter-spacing: var(--ls-wide); }

/* ============ TIER BAR (BD progress) ============ */
.tier-bar-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.tier-bar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.tier-bar-title { font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.tier-bar-current { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wider); color: var(--ink-mute); }
.tier-bar-current strong { color: var(--accent); font-weight: 500; }
.tier-bar { position: relative; height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: visible; margin-bottom: 8px; }
.tier-bar-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width 600ms ease; }
.tier-marks { position: absolute; inset: 0; pointer-events: none; }
.tier-mark { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink-mute); }
.tier-mark::after { content: attr(data-label); position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-wide); color: var(--ink-mute); white-space: nowrap; }
.tier-callout { font-size: var(--t-sm); color: var(--ink-2); margin-top: 26px; }
.tier-callout strong { color: var(--accent); font-weight: 500; }

/* ============ CONCENTRATION (Founder) ============ */
.conc-bar { display: flex; height: 32px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); }
.conc-seg { display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-inverse); letter-spacing: var(--ls-wide); }
.conc-seg.s1 { background: var(--ink); }
.conc-seg.s2 { background: #3a3a36; }
.conc-seg.s3 { background: #5a5650; }
.conc-seg.s4 { background: #7a7570; }
.conc-seg.s5 { background: #9a9388; }
.conc-seg.rest { background: var(--ink-mute); color: var(--surface); }
.conc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.conc-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.conc-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* ============ SYNC CARDS (Bridge) ============ */
.sync-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 800px) { .sync-grid { grid-template-columns: 1fr; } }
.sync-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.sync-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-go); margin-right: 6px; }
.sync-status-dot.warn { background: var(--accent-flag); }


/* ============ CHART (Reports) ============ */
.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 24px 16px;
  margin-bottom: 16px;
}
.chart-svg-wrap { position: relative; width: 100%; height: 240px; }
.chart-svg { width: 100%; height: 100%; display: block; }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.revenue { stroke: var(--ink); }
.chart-line.profit { stroke: var(--accent); }
.chart-line.collected { stroke: var(--ink-mute); stroke-dasharray: 4 4; }
.chart-dot { fill: var(--surface); stroke-width: 1.5; }
.chart-dot.revenue { stroke: var(--ink); }
.chart-dot.profit { stroke: var(--accent); }
.chart-x-labels { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 6px; }
.chart-x-label { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.chart-y-label { font-family: var(--font-mono); font-size: var(--t-3xs); fill: var(--ink-mute); letter-spacing: var(--ls-wide); }
.chart-legend { display: flex; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.chart-legend-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-2); }
.chart-legend-mark { width: 18px; height: 2px; }
.chart-legend-mark.revenue { background: var(--ink); }
.chart-legend-mark.profit { background: var(--accent); }
.chart-legend-mark.collected { background: var(--ink-mute); background-image: linear-gradient(90deg, var(--ink-mute) 50%, transparent 50%); background-size: 8px 2px; }

.delta-up { color: var(--accent-go); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; }
.delta-down { color: var(--accent-flag); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; }
.delta-flat { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; }

/* ============ PIPELINE KANBAN ============ */
/* A stage board reads left to right, so it never reflows: a fixed column
   count wrapped LOST under NEW at 1100px and read as a lead filed in the
   wrong stage. The columns keep their order at every width and the board
   scrolls inside its own container — the document does not (GR-25). */
.pipeline-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; margin-bottom: 16px; overflow-x: auto; }
.pipeline-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 12px; min-height: 220px; }
.pipeline-col-head { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.pipeline-col-head.source { color: var(--accent); }
.pipeline-col-head.new { color: var(--ink-2); }
.pipeline-col-head.appointment { color: var(--accent-warm); }
.pipeline-col-head.account-created { color: var(--accent-go); }
.pipeline-col-head.lost { color: var(--accent-flag); }
.pipeline-col-count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink); background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-pill); letter-spacing: var(--ls-tight); }
/* Sits in the column head, which is mono capitals — the note is plain text. */
.pipeline-col-note { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Every column head stands the same height, so the first cards line up
   across the board — tall enough for the title with a two-line note, or
   with the work-type switch, as the prototype's fixed column-head. */
.pipeline-col-head { align-items: flex-start; min-height: 62px; }
.pipeline-col-head-main { flex: 1; min-width: 0; }
/* The work-type switch inside a column head: compact, and plain text, not
   the head's mono capitals. */
/* As the prototype's board-toggle: borderless text buttons, the active one
   on a light fill, its count as plain text beside the label. */
.pipeline-col-head .seg { display: flex; gap: 3px; margin-top: 8px; border: 0; border-radius: 0; overflow: visible; font-family: var(--font-sans); text-transform: none; letter-spacing: var(--ls-tight); }
.pipeline-col-head .seg > a { border: 0; background: transparent; color: var(--ink-mute); font-size: var(--t-2xs); line-height: 1.3; padding: 3px 6px; border-radius: 5px; }
.pipeline-col-head .seg > a:hover { background: var(--surface-2); color: var(--ink); }
.pipeline-col-head .seg > a.is-active { background: var(--surface-3); color: var(--ink); font-weight: 700; }
.pipeline-col-head .seg-count, .pipeline-col-head .seg > a.is-active .seg-count { margin-left: 3px; padding: 0; background: none; color: inherit; font-size: inherit; line-height: inherit; }
.pipeline-cards { display: flex; flex-direction: column; gap: 6px; }
.pipeline-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; transition: all 140ms; }
.pipeline-card:hover { border-color: var(--ink); background: var(--surface-2); }
.pipeline-card-name { font-size: var(--t-sm); font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.pipeline-card-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.pipeline-card-meta.is-overdue, .ledger-meta.is-overdue { color: var(--accent-flag); font-weight: 500; }
.pipeline-card-value { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink); margin-top: 6px; letter-spacing: var(--ls-tight); }
.pipeline-card-bd { font-size: var(--t-2xs); color: var(--ink-2); margin-top: 4px; font-family: var(--font-mono); letter-spacing: var(--ls-wide); }
.pipeline-empty { text-align: center; padding: 24px 8px; color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; }
.pipeline-card.dragging { opacity: 0.4; transform: scale(0.95); }
.pipeline-card[draggable] { cursor: grab; }
.pipeline-card[draggable]:active { cursor: grabbing; }
.pipeline-col.drop-active { background: var(--accent-soft); border-color: var(--accent); outline: 2px dashed var(--accent); outline-offset: -1px; }

/* ============ COMMS TYPE TAGS ============ */
.comm-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: var(--t-3xs); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; border: 1px solid var(--line-strong); }
.comm-type.visit { color: var(--accent); border-color: rgba(62,52,44,0.25); background: var(--accent-soft); }
.comm-type.call { color: var(--accent-go); border-color: rgba(74,103,65,0.3); }
.comm-type.email { color: var(--ink-2); border-color: var(--line-strong); }
.comm-type.sample { color: var(--accent-warm); border-color: rgba(62,52,44,0.2); }
/* v5.1 · comms table · fixed layout so free-text Summary wraps instead of forcing horizontal scroll */
.comms-tbl { table-layout: fixed; }
.comms-tbl td, .comms-tbl th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.comms-tbl td.comm-summary { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }

/* ============ NOTIFICATIONS PANEL ============ */
.notif-trigger { position: relative; }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; background: var(--accent-flag); border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.notif-panel { position: fixed; top: 56px; right: 16px; width: 380px; max-height: 70vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(26,26,24,0.08); z-index: 200; overflow: hidden; display: none; flex-direction: column; }
.notif-panel.is-open { display: flex; }

/* profile menu · the signed-in user's own account, reachable from every screen */
.profile-menu { position: fixed; top: 56px; right: 16px; width: 240px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(26,26,24,0.08); z-index: 200; overflow: hidden; display: none; }
.profile-menu.is-open { display: block; }
.profile-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.profile-menu-name { font-weight: 600; font-size: var(--t-md); color: var(--ink); }
.profile-menu-role { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }
.profile-menu-item { padding: 10px 14px; font-size: var(--t-md); color: var(--ink); cursor: pointer; }
.profile-menu-item:hover { background: var(--surface-2); }
.profile-menu-item.is-signout { border-top: 1px solid var(--line); color: var(--accent-flag); }
.signed-out { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.signed-out.is-open { display: flex; }
.notif-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.notif-head h3 { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--ls-tight); color: var(--ink); margin: 0; }
.notif-head .meta { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 140ms; display: flex; gap: 10px; }
.notif-item:hover { background: var(--surface-2); }
.notif-item:last-child { border-bottom: none; }
.notif-item-dot { width: 4px; flex-shrink: 0; border-radius: 2px; margin-top: 2px; }
.notif-item-dot.high { background: var(--accent-flag); }
.notif-item-dot.medium { background: var(--accent-warm); }
.notif-item-dot.low { background: var(--ink-mute); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-label { font-size: var(--t-sm); color: var(--ink); font-weight: 500; line-height: 1.4; margin-bottom: 4px; }
.notif-item-detail { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.notif-foot { padding: 10px 18px; border-top: 1px solid var(--line); text-align: center; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.notif-foot a { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-2); text-decoration: none; }
.notif-empty { padding: 32px 18px; text-align: center; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }


/* ============ RMA TAGS ============ */
.rma-issue { display: inline-block; padding: 2px 8px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: var(--t-3xs); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; border: 1px solid var(--line-strong); }
.rma-issue.defect { color: var(--accent-flag); border-color: rgba(196,87,87,0.3); }
.rma-issue.wrong-ship { color: var(--accent-warm); border-color: rgba(62,52,44,0.2); }
.rma-issue.damage-in-transit { color: var(--accent-flag); border-color: rgba(196,87,87,0.3); }
.rma-issue.over-ship { color: var(--ink-2); border-color: var(--line-strong); }

/* ============ SALES MATERIAL ============ */
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.material-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; transition: all 140ms; display: flex; flex-direction: column; gap: 10px; }
.material-card:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(26,26,24,0.04); }
.material-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.material-type { font-family: var(--font-mono); font-size: var(--t-3xs); padding: 2px 7px; border-radius: var(--r-xs); letter-spacing: var(--ls-tight); text-transform: none; border: 1px solid var(--line-strong); color: var(--ink-2); }
.material-type.catalog { color: var(--accent); border-color: rgba(62,52,44,0.25); }
.material-type.pricing { color: var(--accent-go); border-color: rgba(74,103,65,0.3); }
.material-type.lookbook { color: var(--accent-warm); }
.material-type.cert { color: var(--ink-2); }
.material-type.spec { color: var(--ink-2); }
.material-type.brand { color: var(--accent-flag); border-color: rgba(196,87,87,0.3); }
.material-card-id { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.material-card-title { font-size: var(--t-md); font-weight: 500; color: var(--ink); line-height: 1.4; letter-spacing: var(--ls-tight); }
.material-card-meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.material-card-meta span { display: flex; align-items: center; gap: 4px; }
.material-card-foot { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.material-card-foot .btn { padding: 5px 10px; font-size: var(--t-xs); }

/* ============ UNIVERSAL SEARCH PALETTE ============ */
.palette-overlay { position: fixed; inset: 0; background: rgba(26,26,24,0.18); backdrop-filter: blur(2px); z-index: 300; display: none; align-items: flex-start; justify-content: center; padding-top: 80px; }
.palette-overlay.is-open { display: flex; }
.palette { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); width: 90%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(26,26,24,0.12); overflow: hidden; }
.palette-search { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.palette-search svg { width: 16px; height: 16px; color: var(--ink-mute); flex-shrink: 0; }
.palette-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--t-lg); color: var(--ink); letter-spacing: var(--ls-tight); }
.palette-input::placeholder { color: var(--ink-mute); }
.palette-hint { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
.palette-results { flex: 1; overflow-y: auto; }
.palette-group { padding: 8px 0; border-bottom: 1px solid var(--line); }
.palette-group:last-child { border-bottom: none; }
.palette-group-head { font-family: var(--font-mono); font-size: var(--t-2xs); padding: 6px 20px; color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.palette-result { padding: 10px 20px; cursor: pointer; transition: background 100ms; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.palette-result:hover { background: var(--surface-2); }
.palette-result-main { flex: 1; min-width: 0; }
.palette-result-title { font-size: var(--t-md); color: var(--ink); font-weight: 500; }
.palette-result-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); margin-top: 2px; }
.palette-result-tag { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-2); letter-spacing: var(--ls-tight); text-transform: none; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); flex-shrink: 0; }
.palette-empty { padding: 40px 20px; text-align: center; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.palette-foot { padding: 10px 20px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; display: flex; gap: 16px; }
.palette-foot kbd { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); font-family: inherit; }

/* ============ SETTINGS FUNCTIONAL ============ */
.settings-saved { color: var(--accent-go); font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; opacity: 0; transition: opacity 200ms; }
.settings-saved.is-shown { opacity: 1; }

/* v3.46 · toggle switch */
.tog { position: relative; display: inline-block; width: 34px; height: 19px; flex: 0 0 auto; cursor: pointer; }
.tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.tog .tog-track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background 160ms; }
.tog .tog-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: var(--bg); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 160ms; }
.tog input:checked + .tog-track { background: var(--accent-go, #1a7f4e); }
.tog input:checked + .tog-track::after { transform: translateX(15px); }
.tog input:disabled + .tog-track { opacity: 0.55; cursor: not-allowed; }
.tog.is-locked { cursor: not-allowed; }

/* v3.46 · module settings form rows */
.modset-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.modset-row:last-child { border-bottom: none; }
.modset-label { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink); line-height: 1.35; }
.modset-label .modset-hint { display: block; font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-top: 2px; }
.modset-ctrl { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; max-width: 55%; }
.modset-ctrl .field-input, .modset-ctrl .field-select { padding: 6px 9px; font-size: var(--t-sm); min-width: 90px; }
.modset-ctrl .field-input.num-sm { width: 74px; text-align: right; }
.modset-lock { font-size: var(--t-2xs); font-family: var(--font-mono); letter-spacing: var(--ls-tight); color: var(--ink-mute); text-transform: none; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
/* The structured lead-intelligence widgets (REQ-CRM-13 rule 11): a tab list,
   key → option maps and the four wave slots. is-wide lets a map breathe. */
.modset-ctrl.is-wide { max-width: 70%; }
.modset-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; width: 100%; }
.modset-stack.modset-scroll { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.modset-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.modset-wave { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
/* The insights bars (REQ-CRM-13 clause n): a share drawn as width, the figure
   beside it — no chart library, because none of these is a time series. */
.insight-bar { height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; position: relative; min-width: 120px; }
.insight-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 4px; }
.insight-bar.accent i { background: var(--accent); }
.insight-bar.mute i { background: var(--ink-mute); }
.modset-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink); }

/* v3.48 · validation shake */
@keyframes fieldshake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.is-error { animation: fieldshake 240ms ease; }

/* v3.48 · skeleton loading pattern — Phase 2: call skelRows(tbodyId, cols) before fetch, render replaces */
@keyframes skelshimmer { 0%{background-position:-200px 0;} 100%{background-position:200px 0;} }
.skel { display:inline-block; height:12px; border-radius:4px; background:linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 40%, transparent) 50%, var(--line) 75%); background-size:400px 100%; animation:skelshimmer 1.1s linear infinite; }
.skel-row td { padding:13px 14px; }

/* v3.46 · inline validation */
.field-input.is-error, .field-select.is-error, .field-textarea.is-error { border-color: var(--accent-flag); background: color-mix(in srgb, var(--accent-flag) 4%, transparent); }
/* The error is help wearing the state colour — same face, size and weight,
   so a field carries two type treatments whether it is valid or not. */
.field-err { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: none; color: var(--accent-flag); margin-top: 4px; display: none; }
.field-err.is-shown { display: block; }

/* v3.46 · users & roles */
.sysuser-status { font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; }
.notif-matrix td, .notif-matrix th { text-align: center; }
.notif-matrix td:first-child, .notif-matrix th:first-child { text-align: left; }

/* ============ LINE BUILDER (Quote Form) ============ */
.line-builder { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; min-height: 60px; margin-bottom: 8px; }
.line-empty { padding: 16px; text-align: center; font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; color: var(--ink-mute); letter-spacing: var(--ls-tight); }
.line-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px dashed var(--line); }
.line-row:last-child { border-bottom: none; }
.line-reorder { display: inline-flex; flex-direction: column; gap: 1px; }
.line-move { width: 18px; height: 15px; line-height: 13px; padding: 0; font-size: var(--t-2xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 3px; cursor: pointer; }
.line-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.line-move:disabled { opacity: 0.3; cursor: default; }
.line-qty { width: 52px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-sm); text-align: right; }
.line-price { width: 74px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-sm); text-align: right; }
.line-qty:focus, .line-price:focus { outline: none; border-color: var(--accent); }
.line-add-row { display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.line-add-row .field-select { flex: 1; }
.line-total { display: flex; justify-content: space-between; padding: 10px 12px; margin-top: 8px; border-top: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-2); letter-spacing: var(--ls-tight); text-transform: none; }

/* ============ PERMISSION-LOCKED BUTTONS ============ */
.btn:disabled, .btn.is-locked { opacity: 0.32; cursor: not-allowed !important; pointer-events: auto !important; position: relative; }
.btn:disabled:hover, .btn.is-locked:hover { transform: none !important; background: inherit !important; border-color: var(--line-strong) !important; }
.btn.is-locked::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: var(--ink-mute); border-radius: 50%; }

/* ============ NAV PRIMARY CATEGORY ACCENT (v3.0) ============ */
.nav-section .nav-section-title { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); padding: 14px 16px 6px; }
.nav-section.primary .nav-section-title { color: var(--accent); position: relative; padding-left: 24px; }
.nav-section.primary .nav-section-title::before { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-30%); width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.nav-section:not(.primary) .nav-item { opacity: 0.85; }
.nav-section:not(.primary) .nav-item:hover { opacity: 1; }

/* ============ COCKPIT CARDS (v3.0 role-specific cockpits) ============ */
.cockpit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cockpit-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.cockpit-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cockpit-card-head h3 { font-size: var(--t-md); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: var(--ls-tight); }
.cockpit-card-head .meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.cockpit-card-list { display: flex; flex-direction: column; gap: 8px; }
.cockpit-card-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cockpit-card-row:last-child { border-bottom: none; }
.cockpit-card-row-label { font-size: var(--t-sm); color: var(--ink-2); }
.cockpit-card-row-value { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink); font-weight: 500; }

/* ============ CALENDAR / APPOINTMENTS (v3.4) ============ */
.cal-date-group { margin-bottom: 24px; }
.cal-date-header { display: flex; align-items: baseline; gap: 12px; padding: 14px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.cal-date-header h3 { font-size: var(--t-base); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: var(--ls-tight); }
.cal-date-header .cal-date-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.cal-date-header.today h3 { color: var(--accent); }
.cal-date-header.today .cal-date-meta { color: var(--accent); }
.cal-card { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.cal-card:last-child { border-bottom: none; }
.cal-card-time { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink); min-width: 60px; padding-top: 2px; letter-spacing: var(--ls-wide); }
.cal-card-time-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; margin-top: 2px; }
.cal-card-body { flex: 1; min-width: 0; }
.cal-card-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.cal-card-with { font-size: var(--t-base); color: var(--ink); font-weight: 500; }
.cal-type-tag { display: inline-block; padding: 2px 8px; border-radius: 3px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-strong); }
.cal-type-tag.lead { background: #f4ede0; color: #7d6840; border-color: #e0d4ba; }
.cal-type-tag.client { background: #e8eee4; color: #5b6e4f; border-color: #cfdac4; }
.cal-type-tag.call { background: #e6ebed; color: #4a5d65; border-color: #c8d3d6; }
.cal-type-tag.sample { background: #f0e8e8; color: #7d4d4d; border-color: #ddc8c8; }
.cal-type-tag.email { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.cal-card-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.cal-card-notes { font-size: var(--t-sm); color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.cal-card-actions { display: flex; gap: 6px; align-items: center; padding-top: 4px; }
.cal-status-tag { display: inline-block; padding: 3px 9px; border-radius: 3px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; }
.cal-status-tag.upcoming { background: var(--surface-2); color: var(--ink-2); }
.cal-status-tag.completed { background: transparent; color: var(--ink-mute); border: 1px solid var(--line-strong); }
.cal-empty { padding: 40px 20px; text-align: center; color: var(--ink-mute); font-size: var(--t-md); }
@media (max-width: 600px) {
  .cal-card { flex-direction: column; gap: 6px; }
  .cal-card-time { min-width: auto; padding-top: 0; }
  .cal-card-actions { padding-top: 8px; }
}

/* V3.11 · Appointment overdue + cancelled */
.cal-status-tag.overdue { background: #f0e8e8; color: var(--accent-flag); border: 1px solid #ddc8c8; font-weight: 500; }
.cal-status-tag.cancelled { background: var(--surface-2); color: var(--ink-mute); border: 1px dashed var(--line-strong); text-decoration: line-through; }
.cal-card.is-overdue { background: linear-gradient(90deg, rgba(217,79,79,0.04), transparent 30%); }
.cal-card.is-cancelled { opacity: 0.55; }
.cal-card.is-cancelled .cal-card-with, .cal-card.is-cancelled .cal-card-time { text-decoration: line-through; }

/* V3.11 · Cold lead claim button (orange-ish accent · stands out from advance-lead) */
.btn-claim-lead { padding: 4px 10px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; cursor: pointer; margin-top: 6px; transition: all 120ms; }
.btn-claim-lead:hover { background: var(--accent); color: var(--ink-inverse); }
/* New Leads – Unassigned and Lead Inbox card, from the prototype's card(). */
/* One size for every card, as the prototype: a fixed height, each line on
   one row with an ellipsis, and the footer pinned to the bottom. The column
   may never be widened by its content (min-width: 0), so every card is the
   column's width. */
.pipeline-col { min-width: 0; }
.pipeline-card.is-lead { display: flex; flex-direction: column; padding: 11px 12px; background: var(--surface); height: 218px; overflow: hidden; }
.pipeline-card.is-lead:hover { background: var(--surface-2); }
.pipeline-card-top { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.pipeline-card-title { flex: 1; min-width: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-card-source { flex-shrink: 0; max-width: 45%; font-size: var(--t-2xs); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-card-contact { font-size: var(--t-xs); color: var(--ink-2); margin: 6px 0; line-height: 1.45; }
.pipeline-card-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.45em; }
.pipeline-card-contact b { color: var(--ink); font-weight: 600; }
.pipeline-card-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--line-strong); padding-top: 9px; margin-top: 5px; }
.pipeline-card-label { font-size: var(--t-2xs); letter-spacing: var(--ls-tight); color: var(--ink-mute); }
.pipeline-card-facts > div { min-width: 0; }
.pipeline-card-fact { font-size: var(--t-xs); color: var(--ink); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); margin-right: 5px; }
.pipeline-status-dot.is-risk { background: var(--accent-flag); }
.pipeline-status-dot.is-good { background: var(--accent-go); }
.pipeline-card-sla { font-size: var(--t-xs); font-weight: 700; color: var(--accent-flag); margin-top: 9px; line-height: 1.35; min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-card-sla.is-overdue { font-weight: 800; }
.pipeline-card-sla.is-done { color: var(--accent-go); font-weight: 600; }
/* A booking still ahead: neutral until it passes, then .is-overdue reds it. */
.pipeline-card-sla.is-waiting { color: var(--ink-2); }
.pipeline-card-sla.is-waiting.is-overdue { color: var(--accent-flag); }
.pipeline-card-footer { margin-top: auto; border-top: 1px solid var(--line-strong); padding-top: 8px; min-height: 43px; display: flex; align-items: center; }
.pipeline-card-next { font-size: var(--t-2xs); color: var(--ink-mute); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipeline-card-next-btn { width: 100%; min-height: 34px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent); color: var(--ink-inverse); font-weight: 600; font-size: var(--t-xs); text-align: left; padding: 7px 9px; cursor: pointer; }
.pipeline-card-next-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* Log Contact Activity popup, from the prototype's activity form. */
.activity-section-title { grid-column: 1 / -1; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-strong); font-size: var(--t-2xs); font-weight: 700; color: var(--ink-mute); letter-spacing: var(--ls-tight); }
.activity-section-title.is-first { border-top: 0; padding-top: 0; margin-top: 0; }
.activity-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.activity-method { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 10px; background: var(--surface); font-size: var(--t-sm); cursor: pointer; }
.form-field .activity-method input { width: auto; margin: 0; padding: 0; }
.activity-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px; background: var(--surface-2); }
.activity-group-title { grid-column: 1 / -1; font-size: var(--t-2xs); font-weight: 700; color: var(--ink-mute); letter-spacing: var(--ls-tight); }
.activity-group .form-field.full { grid-column: 1 / -1; }
.activity-meeting-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font-weight: 600; font-size: var(--t-sm); cursor: pointer; }
.activity-meeting-option input { margin: 0; }
.activity-group.full, .activity-meeting-option.full, .note.full { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .activity-method-grid { grid-template-columns: 1fr 1fr; }
  .activity-group { grid-template-columns: 1fr; }
}
/* Lead appointment form, from the prototype's shared appointment form. The
   fields sit in a fieldset so a locked appointment disables them at once. */
.lead-apt-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
/* A read-only field (a phone call's appointment location, an update's date): styled
   like every locked field. */
.lead-apt-fields input[readonly] { background: var(--surface-2); border-style: dashed; color: var(--ink-2); cursor: not-allowed; }
.lead-apt-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Lead detail popup, from the prototype's openDetail(). */
.lead-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; }
.lead-summary > div { padding: 13px; background: var(--surface-2); border-right: 1px solid var(--line-strong); }
.lead-summary > div:last-child { border-right: 0; }
.lead-summary small { display: block; color: var(--ink-mute); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); }
.lead-summary strong { display: block; margin-top: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.lead-summary .is-urgent, .lead-info .is-urgent { color: var(--accent-flag); font-weight: 800; }
.lead-summary .is-done { color: var(--accent-go); }
.lead-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.lead-panel { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.lead-panel h3, .lead-timeline h3 { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin: 0; }
.lead-panel h3 { padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
.lead-info { padding: 4px 14px; }
.lead-info-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-strong); font-size: var(--t-xs); }
.lead-info-row:last-child { border-bottom: 0; }
.lead-info-row span { color: var(--ink-mute); }
.lead-info-row b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.lead-timeline { margin-top: 20px; }
.lead-timeline h3 { margin-bottom: 12px; }
.lead-event { display: grid; grid-template-columns: 120px 12px 1fr; gap: 10px; min-height: 52px; }
.lead-event-time { font-size: var(--t-2xs); color: var(--ink-mute); text-align: right; padding-top: 1px; font-family: var(--font-mono); }
.lead-event-line { position: relative; border-left: 1px solid var(--ink-4); }
.lead-event-line::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); left: -4.5px; top: 4px; }
.lead-event-body { font-size: var(--t-xs); padding-bottom: 14px; }
.lead-event-body strong { display: block; font-weight: 600; color: var(--ink); }
.lead-event-body span { color: var(--ink-mute); display: block; }
.lead-event-body .lead-event-line-item { color: var(--ink-2); }
.lead-event-body .lead-event-line-item em { font-style: normal; color: var(--ink-mute); }
.lead-event-by { font-size: var(--t-2xs); margin-top: 2px; }
.lead-detail-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lead-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .lead-summary { grid-template-columns: 1fr 1fr; }
  .lead-summary > div { border-bottom: 1px solid var(--line-strong); }
  .lead-sections { grid-template-columns: 1fr; }
  .lead-event { grid-template-columns: 90px 10px 1fr; }
}

/* V3.11 · Inline schedule CTA in customer/lead detail */
.detail-block-cta { float: right; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 3px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-2); cursor: pointer; transition: all 100ms; margin-top: -2px; }
.detail-block-cta:hover { background: var(--accent); color: var(--ink-inverse); border-color: var(--accent); }

/* Last Contact badge on Customer detail (v3.4) */
.last-contact-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 3px; font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-2); letter-spacing: var(--ls-tight); text-transform: none; margin-left: 8px; }
.last-contact-badge.stale { background: #f0e8e8; color: var(--accent-flag); border-color: #ddc8c8; }

/* Convert Lead button (v3.4) */
.btn-convert-lead { padding: 4px 10px; background: var(--accent); color: var(--ink-inverse); border: none; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; cursor: pointer; margin-top: 6px; }
.btn-convert-lead:hover { background: #2e261f; }

/* Phone widget · v3.9 (country code + number) · v3.15 mono num */
.phone-widget { display: flex; gap: 6px; align-items: stretch; }
.phone-cc { flex: 0 0 auto; min-width: 110px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); cursor: pointer; }
.phone-cc:focus { outline: none; border-color: var(--accent); }
.phone-num { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-md); color: var(--ink); font-family: var(--font-mono); }
.phone-num:focus { outline: none; border-color: var(--accent); }
/* Currency input · v3.15 (RM prefix + auto-format on blur) */
.currency-input { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; transition: border-color 0.15s; }
.currency-input:focus-within { border-color: var(--accent); }
.currency-prefix { padding: 0 10px; background: var(--bg); border-right: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); display: flex; align-items: center; min-width: 38px; justify-content: center; letter-spacing: var(--ls-wide); }
.currency-num { flex: 1; min-width: 0; padding: 8px 12px; border: none; background: var(--surface); font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink); text-align: right; outline: none; }
.currency-num:focus { outline: none; }
.currency-num:disabled { opacity: 0.55; cursor: not-allowed; }

/* BD Scorecard · v3.15 (per-BD productivity score with breakdown) */
.scorecard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.scorecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; position: relative; transition: border-color 0.15s; }
.scorecard:hover { border-color: var(--line-strong); }
.scorecard.top-rank { border: 1.5px solid var(--ink); }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.sc-rank { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: var(--ls-widest); }
.sc-rank.top { color: var(--ink); font-weight: 700; }
.sc-grade-block { display: flex; align-items: baseline; gap: 10px; }
.sc-grade { font-family: var(--font-mono); font-size: var(--t-md); font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); letter-spacing: var(--ls-wide); }
.sc-grade.g-aplus { background: var(--ink); color: var(--surface); }
.sc-grade.g-a { background: var(--ink); color: var(--surface); opacity: 0.85; }
.sc-grade.g-b { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }
.sc-grade.g-c { background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); }
.sc-grade.g-d { background: transparent; color: var(--accent-flag); border: 1px solid var(--accent-flag); }
.sc-score { font-family: var(--font-sans); font-size: var(--t-3xl); font-weight: 600; color: var(--ink); letter-spacing: var(--ls-tighter); line-height: 1; }
.sc-score-suffix { font-size: var(--t-sm); color: var(--ink-mute); font-weight: 400; margin-left: 2px; }
.sc-name { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-top: 6px; }
.sc-meta { font-size: var(--t-xs); color: var(--ink-mute); font-family: var(--font-mono); margin-top: 2px; letter-spacing: var(--ls-wide); }
.sc-divider { height: 1px; background: var(--line); margin: 12px 0; }
.sc-row { display: grid; grid-template-columns: 80px 50px 1fr 38px; gap: 10px; align-items: center; padding: 5px 0; font-size: var(--t-sm); }
.sc-row-simple { display: grid; grid-template-columns: 80px 1fr 70px; gap: 10px; align-items: center; padding: 6px 0; font-size: var(--t-sm); }
.sc-row-label { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); }
.sc-row-pct { color: var(--ink); font-family: var(--font-mono); font-size: var(--t-xs); text-align: right; }
.sc-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; position: relative; }
.sc-bar-fill { height: 100%; background: var(--ink); border-radius: 3px; transition: width 0.3s; }
.sc-bar-fill.muted { background: var(--ink-mute); }
.sc-row-pts { color: var(--ink); font-family: var(--font-mono); font-size: var(--t-xs); text-align: right; }
.sc-penalty { font-size: var(--t-xs); color: var(--accent-flag); font-family: var(--font-mono); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.sc-formula-tip { font-size: var(--t-2xs); color: var(--ink-mute); font-family: var(--font-mono); margin-top: 10px; letter-spacing: var(--ls-wide); opacity: 0.7; }
/* Reports scorecard table — extra columns */
.scorecard-table-wrap { overflow-x: auto; }
.scorecard-table { font-size: var(--t-sm); }
.scorecard-table th.col-score, .scorecard-table td.col-score { font-weight: 600; }
.scorecard-table .grade-cell { font-family: var(--font-mono); font-weight: 600; padding: 1px 6px; border-radius: var(--r-sm); font-size: var(--t-xs); }

/* BD drill-down modal · v3.16 (per-BD aggregated detail) */
.bd-drill-summary { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; }
.bd-drill-summary-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.bd-drill-summary-grade { display: flex; align-items: baseline; gap: 8px; }
.bd-drill-summary-score { font-size: var(--t-2xl); font-weight: 600; color: var(--ink); letter-spacing: var(--ls-tighter); }
.bd-drill-summary-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.bd-drill-bar-block { display: flex; flex-direction: column; gap: 4px; }
.bd-drill-bar-label { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.bd-drill-bar-value { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink); font-weight: 600; }
.bd-drill-bar-track { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
.bd-drill-bar-fill { height: 100%; background: var(--ink); border-radius: 2px; }
.bd-drill-bar-fill.muted { background: var(--ink-mute); }
.bd-drill-section { margin-bottom: 14px; }
.bd-drill-section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.bd-drill-section-title { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink); letter-spacing: var(--ls-tight); text-transform: none; }
.bd-drill-section-meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); }
.bd-drill-row { display: grid; grid-template-columns: 90px 1fr 100px 80px 70px; gap: 10px; align-items: center; padding: 6px 0; font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.bd-drill-row:last-child { border-bottom: none; }
.bd-drill-row-id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); }
.bd-drill-row-primary { font-size: var(--t-sm); color: var(--ink); }
.bd-drill-row-num { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink); text-align: right; }
.bd-drill-row-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); }
.bd-drill-empty { font-size: var(--t-xs); color: var(--ink-mute); text-align: center; padding: 12px 0; font-style: italic; }
/* Flag indicator on scorecards (low-grade BDs flagged for Founder review) */
.scorecard.flagged { position: relative; }
.scorecard.flagged::after { content: 'Flagged'; position: absolute; top: 8px; right: 8px; font-family: var(--font-mono); font-size: var(--t-3xs); padding: 2px 5px; background: var(--accent-flag); color: var(--surface); border-radius: 2px; letter-spacing: var(--ls-tight); }
.scorecard[data-bd-card] { cursor: pointer; }
.scorecard[data-bd-card]:hover { transform: translateY(-1px); transition: transform 0.15s, border-color 0.15s; }
/* Founder Dashboard BD-flag alert banner */
.bd-alert-banner { background: var(--surface); border: 1px solid var(--accent-flag); border-left: 3px solid var(--accent-flag); border-radius: var(--r-md); padding: 14px 18px; margin: 14px 0; cursor: pointer; transition: background 0.15s; }
.bd-alert-banner:hover { background: var(--bg); }
.bd-alert-banner-head { display: flex; justify-content: space-between; align-items: baseline; }
.bd-alert-banner-title { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--accent-flag); letter-spacing: var(--ls-tight); text-transform: none; font-weight: 600; }
.bd-alert-banner-action { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); }
.bd-alert-banner-body { font-size: var(--t-md); color: var(--ink); margin-top: 6px; }
.bd-alert-banner-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bd-alert-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-xs); }
.bd-alert-chip-name { color: var(--ink); }
.bd-alert-chip-grade { font-family: var(--font-mono); color: var(--accent-flag); font-weight: 600; }
.bd-alert-banner.healthy { border-color: var(--line); border-left: 3px solid var(--ink); }
.bd-alert-banner.healthy .bd-alert-banner-title { color: var(--ink-mute); }


/* BD flag action status pills · v3.19 */
.bd-status-block { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-top: 14px; }
.bd-status-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.bd-status-title { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink); letter-spacing: var(--ls-tight); text-transform: none; }
.bd-status-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); }
.bd-status-options { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-status-option { font-family: var(--font-mono); font-size: var(--t-xs); padding: 5px 11px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); cursor: pointer; letter-spacing: var(--ls-wide); transition: all 0.15s; }
.bd-status-option:hover { background: var(--ink); color: var(--surface); }
.bd-status-option.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.bd-status-option.active.probation { background: var(--accent-flag); border-color: var(--accent-flag); }
.bd-alert-chip-status { font-family: var(--font-mono); font-size: var(--t-3xs); padding: 1px 5px; background: var(--ink); color: var(--surface); border-radius: 2px; letter-spacing: var(--ls-tight); text-transform: none; margin-left: 4px; }
.bd-alert-chip-status.probation { background: var(--accent-flag); }
.bd-alert-chip-status.review { background: transparent; color: var(--ink-mute); border: 1px solid var(--line-strong); }

/* ============ PRINTABLE DOCUMENTS · v3.28 ============ */
.doc-overlay { display: none; position: fixed; inset: 0; background: rgba(30,28,26,0.5); z-index: 400; overflow-y: auto; padding: 24px; }
.doc-overlay.active { display: block; }
.doc-sheet { background: #fff; max-width: 800px; margin: 0 auto; padding: 48px 56px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); font-size: var(--t-sm); color: #1a1a1a; position: relative; }
.doc-toolbar { position: sticky; top: 12px; z-index: 5; max-width: 800px; margin: 0 auto 12px; display: flex; gap: 8px; justify-content: flex-end; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1a1a1a; padding-bottom: 16px; margin-bottom: 20px; }
.doc-co-name { font-size: var(--t-xl); font-weight: 700; letter-spacing: var(--ls-wide); }
.doc-co-meta { font-size: var(--t-2xs); color: #555; margin-top: 4px; line-height: 1.6; }
.doc-title { text-align: right; }
.doc-title h1 { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-wider); }
.doc-title .doc-num { font-family: var(--font-mono); font-size: var(--t-md); margin-top: 6px; font-weight: 600; }
.doc-title .doc-date { font-size: var(--t-2xs); color: #555; margin-top: 2px; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.doc-party-label { font-size: var(--t-3xs); letter-spacing: var(--ls-widest); color: #888; text-transform: uppercase; margin-bottom: 4px; }
.doc-party-name { font-weight: 600; font-size: var(--t-sm); }
.doc-party-detail { font-size: var(--t-2xs); color: #555; line-height: 1.6; margin-top: 2px; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.doc-table th { text-align: left; font-size: var(--t-3xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: #666; border-bottom: 1px solid #1a1a1a; padding: 6px 8px; }
.doc-table th.num, .doc-table td.num { text-align: right; }
.doc-table td { padding: 8px; border-bottom: 1px solid #e0e0e0; font-size: var(--t-xs); }
.doc-table td.mono { font-family: var(--font-mono); }
.doc-totals { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.doc-totals-inner { min-width: 240px; }
.doc-total-row { display: flex; justify-content: space-between; padding: 4px 8px; font-size: var(--t-xs); }
.doc-total-row.grand { border-top: 2px solid #1a1a1a; margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: var(--t-md); }
.doc-sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.doc-sign-block { border-top: 1px solid #1a1a1a; padding-top: 8px; }
.doc-sign-label { font-size: var(--t-3xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: #666; }
.doc-sign-name { font-size: var(--t-xs); font-weight: 600; margin-top: 2px; }
.doc-sign-img { height: 60px; margin-bottom: -8px; display: block; }
.doc-sign-stamp { font-family: var(--font-mono); font-size: var(--t-3xs); color: #2e6b34; margin-top: 4px; }
.doc-footer-note { font-size: var(--t-3xs); color: #999; margin-top: 32px; border-top: 1px solid #e0e0e0; padding-top: 10px; line-height: 1.6; }
.doc-remarks { font-size: var(--t-2xs); color: #555; margin-bottom: 16px; }
/* v3.41 · form-grid system (appointment + generic modal forms) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--t-md); color: var(--ink); background: var(--surface); width: 100%; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--ink); }

/* Sales Material v3.32 · visual asset grid */
.mat-thumb { height: 110px; border-radius: var(--r-sm) var(--r-sm) 0 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; position: relative; margin: -16px -16px 12px; }
.mat-thumb.pdf { background: linear-gradient(135deg, #f4e4e0, #ecd4ce); }
.mat-thumb.ppt { background: linear-gradient(135deg, #f4ece0, #ecdfc8); }
.mat-thumb.video { background: linear-gradient(135deg, #2e2c2a, #4a4642); }
.mat-thumb.photo { background: linear-gradient(135deg, #e4eee0, #d2e2ca); }
.mat-thumb-icon { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-widest); font-weight: 700; padding: 4px 10px; border: 1.5px solid rgba(0,0,0,0.35); border-radius: 3px; color: rgba(0,0,0,0.65); }
.mat-thumb.video .mat-thumb-icon { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.85); }
.mat-thumb-sub { font-family: var(--font-mono); font-size: var(--t-3xs); color: rgba(0,0,0,0.45); letter-spacing: var(--ls-wide); }
.mat-thumb.video .mat-thumb-sub { color: rgba(255,255,255,0.6); }
.mat-thumb .play-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: var(--t-md); color: #2e2c2a; }
.mat-vis-badge { position: absolute; top: 8px; right: 8px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); padding: 2px 6px; border-radius: 2px; }
.mat-vis-badge.internal { background: var(--accent-flag); color: var(--ink-inverse); }
.mat-vis-badge.customer { background: rgba(255,255,255,0.85); color: #2e6b34; border: 1px solid #2e6b34; }
.mat-thumb.video .mat-vis-badge.customer { background: rgba(255,255,255,0.9); }
.mat-expiry-flag { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--accent-flag); }
.mat-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 70%; }
.mat-photo-cell { aspect-ratio: 1; background: rgba(255,255,255,0.55); border-radius: 2px; }
/* Preview modal */
.mat-preview-stage { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 320px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.mat-preview-page { width: 60%; aspect-ratio: 0.707; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); }
/* The stage holds the real file: an image fits inside the page, a PDF
   fills it through the browser's own viewer. */
img.mat-preview-page { object-fit: contain; }
iframe.mat-preview-page { border: 1px solid var(--line-strong); }
.mat-preview-videobox { width: 80%; aspect-ratio: 16/9; background: #2e2c2a; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: rgba(255,255,255,0.8); font-family: var(--font-mono); font-size: var(--t-xs); }
.mat-preview-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 85%; padding: 20px 0; }
.mat-preview-photo { aspect-ratio: 1; background: linear-gradient(135deg, #e4eee0, #cfdac4); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-3xs); color: rgba(0,0,0,0.4); }
.mat-page-nav { display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); }
/* Upload dropzone */
.mat-dropzone { border: 2px dashed var(--line-strong); border-radius: var(--r-md); padding: 32px; text-align: center; color: var(--ink-mute); font-size: var(--t-sm); cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 14px; }
.mat-dropzone:hover { border-color: var(--ink); background: var(--bg); }
.mat-dropzone .dz-icon { font-size: var(--t-2xl); margin-bottom: 6px; }
.mat-dropzone .dz-types { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-widest); margin-top: 6px; }

/* Demo Tour · v3.31 */
.tour-panel { display: none; position: fixed; bottom: 24px; right: 24px; width: 380px; background: var(--surface); border: 1px solid var(--ink); border-radius: var(--r-md); box-shadow: 0 12px 48px rgba(0,0,0,0.22); z-index: 390; }
.tour-panel.active { display: block; animation: fade 220ms ease both; }
.tour-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px 8px; }
.tour-step-count { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-widest); }
.tour-title { font-size: var(--t-lg); font-weight: 600; color: var(--ink); padding: 0 18px; letter-spacing: var(--ls-tight); }
.tour-body { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.65; padding: 8px 18px 4px; }
.tour-tryit { margin: 10px 18px 0; padding: 10px 12px; background: var(--bg); border-left: 2px solid var(--ink); font-size: var(--t-sm); color: var(--ink); line-height: 1.6; }
.tour-tryit strong { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-widest); display: block; margin-bottom: 3px; color: var(--ink-mute); }
.tour-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 16px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.tour-dot.on { background: var(--ink); }
.tour-btns { display: flex; gap: 6px; }
.sig-canvas { border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: #fff; cursor: crosshair; touch-action: none; display: block; width: 100%; }
@media print {
  body.printing-doc > *:not(.doc-overlay) { display: none !important; }
  .doc-overlay { position: static; background: none; padding: 0; overflow: visible; display: block !important; }
  .doc-toolbar { display: none !important; }
  .doc-sheet { box-shadow: none; max-width: none; padding: 0; }
  .no-print { display: none !important; }
}

/* Currency input · v3.9 (mono · right-aligned · cents-style) */

/* V3.10 · Search-first picker (inline with Customer/Specifier forms) */
.picker { position: relative; }
.picker-search-wrap { position: relative; }
.picker-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 50; }
.picker-list[hidden] { display: none; }
.picker-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background 100ms; }
.picker-item:hover { background: var(--surface-2); }
.picker-item:last-child { border-bottom: none; }
.picker-empty { padding: 16px 14px; text-align: center; color: var(--ink-mute); font-size: var(--t-sm); font-style: italic; }
.picker-create-btn { padding: 12px 14px; background: linear-gradient(0deg, var(--surface-2), transparent); cursor: pointer; border-top: 1px dashed var(--line-strong); font-size: var(--t-sm); color: var(--accent); font-weight: 500; transition: background 100ms; }
.picker-create-btn:hover { background: var(--surface-2); }
.picker-create-btn strong { color: var(--ink); }
.picker-chip-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.picker-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 12px; background: var(--accent); color: var(--ink-inverse); border-radius: 999px; font-size: var(--t-xs); font-weight: 500; }
.picker-chip-x { cursor: pointer; opacity: 0.65; font-size: var(--t-base); line-height: 1; padding: 0 2px; transition: opacity 100ms; }
.picker-chip-x:hover { opacity: 1; }
.picker-chip-meta { font-family: var(--font-mono); font-size: var(--t-3xs); opacity: 0.7; padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.3); margin-left: 4px; }

/* Segment + Tier tags · v3.5 (3-segment customer model) */
.seg-tag { display: inline-block; padding: 3px 9px; border-radius: 3px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; border: 1px solid var(--line-strong); }
.seg-tag.seg-specifier, .seg-tag.seg-designer, .seg-tag.seg-architect, .seg-tag.seg-renovation, .seg-tag.seg-consultant { background: #f4ede0; color: #7d6840; border-color: #e0d4ba; }
.seg-tag.seg-factory { background: #e8eee4; color: #5b6e4f; border-color: #cfdac4; }
.seg-tag.seg-trading { background: #e6ebed; color: #4a5d65; border-color: #c8d3d6; }
.tier-tag { display: inline-block; padding: 2px 7px; border-radius: 2px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; }
.tier-tag.tier-cash { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-strong); }
.tier-tag.tier-terms { background: #ede8df; color: #6e5e3f; border: 1px solid #d8cfb8; }
.tier-tag.tier-trading { background: #e0e7ea; color: #3e5660; border: 1px solid #c0cfd5; }

/* Referral block on customer detail (v3.5) */
.referral-block { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 14px; }
.referral-block-head { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-bottom: 8px; }
.referral-block-list { display: flex; flex-direction: column; gap: 4px; }
.referral-block-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--t-md); }
.referral-block-row .name { color: var(--ink); font-weight: 500; }
.referral-block-row .meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }

/* Specifier Tier badges · v3.6 */
.tier-badge { display: inline-block; padding: 3px 10px; border-radius: 3px; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: var(--ls-tight); text-transform: none; vertical-align: middle; margin-left: 4px; border: 1px solid; }
.tier-badge.tier-bronze { background: #ede4d6; color: #8a6d42; border-color: #d4c1a0; }
.tier-badge.tier-silver { background: #e8e6e0; color: #5e5b54; border-color: #c4c0b6; }
.tier-badge.tier-gold { background: #f0e7c4; color: #6b5520; border-color: #d4b770; }

/* Driver Cockpit · mobile-optimized (large tap targets · big text) */
@media (max-width: 768px) {
  #view-driver_cockpit .kpi { padding: 16px 14px; }
  #view-driver_cockpit .kpi-value { font-size: var(--t-3xl); }
  #view-driver_cockpit .cockpit-card { padding: 20px 16px; }
  #view-driver_cockpit .cockpit-card h3 { font-size: var(--t-lg); }
  #view-driver_cockpit .cockpit-card-row { padding: 12px 0; min-height: 48px; }
  #view-driver_cockpit .cockpit-card-row-label { font-size: var(--t-base); }
  #view-driver_cockpit .cockpit-card-row-value { font-size: var(--t-lg); }
  #view-driver_cockpit .tag { padding: 4px 10px; font-size: var(--t-xs); }
}

/* ============ DASHBOARD ZONES (v3.3) ============ */
.zone-label { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin: 28px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.zone-label:first-of-type { margin-top: 8px; }
.zone-meta { color: var(--ink-mute); font-size: var(--t-3xs); letter-spacing: var(--ls-wider); opacity: 0.7; margin-left: auto; }
.kpi-grid.kpi-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kpi-grid.kpi-3 { grid-template-columns: 1fr; } }

/* ============ AGING BUCKETS (v3.2) ============ */
.aging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); }
.aging-bucket { background: var(--surface); padding: 18px 16px; }
.aging-bucket-head { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; color: var(--ink-mute); margin-bottom: 8px; }
.aging-bucket-head.critical { color: var(--accent-flag); }
.aging-bucket-amount { font-family: var(--font-mono); font-size: var(--t-2xl); font-weight: 500; color: var(--ink); letter-spacing: var(--ls-tight); margin-bottom: 4px; }
.aging-bucket-amount.critical { color: var(--accent-flag); }
.aging-bucket-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-tight); text-transform: none; }
.aging-bucket .invoice-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.aging-bucket .invoice-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 4px 0; gap: 8px; flex-wrap: wrap; }
.aging-bucket .invoice-row > div:first-child { flex: 1 1 140px; min-width: 0; }
.aging-bucket .invoice-row > div:last-child { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.aging-bucket .invoice-row:hover { background: var(--surface-2); }
.aging-bucket .invoice-meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-2); letter-spacing: var(--ls-wide); }
.aging-bucket .invoice-amount { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink); font-weight: 500; }
.aging-bucket .lod-btn { font-family: var(--font-mono); font-size: var(--t-3xs); padding: 2px 7px; border-radius: var(--r-xs); background: var(--accent-flag); color: var(--ink-inverse); border: none; cursor: pointer; letter-spacing: var(--ls-tight); text-transform: none; }
.aging-bucket .lod-btn:hover { background: #a04040; }
.aging-bucket .lod-btn.sent { background: transparent; color: var(--ink-mute); border: 1px solid var(--line-strong); cursor: default; }
@media (max-width: 900px) { .aging-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .aging-grid { grid-template-columns: 1fr; } }

/* Reward pool breakdown table (v3.2) */
.reward-table { width: 100%; border-collapse: collapse; }
.reward-table th { font-family: var(--font-mono); font-size: var(--t-2xs); padding: 10px 12px; text-align: left; color: var(--ink-mute); letter-spacing: var(--ls-widest); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.reward-table th.num { text-align: right; }
.reward-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-md); color: var(--ink); }
.reward-table td.recipient { font-weight: 500; }
.reward-table td.basis { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.reward-table td.num { text-align: right; font-family: var(--font-mono); }
.reward-table tr.total { background: var(--surface-2); }
.reward-table tr.total td { font-weight: 500; border-bottom: none; padding-top: 12px; }

/* A stock take line whose count differed from the shelf figure. A count
   sheet is mostly lines that matched, so the exceptions are tinted rather
   than the whole table being read row by row (REQ-WHS-08 rule 7). */
.doc-table tbody tr.is-variance { background: rgba(139, 58, 58, 0.06); }
.doc-table tbody tr.is-variance td { font-weight: 500; }

/* ============ BOTTOM TABS (mobile) ============ */
.bottom-tabs {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 60;
  display: none;
}
.bottom-tabs-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: var(--ls-wider);
  color: var(--ink-mute);
  position: relative;
}
.tab-item.active { color: var(--accent); }
.tab-icon { width: 18px; height: 18px; }
.tab-icon path, .tab-icon rect, .tab-icon circle, .tab-icon line { stroke: currentColor; stroke-width: 1.5; fill: none; }
.tab-badge { position: absolute; top: 6px; right: 28%; background: var(--accent); color: var(--ink-inverse); font-size: var(--t-3xs); font-weight: 600; padding: 1px 4px; border-radius: 999px; min-width: 12px; text-align: center; line-height: 1.4; }

/* ============ FAB (top-right floating) ============ */
.floating-actions { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 70; }
@media (max-width: 800px) { .floating-actions { bottom: calc(var(--bottomtabs-h) + 16px); right: 16px; } }
.fab {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: all 160ms;
  color: var(--ink-2);
  box-shadow: 0 1px 3px rgba(26,26,24,0.06);
}
.fab:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.fab svg { width: 18px; height: 18px; }
.fab path, .fab rect, .fab circle, .fab line, .fab polyline { stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .topbar { padding: 0 16px; }
  .brand-sub, .live-time { display: none; }
  .nav-toggle { display: grid; }
  .sidebar { z-index: 46; box-shadow: var(--shadow); transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-overlay.is-open { display: block; animation: fade 200ms ease both; }
  .content { margin-left: 0; padding: 20px 16px 24px; }
  .view-header h1 { font-size: var(--t-2xl); }
  .kpi-value { font-size: var(--t-2xl); }
}
@media (max-width: 600px) {
  /* Menu, wordmark, four actions and the approvals label need ~390px; a
     phone has ~340. The approvals doorway becomes an icon the size of its
     neighbours — its count badge stays — so the bar holds one line. */
  .topbar { gap: 8px; }
  .brand { gap: 8px; }
  .bell { width: 34px; height: 34px; padding: 0; justify-content: center; flex-shrink: 0; }
  .bell-label { display: none; }
  .bell-icon { display: block; }
  .toolbar { gap: 6px; }
  .search { width: 100%; }
  .role-pill label { display: none; }
  .order-line { grid-template-columns: 1fr 60px 80px 90px 28px; gap: 6px; padding: 6px; }
  .modal { max-width: 100%; max-height: 95vh; }
  .slideover { max-width: 100%; }
}

/* ============ HIDE OLD GLASS ARTIFACTS ============ */
.rail, #rail { display: none !important; }

/* ============ v5.0 · Batch 9 · sortable headers + pagination ============ */
th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort-key]:hover { color: var(--ink); }
th[data-sort-key]::after { content: ' ⇅'; font-size: var(--t-3xs); opacity: 0.28; }
th[data-sort-key].sorted-asc::after { content: ' ▲'; opacity: 0.85; }
th[data-sort-key].sorted-desc::after { content: ' ▼'; opacity: 0.85; }
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; font-size: var(--t-sm); }
.pager .pager-info { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-xs); }
.pager .spacer { flex: 1; }
.pager .btn[disabled] { opacity: 0.4; pointer-events: none; }


/* ============ CUSTOMER PORTAL ============
   Not a separate shell: the portal is another workspace on the ERP's own sidebar, topbar and
   page furniture (navForRole('portal')). The only portal-specific styling is the floating
   switch that moves between the two, and the order status chips. */
/* the customer topbar drops every ERP control and carries the signed-in account instead */
body.is-portal-mode #fab-search, body.is-portal-mode #fab-add, body.is-portal-mode #btn-tour,
body.is-portal-mode #bell, body.is-portal-mode #fab-notif { display: none !important; }
.pt-topbar-account { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.pt-demo-tag { color: var(--accent-flag); border: 1px dashed var(--accent-flag); border-radius: var(--r-pill); padding: 2px 8px; }
.pt-topbar-account .search { min-width: 200px; }
@media (max-width: 720px) { .pt-topbar-account .search { min-width: 130px; } }

/* order progress chips · no existing equivalent in the ERP */
.pt-timeline { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.pt-step { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-tight); text-transform: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; color: var(--ink-mute); }
.pt-step.is-done { border-color: var(--accent-go); color: var(--accent-go); }
.pt-step.is-current { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }

/* floating switch · the only bridge between the two products */
.pt-switch { position: fixed; right: 22px; bottom: 22px; z-index: 480; display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: var(--ink-inverse); font-size: var(--t-md); font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(26,26,24,.12), 0 12px 30px rgba(26,26,24,.14); }
.pt-switch:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.pt-switch.is-return { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.pt-switch-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.75; }
@media (max-width: 640px) { .pt-switch { right: 14px; bottom: 76px; } }

/* a view header can carry its own action row; the module ⚙ button joins it instead of overlapping */
.view-header-actions { position: absolute; top: 0; right: 0; display: flex; gap: 8px; align-items: center; }
.mod-settings-btn { position: absolute; top: 0; right: 0; font-size: var(--t-xs); padding: 5px 10px; }
.view-header-actions .mod-settings-btn { position: static; }

/* ============ WAREHOUSE FLOOR SCREENS ============
   Two devices off one data source: a wall board everybody reads from a distance,
   and a touch station the packer taps. Kiosk mode strips the app shell so neither
   screen wastes space on navigation the floor never uses. */
body.is-kiosk .topbar, body.is-kiosk .sidebar, body.is-kiosk .mobile-tabs { display: none !important; }
body.is-kiosk .content { margin: 0; padding: 0; max-width: none; }
body.is-kiosk .view.active { padding: 0; }
.kiosk-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.kiosk-title { font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--ls-tight); }
.kiosk-meta { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink-2); letter-spacing: var(--ls-tight); text-transform: none; }
.kiosk-exit { font-family: var(--font-mono); font-size: var(--t-sm); padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; cursor: pointer; color: var(--ink-2); }

/* wall board */
.wb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 26px 40px; align-items: start; }
.wb-col-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--ink); }
.wb-col-title { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; }
.wb-col-count { font-size: var(--t-3xl); font-weight: 700; font-family: var(--font-mono); }
.wb-col.is-now .wb-col-head { border-bottom-color: var(--accent-flag); }
.wb-col.is-now .wb-col-title, .wb-col.is-now .wb-col-count { color: var(--accent-flag); }
.wb-col.is-done .wb-col-head { border-bottom-color: var(--accent-go); }
.wb-col.is-done .wb-col-title, .wb-col.is-done .wb-col-count { color: var(--accent-go); }
.wb-card { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); padding: 16px 18px; margin-bottom: 14px; }
.wb-card.is-now { border-left: 5px solid var(--accent-flag); }
.wb-card.is-done { border-left: 5px solid var(--accent-go); background: rgba(74,103,65,0.05); }
.wb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wb-order { font-family: var(--font-mono); font-size: var(--t-3xl); font-weight: 700; letter-spacing: var(--ls-wide); line-height: 1.1; }
.wb-age { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink-mute); white-space: nowrap; }
.wb-age.is-stale { color: var(--accent-flag); font-weight: 700; }
.wb-cust { font-size: var(--t-lg); color: var(--ink-soft); margin-top: 2px; }
.wb-lines { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.wb-line { display: flex; justify-content: space-between; gap: 14px; font-size: var(--t-xl); padding: 4px 0; }
.wb-line-sku { font-family: var(--font-mono); letter-spacing: var(--ls-wide); }
.wb-line-qty { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.wb-line.is-short .wb-line-sku, .wb-line.is-short .wb-line-qty { color: var(--accent-flag); }
.wb-foot { margin-top: 10px; font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink-2); display: flex; justify-content: space-between; }
.wb-short-tag { color: var(--accent-flag); font-weight: 700; }
.wb-empty { padding: 26px; text-align: center; font-family: var(--font-mono); font-size: var(--t-lg); color: var(--ink-mute); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }

/* touch station · every target sized for a gloved thumb */
.ps-wrap { padding: 20px 26px 40px; }
.ps-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.ps-tile { border: 2px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); padding: 20px; text-align: left; cursor: pointer; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; }
.ps-tile:active { background: var(--bg); }
.ps-tile.is-claimed { border-color: var(--accent-flag); border-left-width: 6px; }
.ps-tile-order { font-family: var(--font-mono); font-size: var(--t-3xl); font-weight: 700; }
.ps-tile-cust { font-size: var(--t-lg); color: var(--ink-soft); margin-top: 2px; }
.ps-tile-meta { font-family: var(--font-mono); font-size: var(--t-md); color: var(--ink-2); margin-top: 10px; }
.ps-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ps-detail-order { font-family: var(--font-mono); font-size: var(--t-4xl); font-weight: 700; line-height: 1; }
.ps-detail-cust { font-size: var(--t-xl); color: var(--ink-soft); margin-top: 4px; }
.ps-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 10px; background: var(--surface); }
.ps-line.is-short { border-color: var(--accent-flag); background: rgba(139,58,58,0.04); }
.ps-line-sku { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 600; }
.ps-line-desc { font-size: var(--t-base); color: var(--ink-2); margin-top: 2px; }
.ps-line-qty { font-family: var(--font-mono); font-size: var(--t-3xl); font-weight: 700; white-space: nowrap; }
.ps-short-note { font-family: var(--font-mono); font-size: var(--t-md); color: var(--accent-flag); margin-top: 4px; }
.ps-actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
/* Sized for touch and centred whatever element carries the class: a
   <button> centres its label by default and an <a> does not, which is how
   "All orders" rendered as loose text in a box beside "Put back". */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; flex: 1 1 220px; min-height: 74px; border-radius: var(--r-md); font-size: var(--t-xl); font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.ps-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
.ps-btn.ghost { flex: 0 0 200px; color: var(--ink-2); }
.ps-btn:active { opacity: 0.85; }

/* select2 · norand skin — searchable dropdowns ([data-select2]) */
.select2-container { z-index: 300; }
.select2-container .select2-selection--single { height: auto; min-height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); font-size: var(--t-md); line-height: 32px; padding-left: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent); outline: none; }
.select2-dropdown { border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-md); z-index: 300; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-md); padding: 6px 8px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--accent); color: var(--ink-inverse); }
.select2-results__option { padding: 7px 10px; }

/* Appointments to-do + pace bar (2026-08-05 review) */
.pace-cell { display: flex; align-items: center; gap: 8px; }
.pace-bar { flex: 1; min-width: 60px; max-width: 120px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pace-fill { height: 100%; border-radius: 3px; background: var(--accent-flag); }
.pace-fill.ok { background: var(--accent); }
.pace-label { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-2); white-space: nowrap; }
tr.row-collapsed { display: none; }
tr.row-collapsed.is-shown { display: table-row; }
div.row-collapsed { display: none; }
div.row-collapsed.is-shown { display: block; }

/* Company panel interaction history (2026-08-05 review) */
.int-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.int-list .int-row:last-child { border-bottom: none; }
.int-row-head { display: flex; align-items: center; gap: 8px; }
.int-row-date { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-mute); letter-spacing: var(--ls-wide); }
.int-row-meta { font-size: var(--t-xs); color: var(--ink-mute); }
.int-row-body { font-size: var(--t-sm); color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.int-row-next { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }
.int-row-next strong { color: var(--ink-2); font-weight: 500; }

/* ============ LIST ERGONOMICS (2026-08-06 review) ============ */

/* The build wraps the filter controls in a real <form> the prototype has no
   need for. Without its own wrap that form is one non-wrapping flex line
   inside a wrapping .toolbar, and .search collapses to a sliver ≤600px. */
.toolbar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 320px; justify-content: flex-end; }
.toolbar-filters .search { flex: 1 1 120px; min-width: 120px; }
/* A select sizes to its widest option, and some option lists are long enough
   to push the search box onto its own row — cap them instead. */
.toolbar-filters select.search { flex: 0 1 auto; min-width: 140px; max-width: 175px; }
/* A flex line breaks on the item's basis, never on what it could shrink to, so
   a toolbar that gains a control — the Clear Filters button the moment a filter
   is on — pushes the text search onto its own row. Cap it so the wrapped row
   reads as a search box rather than a full-width bar (2026-09-14). */
.toolbar-filters input.search { max-width: 260px; }

/* View tabs as ONE segmented control (partial: norand/seg.blade.php), so the
   primary action and the export read as different jobs rather than more pills
   in the same row. */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.seg > a { padding: 7px 14px; font-size: var(--t-sm); line-height: 1.2; color: var(--ink-2); text-decoration: none; background: var(--surface); border-right: 1px solid var(--line); white-space: nowrap; transition: background 140ms, color 140ms; }
.seg > a:last-child { border-right: none; }
.seg > a:hover { background: var(--surface-2); color: var(--ink); }
.seg > a.is-active { background: var(--accent); color: var(--ink-inverse); }
.seg > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-2xs); line-height: 1.6; }
.seg > a.is-active .seg-count { background: rgba(255, 255, 255, 0.2); color: var(--ink-inverse); }

/* Toolbar and day headings ride under the fixed topbar, so the filters and
   the day you are reading stay on screen down a long list. */
.toolbar.is-sticky { position: sticky; top: var(--topbar-h); z-index: 20; background: var(--bg); padding: 12px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.toolbar.is-sticky ~ #cal-list .cal-date-header { position: sticky; top: calc(var(--topbar-h) + 62px); z-index: 10; background: var(--bg); }

/* Scroll-locked table head — for a table that can run long (to-do expanded). */
.table-wrap.is-scroll { max-height: 58vh; overflow: auto; }
.table-wrap.is-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); }

/* Sortable column heads — [data-sort-table] on the table, [data-sort] on a th. */
.table thead th[data-sort] { cursor: pointer; user-select: none; }
.table thead th[data-sort]:hover { color: var(--ink); }
.table thead th[data-sort]::after { content: '↕'; margin-left: 5px; font-size: var(--t-3xs); opacity: 0.3; }
.table thead th[data-sort].sort-asc::after { content: '↑'; opacity: 1; }
.table thead th[data-sort].sort-desc::after { content: '↓'; opacity: 1; }

/* Row-level action button — replaces the per-button inline padding/font-size
   the appointment cards used to carry. */
.btn.sm { padding: 5px 10px; font-size: var(--t-xs); }
.btn.xs { padding: 3px 8px; font-size: var(--t-2xs); }
.btn.sm.is-muted { color: var(--ink-mute); }

/* "View all N" toggle under a section that renders its first few rows
   (partial: norand/show-more.blade.php). */
.show-more { padding: 8px 4px 2px; }

@media (max-width: 800px) {
  /* A wrapped toolbar is several rows tall on a phone — pinning it would eat a
     third of the viewport, so only the day heading stays put. */
  .toolbar.is-sticky { position: static; padding: 0; margin-bottom: 16px; border-bottom: none; }
  .toolbar.is-sticky ~ #cal-list .cal-date-header { top: var(--topbar-h); }
}
@media (max-width: 640px) {
  .zone-label { flex-wrap: wrap; gap: 4px 10px; }
  .zone-label .zone-meta { margin-left: 0; }
  .toolbar-filters { justify-content: flex-start; }
  .toolbar-filters select.search { width: auto; flex: 1 1 140px; min-width: 130px; }
  /* A phone has no room beside the search, so the desktop cap comes off. */
  .toolbar-filters input.search { flex: 1 1 100%; max-width: none; }
}

/* ============ SECTION CARD (2026-08-06 review) ============ */
/* .section on its own is a spacing wrapper — every block sits on the page
   background, so a list page reads as one card (the KPI strip) followed by
   loose text. `.section.is-card` gives it the same surface language the KPI
   strip already uses: white fill, hairline border, large radius, and a tinted
   head bar that names the block. Opt-in per section, so a page adopts it one
   class at a time. */
/* --line-strong, not --line: the KPI strip gets away with the softer hairline
   because its 1px interior gaps already describe the shape; a plain card has
   only its outline to read. */
.section.is-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; }
.section.is-card > .section-head { margin-bottom: 0; padding: 12px 18px; gap: 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.section.is-card > .section-head h2 { font-size: var(--t-md); font-weight: 500; }
/* Title and caption group on the left; whatever ships last (a count tag, a
   control) is pushed to the right edge. A head holding only its title is left
   alone — otherwise the lone <h2> would be flung to the right. */
.section.is-card > .section-head > :last-child:not(:first-child) { margin-left: auto; }
.section.is-card > .section-body { padding: 0; }

/* Content sits off the card edge rather than flush against it. */
.section.is-card .table thead th:first-child,
.section.is-card .table tbody td:first-child,
.section.is-card .doc-table th:first-child,
.section.is-card .doc-table td:first-child { padding-left: 18px; }
.section.is-card .table thead th:last-child,
.section.is-card .table tbody td:last-child,
.section.is-card .doc-table th:last-child,
.section.is-card .doc-table td:last-child { padding-right: 18px; }
.section.is-card .table thead th { background: var(--surface); }
.section.is-card .doc-table { margin-bottom: 0; }
/* The card body is padding: 0 so a table can run edge to edge on its own
   cell gutters. A bare action button dropped in beside that table inherits
   nothing, so it lands on the card's bottom border. Give it the same 18px
   gutter the table cells use, plus room below the last row. */
.section.is-card > .section-body > .btn { margin: 12px 18px 14px; }
/* Same for a toolbar of actions above a full-bleed table: it is a direct
   child of the same padding: 0 body, so without this the button lands on
   the card edge and against the head bar above it. */
.section.is-card > .section-body > .toolbar { margin: 12px 18px 14px; }
.section.is-card .ledger-row { padding: 14px 18px; }
.section.is-card .show-more { padding: 10px 18px 12px; border-top: 1px solid var(--line); }
.section.is-card .empty { padding: 28px 18px; }

/* A body is inset by default — a form, a note or a grid of cards must not sit
   against the card edge. A body whose content already carries its own gutter
   (a full-bleed table, ledger rows) opts back out. */
.section.is-card > .section-body { padding: 16px 18px; }
.section.is-card > .section-body:has(> .table-wrap),
.section.is-card > .section-body:has(> form > .table-wrap),
.section.is-card > .section-body:has(> table),
.section.is-card > .section-body:has(> .ledger-row),
.section.is-card > .section-body.is-flush { padding: 0; }
/* A direct child that is neither the head nor a body — the analytics chart —
   still has to clear the card edge, and drops its own card chrome now that the
   section supplies it. */
.section.is-card > .chart-wrap { padding: 16px 18px 8px; background: none; border: 0; border-radius: 0; margin-bottom: 0; }

/* Canvas host for a Chart.js chart. Chart.js sizes to the parent box, so the
   parent needs an explicit height and position. The old .chart-svg-* /
   .chart-legend-* rules above stay — the prototype still hand-plots its SVG. */
.chart-canvas-wrap { position: relative; width: 100%; height: 260px; }
@media (max-width: 640px) { .chart-canvas-wrap { height: 220px; } }

/* A numeric column ended 4px from the next header, so "Outstanding" and
   "Status" read as one label. Give the column its own gutter. */
.table thead th.num, .table tbody td.num { padding-right: 16px; }

/* Dense card — same card, tighter rhythm, for a supporting table that should
   not out-weigh the page's main list. Named is-dense, not is-compact: the
   deleted appointment density toggle used that name and this is unrelated. */
.section.is-card.is-dense > .section-head { padding: 8px 18px; }
.section.is-card.is-dense > .section-head h2 { font-size: var(--t-sm); }
.section.is-card.is-dense .table thead th { padding-top: 7px; padding-bottom: 7px; font-size: var(--t-3xs); }
.section.is-card.is-dense .table tbody td { padding-top: 6px; padding-bottom: 6px; font-size: var(--t-sm); }
.section.is-card.is-dense .cell-primary { font-size: var(--t-sm); }
.section.is-card.is-dense .tag { padding: 1px 6px; font-size: var(--t-3xs); }
.section.is-card.is-dense .btn.small { padding: 2px 9px; font-size: var(--t-2xs); }
.section.is-card.is-dense .pace-bar { height: 5px; }
.section.is-card.is-dense .show-more { padding: 5px 18px 7px; }
.section.is-card.is-dense { margin-bottom: 14px; }

/* ============ SIDEBAR ICONS + SCROLLBAR (2026-08-17) ============ */

/* The sidebar glyphs moved from the inline SVG sprite to the Flaticon UIcons
   webfont (config/settings.php NORAND_ASSETS.cdn_css). The lifted .nav-icon
   rule above sizes an <svg> with width/height and strokes its child shapes;
   a font glyph answers to neither, so it is sized here instead. This block
   sits after the lifted rule on purpose — same specificity, later wins. */
.nav-icon.fi {
  font-size: var(--t-base);
  line-height: 1;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* A glyph carries its own descender space; without this the 14px box rides
   ~1px low against the label on the .nav-item flex line. */
.nav-icon.fi::before { display: block; line-height: 1; }

/* A full-width scrollbar cuts into the 240px sidebar and reads heavier than
   the hairline borders around it. Firefox takes the keyword, WebKit the
   pixel width; both fall back to the platform default if unsupported. */
.sidebar { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: var(--r-pill); }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* Settings shell.
   Lived in a <style> block inside settings/show.blade.php until 2026-08-19,
   which is how its group label came to use a face and colour no other
   section label in the product uses. A label role is defined once, here
   (REQ-PLT-10 rule 8). */
.settings-shell{display:flex;gap:20px;align-items:flex-start;}
#settings-nav{flex:0 0 236px;position:sticky;top:0;max-height:calc(100vh - 100px);overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:4px 0;}
/* The house micro-label, the same treatment every other section label
   in the product carries (.detail-block-title, .zone-label,
   .nav-section-title) — this pane had invented a fourth
   (REQ-PLT-10 rule 8). */
.set-group-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 16px 7px;font-family:var(--font-mono);font-size: var(--t-2xs);font-weight:500;letter-spacing: var(--ls-tight);text-transform:none;color:var(--ink-mute);}
.set-group-head .chev{font-size: var(--t-3xs);transition:transform .15s;}
.set-group.collapsed .chev{transform:rotate(-90deg);}
.set-group.collapsed .set-items{display:none;}
.set-item{padding:10px 16px;font-size: var(--t-md);color:var(--ink-2);cursor:pointer;border-bottom:1px solid var(--line);}
.set-items .set-item{padding-left:28px;}
/* A group of one flattens to a single row. It is still an ITEM — a
   leaf someone clicks — so it reads as one; the weight it used to
   carry made it read as a third kind of thing (REQ-PLT-10 rule 8). */
.set-item:last-child{border-bottom:none;}
.set-item:hover{background:var(--surface);}
.set-item.active{color:var(--accent);font-weight:600;}
#settings-detail{flex:1 1 auto;min-width:0;}

/* ============ TYPE SCALE UTILITIES ============
   For text that is not a named component. A template sets a size with one
   of these and never with a px value of its own, so every size in the
   product comes from the ladder in :root (REQ-PLT-10 rule 8). */
.t-3xs { font-size: var(--t-3xs); }
.t-2xs { font-size: var(--t-2xs); }
.t-xs { font-size: var(--t-xs); }
.t-sm { font-size: var(--t-sm); }
.t-md { font-size: var(--t-md); }
.t-base { font-size: var(--t-base); }
.t-lg { font-size: var(--t-lg); }
.t-xl { font-size: var(--t-xl); }
.t-2xl { font-size: var(--t-2xl); }
.t-3xl { font-size: var(--t-3xl); }
.t-4xl { font-size: var(--t-4xl); }

/* ─── Background upload with progress (REQ-SAL-10) ─────────────────────────
   The catalogue form posts its PDF in the background so a large file shows
   its progress, and any refusal lands in the same popup. */
.upload-error { margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(139, 58, 58, 0.3); border-radius: var(--r-sm); background: rgba(139, 58, 58, 0.06); color: var(--accent-flag); font-size: var(--t-sm); line-height: 1.45; }
.upload-progress { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); }
.upload-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-sm); margin-bottom: 8px; }
.upload-progress-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0; background: var(--ink); border-radius: inherit; transition: width 200ms linear; }
.upload-progress.is-processing .upload-progress-fill { width: 100%; animation: upload-pulse 1.2s ease-in-out infinite; }
.upload-progress [data-upload-progress-note] { margin-top: 8px; }
@keyframes upload-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ─── Company list: credit reviews as one line (REQ-CRM-08 (f)) ───────────
   Collapsed by default to the count due; a click on the line opens the full
   list. A native <details>, so it needs no script. */
.action-bar { margin-bottom: 16px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.action-bar > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; list-style: none; }
.action-bar > summary::-webkit-details-marker { display: none; }
.action-bar-text { display: flex; flex-direction: column; gap: 2px; }
.action-bar-title { font-size: var(--t-md); font-weight: 500; color: var(--ink); }
.action-bar-link { font-size: var(--t-md); color: var(--ink); white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid var(--line-strong); }
.action-bar-link strong { color: var(--accent-flag); font-weight: 500; }
.action-bar > summary:hover .action-bar-link, .action-bar[open] > summary .action-bar-link { border-bottom-color: var(--ink); }
.action-bar > .section { margin-bottom: 16px; }

/* ─── Company detail page (REQ-CRM-06 (o)) ─────────────────────────────────
   The full-page record a company table row opens: a head, a tab strip, and
   on Overview a next-action line over a two-column summary. Every tab reuses
   the same panel head and row, so the page reads as one system. */
.page-back { display: inline-block; margin-bottom: 14px; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; }
.page-back:hover { color: var(--ink); }
.record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.record-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--t-3xl); font-weight: 300; letter-spacing: var(--ls-tighter); line-height: 1.15; color: var(--ink); }
.record-head-meta { margin-top: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.record-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line-strong); }
.page-tabs a { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: var(--t-md); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.page-tabs a:hover { color: var(--ink); }
.page-tabs a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.next-action { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 36px; }
.overview-panel { padding: 20px 0; border-bottom: 1px solid var(--line); }
.overview-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.overview-panel-head h2 { font-size: var(--t-lg); font-weight: 400; color: var(--ink); }
.overview-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.overview-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.overview-row:last-child { border-bottom: none; }
.overview-row-end { flex: none; display: flex; align-items: center; gap: 8px; text-align: right; font-size: var(--t-sm); color: var(--ink); }
.overview-note { margin-top: 10px; font-size: var(--t-sm); line-height: 1.5; color: var(--accent-flag); }
.overview-empty { padding: 8px 0; font-size: var(--t-sm); color: var(--ink-mute); }
.is-flag { color: var(--accent-flag); }
@media (max-width: 900px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .record-head { flex-direction: column; }
  .next-action { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
/* A KYC review on the Approval Board lists its documents to open (REQ-CRM-07). */
.approval-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.approval-doc { font-size: var(--t-xs); padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; }
.approval-doc:hover { border-color: var(--ink); color: var(--ink); }
/* Pipeline board filters, as the prototype's: closed until the Filters
   button opens them; four selects in a row, two on a phone. */
.pipeline-filters { display: none; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); margin-bottom: 12px; }
.pipeline-filters.is-open { display: grid; }
/* The prototype's filter summary above the board. */
.pipeline-summary { font-size: var(--t-sm); color: var(--ink-mute); margin: 6px 0 8px; }
.pipeline-filters.is-own { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.pipeline-filter label { display: block; font-size: var(--t-xs); color: var(--ink-mute); margin-bottom: 5px; }
.pipeline-filter select { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-sm); color: var(--ink); }
#search-pipeline { width: 280px; }
@media (max-width: 760px) {
  .pipeline-filters, .pipeline-filters.is-own { grid-template-columns: 1fr 1fr; }
  #search-pipeline { width: 100%; }
}