/* dashboards.css — Brokerage KPI Dashboards (Phase 2: Manager Goals editor). */

#dash-goals-view { padding: 24px 28px; max-width: var(--arl-container); }

.dash-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
.dash-header h2 { font-family: var(--arl-font-heading); color: var(--arl-text); }
#dash-subtitle { color: var(--arl-text-secondary); font-size: 0.9rem; }

.dash-monthnav { display: flex; align-items: center; gap: 10px; }
.dash-month-label {
  font-family: var(--arl-font-heading); font-size: 1.15rem; min-width: 150px;
  text-align: center; color: var(--arl-primary);
}

.dash-actions { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }

.dash-readonly-note {
  background: var(--arl-warning-light); color: var(--arl-warning);
  border-radius: var(--arl-radius); padding: 8px 12px; margin: 10px 0; font-size: 0.9rem;
}

.dash-loading, .dash-error, .dash-empty {
  padding: 32px; text-align: center; color: var(--arl-text-muted);
}
.dash-error { color: var(--arl-error); }

/* ── sections + grids ── */
.dash-section {
  background: var(--arl-white); border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg); box-shadow: var(--arl-shadow);
  margin: 18px 0; overflow: hidden;
}
.dash-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--arl-border); background: var(--arl-surface-alt);
}
.dash-section-head h3 { font-family: var(--arl-font-heading); font-size: 1.05rem; color: var(--arl-text); }

/* #231: how much of "Explore By" you are looking at. It sits in the section HEAD rather
   than under the table because that table is now a 400px scroller — a note below 200
   rows would be rendered and never read. Secondary weight and colour: it qualifies the
   heading, it is not a second heading. */
.dash-dd-bd-count {
  font-family: var(--arl-font-body); font-size: 0.74rem; font-weight: 400;
  color: var(--arl-text-muted); margin-left: 10px;
}

.dash-grid { width: 100%; border-collapse: collapse; }
.dash-grid th, .dash-grid td {
  padding: 10px 14px; text-align: right; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--arl-border);
}
.dash-grid thead th {
  font-family: var(--arl-font-accent); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--arl-text-secondary); background: var(--arl-surface-light);
}
.dash-grid .dash-col-name { text-align: left; font-weight: 600; }
.dash-grid-narrow { max-width: 520px; }
.dash-derived { color: var(--arl-text-secondary); }

.dash-company-row td {
  background: var(--arl-surface-light); font-weight: 700; border-top: 2px solid var(--arl-border);
}
.dash-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 6px; border-radius: 10px; background: var(--arl-primary-light); color: var(--arl-white);
}
.dash-chip-sum { background: var(--arl-surface); color: var(--arl-text-secondary); }
.dash-chip button {
  border: none; background: transparent; color: inherit; cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0;
}

/* ── goal inputs ── */
.dash-goal-input {
  width: 110px; text-align: right; padding: 6px 8px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--arl-border); border-radius: var(--arl-radius);
  font-family: var(--arl-font-body); font-size: 0.95rem; background: var(--arl-white);
}
.dash-goal-input:focus { outline: none; border-color: var(--arl-primary); box-shadow: 0 0 0 2px rgba(0,96,175,0.15); }
.dash-goal-static { color: var(--arl-text); }
.dash-cell-invalid { border-color: var(--arl-error); background: var(--arl-error-light); }
.dash-cell-error { border-color: var(--arl-error); box-shadow: 0 0 0 2px var(--arl-error-light); }
.dash-cell-saved { border-color: var(--arl-success); box-shadow: 0 0 0 2px var(--arl-success-light); }

.dash-row-flash { animation: dashFlash 1s ease; }
@keyframes dashFlash { 0% { background: var(--arl-warning-light); } 100% { background: transparent; } }

.dash-assumptions-note { color: var(--arl-text-secondary); font-size: 0.85rem; margin: 8px 4px 24px; }

/* ── add-person picker in section head ── */
.dash-add-picker { min-width: 260px; }
.dash-add-picker .up-picker { display: block; }

/* ── modal ── */
.dash-modal-overlay {
  position: fixed; inset: 0; background: rgba(1,10,25,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.dash-modal {
  background: var(--arl-white); border-radius: var(--arl-radius-lg); box-shadow: var(--arl-shadow-lg);
  width: 440px; max-width: calc(100vw - 32px); padding: 22px 24px;
}
.dash-modal h3 { font-family: var(--arl-font-heading); margin-bottom: 6px; }
.dash-modal-sub { color: var(--arl-text-secondary); font-size: 0.88rem; margin-bottom: 14px; }
.dash-modal-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--arl-text-secondary); margin: 12px 0 4px; }
.dash-modal input[type="text"], .dash-modal input[type="month"], .dash-modal input[type="date"] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--arl-border); border-radius: var(--arl-radius);
  font-family: var(--arl-font-body); font-size: 0.95rem;
}
.dash-modal-hint { color: var(--arl-text-muted); font-size: 0.8rem; margin: 4px 0 0; }

/* ── salespeople (quarterly New Business goals + roster) ──
   Amber TEXT needs two colours. The light palette's --arl-warning (#D97706) is 3.2:1 on
   white, too faint for words, so light mode uses #92400E as carrier-procurement.css and
   feedback.css do; the dark board's own #F2A83B is 6.5:1 on its cards. */
.dash-chip-ramp { background: var(--arl-warning-light); color: #92400E; }
.dash-sales-warn { color: #92400E; font-weight: 600; white-space: nowrap; }
body.dash-board-dark .dash-chip-ramp,
body.dash-board-dark .dash-sales-warn { color: var(--arl-warning); }
/* Someone off this quarter's board: dimmed, but still a name to read. The board's
   .dash-row-quiet uses --arl-text-muted, 2.9:1 on white in light mode. */
.dash-sales-off td { color: var(--arl-text-secondary); }
.dash-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dash-ramp-preview { margin-top: 12px; max-height: 220px; overflow-y: auto; font-size: 0.88rem; }
.dash-ramp-preview ul { list-style: none; padding: 0; }
.dash-ramp-preview li { padding: 3px 0; border-bottom: 1px solid var(--arl-border); }
.dash-ramp-skip { color: var(--arl-text-muted); }

/* ── toast ── */
.dash-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--arl-dark); color: var(--arl-white); padding: 10px 18px; border-radius: var(--arl-radius);
  box-shadow: var(--arl-shadow-lg); opacity: 0; transition: opacity .2s, transform .2s; z-index: 1100; pointer-events: none;
}
.dash-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dash-toast-error { background: var(--arl-error); }

/* #348: "Export to Excel" stays on one line. Under 900px the Drill-Down's month row drops below
   the range pills rather than squeezing them into a column; on a phone it wraps itself. */
#dash-dd-export { white-space: nowrap; }
@media (max-width: 900px) {
  #dash-detail-view .dash-header { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .dash-header { flex-direction: column; }
  .dash-monthnav { flex-wrap: wrap; row-gap: 6px; }
  .dash-grid th, .dash-grid td { padding: 8px; }
  .dash-goal-input { width: 84px; }
}

/* ═══════════ Phase 3: Brokerage exec/TV overview + drill-down ═══════════ */

/* Board views share this layout; the DARK palette below is applied by the
   `dash-board-dark` body class — the default on every dashboard route, flipped
   by the user's light/dark toggle (persisted in localStorage). */
#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view { padding: 24px 28px; max-width: var(--arl-container); background: var(--arl-surface-light); }

/* ── Dark board palette (default). Scoped on <body> so it reaches BOTH the
   in-<main> views and the goals modal/toast, which reparent to <body>. `color`
   is explicit because a plain (non-var) colour otherwise inherits the app's
   computed light-mode ink — leaving uncoloured text (table cells) dark-on-dark. */
body.dash-board-dark #dash-overview-view,
body.dash-board-dark #dash-detail-view,
body.dash-board-dark #dash-unattr-view,
body.dash-board-dark #dash-newvalue-view,
body.dash-board-dark #dash-book-view,
body.dash-board-dark #dash-labels-view,
body.dash-board-dark #dash-ops-view,
body.dash-board-dark #dash-goals-view,
body.dash-board-dark .dash-modal-overlay,
body.dash-board-dark .dash-toast,
body.dash-board-dark .qb-scope {
  --arl-white: #103252;
  --arl-surface-light: #0D2A46;
  --arl-surface-alt: #0E2C49;
  --arl-surface: #1A456B;
  --arl-border: #21507A;
  --arl-text: #EAF3FA;
  --arl-text-secondary: #A6C0D6;
  --arl-text-muted: #93AEC6; /* ≥4.5:1 on the #103252 card (was #7793AE = 4.1:1) */
  --arl-primary: #4FA8E0;
  --arl-primary-light: #6FBBEA;
  --arl-primary-dark: #8ECDF2;
  --arl-success: #2FD07A;
  --arl-success-light: rgba(47,208,122,0.20);
  --arl-warning: #F2A83B;
  --arl-warning-light: rgba(242,168,59,0.20);
  --arl-error: #FF5B60;
  --arl-error-light: rgba(255,91,96,0.22);
  --arl-shadow: 0 2px 10px rgba(0,0,0,0.35);
  --arl-shadow-lg: 0 8px 26px rgba(0,0,0,0.5);
}
body.dash-board-dark #dash-overview-view,
body.dash-board-dark #dash-detail-view,
body.dash-board-dark #dash-unattr-view,
body.dash-board-dark #dash-newvalue-view,
body.dash-board-dark #dash-book-view,
body.dash-board-dark #dash-labels-view,
body.dash-board-dark #dash-ops-view,
body.dash-board-dark #dash-goals-view,
body.dash-board-dark #dash-qbrs-view {
  color: var(--arl-text);
  color-scheme: dark; /* native controls (select popup, options, scrollbars) theme dark */
  background:
    radial-gradient(1100px 520px at 72% -8%, rgba(79,168,224,0.12), transparent 62%),
    linear-gradient(180deg, #0C2942 0%, #08213A 55%, #071B31 100%);
}
/* dark surface: outline buttons, headings, form controls */
body.dash-board-dark #dash-overview-view .btn-outline,
body.dash-board-dark #dash-detail-view .btn-outline,
body.dash-board-dark #dash-unattr-view .btn-outline,
body.dash-board-dark #dash-newvalue-view .btn-outline,
body.dash-board-dark #dash-book-view .btn-outline,
body.dash-board-dark #dash-labels-view .btn-outline,
body.dash-board-dark #dash-ops-view .btn-outline,
body.dash-board-dark #dash-goals-view .btn-outline,
body.dash-board-dark #dash-qbrs-view .btn-outline {
  background: transparent; border-color: var(--arl-border); color: var(--arl-text);
}
body.dash-board-dark #dash-overview-view .btn-outline:hover,
body.dash-board-dark #dash-detail-view .btn-outline:hover,
body.dash-board-dark #dash-unattr-view .btn-outline:hover,
body.dash-board-dark #dash-newvalue-view .btn-outline:hover,
body.dash-board-dark #dash-book-view .btn-outline:hover,
body.dash-board-dark #dash-labels-view .btn-outline:hover,
body.dash-board-dark #dash-ops-view .btn-outline:hover,
body.dash-board-dark #dash-goals-view .btn-outline:hover,
body.dash-board-dark #dash-qbrs-view .btn-outline:hover { border-color: var(--arl-primary); color: var(--arl-primary); }
/* The kit's buttons read colours fixed at the page root, which this palette cannot reach,
   so on a dark board and in its pop-ups they take the board's own: the plain and outline
   buttons are its dark surface with light words, and the main button is its blue. Without
   this they turned white there (One FORGE look, step 3). */
body.dash-board-dark :is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view, .dash-modal-overlay, .dash-toast) .btn-secondary { background: var(--arl-surface); color: var(--arl-text); border-color: transparent; box-shadow: none; }
body.dash-board-dark :is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view, .dash-modal-overlay, .dash-toast) .btn-secondary:hover:not(:disabled) { background: var(--arl-border); }
body.dash-board-dark :is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view, .dash-modal-overlay, .dash-toast) .btn-primary { background: var(--arl-primary); color: var(--arl-white); }
body.dash-board-dark :is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view, .dash-modal-overlay, .dash-toast) .btn-primary:hover:not(:disabled) { background: var(--arl-primary-dark); }
body.dash-board-dark :is(.dash-modal-overlay, .dash-toast) .btn-outline { background: transparent; border-color: var(--arl-border); color: var(--arl-text); box-shadow: none; }
body.dash-board-dark :is(.dash-modal-overlay, .dash-toast) .btn-outline:hover:not(:disabled) { border-color: var(--arl-primary); color: var(--arl-primary); }
body.dash-board-dark #dash-overview-view .dash-header h2,
body.dash-board-dark #dash-detail-view .dash-header h2,
body.dash-board-dark #dash-unattr-view .dash-header h2,
body.dash-board-dark #dash-newvalue-view .dash-header h2,
body.dash-board-dark #dash-book-view .dash-header h2,
body.dash-board-dark #dash-labels-view .dash-header h2,
body.dash-board-dark #dash-ops-view .dash-header h2,
body.dash-board-dark #dash-goals-view .dash-header h2 { color: var(--arl-text); }
body.dash-board-dark #dash-goals-view input,
body.dash-board-dark #dash-goals-view select,
body.dash-board-dark .dash-modal input,
body.dash-board-dark .dash-modal select {
  background: var(--arl-white); color: var(--arl-text); border-color: var(--arl-border);
}
body.dash-board-dark .dash-modal { color: var(--arl-text); }
.dash-ov-controls { display: flex; align-items: center; gap: 12px; }
/* Seven range pills since the banner stats added This qtr / This yr (2026-10-19).
   Measured against the real headers (tools/harness/range-nav.html): the Overview's
   controls ran 44px past the content of a 1280-wide screen, and the pill row ~290px
   past a phone's. Both wrap now rather than push the page sideways; at 1536 and wider
   nothing moves. */
.dash-ov-controls { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.dash-rangenav { flex-wrap: wrap; row-gap: 4px; }

.dash-mode-note {
  background: var(--arl-surface-alt); border: 1px solid var(--arl-border);
  color: var(--arl-text-secondary); border-radius: var(--arl-radius);
  padding: 8px 12px; margin: 10px 0; font-size: 0.88rem;
}

/* The ingestion-staleness banner: a mode-note that has to be noticed. Built from
   --arl-warning-* rather than a hex pair, because the board is dark BY DEFAULT
   (body.dash-board-dark redefines the whole palette) and a hardcoded amber reads
   as a light-mode paste on a navy card. Rendered only when the feed is unhealthy,
   so it costs no height on the Overview's one-screen budget the rest of the time. */
.dash-stale-note {
  background: var(--arl-warning-light);
  border-color: var(--arl-warning);
  color: var(--arl-text);
  font-weight: 600;
}

/* ── hero band: Margin+Prebook scoreboard + pacing gauge ── */
.dash-ov-hero { display: grid; grid-template-columns: 1fr 320px; gap: 14px; margin: 14px 0; }
.dash-ov-hero-main, .dash-ov-hero-gauge {
  background: var(--arl-white); border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg); box-shadow: var(--arl-shadow); padding: 22px 26px;
}
.dash-ov-hero-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px;
}
.dash-ov-hero-primary { min-width: 0; }
.dash-ov-hero-value {
  font-family: var(--arl-font-heading); font-size: 3.4rem; line-height: 1.05;
  color: var(--arl-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.dash-ov-hero-sub { font-size: 1rem; color: var(--arl-text-secondary); margin-top: 8px; }
.dash-ov-hero-breakdown {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 0.9rem; color: var(--arl-text-secondary); margin-top: 10px;
}
.dash-ov-bd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.dash-ov-bd-pu { background: var(--arl-primary); }
.dash-ov-bd-pb { background: var(--arl-primary-light); }

/* stats rail — fills the space beside the headline */
.dash-ov-hero-stats { display: flex; gap: 26px; padding-left: 30px; border-left: 1px solid var(--arl-border); }
.dash-ov-hero-stats-empty {
  color: var(--arl-text-muted); font-size: 0.9rem; max-width: 220px;
  padding-left: 30px; border-left: 1px solid var(--arl-border);
}
.dash-ov-hero-stat { min-width: 92px; }
.dash-ov-hero-stat-label {
  font-family: var(--arl-font-accent); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--arl-text-secondary);
}
.dash-ov-hero-stat-value {
  font-family: var(--arl-font-heading); font-size: 1.7rem; margin-top: 3px; font-variant-numeric: tabular-nums;
}
.dash-ov-hero-stat-sub { font-size: 0.76rem; color: var(--arl-text-muted); margin-top: 4px; }

/* text-only RAG colours for values/deltas (not chips) */
.dash-txt-green { color: var(--arl-success); }
.dash-txt-amber { color: var(--arl-warning); }

/* #185 — "break down by" on the Month-over-month pane. Sits above the month table
   rather than in the tab strip: the pane already has tabs, and a second row of them
   reads as a second pane. */
.dash-dd-mom-dim {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 10px; font-size: 0.85rem;
}
.dash-dd-mom-dim label { color: var(--arl-text-secondary); }
.dash-dd-mom-dim select { min-width: 130px; }
.dash-txt-red { color: var(--arl-error); }

.dash-ov-hero-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.dash-ov-gauge-svg { width: 200px; max-width: 100%; margin-top: 6px; }
.dash-ov-gauge-value { font-family: var(--arl-font-heading); font-size: 1.55rem; color: var(--arl-text); font-variant-numeric: tabular-nums; }
.dash-ov-gauge-sub { font-size: 0.85rem; color: var(--arl-text-muted); }
.dash-ov-gauge-empty { color: var(--arl-text-muted); font-size: 0.9rem; padding: 28px 8px; }

.dash-gauge-band { fill: none; stroke-width: 12; }
.dash-gauge-red { stroke: var(--arl-error); opacity: 0.30; }
.dash-gauge-amber { stroke: var(--arl-warning); opacity: 0.36; }
.dash-gauge-green { stroke: var(--arl-success); opacity: 0.42; }
/* on the dark board the low-alpha bands wash out — brighten them */
body.dash-board-dark .dash-gauge-red { opacity: 0.72; }
body.dash-board-dark .dash-gauge-amber { opacity: 0.78; }
body.dash-board-dark .dash-gauge-green { opacity: 0.82; }
.dash-gauge-goal-tick { stroke: var(--arl-text-secondary); stroke-width: 2; }
.dash-gauge-needle { stroke: var(--arl-text); stroke-width: 3; stroke-linecap: round; }
.dash-gauge-hub { fill: var(--arl-text); }

/* ── KPI cards ── */
.dash-ov-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0; }
.dash-ov-card {
  background: var(--arl-white); border: 1px solid var(--arl-border); border-left-width: 3px;
  border-radius: var(--arl-radius-lg); box-shadow: var(--arl-shadow); padding: 15px 18px;
}
/* left-accent by goal attainment; neutral (grey) when the card has no goal */
.dash-ov-card.dash-acc-green { border-left-color: var(--arl-success); }
.dash-ov-card.dash-acc-amber { border-left-color: var(--arl-warning); }
.dash-ov-card.dash-acc-red { border-left-color: var(--arl-error); }
.dash-ov-card-label {
  font-family: var(--arl-font-accent); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--arl-text-secondary);
}
.dash-ov-card-value {
  font-family: var(--arl-font-heading); font-size: 1.85rem; margin-top: 2px;
  color: var(--arl-text); font-variant-numeric: tabular-nums;
}
.dash-ov-card-goal {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 0.84rem; color: var(--arl-text-muted); margin-top: 6px; min-height: 1.4em;
}

/* ── RAG chips ── */
.dash-rag-chip {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle;
}
.dash-rag-green { background: var(--arl-success-light); color: var(--arl-success); }
.dash-rag-amber { background: var(--arl-warning-light); color: var(--arl-warning); }
.dash-rag-red { background: var(--arl-error-light); color: var(--arl-error); }
.dash-rag-training { background: var(--arl-surface); color: var(--arl-text-secondary); font-size: 0.72rem; text-transform: uppercase; }
.dash-plan-none { color: var(--arl-text-muted); }
/* dark board: the small chip text on a translucent pill fails AA at the brand
   accent luminance — brighten the foreground so red/green/amber all clear 4.5:1 */
body.dash-board-dark .dash-rag-green { color: #7DE6AE; background: rgba(47,208,122,0.18); }
body.dash-board-dark .dash-rag-amber { color: #FFC873; background: rgba(242,168,59,0.18); }
body.dash-board-dark .dash-rag-red { color: #FF9DA0; background: rgba(255,91,96,0.20); }

/* ── customer labels (#274, #277) ──
   One chip per label, used by the Drill-Down's Tier column and the Customer Labels page.
   A/B/C follow Derek's mockup (green, amber, grey); the New family is blue (the revival
   dashed); the two revivals that mean "gone quiet" are red, Sales Revival only outlined. */
.dash-tier {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
  padding: 1px 6px; border: 1px solid transparent; border-radius: 6px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle;
}
.dash-tier-a { background: var(--arl-success-light); color: var(--arl-success); }
.dash-tier-b { background: var(--arl-warning-light); color: var(--arl-warning); }
.dash-tier-c { background: var(--arl-surface); color: var(--arl-text-secondary); }
.dash-tier-new { background: var(--arl-primary-light); color: var(--arl-primary); }
.dash-tier-new_revival { background: var(--arl-primary-light); color: var(--arl-primary-dark); border-style: dashed; border-color: var(--arl-primary); }
.dash-tier-bdr_revival { background: var(--arl-error-light); color: var(--arl-error); }
.dash-tier-sales_revival { background: transparent; color: var(--arl-error); border-color: var(--arl-error); }
.dash-tier-none { color: var(--arl-text-muted); }
body.dash-board-dark .dash-tier-a { color: #7DE6AE; background: rgba(47,208,122,0.18); }
body.dash-board-dark .dash-tier-b { color: #FFC873; background: rgba(242,168,59,0.18); }
body.dash-board-dark .dash-tier-c { color: #C9D1DC; background: rgba(255,255,255,0.08); }
body.dash-board-dark .dash-tier-new { color: #A9CBFF; background: rgba(80,140,255,0.18); }
body.dash-board-dark .dash-tier-new_revival { color: #A9CBFF; background: rgba(80,140,255,0.10); border-color: #A9CBFF; }
body.dash-board-dark .dash-tier-bdr_revival { color: #FF9DA0; background: rgba(255,91,96,0.20); }
body.dash-board-dark .dash-tier-sales_revival { color: #FF9DA0; border-color: rgba(255,157,160,0.7); }
.dash-col-tier { width: 1%; text-align: center; white-space: nowrap; }
.dash-tier-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 6px 10px 8px; font-size: 0.78rem; color: var(--arl-text-secondary);
}
.dash-tier-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.dash-tier-legend a { margin-left: auto; }
/* the Customer Labels page */
.dash-lb-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.dash-lb-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--arl-border); background: transparent; color: var(--arl-text); cursor: pointer; font: inherit;
}
.dash-lb-chip[aria-pressed="true"] { border-color: var(--arl-primary); box-shadow: inset 0 0 0 1px var(--arl-primary); }
.dash-lb-count { font-weight: 700; font-variant-numeric: tabular-nums; }
/* "How this is counted" (the kit's details.fk-how, "One FORGE look" step 6), in the board's own
   colours. The kit's are fixed at the page root, which the dark board's palette cannot reach
   (as for the buttons), so these read --arl-*; on a light board they are the kit's own. */
:is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view) details.fk-how {
  margin: 0 12px 12px;
  border-color: var(--arl-border);
  background: var(--arl-white);
  color: var(--arl-text-secondary);
  max-width: 110ch;
}
:is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view) details.fk-how > summary { color: var(--arl-text); }
:is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view) details.fk-how > summary::before { border-color: var(--arl-primary); color: var(--arl-primary); }
:is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view) details.fk-how p { line-height: 1.45; }
:is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view) details.fk-how ul { margin: 0; padding-left: 52px; line-height: 1.45; }
:is(#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view, #dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view, #dash-qbrs-view) details.fk-how .dash-op-pending { margin: 4px 0 0; }
.dash-lb-note { padding: 8px 12px; font-size: 0.82rem; color: var(--arl-warning); }
tr.dash-lb-changed td { background: rgba(80,140,255,0.06); }
.dash-lb-table td.dash-num { white-space: nowrap; }
.dash-lb-was { color: var(--arl-text-muted); font-size: 0.78rem; }

/* ── Operations Dashboard (#203) — dashboards-operations.js ──
   Small text reads --arl-text-secondary, never --arl-text-muted or --arl-warning: on the light
   board those measured 2.6:1 and 3.2:1. Amber marks the "next step" note as a rule beside it. */
.dash-op-coverage { padding: 6px 12px 0; font-size: 0.78rem; color: var(--arl-text-secondary); }
.dash-op-note { padding: 0 12px 10px; font-size: 0.82rem; color: var(--arl-text-secondary); max-width: 110ch; }
.dash-op-note.dash-op-pending { margin: 0 12px 10px; padding: 1px 0 1px 9px; border-left: 3px solid var(--arl-warning); }
.dash-op-muted { color: var(--arl-text-secondary); font-size: 0.8em; }
.dash-op-sub { color: var(--arl-text-secondary); font-size: 0.75rem; font-weight: 400; }
.dash-op-item { white-space: nowrap; }
.dash-grid .dash-op-text { text-align: left; }
.dash-op-h3 { margin: 18px 12px 6px; font-size: 0.95rem; color: var(--arl-text); }
.dash-op-table th.dash-op-sortable { cursor: pointer; user-select: none; }
.dash-op-table th.dash-op-sortable:hover { color: var(--arl-primary); }
.dash-op-table td.dash-num { white-space: nowrap; }
.dash-op-table tr.dash-op-total td { font-weight: 700; border-top: 2px solid var(--arl-border); }
.dash-op-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 0 12px 12px; }
.dash-op-tile { background: var(--arl-white); border: 1px solid var(--arl-border); border-radius: 8px; padding: 10px 12px; }
.dash-op-tile-v { font-size: 1.35rem; font-weight: 700; color: var(--arl-text); font-variant-numeric: tabular-nums; }
.dash-op-tile-l { font-size: 0.78rem; color: var(--arl-text-secondary); }
.dash-op-ocpick { display: inline-flex; align-items: center; gap: 8px; margin: 10px 12px 4px; font-size: 0.85rem; color: var(--arl-text-secondary); }
.dash-op-dates { display: inline-flex; align-items: center; gap: 6px; }
/* The Benchmark tab's uploads. A message's tone is the rule beside it, never its text colour,
   for the contrast reason above. */
.dash-op-bench-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 12px 8px; }
.dash-op-bench-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--arl-text-secondary); }
.dash-op-bench-pick input[type="file"] { max-width: 100%; font-size: 0.82rem; color: var(--arl-text); }
.dash-op-bench-msg { margin: 0 12px 10px; padding: 2px 0 2px 9px; font-size: 0.85rem; color: var(--arl-text); border-left: 3px solid var(--arl-primary); max-width: 110ch; }
.dash-op-bench-msg[data-tone="ok"] { border-left-color: var(--arl-success); }
.dash-op-bench-msg[data-tone="warn"] { border-left-color: var(--arl-warning); }
.dash-op-bench-msg[data-tone="bad"] { border-left-color: var(--arl-error); }
/* Six tabs do not fit a phone: the row scrolls sideways rather than cutting the last one off. */
#dash-ops-view .dash-dd-tabs { overflow-x: auto; }
#dash-ops-view .dash-dd-tab { white-space: nowrap; }
body.dash-board-dark #dash-ops-view select,
body.dash-board-dark #dash-ops-view input[type="date"] {
  background: var(--arl-white); color: var(--arl-text); border: 1px solid var(--arl-border); border-radius: 6px; padding: 3px 6px;
}
/* #313: the board on a TV (the Overview's TV look, `.dash-tv`, plus these). The tabs, the hide
   list, the coverage line, the range controls and every explanation stand down; the TV button
   stays, to leave. The board's name is large, the cycle beside it, the time read at the right.
   A stale read is a rule beside the words, never their colour (the contrast note above). */
#dash-ops-view.dash-op-tv-on .dash-dd-tabs,
#dash-ops-view.dash-op-tv-on #dash-op-hide,
#dash-ops-view.dash-op-tv-on #dash-op-coverage,
#dash-ops-view.dash-op-tv-on .dash-rangenav > :not([data-op-tv]),
#dash-ops-view.dash-op-tv-on #dash-op-body .dash-op-note,
#dash-ops-view.dash-op-tv-on #dash-op-body .fk-how { display: none; }
.dash-op-tv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin: 20px 12px 12px; }
.dash-op-tv-title { margin: 0; font-size: var(--fk-type-3xl); color: var(--arl-text); }
.dash-op-tv-steps { display: inline-flex; gap: 8px; }
.dash-op-tv-step {
  padding: 2px 12px; border: 1px solid var(--arl-border); border-radius: 999px;
  font-size: var(--fk-type-lg); color: var(--arl-text-secondary);
}
.dash-op-tv-step.is-on { background: var(--arl-primary); border-color: var(--arl-primary); color: var(--arl-white); }
.dash-op-tv-read { margin-left: auto; font-size: var(--fk-type-lg); color: var(--arl-text-secondary); }
.dash-op-tv-read.is-stale { padding-left: 9px; border-left: 3px solid var(--arl-warning); }

/* ── daily chart ── */
.dash-ov-chart-section .dash-ov-chart-svg { width: 100%; height: auto; display: block; padding: 10px 12px 4px; }
.dash-ov-chart-empty { padding: 40px; text-align: center; color: var(--arl-text-muted); }
.dash-ov-chart-legend { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--arl-text-secondary); }
.dash-legend-swatch { display: inline-block; width: 18px; height: 3px; margin-left: 10px; }
/* #176 — the daily tab's legend sits INSIDE the pane (the pane owns the heading,
   so there is no section-head to host it like the Overview's). Right-aligned so it
   reads as chart furniture, not a caption. */
.dash-dd-daily-legend { justify-content: flex-end; padding: 2px 8px 6px 0; }
.dash-legend-cur { background: var(--arl-primary); }
.dash-legend-prev { background: repeating-linear-gradient(90deg, var(--arl-text-muted) 0 4px, transparent 4px 8px); }
.dash-legend-goal { background: repeating-linear-gradient(90deg, var(--arl-warning) 0 6px, transparent 6px 10px); }

.dash-chart-grid { stroke: var(--arl-border); stroke-width: 1; }
.dash-chart-ylabel, .dash-chart-xlabel { fill: var(--arl-text-muted); font-size: 11px; font-family: var(--arl-font-body); }
/* fill:none is REQUIRED, not tidiness — #218 made this a <polyline> (the goal steps
   down to zero on non-ship days). <line> ignores fill, so this rule lived without it
   for as long as the goal was a straight line; a polyline without it takes SVG's
   default fill of black and paints the polygon closed under the whole chart. */
.dash-chart-goal { fill: none; stroke: var(--arl-warning); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dash-chart-prev { fill: none; stroke: var(--arl-text-muted); stroke-width: 1.5; stroke-dasharray: 3 4; }
.dash-chart-cur { fill: none; stroke: var(--arl-primary); stroke-width: 2.5; }
.dash-chart-area { fill: url(#dashAreaGrad); }
.dash-chart-dot { fill: var(--arl-primary); }
.dash-chart-dot-live { fill: var(--arl-primary-dark); stroke: var(--arl-white); stroke-width: 2; }

/* ── overview tables ── */
/* ── One viewing area (#137) ─────────────────────────────────────────────
   Derek asked for the whole board on one screen, "like Plecto", whose layout
   puts the team tables in a column BESIDE the tiles rather than under them.
   Four stacked full-width bands (hero, cards, chart, tables) cannot fit
   1920x911.

   The breakpoint is deliberate: below 1500px the right column would squeeze the
   chart and the 4-up cards into something worse than scrolling, so the grid
   collapses to the original single column and the tables go back to sitting
   side by side. Nothing about the narrow layout changes. */
.dash-ov-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 32%);
  gap: 16px; align-items: start;
}
.dash-ov-main-left, .dash-ov-main-right { min-width: 0; }
/* Stacked inside the right column — it is one column wide. */
.dash-ov-main-right .dash-ov-tables { grid-template-columns: 1fr; }
/* First child of each column loses its top margin, or the two columns start at
   different heights. */
.dash-ov-main-left > :first-child, .dash-ov-main-right > :first-child { margin-top: 0; }

/* Everything that makes the board fit one screen is scoped to the WIDE layout, so
   the stacked layout below 1500px is byte-for-byte what it was. */
@media (min-width: 1500px) {
  /* Denser inside the right column, where space is actually scarce. Measured at
     1920x911: the two tables came to 782px on their own — 8 SINGLE-LINE rows at
     69px each, which is padding and line-height, not content, so tightening costs
     no legibility. */
  .dash-ov-main-right .dash-ov-table td { padding: 5px 12px; line-height: 1.35; }
  .dash-ov-main-right .dash-ov-table th { padding: 6px 12px; }
  .dash-ov-main-right .dash-section-head { padding: 9px 14px; }
  .dash-ov-main-right .dash-section-head h3 { font-size: 0.95rem; }
  .dash-ov-main-right .dash-ov-tables .dash-section { margin-bottom: 12px; }

  /* With the tables tightened the LEFT column became the constraint (717px against
     an ~840px budget once the header, month bar and exclude row are taken out).
     These trims are worth ~30px and leave the board a margin rather than landing
     on the exact pixel — a board that fits only until someone's name wraps has not
     really been fixed. */
  .dash-ov-main-left .dash-ov-hero, .dash-ov-main-left .dash-ov-cards { margin: 10px 0; }
  .dash-ov-main-left .dash-ov-card { padding: 12px 18px; }
  .dash-ov-main-left .dash-ov-hero-main, .dash-ov-main-left .dash-ov-hero-gauge { padding: 18px 26px; }

  /* Safety valve. Density alone fits TODAY's 3 BDRs and 5 OCs; it would not fit
     twelve. Capping the column to the viewport means a growing roster scrolls
     INSIDE the column instead of pushing the whole board off screen and undoing
     the "one viewing area" this change exists to deliver. It does not engage at
     the current roster size.
     The 210px is the chrome above the column — app header (56) + the month/TV bar
     + the exclude row + margins. Measured, not guessed: at 150px a stressed roster
     of 14 BDRs and 12 OCs still pushed the page 56px over. Verified at 210px: the
     same stress keeps the page at exactly one screen and scrolls the column. */
  .dash-ov-main-right { max-height: calc(100vh - 210px); overflow-y: auto; }
}

@media (max-width: 1499px) {
  .dash-ov-main { grid-template-columns: 1fr; }
  .dash-ov-main-right .dash-ov-tables { grid-template-columns: 1fr 1fr; }
}

.dash-ov-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.dash-ov-tables .dash-section { margin: 0 0 18px; }

/* ── Rep exclude control (#137) ──────────────────────────────────────────
   Mirrors the drill-down's control and shares its saved selection. Collapsed by
   default: it is a correction most people set once, not a daily dial. */
.dash-ov-exclude-section { margin: 0 0 12px; padding: 0; }
.dash-ov-exclude > summary {
  cursor: pointer; padding: 8px 12px; font-size: 0.82rem;
  font-family: var(--arl-font-accent); color: var(--arl-text-secondary);
}
.dash-ov-exclude-cur { color: var(--arl-text); font-weight: 600; }
.dash-ov-exclude-note {
  font-size: 0.75rem; line-height: 1.45; color: var(--arl-text-muted);
  padding: 0 12px 8px;
}
.dash-ov-exclude-grid {
  display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 12px 12px;
}
.dash-ov-exclude-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; cursor: pointer;
}
.dash-ov-exclude-empty { padding: 0 12px 12px; font-size: 0.8rem; color: var(--arl-text-muted); }
.dash-num { text-align: right; }
.dash-dim { color: var(--arl-text-secondary); }
.dash-ov-table td { font-size: 0.95rem; }
/* Wide tables scroll inside their own container — .dash-section clips with
   overflow:hidden (rounded-corner masking), so the columns can't spill out. */
.dash-table-scroll { overflow-x: auto; }

/* #231, and the bigger half of it: cap "Explore By".
 * Derek asked for that section to be "a little less". Measured at 1920x911 it was
 * 7,811px of a 9,481px document — 82% of the page, sitting directly beneath the
 * six-row table he actually works from. It had no height rule of its own (the shared
 * .dash-table-scroll above sets overflow-x only), so it rendered every group: 171
 * lanes on the view it opens with, 374 on the carrier view.
 * Capped and scrolling in its own right it becomes ~460px, and the page drops to
 * roughly a quarter of its height. */
#dash-dd-breakdown { max-height: 400px; overflow-y: auto; }
.dash-chart-dot-prev { fill: var(--arl-text-muted); }

/* ── drill-down ── */
.dash-dd-controls { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.dash-dd-filter-label { font-size: 0.85rem; font-weight: 600; color: var(--arl-text-secondary); }
.dash-dd-select {
  padding: 7px 10px; border: 1px solid var(--arl-border); border-radius: var(--arl-radius);
  font-family: var(--arl-font-body); font-size: 0.92rem;
  background: var(--arl-white); color: var(--arl-text); min-width: 220px;
}
.dash-dd-tile {
  background: var(--arl-white); border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg); box-shadow: var(--arl-shadow); padding: 14px 18px;
}
.dash-dd-tile-value { font-family: var(--arl-font-heading); font-size: 1.7rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dash-dd-tile-sub { font-size: 0.88rem; color: var(--arl-text-muted); margin-top: 4px; }
.dash-dd-row-hl td { background: rgba(79, 168, 224, 0.15); }
.dash-sortable { cursor: pointer; user-select: none; }
.dash-sortable:hover { color: var(--arl-primary); }
.dash-sort-icon { font-size: 0.7rem; }
.dash-dd-cust-link { color: var(--arl-primary); text-decoration: none; }
.dash-dd-cust-link:hover { text-decoration: underline; }
/* Load # opens the shipment in TAI (external) — a small ↗ signals the new tab. */
.dash-dd-ext-link::after { content: ' \2197'; font-size: 0.72em; opacity: 0.7; }

/* ── Individual BDR (#109): overall book + per-account table + MoM matrix ── */
.dash-dd-bdr-hint { padding: 16px 4px; }
.dash-dd-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 4px; }
.dash-dd-subhead h4 { margin: 0; font-family: var(--arl-font-heading); font-size: 1.05rem; }
.dash-dd-subhead .dash-dd-controls { margin: 0; }
.dash-dd-overall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.dash-dd-acct { cursor: pointer; }
.dash-dd-acct:hover td { background: rgba(79, 168, 224, 0.12); }
/* MoM matrix: sticky account column + sticky month header; compact numeric cells. */
.dash-mom-scroll { max-height: 460px; overflow: auto; }
.dash-mom-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.dash-mom-table th, .dash-mom-table td { white-space: nowrap; }
.dash-mom-mhead { text-align: right; }
.dash-mom-cell { text-align: right; font-variant-numeric: tabular-nums; }
.dash-mom-zero { color: var(--arl-text-muted); }
.dash-mom-name {
  position: sticky; left: 0; z-index: 1; text-align: left;
  background: var(--arl-white); box-shadow: 1px 0 0 var(--arl-border);
}
.dash-mom-table thead th { position: sticky; top: 0; z-index: 2; background: var(--arl-white); }
.dash-mom-table thead .dash-mom-name { z-index: 3; }
/* #124 (Option A) — the per-account trend sparkline. Colors via --arl-* vars so
   the dark board re-themes it; display:block or the inline SVG's baseline gap
   inflates every row. The cell is not sticky — only the name column is. */
.dash-mom-trend, .dash-mom-trend-head { text-align: left; }
.dash-mom-trend svg { display: block; }
.dash-mom-spark polyline { fill: none; stroke: var(--arl-text-muted); stroke-width: 1.5; }
.dash-mom-spark-dot { fill: var(--arl-primary); }

/* ── rep include/exclude filter (#92) ── */
.dash-dd-exclude-section { padding: 12px 18px; }
.dash-dd-exclude > summary { cursor: pointer; user-select: none; font-family: var(--arl-font-heading); font-size: 0.98rem; color: var(--arl-text); }
.dash-dd-exclude > summary:hover { color: var(--arl-primary); }
.dash-dd-exclude-cur { color: var(--arl-text-secondary); font-family: var(--arl-font-body); font-weight: 600; }
.dash-dd-exclude-note { color: var(--arl-text-muted); font-size: 0.82rem; margin: 8px 0 10px; }
.dash-dd-exclude-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.dash-dd-exclude-opt { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--arl-text); }
.dash-dd-exclude-empty { color: var(--arl-text-muted); font-size: 0.85rem; }

/* ── data-health strip ── */
.dash-dd-health-section { padding: 14px 18px; }
.dash-dd-health { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.dash-dd-health-item { display: flex; flex-direction: column; gap: 1px; }
.dash-dd-health-label {
  font-family: var(--arl-font-accent); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--arl-text-secondary);
}
.dash-dd-health-val { font-family: var(--arl-font-heading); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dash-dd-health-gap { margin-left: auto; }

/* ── unattributed customers (feedback #114) ── */
.dash-dd-unattr-sub { color: var(--arl-text-muted); font-size: 0.82rem; margin-left: 10px; font-weight: 400; }
.dash-dd-noprofile {
  font-family: var(--arl-font-accent); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--arl-warning); background: var(--arl-warning-light); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
}
.dash-dd-miss-chip {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  color: var(--arl-warning); background: var(--arl-warning-light); border-radius: 3px; padding: 1px 6px; margin-right: 4px;
}
.dash-dd-unattr-note { color: var(--arl-text-muted); font-size: 0.82rem; margin-top: 10px; max-width: 720px; }

/* ── build-customer action + modal (feedback #116) ── */
.dash-dd-unattr-action { width: 1%; white-space: nowrap; text-align: right; }
/* A TAI placeholder's row offers no action, only what to do instead (2026-10-14). */
.dash-dd-placeholder-note { color: var(--arl-text-muted); font-size: 0.78rem; }
.dash-dd-build-modal { width: min(560px, calc(100vw - 48px)); }
.dash-dd-build-grid { display: grid; gap: 12px; }
.dash-dd-build-grid label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--arl-text-secondary); }
.dash-dd-build-grid input, .dash-dd-build-grid select {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px; font-size: 0.9rem; font-weight: 400;
  border: 1px solid var(--arl-border); border-radius: 4px; background: var(--arl-surface); color: var(--arl-text-primary);
}
.dash-dd-build-grid input[readonly] { background: var(--arl-surface-alt, rgba(127, 127, 127, 0.12)); color: var(--arl-text-muted); }
/* The picker renders its own control; strip the label's block spacing so the two
   inputs above/below line up with it. */
.dash-dd-build-grid .up-picker { margin-top: 4px; font-weight: 400; }
.dash-dd-build-dupe {
  margin-top: 12px; padding: 8px 10px; border-radius: 4px; font-size: 0.82rem;
  color: var(--arl-warning); background: var(--arl-warning-light); border: 1px solid var(--arl-warning);
}
.dash-dd-build-note { color: var(--arl-text-muted); font-size: 0.82rem; margin-top: 12px; }
.dash-dd-build-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── trailing trend bars ── */

/* ── clickable breakdown rows ── */
.dash-dd-drill { cursor: pointer; }
.dash-dd-drill:hover td, .dash-dd-drill:focus-visible td { background: rgba(79, 168, 224, 0.12); }
.dash-dd-drill:focus-visible { outline: 2px solid var(--arl-primary); outline-offset: -2px; }

/* ── loads modal ── */
.dash-dd-loads-modal { width: min(1400px, calc(100vw - 48px)); }
.dash-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-modal-head h3 { font-family: var(--arl-font-heading); }
.dash-modal-x { border: none; background: transparent; color: var(--arl-text-secondary); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.dash-modal-x:hover { color: var(--arl-text); }
.dash-modal-body { max-height: 62vh; overflow: auto; }
.dash-dd-loads-table th.dash-cell-l, .dash-dd-loads-table td.dash-cell-l { text-align: left; }
.dash-dd-loads-table td { font-size: 0.9rem; }
/* Keep short + numeric cells on one line; let the long free-text columns
   (Customer = col 3, Carrier = col 6) wrap so the table doesn't over-widen. */
.dash-dd-loads-table th, .dash-dd-loads-table td { white-space: nowrap; }
.dash-dd-loads-table th:nth-child(3), .dash-dd-loads-table td:nth-child(3),
.dash-dd-loads-table th:nth-child(6), .dash-dd-loads-table td:nth-child(6) { white-space: normal; min-width: 150px; }
.dash-dd-loads-filters th { padding-top: 0; padding-bottom: 8px; }
.dash-dd-loads-filter {
  width: 100%; box-sizing: border-box; padding: 3px 6px; font-size: 0.8rem; font-weight: 400;
  border: 1px solid var(--arl-border); border-radius: var(--arl-radius);
  background: var(--arl-white); color: var(--arl-text); font-family: var(--arl-font-body);
}
.dash-dd-loads-filter:focus { outline: none; border-color: var(--arl-primary); }
/* The loads-modal footer. It now sits ABOVE `.dash-modal-body` (the 62vh scroller)
   rather than as its last child — as a trailing child it rendered ~21,600px below
   the fold on a full 500-row page, so it was correct and unreadable. It holds text
   plus a button now, hence flex. */
.dash-dd-loads-count {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 0.82rem; color: var(--arl-text-muted);
}
/* Pushed left of the button so the caveats read as one sentence with the count. */
.dash-dd-loads-count .dash-dd-loads-export { margin-left: auto; }
.dash-dd-loads-caveat { color: var(--arl-warning, #e0a33c); }

/* ── Full-bleed dark board: the dashboard fills the content area edge-to-edge
   (app.js adds `dashboard-dark` to <main> on the overview/detail routes and
   strips it on every other view). The dark palette itself lives on the views. */
/* NB: do NOT set `margin` here — `main.with-sidebar` sets margin-left to clear the
   fixed sidebar (240px / 60px rail), and a `margin:0` reset would slide the board
   under the sidebar and clip its left edge (worse when the sidebar is expanded). */
main.dashboard-dark {
  max-width: none; padding: 0; background: var(--arl-surface-light);
}
body.dash-board-dark main.dashboard-dark { background: #08213A; }
main.dashboard-dark #dash-overview-view,
main.dashboard-dark #dash-detail-view,
main.dashboard-dark #dash-unattr-view,
main.dashboard-dark #dash-newvalue-view,
main.dashboard-dark #dash-book-view,
main.dashboard-dark #dash-labels-view,
main.dashboard-dark #dash-ops-view {
  max-width: none; border-radius: 0; min-height: calc(100vh - 56px); /* clear the 56px sticky header */
}
main.dashboard-dark #dash-goals-view { margin: 0 auto; }

/* ── The header band on the boards ("One FORGE look", 2026-10-23) ──
   Every board opens under the app's dark header band, like every other page. Here the
   views, not <main>, carry the padding, so each declares the band's pull beside it. */
#dash-overview-view, #dash-detail-view, #dash-unattr-view, #dash-newvalue-view,
#dash-book-view, #dash-labels-view, #dash-ops-view, #dash-goals-view {
  --band-pull-top: 24px;
  --band-pull-x: 28px;
}
#dash-qbrs-view { --band-pull-top: 20px; --band-pull-x: 26px; }
#dash-overview-view.dash-tv, #dash-ops-view.dash-tv { --band-pull-top: 28px; --band-pull-x: 44px; }
/* The band is dark in BOTH board modes: it is the page header, and the light toggle only
   lightens the board below it. So it carries the dark board's palette itself, and its
   range pills, arrows and toggles draw the same either way. */
main .module-band.dash-header,
main .module-band.qb-topbar {
  --arl-white: #103252;
  --arl-surface-light: #0D2A46;
  --arl-surface-alt: #0E2C49;
  --arl-surface: #1A456B;
  --arl-border: #21507A;
  --arl-text: #EAF3FA;
  --arl-text-secondary: #A6C0D6;
  --arl-text-muted: #93AEC6;
  --arl-primary: #4FA8E0;
  --arl-primary-light: #6FBBEA;
  --arl-primary-dark: #8ECDF2;
  color: var(--arl-text);
  color-scheme: dark;
  align-items: flex-end;
  margin-bottom: 16px;
}
/* --fk-white is resolved at :root, so it stays white under the band's own palette. */
main .module-band.dash-header h2,
main .module-band.qb-topbar h2 { color: var(--fk-white); }
main .module-band.dash-header .btn-outline,
main .module-band.qb-topbar .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--fk-white); }
main .module-band.dash-header .btn-outline:hover,
main .module-band.qb-topbar .btn-outline:hover { border-color: var(--fk-white); color: var(--fk-white); }
main .module-band.dash-header .dash-month-label { color: var(--arl-primary-light); }
main .module-band.qb-topbar .qb-desc { color: rgba(255, 255, 255, 0.66); }
/* Below 700px dashboards-qbr.css drops the QBR view's padding to 16px, so its pull follows;
   and a board's header turns into a column (.dash-header, near the top of this file), where
   flex-end would push the title to the right edge. */
@media (max-width: 700px) {
  #dash-qbrs-view { --band-pull-top: 16px; --band-pull-x: 16px; }
  main .module-band.dash-header { align-items: flex-start; }
}

/* ── TV mode: same dark palette (inherited from the view), just fullscreen +
   larger from-the-couch type. rem resolves against :root, so the container
   font bump can't reach descendants — scale the key text explicitly. ── */
#dash-overview-view.dash-tv, #dash-ops-view.dash-tv {
  overflow-y: auto; padding: 28px 44px; max-width: none; border-radius: 0; font-size: 1.06rem;
}
.dash-tv .dash-ov-hero-value { font-size: 4rem; }
.dash-tv .dash-ov-card-value { font-size: 2.3rem; }
.dash-tv .dash-ov-card-label { font-size: 0.86rem; }
.dash-tv .dash-ov-card-goal { font-size: 1rem; }
.dash-tv .dash-ov-table td { font-size: 1.18rem; }
.dash-tv .dash-ov-table thead th { font-size: 0.86rem; }
.dash-tv .dash-rag-chip { font-size: 1rem; }
.dash-tv .dash-section-head h3 { font-size: 1.35rem; }
.dash-tv .dash-ov-chart-legend { font-size: 1rem; }
.dash-tv .dash-ov-gauge-value { font-size: 1.9rem; }

@media (max-width: 1100px) {
  .dash-ov-hero { grid-template-columns: 1fr; }
  .dash-ov-hero-main { grid-template-columns: 1fr; gap: 18px; }
  .dash-ov-hero-stats, .dash-ov-hero-stats-empty {
    border-left: none; border-top: 1px solid var(--arl-border); padding-left: 0; padding-top: 18px;
  }
  .dash-ov-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-ov-tables { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-ov-cards { grid-template-columns: 1fr; }
}

/* ── New Business (Sales) board (#137) ─────────────────────────────── */

/* The window sub-line beside the heading. This table is QUARTERLY while the rest
   of the page is monthly, so it must state its own window — a reader who assumes
   the month picker governs it would read the number as a month's new business. */
.dash-section-sub {
  font-size: 0.72rem; color: var(--arl-text-muted); font-weight: 400;
  text-align: right; line-height: 1.3;
}

/* A rostered salesperson with no qualifying margin this quarter. Dimmed, but
   PRESENT: a rep at zero is information, whereas a missing row reads as a bug. */
.dash-row-quiet td { color: var(--arl-text-muted); }

/* #238 (Kurt): the accounts in their LAST counting quarter.

   Kurt asked for the fall-out date; the question behind it is "which am I about to
   lose credit for", so the edge cases are marked rather than left to be found by
   scanning a column of dates.

   Qualified on the cell AND the table, deliberately: `.dash-row-quiet td` is 0,1,1
   and a bare `.dash-nv-falling` is 0,1,0, so a row that is BOTH quiet and falling
   out — the exact row that most needs the warning — would lose it to the muted
   grey. Both tokens are real in both palettes (light #D97706 / dark #F2A83B); no
   var() fallback, because a fallback never fires when the token exists and would
   just hide which colour is actually being used. */
.dash-ov-table td.dash-nv-falling {
  color: var(--arl-warning); font-weight: 600;
  background: var(--arl-warning-light);
}
/* Customer Closes' three date columns ("Oct 23, 2026") stay on one line; a narrow
   table scrolls sideways in .dash-table-scroll rather than stacking a date in two. */
.dash-ov-table td.dash-nv-date { white-space: nowrap; }
/* Both class names, because `.dash-ov-sales-note` is the same 0,1,0 specificity and
   sits LATER in this file — the single-class version measured as inert in a browser
   (the note rendered in the secondary grey, not amber) while reading as correct. */
.dash-ov-sales-note.dash-nv-falling-note {
  color: var(--arl-warning);
  border-top: 1px solid var(--arl-warning-light);
}
/* #363 (Derek): a close FORGE dated from the customer's first load has no closer yet. The
   cell is a link to the customer's page, where the closer is set, so it reads as a
   warning rather than a name: the board's own amber (light and dark palettes both
   define it), the fall-out mark's colour. Both class names on the note, as above. */
.dash-ov-table a.dash-nv-no-closer,
.dash-ov-table span.dash-nv-no-closer {
  color: var(--arl-warning); font-weight: 600;
  white-space: nowrap; /* "Not / recorded" over two lines read as two words in a narrow column */
}
.dash-ov-table a.dash-nv-no-closer { text-decoration: underline dotted; text-underline-offset: 3px; }
.dash-ov-sales-note.dash-nv-no-closer-note {
  color: var(--arl-warning);
  border-top: 1px solid var(--arl-warning-light);
}

/* #236 (Keith): "Can we create a drill down capability on this page?" — the four
   numbers on a closes row open the loads behind them.

   It has to READ as the number and BEHAVE as a control, so the button chrome is
   stripped and `color: inherit` keeps the quiet-row grey and the totals-row bold,
   which a colour of its own would quietly undo. The dotted underline is the only
   standing hint; hover and focus make it explicit. `font: inherit` matters more than
   it looks — a UA button font is a different family AND size, so without it the four
   drillable figures would not line up with the ones beside them. */
.dash-nv-drill {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px; text-decoration-color: var(--arl-text-muted);
}
.dash-nv-drill:hover { color: var(--arl-primary); text-decoration-color: var(--arl-primary); }
.dash-nv-drill:focus-visible { outline: 2px solid var(--arl-primary); outline-offset: 2px; border-radius: 2px; }

/* What the board deliberately excludes. Not decoration — the rows alone are not
   the quarter's new business, and most of the quarter's margin sits outside them
   (customers closed years ago, or with nobody recorded). Plecto omits this
   silently, which is how a partial number gets read as a whole one. */
.dash-ov-sales-note {
  padding: 8px 18px; font-size: 0.72rem; line-height: 1.45;
  color: var(--arl-text-secondary); background: var(--arl-surface-light);
  border-top: 1px solid var(--arl-border);
}

/* The totals row is a claim about the rows above it, so it reads as a total. */
.dash-ov-table tfoot td {
  font-weight: 600; border-top: 2px solid var(--arl-border);
  background: var(--arl-surface-alt);
}

/* The unattributed-loads note (#204) shares the tfoot with the totals row, so it
   would otherwise inherit the bold and the 2px rule and read as a SECOND total.
   It is a footnote about the total above it, not a number of its own. */
.dash-ov-table tfoot tr.dash-oc-gap td {
  font-weight: 400; border-top: 1px dashed var(--arl-border);
  font-size: 0.92em; padding-top: 4px;
}

/* ══ Drill Down: one screen (#138) ═══════════════════════════════════════════
 *
 * Derek asked for this page to fit one screen instead of scrolling, alongside a
 * nine-column BDR table, a new nine-column Customers table, and expandable month
 * rows. Measured before designing: the page was 3091px against roughly 894px of
 * usable height at 1080p. Deleting the trailing-margin block and demoting the
 * secondary sections recovers most of that; the rest comes from here.
 *
 * The shape: `.dash-dd-screen` is exactly one viewport tall and never scrolls.
 * Inside it the BDR table sits at its natural height (six to eight reps fit whole)
 * and the tabbed pane takes whatever is left. Each pane scrolls its own table, so a
 * month expansion grows inside a container instead of growing the page.
 * `.dash-dd-below` holds everything demoted and is the only part that scrolls.
 *
 * DELIBERATELY UNGATED. The Overview's two-column trims live inside
 * `@media (min-width: 1500px)`, which never fires on a 1080p laptop at 125%
 * scaling — 1536x864 — so copying that gate would ship a "one screen" page that is
 * not one on a very common machine. Keith's call: fit the smaller screen.
 *
 * Heights come off --app-content-top, never a literal 56px: the impersonation
 * banner adds 32px to it, and every hardcoded copy of that number drifts.
 */
.dash-dd-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* --dash-dd-chrome is everything inside the view that is NOT this block:
     24px view padding-top + 38px page title + 8px gap + 24px padding-bottom = 94.
     Measured in a browser, not guessed — the first value here was 148px, which left
     134px of dead space at the bottom of a page whose whole point is to use the screen.
     The 56px app header is NOT in this number; --app-content-top carries it, and grows
     to 88px on its own when the impersonation banner is up. */
  /* 140vh, not 100 (#231). Derek: "extend the customers section to show all of the
     customers moved with this month... only 10 or so are visible and the BDRs don't
     love having the small area."
     At 100vh this block is 759px on his 1920x911, which after the BDR pane leaves the
     customers table a 310px window over 92 rows — SIX visible. Rebalancing the split
     between the panes was tried first and is a zero-sum trade: every customer row it
     gained came out of the BDR table (it shipped, and hid four of six reps). The
     container is the only knob that gives both panes more.
     Measured against the real August ledger, BDR rows / customer rows visible:
         1920x911    100vh  6 / 6      140vh  6 / 18
         1536x864    100vh  6 / 5      140vh  6 / 16
         1366x768    100vh  4 / 3      140vh  6 / 12
     The page is no longer one screen — it is ~2,100px — but it was 10,450px before
     `#dash-dd-breakdown` was capped, so this is still about a fifth of what Derek
     filed against, and the part he works from is at the top.
     ⚠ This is the ONLY way to grow the panes that keeps `.dash-dd-pane-bottom` at
     `flex: 1 1 0`. Giving that pane natural height instead — the obvious version —
     lets whichever TAB is tallest dictate the layout, which detail-layout.client.test.js
     pins against, and which collapsed this pane to 7px once already. */
  height: calc(140vh - var(--app-content-top) - var(--dash-dd-chrome, 96px));
  min-height: 380px;   /* below this, scrolling beats a two-row table */
}
.dash-dd-screen > .dash-section { margin: 0; }

.dash-dd-pane { display: flex; flex-direction: column; min-height: 0; }

/* flex-shrink 0 on the BDR pane, and flex-basis 0 on the pane below it. Both matter,
 * and getting either wrong produces a page that measures as "one screen" while showing
 * nothing useful — which is how the first attempt here measured:
 *
 *   .dash-dd-pane-bdr { flex: 0 1 auto }  .dash-dd-pane-bottom { flex: 1 1 auto }
 *
 * At 1536x864 that collapsed the BDR pane to SEVEN PIXELS — 0 of 6 reps visible — while
 * the document still reported exactly 864px tall. With `basis: auto` the bottom pane
 * claims space for all 80 customer rows, and with `shrink: 1` the BDR pane above it is
 * what gives way. So: the BDR table takes its natural height and never shrinks (capped,
 * scrolling internally past the cap), and the pane below claims no space for its content
 * and absorbs whatever is left.
 */
/* #231. This was briefly 30% and it was WRONG — reverted here, and the mistake is
 * written down because the reasoning that produced it was plausible.
 *
 * The argument was: the two panes split one screen, so the only way to give the
 * bottom one more is to take it from the top. True as far as it goes. What it missed
 * is that 46% was not slack — it was tuned to exactly fit the roster. Measured at
 * Derek's 1920x911 against the real August ledger:
 *
 *     container .dash-dd-screen        759px
 *     this pane's section chrome        77px
 *     roster needs (6 reps @31.5 + 27px head + 34px total row)   249px
 *     granted at 46%   759*0.46 - 77 = 272px   fits, 23px spare
 *     granted at 30%   759*0.30 - 77 = 151px   TWO of six reps visible
 *
 * So 30% bought four customer rows by hiding four of the six BDRs — on the page whose
 * stated purpose (#138) is "the BDR teams' numbers and customers". It shipped, and the
 * commit that shipped it asserted the opposite ("30% still clears the BDR roster").
 * The claim was never measured against a real roster; a thin fixture fits anything.
 *
 * The real fix was not in this rule at all — see `.dash-dd-screen`, which now gets
 * 140vh. Growing the CONTAINER gives both panes more, where rebalancing could only
 * ever move height from one to the other. */
.dash-dd-pane-bdr { flex: 0 0 auto; max-height: 46%; }
.dash-dd-pane-bottom { flex: 1 1 0; min-height: 200px; }
.dash-dd-pane-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Sticky header AND footer inside the pane. `top: 0` is only correct because a
   CONTAINER scrolls here — on a page scroll it would pin invisibly under the 56px
   app header, which is what feedback #123 was. `border-collapse: separate` is
   required: .dash-grid sets `collapse`, and a collapsed header's bottom border is
   painted with the row below it and slides away on scroll, so the border is drawn
   with box-shadow instead. */
.dash-dd-pane-scroll table { border-collapse: separate; border-spacing: 0; }
.dash-dd-pane-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--arl-white);
  box-shadow: inset 0 -1px 0 var(--arl-border);
}
.dash-dd-pane-scroll tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--arl-surface-alt);
  box-shadow: inset 0 1px 0 var(--arl-border);
}

/* Denser than the rest of the app: this is a wall-display table being asked to show
   nine columns and a dozen rows inside a fixed height. 45px/row -> 29px. */
.dash-dd-screen .dash-grid th,
.dash-dd-screen .dash-grid td { padding: 5px 10px; line-height: 1.35; }
.dash-dd-team-table th, .dash-dd-team-table td,
.dash-dd-cust-table th, .dash-dd-cust-table td { white-space: nowrap; }
/* Only the name column may take the slack, and it truncates rather than wrapping —
   a wrapped organization name doubles a row's height and blows the budget. */
.dash-dd-cust-table .dash-col-name {
  max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}

/* ── the bottom pane's tabs: the kit's tabs (.fk-tab in forge-kit.css), in the board's own
   colours. The kit's colours are fixed at the page root, and the dark board's palette
   (which redefines --arl-* inside the board) cannot reach them, so these read --arl-*.
   The line is drawn inside the row (an inset shadow) and the underline sits on it,
   because the operations board's row scrolls sideways and a scroller clips what hangs
   below it. ── */
.dash-dd-tabs {
  display: flex; gap: 22px; flex: 0 0 auto;
  padding: 0 12px; box-shadow: inset 0 -1px 0 var(--arl-border);
}
.dash-dd-tab {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 0 11px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--arl-text-secondary);
  font-family: var(--fk-font-ui); font-size: var(--fk-type-md); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.dash-dd-tab:hover { color: var(--arl-text); }
.dash-dd-tab.is-active { color: var(--arl-text); border-bottom-color: var(--arl-primary); }
.dash-dd-tab:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }

/* ── month-over-month: a row expands into that month's customers (item 6) ── */
.dash-dd-mom-row { cursor: pointer; }
.dash-dd-mom-row:hover { background: var(--arl-surface-alt); }
.dash-dd-mom-row:focus-visible { outline: 2px solid var(--arl-primary); outline-offset: -2px; }
.dash-dd-mom-caret {
  display: inline-block; width: 0.9em; color: var(--arl-text-muted);
  font-size: 0.85em;
}
.dash-dd-mom-row.is-open { font-weight: 600; }
/* A month we hold no records for. Muted and inert — it is not a row you can open, and
   the hover/pointer affordance the rule above gives every other month would promise a
   breakdown that does not exist. The selector is more specific than `.dash-dd-mom-row`
   on both counts so it wins without !important. */
.dash-dd-mom-row.is-uncovered { cursor: default; color: var(--arl-text-muted); }
.dash-dd-mom-row.is-uncovered:hover { background: transparent; }
.dash-dd-mom-flag {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 9px;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--arl-surface-alt); color: var(--arl-text-muted);
  border: 1px solid var(--arl-border);
}
/* Partial keeps the row live (its numbers are real) but says why they are small. */
.dash-dd-mom-row.is-sparse .dash-dd-mom-flag { color: var(--arl-warning, #b45309); }
.dash-dd-mom-partial { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dash-dd-mom-expand > td { padding: 0 0 10px 0; background: var(--arl-surface-alt); }
.dash-dd-mom-sub-head {
  padding: 8px 12px 6px; font-size: 0.78rem; font-weight: 600;
  color: var(--arl-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
/* The nested table must not re-stick its own header inside the pane's scroll — two
   sticky headers at the same offset overlap and both look broken. */
.dash-dd-mom-sub-table thead th { position: static; box-shadow: none; }
.dash-dd-mom-sub-table tfoot td { position: static; box-shadow: none; }

/* A banner stat's link scrolls to Individual BDR (`scrollIntoView({ block: 'start' })`).
   Without a margin its heading and the BDR picker land under the sticky app header, so
   the tiles show with nothing saying whose they are. --app-content-top grows under
   "View as", so one rule covers both. */
#dash-dd-bdr-section { scroll-margin-top: calc(var(--app-content-top, 56px) + 12px); }

/* The team-table row a banner stat's link marks is scrolled into its pane with
   `block: 'nearest'`. The pane's total row is sticky at the bottom, and measured in
   Chrome a row below the fold landed exactly under it — covered — so the bottom margin
   clears that row. The top margin clears the app header when the PAGE has to scroll up
   to the table. */
.dash-dd-pane-scroll .dash-dd-row-hl {
  scroll-margin-top: calc(var(--app-content-top, 56px) + 12px);
  scroll-margin-bottom: 40px;
}

/* ── everything demoted below the one-screen block (item 3) ── */
.dash-dd-below { margin-top: 22px; }
.dash-dd-below::before {
  content: 'Detail and diagnostics';
  display: block; margin: 0 0 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--arl-text-muted);
}

/* A short viewport cannot honour both a fixed screen and readable rows; let the page
   scroll rather than render two rows per table. */
@media (max-height: 700px) {
  .dash-dd-screen { height: auto; }
  .dash-dd-pane-bdr { max-height: none; }
  .dash-dd-pane-scroll { max-height: 320px; }
}

/* ── #144: margin we can no longer confirm ─────────────────────────────────────
   On the margin cell, because margin is generated from the two rates and a rate we
   cannot verify is a margin we cannot verify. Amber, not red: the claim is "we have
   stopped being able to check this", not "this is wrong" — the report going quiet
   does not by itself make the number false. `cursor: help` because the whole
   explanation is in the title, and margin-left keeps it off the digits so the
   right-aligned column still scans as a number column. */
/* #167 — margin is blank because TAI has no rate on one side. Shares the
   unconfirmed mark's shape so the two read as one family of caveat, but stays a
   separate rule: this one means "cannot be calculated", the other means
   "calculated from figures we can no longer confirm". */
.dash-dd-missing-rate {
  margin-left: 5px;
  color: var(--arl-warning);
  cursor: help;
  font-size: 0.85em;
  vertical-align: baseline;
}

.dash-dd-unconfirmed {
  margin-left: 5px;
  color: var(--arl-warning);
  cursor: help;
  font-size: 0.85em;
  /* The glyph carries no meaning on its own; the aria-label does. */
  vertical-align: baseline;
}

/* ── #145: the BDR cell in the loads modal ─────────────────────────────────── */
.dash-dd-bdr-cell { white-space: nowrap; }
.dash-dd-bdr-select {
  font: inherit; font-size: 0.85rem; max-width: 160px;
  padding: 2px 4px; border: 1px solid var(--arl-border);
  border-radius: 4px; background: var(--arl-white); color: var(--arl-text);
}
.dash-dd-bdr-select:disabled { opacity: 0.5; cursor: progress; }
/* "corrected from X", never "covering for X" — the OC control on the Coverage board means
   temporary cover; a BDR change means the load should always have been the other rep's. */
.dash-dd-bdr-note {
  font-size: 0.7rem; color: var(--arl-text-muted); margin-top: 2px;
}
.dash-dd-bdr-locked { cursor: help; opacity: 0.7; font-size: 0.8em; }

/* ══ My Book (#223) ═══════════════════════════════════════════════════════════
   One salesperson's whole book, by account and by month, with a commission figure.
   The grid is up to 30 accounts x 12 months, which is roughly three times the widest
   thing this stylesheet already lays out, so the constraints below are measured
   rather than copied from the drill-down's matrix. */

/* 30 rows, not the 9 that a 460px .dash-mom-scroll cap shows. */
.dash-bk-scroll { max-height: 70vh; overflow: auto; }
.dash-bk-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }

/* Narrower than the drill-down's 340px: at 12 month columns plus a total, the name
   column is the only place the width can come from. Truncates rather than wrapping —
   a wrapped organization name doubles a row's height, and 30 of them leave the totals
   off screen entirely. */
.dash-bk-table .dash-col-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* The totals row pins to the bottom of the scroller. Measured before adding it: the
   mom table has NO tfoot rule at all, so tfoot td computes position:static with a
   TRANSPARENT background, and the total sat 971px below the fold. The opaque
   background is not decoration — without it thirty rows scroll visibly through the
   pinned row. */
.dash-bk-table tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  font-weight: 600; background: var(--arl-surface-alt);
  box-shadow: inset 0 1px 0 var(--arl-border);
}
/* The totals COLUMN pins to the right. z-index is explicit because it computes `auto`
   against the sticky name column and the sticky header, and there is no other
   right-sticky rule in this file to inherit a convention from. */
.dash-bk-table .dash-bk-total-col { position: sticky; right: 0; z-index: 3; background: var(--arl-surface-alt); }
.dash-bk-table thead .dash-bk-total-col,
.dash-bk-table tfoot .dash-bk-total-col { z-index: 4; }
.dash-bk-table thead th { position: sticky; top: 0; z-index: 2; background: var(--arl-surface-alt); }

/* The tier badge. Two rates mean the account crossed an anniversary inside the window,
   so the badge shows both and the row carries the effective rate — a single badge
   would be wrong for some of that account's loads. */
.dash-bk-tier {
  font-size: 0.72rem; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
  background: var(--arl-surface-alt); border: 1px solid var(--arl-border); color: var(--arl-text-muted);
}
.dash-bk-tier.is-split { border-style: dashed; }

/* A row needing a close date. Deliberately a link, not a warning colour: the point is
   that the reader can go and fix it, and #205's lesson is that a flag with nowhere to
   go just makes the page look broken. */
.dash-bk-fix { font-size: 0.72rem; margin-left: 6px; white-space: nowrap; }
/* `--arl-primary` (#4FA8E0 on the dark board), matching .dash-dd-cust-link — NOT
   `--arl-accent`, which is ARL red #E11A22 and would make every fixable row read as an
   error. A `var(--arl-accent, #2f80ed)` fallback hid that: the fallback never applies,
   because the variable is defined. */
.dash-bk-fix a { color: var(--arl-primary); text-decoration: underline; }

/* Commission is reference only, and the page says so in words. This keeps the column
   visually secondary to margin, which is the number FORGE actually owns. */
.dash-bk-table .dash-bk-comm { color: var(--arl-text-muted); }
.dash-bk-note {
  font-size: 0.78rem; color: var(--arl-text-muted); line-height: 1.5;
  margin: 10px 0 0; max-width: 78ch;
}
.dash-bk-note strong { color: var(--arl-text); }