/* ═══════════════════════════════════════════════════════════════════════
 * components.css — RECRUITING-DESIGN-LANGUAGE-ALIGNMENT-V1 (2026-05-27).
 *
 * Canonical un-prefixed component classes per UI Pack Dispatch 2.
 *
 *   .btn .btn-primary .btn-secondary .btn-danger .btn-sm .btn-lg
 *   .badge .badge-{success|warning|danger|info|muted} .badge-outline
 *   .card
 *   .tile (clickable hub-tile variant of .card)
 *   .chip + .chip.active
 *
 * Plus a small set of utility classes the Recruiting migration needs
 * (text-*, recruiting-tile-grid, recruiting-aggregate).
 *
 * All values reference tokens.css custom properties. Do not introduce
 * raw hex codes here — go through tokens.css.
 *
 * Coexists with admin-dashboard/styles/emr-design-system.css's
 * .emr-* prefixed classes. Surfaces may use either prefix; the
 * Recruiting Hub uses the un-prefixed canonical set.
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:hover:not(:disabled):not([disabled]) {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:active:not(:disabled):not([disabled]) { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color: #1A1A1A;
  border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled):not([disabled]) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #1A1A1A;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-danger {
  background: var(--color-danger);
  color: #FFFFFF;
  border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled):not([disabled]) { filter: brightness(1.08); }

.btn-sm { min-height: 28px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { min-height: 44px; padding: var(--space-3) var(--space-5); font-size: var(--text-md); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  vertical-align: middle;
  background: var(--color-muted-bg);
  color: var(--color-muted);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-muted   { background: var(--color-muted-bg);   color: var(--color-muted); }

/* Outline variant — transparent fill, colored border + text. */
.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ── Settlement status pills (shared system-wide) ─────────────────────────
 * SETTLEMENT-STATUS-COLOR-TOKENS-V1 (2026-06-07). The ONE canonical
 * settlement status→color map, consumed by both the settlements list page
 * AND the settlement detail page (coordinate w/ ui-consistency). Render via
 * the window.emrSettlementStatus* helpers (admin-dashboard/js/settlementStatus.js).
 *   draft→muted · finalized→info · sent→warning(gold) · paid→success
 * As a row badge: <span class="badge status-pill is-<status>">…</span>
 * As a clickable filter chip: <button class="chip status-pill is-<status>[ active]">…</button>
 */
.status-pill.is-draft     { background: var(--color-muted-bg);   color: var(--color-muted); }
.status-pill.is-finalized { background: var(--color-info-bg);    color: var(--color-info); }
.status-pill.is-sent      { background: var(--color-warning-bg); color: var(--color-warning); }
.status-pill.is-paid      { background: var(--color-success-bg); color: var(--color-success); }
/* Active filter-chip state: solid fill in the same hue (keeps the color identity). */
.chip.status-pill.is-draft.active     { background: var(--color-muted);   color: #fff;     border-color: var(--color-muted); }
.chip.status-pill.is-finalized.active { background: var(--color-info);    color: #fff;     border-color: var(--color-info); }
.chip.status-pill.is-sent.active      { background: var(--color-warning); color: #1A1A1A;  border-color: var(--color-warning); }
.chip.status-pill.is-paid.active      { background: var(--color-success); color: #fff;     border-color: var(--color-success); }

/* ── Q-UI-READABILITY-V1 Wave 1 — table cell primitives (shared) ──────────
 * Numeric alignment + a 3-step text hierarchy for the dense list/table views
 * (Manifests, Orders, Truck Board, Settlements, Pay Events). Opt-in per
 * <td>/<div>; no markup restructure required. Promotes the pattern already
 * proven in the Orders grid (.emr-orders-cell-primary/-sub) into a shared,
 * view-agnostic layer.
 *   .cell-num       money / miles / rate / count — right-aligned + tabular so
 *                   place values line up DOWN the column.
 *   .cell-primary   the dominant datum of the row (e.g. Manifest ID).
 *   .cell-secondary default cell text.
 *   .cell-muted     timestamps / secondary IDs — recede below the primary.
 */
.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cell-primary {
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text);
}
.cell-secondary {
  font-weight: var(--weight-normal, 400);
  color: var(--color-text-muted);
}
.cell-muted {
  font-weight: var(--weight-normal, 400);
  font-size: var(--text-minor, 11px);
  color: var(--color-text-subtle);
}

/* Row-state accent — a subtle 3px left border in the STATUS color, replacing
 * the old full-row saturated tint. Reserve high-contrast fills for genuine
 * exceptions only. (Truck Board already uses a left-edge accent; this gives
 * the other list views the same calm signal.) */
.row-accent { border-left: 3px solid transparent; }
.row-accent.is-planning  { border-left-color: var(--status-planning); }
.row-accent.is-assigned  { border-left-color: var(--status-assigned); }
.row-accent.is-moving    { border-left-color: var(--status-moving); }
.row-accent.is-completed { border-left-color: var(--status-completed); }
.row-accent.is-cancelled { border-left-color: var(--status-cancelled); }

/* ── Card + Tile ──────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.tile:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.tile:active { transform: translateY(1px); }

/* ── Chip (filter pill) ───────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.chip:hover { background: var(--color-surface-3); }
.chip.active {
  background: var(--color-primary);
  color: #1A1A1A;
  border-color: var(--color-primary);
}

/* ── Text utility classes (semantic colors) ───────────────────────────── */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.text-weight-semibold { font-weight: var(--weight-semibold); }

/* ═══════════════════════════════════════════════════════════════════════
 * Recruiting module — RECRUITING-HUB-REDESIGN-V1 (2026-06-11).
 *
 * Visual modernization of the internal recruiting hub + sub-surfaces to
 * the apply-page product family (card hierarchy, gold accents, kicker
 * labels) in internal-tool density. Every pre-existing class name below
 * is retained (JS + test contracts reference them); values restyled.
 * All colors via tokens — themes flip automatically via --emr-* ramp.
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Hub shell + page header anatomy ──────────────────────────────────── */
.recruiting-hub { padding: var(--space-5) var(--space-6) var(--space-8); max-width: 1480px; }
.recruiting-hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.recruiting-page-kicker {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.recruiting-hub-title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.recruiting-hub-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.recruiting-hub-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── Hub KPI stat tiles ───────────────────────────────────────────────── */
.recruiting-tile-grid {
  display: grid;
  /* Five KPI tiles share the row at desktop width; the pipeline card
     below spans 1/-1. Falls back to auto-fit wrapping when narrow. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1200px) {
  .recruiting-tile-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.recruiting-tile-grid .recruiting-tile {
  position: relative;
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: hidden;
}
.recruiting-tile-grid .recruiting-tile:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.recruiting-tile-grid .recruiting-tile::after {
  content: 'View →';
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.recruiting-tile-grid .recruiting-tile:hover::after { opacity: 1; }
.recruiting-tile-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
}
.recruiting-tile-label::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}
.recruiting-tile[data-tile="candidates"]      .recruiting-tile-label::before { background: var(--color-primary); }
.recruiting-tile[data-tile="onboarding"]      .recruiting-tile-label::before { background: var(--color-info); }
.recruiting-tile[data-tile="feedback"]        .recruiting-tile-label::before { background: var(--emr-status-cyan, var(--color-info)); }
.recruiting-tile[data-tile="exit-interviews"] .recruiting-tile-label::before { background: var(--emr-status-purple, var(--color-muted)); }
.recruiting-tile[data-tile="reports"]         .recruiting-tile-label::before { background: var(--color-success); }
.recruiting-tile-value {
  font-size: 30px;
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.recruiting-tile-sub { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }
.recruiting-tile-loading { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-4) 0; }

/* ── Pipeline funnel card (stage breakdown, spans the KPI grid) ───────── */
.recruiting-pipeline {
  grid-column: 1 / -1;
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-1);
}
.recruiting-pipeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.recruiting-pipeline-title {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
}
.recruiting-pipeline-total {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
  white-space: nowrap;
}
/* Proportional funnel bar — segment widths set post-render from data-count
   (flex-grow assignment in JS; inline style attrs are banned in templates). */
.recruiting-pipeline-bar {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.recruiting-pipeline-seg { flex: 0 0 auto; min-width: 6px; border-radius: 2px; background: var(--color-muted); }
.recruiting-pipeline-seg[data-seg="applied"]      { background: var(--color-info); }
.recruiting-pipeline-seg[data-seg="screening"]    { background: var(--emr-status-cyan, var(--color-info)); }
.recruiting-pipeline-seg[data-seg="flight"]       { background: var(--emr-status-purple, var(--color-muted)); }
.recruiting-pipeline-seg[data-seg="arriving"]     { background: var(--color-warning); }
.recruiting-pipeline-seg[data-seg="arrived"]      { background: var(--color-primary); }
.recruiting-pipeline-seg[data-seg="orientation"]  { background: color-mix(in srgb, var(--color-primary) 55%, var(--color-success)); }
.recruiting-pipeline-seg[data-seg="driving_test"] { background: var(--color-success); }
.recruiting-pipeline-cells {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}
.recruiting-pipeline-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  min-width: 72px;
  color: var(--color-text);
  position: relative;
}
.recruiting-pipeline-cell::before {
  content: '';
  position: absolute;
  left: 0; top: var(--space-2); bottom: var(--space-2);
  width: 3px;
  border-radius: 2px;
  background: var(--color-muted);
}
.recruiting-pipeline-cell[data-stage="applied"]::before      { background: var(--color-info); }
.recruiting-pipeline-cell[data-stage="screening"]::before    { background: var(--emr-status-cyan, var(--color-info)); }
.recruiting-pipeline-cell[data-stage="flight"]::before       { background: var(--emr-status-purple, var(--color-muted)); }
.recruiting-pipeline-cell[data-stage="arriving"]::before     { background: var(--color-warning); }
.recruiting-pipeline-cell[data-stage="arrived"]::before      { background: var(--color-primary); }
.recruiting-pipeline-cell[data-stage="orientation"]::before  { background: color-mix(in srgb, var(--color-primary) 55%, var(--color-success)); }
.recruiting-pipeline-cell[data-stage="driving_test"]::before { background: var(--color-success); }
.recruiting-pipeline-cell.is-hired    { background: var(--color-success-bg); }
.recruiting-pipeline-cell.is-hired::before { background: var(--color-success); }
.recruiting-pipeline-cell.is-rejected { background: var(--color-danger-bg); }
.recruiting-pipeline-cell.is-rejected::before { background: var(--color-danger); }
.recruiting-pipeline-cell-count {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
.recruiting-pipeline-cell-label {
  color: var(--color-text-muted);
  text-transform: capitalize;
  font-size: 10px;
  white-space: nowrap;
}

/* ── Hub analytics cards (2-up responsive grid) ───────────────────────── */
.recruiting-analytics-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: start;
}
.recruiting-analytics-section > [data-tile-slot]:empty { display: none; }
/* Funnel-by-recruiter packs five numeric columns + a long recruiter/firm
   label into one tile, so its metrics need more room than the sparse
   Bonus-events ledger that shares its row. The hub renders the slots in
   order (retention, funnel, bonus, …), so the funnel lands in the right
   column and bonus in the left. On the 2-up wide layout make the right
   column wider and the left column narrower (≈11fr/9fr) so the funnel
   metric stops clipping and bonus yields the space. Below this breakpoint
   the section keeps its auto-fit single-column stack. */
@media (min-width: 1100px) {
  .recruiting-analytics-section {
    grid-template-columns: minmax(360px, 9fr) minmax(460px, 11fr);
  }
}
.recruiting-analytics-tile {
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.recruiting-analytics-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
}
.recruiting-analytics-title {
  margin: 0;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
}
.recruiting-analytics-hint { font-size: var(--text-xs); color: var(--color-text-subtle); }
.recruiting-analytics-body { font-size: var(--text-sm); color: var(--color-text); }
.recruiting-analytics-empty {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
}

/* ── Analytics tables (funnel / bonus / tracking / signature) ─────────── */
.recruiting-data-table {
  width: 100%;
  border-collapse: collapse;
}
.recruiting-data-table thead tr {
  color: var(--color-text-subtle);
  text-align: left;
}
.recruiting-th {
  padding: var(--space-1) var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--color-border);
}
.recruiting-th-right {
  padding: var(--space-1) var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}
.recruiting-data-table tbody tr { border-bottom: 1px solid var(--emr-divider, var(--color-border)); }
.recruiting-data-table tbody tr:last-child { border-bottom: none; }
.recruiting-data-table tbody tr:hover { background: var(--color-primary-tint); }
.recruiting-td {
  padding: 7px var(--space-2);
  font-size: var(--text-sm);
}
.recruiting-td-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recruiting-td-mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.recruiting-td-muted { color: var(--color-text-muted); }
.recruiting-td-hired { color: var(--color-success); font-weight: var(--weight-semibold); }
.recruiting-td-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.recruiting-row-clickable { cursor: pointer; }

/* Hired-share bar inside the funnel-by-recruiter table (width set
   post-render from data-bar — inline style attrs banned in templates). */
.recruiting-share-track {
  display: block;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  overflow: hidden;
  min-width: 60px;
}
.recruiting-share-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  transition: width var(--transition-slow);
}

/* Inline type badges (firm / user buckets) */
.recruiting-type-badge {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  padding: 1px var(--space-1);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-1);
}
.recruiting-type-badge.is-firm { background: var(--color-info-bg); color: var(--color-info); }
.recruiting-type-badge.is-user { background: var(--color-success-bg); color: var(--color-success); }

/* ── Stat blocks (bonus summary / retention metrics / aggregates) ─────── */
.recruiting-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.recruiting-summary-bar > div {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.recruiting-summary-bar strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.recruiting-summary-label {
  color: var(--color-text-subtle);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--weight-semibold);
}
.recruiting-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.recruiting-metric-grid > div {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.recruiting-metric-grid strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.recruiting-metric-warn { color: var(--color-warning); }
.recruiting-metric-danger { color: var(--color-danger); }

/* ── Signature-compliance tile ────────────────────────────────────────── */
.recruiting-sig-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.recruiting-sig-pct {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.recruiting-sig-pct.is-good { color: var(--color-success); }
.recruiting-sig-pct.is-warn { color: var(--color-warning); }
.recruiting-sig-pct.is-bad  { color: var(--color-danger); }
.recruiting-sig-caption { font-size: var(--text-sm); color: var(--color-text-muted); }
.recruiting-sig-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.recruiting-sig-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  transition: width var(--transition-slow);
}
.recruiting-sig-fill.is-warn { background: var(--color-warning); }
.recruiting-sig-fill.is-bad  { background: var(--color-danger); }
.recruiting-sig-breakdown {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.recruiting-sig-details { margin-top: var(--space-2); }
.recruiting-sig-summary {
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.recruiting-sig-table { margin-top: var(--space-2); }
.recruiting-td-center { text-align: center; }
.recruiting-ok  { color: var(--color-success); }
.recruiting-bad { color: var(--color-danger); }

/* ── Sub-surface shared anatomy (onboarding / retention / feedback / exit /
      tracking links): header band → filter toolbar → row list ──────────── */
.recruiting-header { padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-border); }
.recruiting-header-row { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.recruiting-header-row .recruiting-hub-title { margin: 0; }
.recruiting-title-block { display: flex; flex-direction: column; }
.recruiting-toolbar {
  padding: var(--space-3) var(--space-6);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.recruiting-filter-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  align-self: center;
}
.recruiting-toolbar-gap { display: inline-block; width: var(--space-4); }
.recruiting-empty { padding: var(--space-8) var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

/* Row list */
.recruiting-row {
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
  padding: var(--space-3) var(--space-6);
  position: relative;
}
.recruiting-row:hover { background: var(--color-primary-tint); }

/* MANIFEST ROW HOVER (2026-06-16) — clearly mark the row under the cursor.
   Standard data-table row-highlight: a clearly-visible gold wash PLUS a gold
   left-edge accent bar (the "you are here" marker), on both the manifest LIST
   rows (<tr data-mf-id>) and the manifest-detail stops list (<div
   data-mfp-stop-row>). The list rows carry an inline profit/loss tint, so the
   background override needs !important; the box-shadow accent has no inline
   conflict so it works on both. */
[data-mfp-stop-row], [data-mf-id] { transition: background .12s ease, box-shadow .12s ease; }
[data-mfp-stop-row]:hover { background: rgba(245, 168, 0, 0.16); box-shadow: inset 3px 0 0 0 var(--color-primary); }
[data-mf-id]:hover { background: rgba(245, 168, 0, 0.16) !important; box-shadow: inset 3px 0 0 0 var(--color-primary); }
.recruiting-row.is-alert::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-danger);
}
.recruiting-row-head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-1); }
.recruiting-row-meta-block { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-1); }
.recruiting-row-spacer { flex: 1; }
.recruiting-row-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.recruiting-row-meta-label {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}
.recruiting-row-name { font-weight: var(--weight-medium); font-size: var(--text-emphasis); color: var(--color-text); }
.recruiting-row-id { font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); }
.recruiting-actions { display: flex; gap: var(--space-2); }
.recruiting-actions-mt { margin-top: var(--space-2); }
.recruiting-tile-status { flex: 1; display: flex; align-items: center; gap: var(--space-2); }
.recruiting-tile-status-empty { font-size: var(--text-xs); color: var(--color-text-muted); }
.recruiting-narrative { font-size: var(--text-base); line-height: 1.5; color: var(--color-text-muted); white-space: pre-wrap; }
.recruiting-row-mention { font-size: var(--text-base); line-height: 1.5; white-space: pre-wrap; color: var(--color-text); }
.recruiting-row-narrative-indent { padding-left: 156px; }
.recruiting-row-narrative-indent-retention { padding-left: 172px; }
.recruiting-row-narrative-pad { padding-left: 172px; }
.recruiting-row-subject { font-weight: var(--weight-medium); font-size: var(--text-emphasis); margin-bottom: var(--space-1); }
.recruiting-min-w-120 { min-width: 120px; }
.recruiting-min-w-140 { min-width: 140px; }
.recruiting-min-w-160 { min-width: 160px; }
.recruiting-min-w-180 { min-width: 180px; }
.recruiting-min-w-200 { min-width: 200px; }
.recruiting-flagged-flag {
  margin-left: var(--space-2);
  color: var(--color-danger);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.recruiting-failed-flag { margin-left: var(--space-2); color: var(--color-danger); font-size: var(--text-xs); }
.recruiting-sweep-note { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Header count chips (status dot + label + count) */
.recruiting-counts-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.recruiting-count-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-3);
}
.recruiting-count-item::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-muted);
  flex: none;
}
.recruiting-count-item[data-status="scheduled"]::before   { background: var(--color-info); }
.recruiting-count-item[data-status="in_progress"]::before { background: var(--color-warning); }
.recruiting-count-item[data-status="completed"]::before   { background: var(--color-success); }
.recruiting-count-item[data-status="failed"]::before      { background: var(--color-danger); }
.recruiting-count-item[data-status="canceled"]::before    { background: var(--color-muted); }
.recruiting-count-label {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
}
.recruiting-count-value { font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ── Feedback NPS header block ────────────────────────────────────────── */
.recruiting-stats-bar { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.recruiting-stats-nps {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.recruiting-stats-meta { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.recruiting-stats-total { font-size: var(--text-sm); color: var(--color-text-muted); }
.recruiting-nps-split {
  display: flex;
  gap: 2px;
  width: 180px;
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.recruiting-nps-split span { display: block; height: 100%; min-width: 2px; }
.recruiting-nps-split .is-promoters  { background: var(--color-success); }
.recruiting-nps-split .is-passives   { background: var(--color-muted); }
.recruiting-nps-split .is-detractors { background: var(--color-danger); }

/* ── Exit aggregate report card ───────────────────────────────────────── */
.recruiting-aggregate {
  margin: var(--space-4) var(--space-6) var(--space-6);
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.recruiting-aggregate.recruiting-empty { text-align: left; padding: var(--space-4); }
.recruiting-aggregate-head {
  margin: 0 0 var(--space-3) 0;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
}
.recruiting-aggregate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.recruiting-aggregate-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}
.recruiting-aggregate-value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; margin-top: 2px; }
.recruiting-aggregate-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.recruiting-aggregate-reasons { grid-column: span 2; }
.recruiting-reason-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
}
.recruiting-reason-row:last-child { border-bottom: none; }
.recruiting-reason-row strong { font-variant-numeric: tabular-nums; }

/* ── Tracking-links surface ───────────────────────────────────────────── */
.recruiting-links-card {
  margin: var(--space-4) var(--space-6) var(--space-6);
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
}
.recruiting-url-input {
  width: 100%;
  min-width: 200px;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  background: var(--emr-input-bg, var(--color-surface-2));
  border: 1px solid var(--emr-input-border, var(--color-border));
  color: var(--color-text-muted);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
}
.recruiting-slug-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Recruiting pipeline board + candidate profile drawer —
 * RECRUITING-PIPELINE-PROFILE-V1 (Lane A, 2026-06-11).
 *
 * Extends the RECRUITING-HUB-REDESIGN-V1 idiom (cards, kicker labels,
 * gold accents, tokens-only colors). Consumed by recruitingPipeline.js
 * and candidateProfileDrawer.js. No inline style attrs in those
 * templates — all post-render dynamics are class toggles.
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Board toolbar ────────────────────────────────────────────────────── */
.recruiting-pipeline-page { max-width: none; }
.recruiting-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.recruiting-board-filters,
.recruiting-board-views {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.recruiting-board-select {
  background: var(--emr-input-bg, var(--color-surface-2));
  border: 1px solid var(--emr-input-border, var(--color-border));
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
}
.recruiting-board-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

/* ── Kanban board ─────────────────────────────────────────────────────── */
.recruiting-board {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--space-3);
}
.recruiting-board-col {
  /* 9 columns fit a 1440px viewport without horizontal scroll;
     narrower viewports degrade to horizontal scroll via the
     min-width floor. Columns grow evenly on wide screens.
     MODERNIZE (2026-06-30): larger radius, soft elevation, hover hairline. */
  flex: 1 1 142px;
  min-width: 142px;
  max-width: 360px;
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
  transition: box-shadow 120ms ease;
}
.recruiting-board-col:hover { box-shadow: var(--shadow-md); }
.recruiting-board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--emr-card-bg, var(--color-surface));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.recruiting-board-col-head::before {
  content: '';
  position: absolute;
  left: 0; top: var(--space-2); bottom: var(--space-2);
  width: 3px;
  border-radius: 2px;
  background: var(--color-muted);
}
.recruiting-board-col-head[data-stage="applied"]::before      { background: var(--color-info); }
.recruiting-board-col-head[data-stage="screening"]::before    { background: var(--emr-status-cyan, var(--color-info)); }
.recruiting-board-col-head[data-stage="flight"]::before       { background: var(--emr-status-purple, var(--color-muted)); }
.recruiting-board-col-head[data-stage="arriving"]::before     { background: var(--color-warning); }
.recruiting-board-col-head[data-stage="arrived"]::before      { background: var(--color-primary); }
.recruiting-board-col-head[data-stage="orientation"]::before  { background: color-mix(in srgb, var(--color-primary) 55%, var(--color-success)); }
.recruiting-board-col-head[data-stage="driving_test"]::before { background: var(--color-success); }
.recruiting-board-col-head[data-stage="hired"]::before        { background: var(--color-success); }
.recruiting-board-col-head[data-stage="rejected"]::before     { background: var(--color-danger); }
.recruiting-board-col-title {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  padding-left: var(--space-2);
}
.recruiting-board-col-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.recruiting-board-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-y: auto;
  min-height: 64px;
  flex: 1 1 auto;
}
/* BOARD-POLISH (2026-07-02) — drop feedback you can't miss: dashed ring +
   tint + gentle inward pull on the cards while a drag hovers the column. */
.recruiting-board-cards.is-drop-target {
  outline: 2px dashed var(--color-primary);
  outline-offset: -4px;
  background: var(--color-primary-tint);
  border-radius: var(--radius-md);
  transition: background 120ms ease;
}
.recruiting-board-cards.is-drop-target .recruiting-card { transform: scale(.985); }
.recruiting-board-empty {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-4) 0;
}
.recruiting-board-empty::before {
  content: '⬡';
  display: block;
  font-size: 20px;
  opacity: .35;
  margin-bottom: var(--space-1);
}

/* ── Candidate card ───────────────────────────────────────────────────────
   MODERNIZE (2026-06-30): softer surface, larger radius, hover lift +
   primary-tinted ring, smooth transitions. Hierarchy reads name → phone →
   meta chips → status badges, top-to-bottom. Adaptive: cards flex to the
   column width; chips wrap. Tokened throughout → dark-mode safe. */
.recruiting-card {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-md);
  /* KANBAN-READABILITY (2026-06-15): cards + text +20% — operator feedback
     that the pipeline cards were too small/hard to read. */
  padding: calc(var(--space-2) * 1.2) calc(var(--space-3) * 1.2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) * 1.2);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  will-change: transform;
}
.recruiting-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent), var(--shadow-md);
  transform: translateY(-1px);
}
.recruiting-card:active { transform: translateY(0); }
.recruiting-card.is-dragging { opacity: 0.5; transform: scale(0.98); }
.recruiting-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.recruiting-card-name {
  font-size: calc(var(--text-sm) * 1.2);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* BOARD-POLISH (2026-07-02) — initials avatar, tinted by the card's stage
   (same hue family as the column header stripe) so a glance ties card→stage
   even while dragging. */
.recruiting-card-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--color-info), color-mix(in srgb, var(--color-info) 55%, #000));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
/* FACE-BUBBLE-V1 (2026-07-03): CDL face thumb fills the bubble over the
   initials; the stage tint survives as a ring. Gentle zoom on card hover
   so the tiny face reads. onerror removes the img → initials show. */
.recruiting-card-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
}
.recruiting-card-avatar.has-photo img { display: block; }
.recruiting-card-avatar.has-photo {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 0%, transparent),
              0 0 0 2px var(--color-info, #3b82f6);
}
.recruiting-card:hover .recruiting-card-avatar.has-photo img {
  transform: scale(1.15);
  transition: transform .15s ease;
}
.recruiting-card[data-card-stage="screening"]    .recruiting-card-avatar { background: linear-gradient(135deg, var(--emr-status-cyan, var(--color-info)), color-mix(in srgb, var(--emr-status-cyan, var(--color-info)) 55%, #000)); }
.recruiting-card[data-card-stage="flight"]       .recruiting-card-avatar { background: linear-gradient(135deg, var(--emr-status-purple, var(--color-muted)), color-mix(in srgb, var(--emr-status-purple, var(--color-muted)) 55%, #000)); }
.recruiting-card[data-card-stage="arriving"]     .recruiting-card-avatar { background: linear-gradient(135deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 55%, #000)); }
.recruiting-card[data-card-stage="arrived"]      .recruiting-card-avatar { background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #000)); }
.recruiting-card[data-card-stage="orientation"]  .recruiting-card-avatar { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 55%, var(--color-success)), color-mix(in srgb, var(--color-primary) 30%, #000)); }
.recruiting-card[data-card-stage="driving_test"] .recruiting-card-avatar,
.recruiting-card[data-card-stage="hired"]        .recruiting-card-avatar { background: linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 55%, #000)); }
.recruiting-card[data-card-stage="rejected"]     .recruiting-card-avatar { background: linear-gradient(135deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 55%, #000)); filter: saturate(.6); }
/* Stage accent on the card's left edge — thin echo of the column stripe.
   Approved keeps its green ring (higher specificity below). */
.recruiting-card { border-left-width: 3px; }
.recruiting-card[data-card-stage="applied"]      { border-left-color: var(--color-info); }
.recruiting-card[data-card-stage="screening"]    { border-left-color: var(--emr-status-cyan, var(--color-info)); }
.recruiting-card[data-card-stage="flight"]       { border-left-color: var(--emr-status-purple, var(--color-muted)); }
.recruiting-card[data-card-stage="arriving"]     { border-left-color: var(--color-warning); }
.recruiting-card[data-card-stage="arrived"]      { border-left-color: var(--color-primary); }
.recruiting-card[data-card-stage="orientation"]  { border-left-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-success)); }
.recruiting-card[data-card-stage="driving_test"],
.recruiting-card[data-card-stage="hired"]        { border-left-color: var(--color-success); }
.recruiting-card[data-card-stage="rejected"]     { border-left-color: var(--color-danger); }
.recruiting-card-move {
  background: none;
  border: 1px solid var(--emr-card-border, var(--color-border));
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 1px var(--space-1);
  cursor: pointer;
}
.recruiting-card-move:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.recruiting-card-phone { font-size: calc(var(--text-xs) * 1.2); color: var(--color-text-muted); }
.recruiting-card-meta,
.recruiting-card-badges {
  display: flex;
  align-items: center;
  gap: calc(var(--space-1) * 1.2);
  flex-wrap: wrap;
}
/* KANBAN-READABILITY (2026-06-15): chips INSIDE pipeline cards +20%, scoped
   to cards so chips on other recruiting surfaces (lists, drawer) are unchanged. */
.recruiting-card .recruiting-chip { font-size: 12px; }
.recruiting-chip {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface);
  white-space: nowrap;
}
.recruiting-chip-source { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-tint); }
.recruiting-chip-days { font-variant-numeric: tabular-nums; }
/* BOARD-POLISH (2026-07-02) — pipeline aging: quiet ≤7d, amber 8-14d,
   red+🔥 >14d. Stale leads pop without reading every card. */
.recruiting-chip-days.is-aging { color: var(--color-warning); border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
.recruiting-chip-days.is-stale { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-bg); animation: recruiting-stale-pulse 2.4s ease-in-out infinite; }
@keyframes recruiting-stale-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent); }
}
.recruiting-chip.is-ok { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-bg); }
.recruiting-chip.is-missing { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-bg); }
/* Lead-owner chip on kanban cards (2026-06-15) — who the lead belongs to.
   Assigned reads as a solid identity chip; an unassigned lead falls through to
   .is-missing (red) via its higher specificity, flagging it as claimable. */
.recruiting-chip-owner { color: var(--color-text); border-color: var(--color-text-muted); font-weight: var(--weight-semibold); }
/* Approved chip (2026-06-30) — solid green pill on an approved lead card. */
.recruiting-chip-approved {
  color: #fff;
  border-color: var(--color-success);
  background: var(--color-success);
  letter-spacing: 0.02em;
}

/* ── Approved-lead green state (APPROVED-GREEN 2026-06-30) ───────────────────
   A safety-approved lead reads green at-a-glance: a green left accent bar +
   a soft green ring + a faint green wash. Tokened → dark-mode safe. */
.recruiting-card.is-approved {
  border-color: var(--color-success);
  box-shadow: inset 3px 0 0 0 var(--color-success),
              0 0 0 1px color-mix(in srgb, var(--color-success) 35%, transparent);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-success) 9%, transparent) 0%,
      transparent 38%),
    var(--color-surface-2);
}
.recruiting-card.is-approved:hover {
  border-color: var(--color-success);
  box-shadow: inset 3px 0 0 0 var(--color-success),
              0 0 0 1px color-mix(in srgb, var(--color-success) 35%, transparent),
              var(--shadow-md);
}
.recruiting-card.is-approved .recruiting-card-name { color: var(--color-text); }
/* Approved row (list view) — left rail + faint green wash. */
.recruiting-row-clickable.is-approved > .recruiting-td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-success);
}
.recruiting-row-clickable.is-approved > .recruiting-td {
  background: color-mix(in srgb, var(--color-success) 7%, transparent);
}
.recruiting-approved-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: var(--space-2);
  background: var(--color-success);
  vertical-align: middle;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 22%, transparent);
}

/* ── Stage-move popup menu ────────────────────────────────────────────── */
.recruiting-move-menu {
  position: absolute;
  top: 26px;
  right: var(--space-2);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  background: var(--emr-card-bg, var(--color-surface));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.recruiting-move-menu-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.recruiting-move-menu-item:last-child { border-bottom: none; }
.recruiting-move-menu-item:hover { background: var(--color-primary-tint); }
.recruiting-move-menu-item.is-reject { color: var(--color-danger); }
/* APPLICANT-DECISION-ANYSTAGE (2026-07-01): the applicant-level Approve item
   reads green (matches the approved-lead green signal). */
.recruiting-move-menu-item.is-approve {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold, 600);
}
.recruiting-move-menu-item.is-approve:hover { background: var(--color-success-bg); }

/* ── Stage pill (list view + drawer header) ───────────────────────────── */
.recruiting-stage-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  white-space: nowrap;
}
.recruiting-stage-pill[data-stage="applied"]      { color: var(--color-info); border-color: var(--color-info); background: var(--color-info-bg); }
.recruiting-stage-pill[data-stage="screening"]    { color: var(--emr-status-cyan, var(--color-info)); border-color: var(--emr-status-cyan, var(--color-info)); }
.recruiting-stage-pill[data-stage="flight"]       { color: var(--emr-status-purple, var(--color-muted)); border-color: var(--emr-status-purple, var(--color-muted)); }
.recruiting-stage-pill[data-stage="arriving"]     { color: var(--color-warning); border-color: var(--color-warning); }
.recruiting-stage-pill[data-stage="arrived"]      { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-tint); }
.recruiting-stage-pill[data-stage="orientation"]  { color: var(--color-primary); border-color: var(--color-primary); }
.recruiting-stage-pill[data-stage="driving_test"] { color: var(--color-success); border-color: var(--color-success); }
.recruiting-stage-pill[data-stage="hired"]        { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-bg); }
.recruiting-stage-pill[data-stage="rejected"]     { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-bg); }

/* ── Candidate profile drawer (house drawer anatomy, recruiting skin) ── */
.cpd-root {
  position: fixed;
  inset: 0;
  z-index: 9060;
  pointer-events: none;
}
.cpd-backdrop {
  position: absolute;
  inset: 0;
  background: var(--emr-backdrop, rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.cpd-root.is-open .cpd-backdrop { opacity: 1; pointer-events: auto; }
.cpd-panel {
  position: absolute;
  top: 0; right: 0;
  height: 100vh;
  width: min(720px, 92vw);
  background: var(--emr-bg, var(--color-surface));
  color: var(--color-text);
  border-left: 1px solid var(--emr-card-border, var(--color-border));
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.cpd-root.is-open .cpd-panel { transform: none; }
.cpd-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
  background: var(--emr-card-bg, var(--color-surface-2));
  flex: 0 0 auto;
}
/* Approved application (APPROVED-GREEN 2026-06-30) — the drawer header reads
   green: a green top accent rail + a faint green wash + a green inline tag by
   the name. Tokened → dark-mode safe. */
.cpd-header.is-approved {
  border-top: 3px solid var(--color-success);
  border-bottom-color: var(--color-success);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-success) 10%, transparent) 0%,
      transparent 100%),
    var(--emr-card-bg, var(--color-surface-2));
}
.cpd-approved-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: var(--space-2);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-success);
}
.cpd-header-main { flex: 1 1 auto; min-width: 0; }
.cpd-header-kicker {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
}
.cpd-header-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}
.cpd-header-pills { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cpd-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--space-1);
}
.cpd-close:hover { color: var(--color-text); }
.cpd-tabbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
  background: var(--emr-card-bg, var(--color-surface-2));
  overflow-x: auto;
  flex: 0 0 auto;
}
.cpd-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
}
.cpd-tab:hover { color: var(--color-text); }
.cpd-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.cpd-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
}
.cpd-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--emr-divider, var(--color-border));
  background: var(--emr-card-bg, var(--color-surface-2));
  flex: 0 0 auto;
}
.cpd-section-title {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
}
.cpd-section-title:first-child { margin-top: 0; }
.cpd-kv {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 0;
  border-bottom: 1px dotted var(--emr-divider, var(--color-border));
  font-size: var(--text-sm);
}
.cpd-kv-label { color: var(--color-text-muted); }
.cpd-kv-value { text-align: right; }
.cpd-unavailable {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}
.cpd-history-row,
.cpd-activity-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
  font-size: var(--text-sm);
}
.cpd-history-row:last-child,
.cpd-activity-row:last-child { border-bottom: none; }
.cpd-history-when, .cpd-activity-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.cpd-history-move { font-weight: var(--weight-semibold); }
.cpd-history-by { color: var(--color-text-muted); font-size: var(--text-xs); }
.cpd-history-reason, .cpd-activity-reason {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
}
.cpd-activity-type {
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
}
.cpd-activity-detail { color: var(--color-text-muted); }
.cpd-activity-meta { margin-left: auto; }
.cpd-consent-summary { margin-bottom: var(--space-2); }
.cpd-safety-state { display: flex; flex-direction: column; gap: var(--space-1); }
.cpd-coverage { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.cpd-coverage-gaps { font-size: var(--text-xs); color: var(--color-warning); }
.cpd-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cpd-reason-input {
  flex: 1 1 160px;
  background: var(--emr-input-bg, var(--color-surface-2));
  border: 1px solid var(--emr-input-border, var(--color-border));
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
}
.cpd-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.cpd-terminal-note { font-size: var(--text-sm); color: var(--color-text-subtle); }
.cpd-action-notice {
  font-size: var(--text-xs);
  color: var(--color-success);
  word-break: break-all;
}

/* ── SCREENING-APPROVE-REJECT-V1 (2026-06-30) — screening-stage decision row.
 * Sits in the footer above the move-stage row. Token-only (dark-mode safe). */
.cpd-screening-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.cpd-screening-review-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cpd-screening-review-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  font-weight: 600;
}
.cpd-screening-docs { margin-left: auto; }
.cpd-screening-review-actions,
.cpd-screening-reject-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cpd-screening-approve {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}
.cpd-screening-approve:hover:not(:disabled):not([disabled]) { filter: brightness(1.08); }
.cpd-screening-reject {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.cpd-screening-reject:hover:not(:disabled):not([disabled]) { filter: brightness(1.08); }
.cpd-screening-reject-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ── CPD-CLEARANCE-FLOW (2026-06-12) — Required Clearances checklist ──
 * Token-only (no raw hex / opaque white — dark-mode-audit safe). Renders
 * atop the Documents tab; the 4 gating items get an Add/upload affordance,
 * the 2 internal items render as info-only checkmarks. */
.cpd-clearance {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--emr-divider, var(--color-border));
}
.cpd-clearance-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-2);
}
.cpd-clearance-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 5px 0;
  border-bottom: 1px dotted var(--emr-divider, var(--color-border));
  font-size: var(--text-sm);
}
.cpd-clearance-row:last-of-type { border-bottom: none; }
.cpd-clearance-name { display: inline-flex; align-items: center; gap: var(--space-1); }
.cpd-clearance-row.is-cleared .cpd-clearance-name { color: var(--color-success); font-weight: var(--weight-semibold); }
.cpd-clearance-state { font-size: var(--text-xs); color: var(--color-text-muted); }
.cpd-clearance-row.is-cleared .cpd-clearance-state { color: var(--color-success); font-weight: var(--weight-semibold); }
.cpd-clearance-info {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* MVR-DOC-ITEM-V1 (2026-06-30) — a required, uploadable doc item (mvr) reads
 * with an accent "required" tag, distinct from the muted "info only". */
.cpd-clearance-info.cpd-clearance-required {
  color: var(--color-info);
  font-weight: 600;
}
.cpd-clearance-controls { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.cpd-clearance-progress { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.cpd-clearance-progress.is-error { color: var(--color-danger); font-style: normal; }
.cpd-clearance-progress.is-done { color: var(--color-success); font-style: normal; }

/* CLEARANCE-NOTES-V1 (2026-06-12) — free-text recruiter comment on the two
 * info-only items (cdl_scan / no_cheap_loads). The note row takes the full
 * width of the clearance row (it wraps below the name/info-only tag). */
.cpd-clearance-row.is-internal { align-items: flex-start; }
.cpd-clearance-note-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 1 1 100%;
  margin-top: var(--space-1);
}
.cpd-clearance-note-input {
  flex: 1 1 220px;
  min-height: 2.4em;
  resize: vertical;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.cpd-clearance-note-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.cpd-clearance-note-status { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.cpd-clearance-note-status.is-error { color: var(--color-danger); font-style: normal; }
.cpd-clearance-note-status.is-done { color: var(--color-success); font-style: normal; }

/* ── STATUS-PILL OUTLINE PASS (2026-06-11) ────────────────────────────────
 * Operator: status pills keep their exact colors but gain a very thin black
 * outline for readability (companion rule to the block at the end of
 * styles/emr-design-system.css). Covers the badge-form shared status pill
 * (settlements list/detail + the settlements MANIFESTS tab, which renders
 * manifest statuses through the same class). The filter-chip form
 * (.chip.status-pill) is intentionally excluded — those are buttons, not
 * status read-outs. Inset box-shadow ⇒ no size/layout shift. */
.badge.status-pill { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); }

/* ── RECRUITER-ROSTER-V1 (2026-06-12) — "Add Recruiter" modal ──────
 * Class-based (recruiting JS forbids inline style / raw hex — see
 * test-recruiting-design-language-alignment.js). Tokens only. */
.recruiter-roster-modal .rr-title { margin: 0 0 4px; font-size: 16px; }
.recruiter-roster-modal .rr-sub { font-size: 12px; color: var(--emr-text-muted); margin-bottom: 12px; }
.recruiter-roster-modal .rr-search {
  width: 100%; padding: 8px; border: 1px solid var(--emr-border);
  border-radius: 5px; font-size: 13px; margin-bottom: 6px; box-sizing: border-box;
  background: var(--emr-input-bg); color: var(--emr-input-text);
}
.recruiter-roster-modal .rr-results { max-height: 170px; overflow-y: auto; margin-bottom: 14px; }
.recruiter-roster-modal .rr-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--emr-text-muted); margin-bottom: 6px;
}
.recruiter-roster-modal .rr-roster { max-height: 220px; overflow-y: auto; }
.recruiter-roster-modal .rr-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 13px; border-bottom: 1px dotted var(--emr-border);
}
.recruiter-roster-modal .rr-meta { color: var(--emr-text-muted); font-size: 11px; }
.recruiter-roster-modal .rr-spacer { flex: 1; }
.recruiter-roster-modal .rr-btn { font-size: 11px; padding: 3px 10px; }
.recruiter-roster-modal .rr-role-tag { font-size: 10px; color: var(--emr-text-faint); }
.recruiter-roster-modal .rr-empty { color: var(--emr-text-muted); font-style: italic; font-size: 12px; }
.recruiter-roster-modal .rr-error { color: var(--emr-status-red); font-size: 12px; }

/* CONSENT-PROOF-V1 (2026-06-12) — a drawn signature is dark ink with a
 * transparent canvas, so it needs a light backdrop to stay legible in BOTH
 * themes. Intentional white, expressed as a named class (not JS-inline) so it
 * is semantic + not a dark-mode popup-chrome violation. */
.consent-sig-surface { background: #fff; }

/* ═══════════════════════════════════════════════════════════════
 * CAPACITY-BOARD-SSOT-P2 (2026-06-11) — Brokerage Trucks reconciliation
 * overlay. The brokerage Trucks pane renders truck_availability; this
 * strip + per-card badge surface the canonical capacity_board (same
 * data the internal/external boards show) so the brokerage view never
 * presents a truck differently from the capacity board. Token-only
 * colors (no inline white → respects Bug 16b dark-mode audit).
 * ═══════════════════════════════════════════════════════════════ */
.bb-capacity-strip {
  flex-shrink: 0;
  margin: 8px 16px 0;
  padding: 8px 12px;
  border: 1px solid var(--emr-border, var(--border2));
  border-left: 3px solid var(--emr-status-purple, #a855f7);
  border-radius: 6px;
  background: var(--emr-card-bg, var(--bg2));
  font-size: 11px;
  color: var(--emr-text, var(--text2));
}
.bb-capacity-strip-hdr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.bb-capacity-strip-loading,
.bb-capacity-strip-empty,
.bb-capacity-strip-err { font-size: 11px; color: var(--emr-text-muted, var(--text3)); }
.bb-capacity-strip-err { color: var(--emr-status-amber, #f59e0b); }
.bb-capacity-hint { font-weight: 400; color: var(--emr-text-muted, var(--text3)); }
.bb-capacity-counts { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.bb-cap-count {
  font-weight: 700; border-radius: 3px; padding: 1px 7px; font-size: 10px;
}
.bb-cap-count.is-available { background: rgba(34,197,94,.14); color: var(--emr-status-green, #22c55e); }
.bb-cap-count.is-covered   { background: rgba(107,114,128,.16); color: var(--emr-text-muted, #6b7280); }
.bb-cap-count.is-expired   { background: rgba(245,166,35,.14); color: #b45309; }
.bb-capacity-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-cap-chip {
  font-size: 10px; border-radius: 4px; padding: 2px 8px;
  background: var(--emr-bg2, var(--bg3)); border: 1px solid var(--emr-border, var(--border2));
  color: var(--emr-text2, var(--text2)); white-space: nowrap;
}
.bb-cap-badge {
  display: inline-block; margin-left: 8px; font-size: 9px; font-weight: 700;
  border-radius: 3px; padding: 1px 7px; vertical-align: middle; white-space: nowrap;
}
.bb-cap-badge.is-posted   { background: rgba(168,85,247,.14); color: var(--emr-status-purple, #a855f7); border: 1px solid rgba(168,85,247,.3); }
.bb-cap-badge.is-covered  { background: rgba(107,114,128,.16); color: var(--emr-text-muted, #6b7280); border: 1px solid rgba(107,114,128,.3); }
.bb-cap-badge.is-expired  { background: rgba(245,166,35,.14); color: #b45309; border: 1px solid rgba(245,166,35,.3); }
.bb-cap-badge.is-unposted { background: transparent; color: var(--emr-text-faint, var(--text4)); border: 1px dashed var(--emr-border, var(--border2)); }

/* ═══════════════════════════════════════════════════════════════════════
 * SYSTEMWIDE CLICKABLE-HOVER AFFORDANCE (2026-06-16)
 *
 * One consistent "this is clickable" feedback, app-wide, modelled on the
 * manifest row hover (the gold wash + gold left-edge accent bar added in
 * d63ef964). Goal: every genuinely-interactive element confirms itself on
 * hover and shows an accessible gold focus ring on keyboard focus.
 *
 * The affordance ADAPTS to element SHAPE so it always reads as feedback,
 * never decoration:
 *   • rows / list items  → gold WASH + 3px gold left-edge accent ("you are here")
 *   • push controls      → subtle surface lift + gold border tint (no full wash —
 *                          a wash would make a button look like a row)
 *   • cards / tiles      → elevation + gold border
 *   • nav / chips        → gold wash
 *   • everything focusable → 2px gold :focus-visible ring (a11y; never removed)
 *
 * SCOPE IS DELIBERATE. We target real interactivity signals only:
 *   - native / ARIA controls:  button, [role=button], summary
 *   - explicit class contracts: .btn(+variants), .emr-btn, .tile, .chip,
 *     .clickable, .recruiting-row-clickable, .fu-clickable, .emr-nav-item,
 *     [data-tab]
 *   - clickable row markers:    [data-mf-id], [data-mfp-stop-row], and any
 *     [onclick] row / element  ([onclick] is THE reliable clickable signal
 *     in this codebase — ~800 sites)
 * We never blanket *:hover or wash plain text/containers. Large containers
 * that legitimately carry [onclick] (modal backdrops/overlays, full panels)
 * are explicitly excluded below.
 *
 * THEME-SAFE BY CONSTRUCTION: the wash/accent/ring resolve from tokens
 * defined for BOTH html[data-theme="light"] and html[data-theme="dark"]
 * (dark uses a slightly higher wash alpha so the gold reads with equal
 * strength on the near-black #0D0D0D surface). --emr-gold is the same brand
 * gold in both themes, so the accent + ring are theme-invariant.
 *
 * Cascade note: components.css loads BEFORE emr-design-system.css, so these
 * rules intentionally only AUGMENT the .emr-* components (which already own
 * good hovers) — additive box-shadow accent + focus ring at equal-or-lower
 * specificity, never fighting their backgrounds. The generic selectors
 * (button, [onclick], .clickable, [data-tab]) have no .emr-* counterpart,
 * so load order is irrelevant for them.
 * ═════════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="light"] {
  --hover-wash:        rgba(245, 168, 0, 0.16);   /* gold @ 16% — matches manifest row */
  --hover-wash-strong: rgba(245, 168, 0, 0.22);   /* for the press/active state */
  --hover-accent:      var(--emr-gold, var(--color-primary, #F5A800));
  --hover-border:      rgba(245, 168, 0, 0.55);
  --hover-ring:        var(--emr-gold, var(--color-primary, #F5A800));
}
html[data-theme="dark"] {
  /* Bump the wash on near-black so the gold reads with equal strength. */
  --hover-wash:        rgba(245, 168, 0, 0.22);
  --hover-wash-strong: rgba(245, 168, 0, 0.30);
  --hover-accent:      var(--emr-gold, #F5A800);
  --hover-border:      rgba(245, 168, 0, 0.60);
  --hover-ring:        var(--emr-gold, #F5A800);
}

/* ── Shared: keyboard focus ring on EVERY interactive element (a11y) ──────
   :focus-visible only — never shows on mouse click, always on Tab. We do NOT
   touch :focus, so existing custom focus styling is preserved; this just adds
   a consistent visible ring where one is missing. */
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.emr-btn:focus-visible,
.tile:focus-visible,
.chip:focus-visible,
.clickable:focus-visible,
.recruiting-row-clickable:focus-visible,
.fu-clickable:focus-visible,
[data-tab]:focus-visible,
[data-mf-id]:focus-visible,
[data-mfp-stop-row]:focus-visible,
[onclick]:focus-visible {
  outline: 2px solid var(--hover-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ── Tier B — ROW / LIST hover: gold wash + gold left-edge accent ─────────
   The manifest affordance, generalised. Background uses !important because
   many rows carry an inline profit/loss or zebra tint; the inset box-shadow
   accent never has an inline conflict. The existing [data-mf-id] /
   [data-mfp-stop-row] rules above already do this — these add the same to
   the other clickable row contracts so the whole app matches. */
tr[onclick],
li[onclick],
tr[style*="cursor:pointer"],
tr[style*="cursor: pointer"],
[onclick][class*="row"],
.clickable[onclick],
.recruiting-row-clickable,
.fu-clickable {
  transition: background .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
/* Background uses !important to beat per-row inline profit/loss + zebra tints
   (same reason [data-mf-id] above needs it). Selectors, by clickable signal:
     • tr[onclick] / li[onclick]            — inline-handler rows
     • tr[style*="cursor:pointer"]          — DELEGATED-click rows (Settlements
       statement list, driver/vendor/lane/safety rows) that mark themselves
       clickable only via the inline cursor — class-agnostic so it catches all
     • div[onclick][class*="row"]           — the <div>-grid rows (Orders'
       .emr-orders-row, fleet history rows) so they match the <tr> rows
   button[class*="row"] / [role=button] are excluded so a control inside a row
   doesn't get the full-row wash. */
tr[onclick]:hover,
li[onclick]:hover,
tr[style*="cursor:pointer"]:hover,
tr[style*="cursor: pointer"]:hover,
[onclick][class*="row"]:not(button):not([role="button"]):hover,
.recruiting-row-clickable:hover,
.fu-clickable:hover {
  background: var(--hover-wash) !important;
  box-shadow: inset 3px 0 0 0 var(--hover-accent);
}

/* ── Tier A — PUSH CONTROLS: subtle lift, NOT a wash ──────────────────────
   Bare <button>s and [role=button]s that don't carry a styled .btn/.emr-btn
   class get a consistent, gentle hover. The exclusions live inside :where()
   so they add ZERO specificity — the whole selector stays at button:hover
   (0,1,1). That is intentionally LOWER than any class-based hover (e.g.
   .emr-modal-close:hover), so already-styled buttons keep THEIR hover and
   this only fills the gap for genuinely unstyled buttons — augment, never
   fight. We scope off disabled + off the row/card/nav/chip vocabularies. */
button:where(:not(:disabled):not([disabled]):not(.btn):not([class*="emr-btn"]):not(.chip):not(.tile):not(.emr-nav-item):not(.emr-tabbar-item):not([class*="nav"]):not([class*="tab"])):hover,
[role="button"]:where(:not([aria-disabled="true"]):not(.btn):not([class*="emr-btn"]):not(.chip):not(.tile):not(.emr-nav-item)):hover {
  background: var(--hover-wash);
  box-shadow: inset 0 0 0 1px var(--hover-border);
  cursor: pointer;
}
button:where(:not(:disabled):not([disabled]):not(.btn):not([class*="emr-btn"])):active,
[role="button"]:where(:not([aria-disabled="true"])):active { transform: translateY(0.5px); }

/* Reinforce the canonical button classes with a barely-there active nudge,
   without overriding their own :hover surfaces. */
.btn:active:not(:disabled):not([disabled]),
.emr-btn:active:not([disabled]):not(.disabled) { transform: translateY(1px); }

/* ── Tier C — CARDS / TILES: elevation + gold border (no flat wash) ───────
   Card-shaped clickables read better with a lift than a wash. .tile already
   elevates; we add a gold border tint for the consistent gold signal, and
   bring clickable .card / generic onclick cards into the same vocabulary. */
.tile:hover,
.card[onclick]:hover,
[onclick][class*="card"]:not(button):not(tr):not(li):hover {
  box-shadow: var(--shadow-md, 0 4px 6px -2px rgba(17,24,39,.08)), inset 0 0 0 1px var(--hover-border);
  border-color: var(--hover-border);
  cursor: pointer;
}

/* ── Tier D — NAV / TAB / CHIP: gold wash ─────────────────────────────────
   .emr-nav-item already washes (sidebar token); add plain [data-tab] tabs and
   keep chips consistent. Chips get the wash only when NOT active (active chips
   are solid gold already). */
[data-tab]:not(.emr-nav-item):not(.active):hover {
  background: var(--hover-wash);
  cursor: pointer;
}
.chip:not(.active):hover {
  background: var(--hover-wash);
  border-color: var(--hover-border);
}

/* ── Generic clickable fallback: gentle wash + accent ─────────────────────
   Any remaining element wired with [onclick] (spans, anchors, small divs)
   gets the same gold feedback — EXCLUDING things already handled above and
   the large containers that legitimately carry onclick (modal backdrops /
   overlays / full panels) where a hover wash would be wrong. */
[onclick]:where(:not(button):not([role="button"]):not(tr):not(li):not(.btn):not([class*="emr-btn"]):not(.chip):not(.tile):not([class*="card"]):not([class*="row"]):not(.emr-nav-item):not([class*="backdrop"]):not([class*="overlay"]):not([class*="modal"]):not([class*="panel"]):not([class*="drawer"])):hover {
  background: var(--hover-wash);
  box-shadow: inset 2px 0 0 0 var(--hover-accent);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
}

/* ── .clickable utility — explicit opt-in for any element ─────────────────
   A future-proof hook: add class="clickable" to anything to get the wash +
   accent without an onclick attribute (e.g. JS-delegated handlers). */
.clickable {
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.clickable:not(button):not(.btn):not(.tile):not(.chip):hover {
  background: var(--hover-wash);
  box-shadow: inset 3px 0 0 0 var(--hover-accent);
}

/* Honor reduced-motion: drop the transitions/transforms, keep the colors. */
@media (prefers-reduced-motion: reduce) {
  tr[onclick], li[onclick], .clickable, .recruiting-row-clickable, .fu-clickable,
  .btn, .emr-btn, .tile { transition: none; }
  .btn:active, .emr-btn:active, .tile:active,
  button:active, [role="button"]:active { transform: none; }
}

/* ── .emr-accounting-font — typography parity with the orders list view ──────
   ACCOUNTING-FONT-PARITY-V1 (operator 2026-06-30): "settlement / pay-event /
   all accounting pages use the SAME font as the orders list view."

   The orders list (admin-dashboard/js/orders.js + .emr-orders-row in
   dashboard.html) sets NO container font — its body text inherits the page
   sans stack from `html,body{font-family:var(--sans)}` (= Inter), and uses a
   monospace stack ONLY on numeric/ID value cells (Total, RPM, Miles, Order
   ID, Margin). Several settlement surfaces instead pinned a MONOSPACE stack
   at the container/modal level, so their whole surface (labels, chrome,
   buttons) rendered in IBM Plex Mono — visibly different from orders.

   This class re-establishes the orders base font (the sans token) on a
   settlement/accounting container. Numeric VALUE cells inside keep their
   own explicit `font-family:var(--mono)` (parity with orders, which also
   keeps money/IDs monospaced), so applying this only affects the
   previously-mono base text + chrome. `--font-sans` is the canonical
   tokens.css alias of the page `--sans`; both resolve to Inter. */
.emr-accounting-font { font-family: var(--font-sans); }