/* SpaceX presentation for Clair finance. Loaded after legacy page styles.
   Only appearance changes: preserve table sizing, scrolling, hidden states,
   chart geometry, financial values, and all workflow controls. */
body.clair-spacex .rep-book .rb-tab-loading {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 112px; padding: 24px; list-style: none;
  color: #DFDEDE; font-size: 14px;
}
body.clair-spacex :is(.cv3-page, .rep-book, .rb-chrome-host) {
  --cv3-ink: var(--sx-text);
  --cv3-canvas: var(--sx-bg);
  --cv3-card: var(--sx-surface);
  --cv3-line: var(--sx-line);
  --cv3-muted: var(--sx-muted);
  --cv3-faint: var(--sx-muted);
  --cv3-red: var(--sx-text);
  --rb-paper: var(--sx-bg);
  --rb-card: var(--sx-surface);
  --rb-inset: var(--sx-raised);
  --rb-ink: var(--sx-text);
  --rb-muted: var(--sx-muted);
  --rb-faint: var(--sx-muted);
  --rb-deep: var(--sx-text);
  --rb-hairline: var(--sx-line);
  --rb-border: var(--sx-line);
  --rb-track: var(--sx-line);
  --rb-crimson: var(--sx-text);
  --rb-crimson-hover: #d7d7dd;
  --rb-shadow: none;
  color: var(--sx-text);
}

/* A short display heading leaves reporting controls and data in view. */
body.clair-spacex .commission-page-header {
  background: var(--sx-bg);
  border-bottom: 1px solid var(--sx-line);
  padding-top: 26px;
  padding-bottom: 22px;
  row-gap: 16px;
}
body.clair-spacex .commission-page-header :is(h2, .commission-dashboard-title),
body.clair-spacex .rep-book .rb-title {
  font-family: var(--sx-font);
  font-size: clamp(1.6rem, 2.3vw, 2.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase !important;
  color: var(--sx-text);
}
body.clair-spacex :is(.cv3-label, .rb-label, .rb-eyebrow, .rb-side-label,
  .pipeline-stage-title, .invoice-kpi-label, .cv3-roster-title) {
  font-family: var(--sx-font);
  color: var(--sx-muted) !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.clair-spacex :is(.cv3-page, .rep-book) :is(.dashboard-section-heading, .rb-section-title) {
  color: var(--sx-text);
  font-family: var(--sx-font);
  text-transform: uppercase;
  letter-spacing: .055em;
}

/* Flat surfaces, connected by hairlines instead of color blocks. */
body.clair-spacex :is(.cv3-card, .cv3-legend, .cv3-collect, .cv3-books,
  .cv3-note, .cv3-coach, .cv3-invoice-rev, .cv3-month-strip,
  .cv3-roster-card, .cv3-chart-modal-surface, .rb-card, .rb-parent,
  .rb-table-wrap, .rb-coverage, .rb-lob, .pipeline-stage, .invoice-kpi-card,
  .pipeline-strip, .invoice-payment-card, .cv3-month-4up, .cmp-stage) {
  background: var(--sx-surface) !important;
  color: var(--sx-text);
  border-color: var(--sx-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
/* .cv3-month-4up is the panel .cv3-month-strip (already themed above)
   expands -- it kept commission_layout.css's white background while its
   text color inherited the theme's white ink from the .cv3-page rule
   near the top of this file, same white-on-white shape as the .cv3-window
   pill bug documented below. .cmp-stage-label/-actual/-sub/-subline
   already resolve correctly via var(--crs-gray-600/900), which are
   redefined dark-mode-safe at :root -- confirmed via grok review, no
   fix needed there. The two literal (non-var) colors in this family,
   .cmp-stage-projected and .cmp-arrow (an amber accent), do need it:
   they were readable on the light .cmp-stage background and go
   unreadable now that two of its four instances (the Commission-Earned
   button and the quota tile -- the two NOT already covered by the
   .cv3-month-4up a / button.cv3-month-cell rule above) go dark. */
body.clair-spacex :is(.cmp-stage-projected, .cmp-arrow) {
  color: var(--crs-warning) !important;
}
body.clair-spacex .cmp-stage:hover {
  background: var(--sx-raised) !important;
}
body.clair-spacex .cv3-hero-stack > .cv3-card:first-child::before {
  background: var(--sx-text);
}
body.clair-spacex :is(.cv3-chart-modal-controls, .cv3-legend-detail td,
  .cv3-aging a, .cv3-aging .cv3-aging-cell, .cv3-month-4up a,
  .cv3-month-4up button.cv3-month-cell, .cv3-roster-view-toggle,
  .cv3-mobile-header-bar, .cv3-mobile-controls-panel, .cv3-ws-view-toggle,
  .cv3-ws-month-filter, .rb-seg,
  .rb-site.is-on, .rb-inv-row.is-on) {
  background: var(--sx-raised) !important;
  color: var(--sx-text);
  border-color: var(--sx-line) !important;
}
body.clair-spacex .cv3-aging > :nth-child(3) { background: #171717 !important; }
body.clair-spacex .cv3-aging > :nth-child(4) { background: #202020 !important; }
body.clair-spacex .cv3-aging > :nth-child(5) { background: #292929 !important; }
body.clair-spacex .cv3-glossary-list dd { color: var(--sx-muted); }
body.clair-spacex .cv3-chart-modal { background: rgb(0 0 0 / 85%); }

/* commission_layout.css's .cv3-window active pill (TTM/YTD/Range) fills
   its background from --cv3-red and hardcodes white label text. That
   variable is redefined above to the theme's white ink, so the selected
   pill became white-on-white. Give it the same light-pill/dark-label
   selected state used for every other toggle in this file. The unselected
   pill is darkened further down, so the two states are distinguishable by
   fill and not only by label colour. */
body.clair-spacex .cv3-window :is(.btn-primary, .btn-outline-primary.active, a.btn.active) {
  background: var(--sx-text) !important;
  color: var(--sx-bg) !important;
  border-color: var(--sx-text) !important;
}

/* Commission Book navigation retains the current drawer and rail geometry. */
body.clair-spacex :is(.rep-book, .rb-chrome-host) .rb-side {
  background: var(--sx-bg);
  border-color: var(--sx-line);
}
body.clair-spacex :is(.rep-book, .rb-chrome-host) .rb-nav {
  border-radius: 0;
  color: var(--sx-muted);
  font-family: var(--sx-font);
  letter-spacing: .035em;
}
body.clair-spacex :is(.rep-book, .rb-chrome-host) .rb-nav.is-active {
  background: var(--sx-raised);
  color: var(--sx-text);
  box-shadow: inset 2px 0 var(--sx-text);
}
body.clair-spacex :is(.rep-book, .rb-chrome-host) .rb-nav:hover {
  background: var(--sx-raised);
  color: var(--sx-text);
}
body.clair-spacex .rb-ident-mark {
  background: var(--sx-text);
  color: var(--sx-bg);
}

/* Neutral financial ink, tabular figures, readable annotations. */
body.clair-spacex :is(.cv3-num-due, .cv3-num-paid, .cv3-num-range,
  .cv3-num-pct, .cv3-num-plan, .rb-figure, .pipeline-stage-amount,
  .pipeline-stage-payout .cmp-stage-amount, .pipeline-strip-amount,
  .invoice-kpi-value, .invoice-kpi-reward .invoice-kpi-value) {
  color: var(--sx-text) !important;
  font-family: var(--sx-font);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.015em;
}
body.clair-spacex :is(.pipeline-stage-sub, .pipeline-stage-meta,
  .pipeline-stage-disclaimer, .pipeline-strip-note, .pipeline-strip-label,
  .invoice-kpi-sub, .commission-earned-hint, .tl-date, .tl-amt, .tl-sub, .tl-comm) {
  color: var(--sx-muted);
}
body.clair-spacex .tl-label { color: var(--sx-text); }
body.clair-spacex .tl-item:not(:last-child)::before { background: var(--sx-line); }
body.clair-spacex #docNavModal > div {
  background: var(--sx-surface) !important;
  color: var(--sx-text);
  border: 1px solid var(--sx-line);
}

/* Existing button state is still controlled by the application. */
body.clair-spacex :is(.cv3-glossary-trigger, .cv3-chart-expand,
  .cv3-chart-series-toggle, .cv3-chart-open-month, .cv3-chart-modal-head button,
  .cv3-title-help, .cv3-roster-view-btn, .cv3-mobile-controls-toggle,
  .cv3-ws-view-btn, .cv3-ws-month-btn, .cv3-mobile-drawer-head button,
  .cv3-ws-jumpnav-link, .cv3-tab, .cv3-btn, .view-filter-btn,
  .rb-seg button, .rb-seg a, .rb-coverage) {
  background: transparent !important;
  color: var(--sx-text) !important;
  border-color: var(--sx-line) !important;
  box-shadow: none !important;
}
body.clair-spacex :is(.cv3-glossary-trigger, .cv3-chart-expand,
  .cv3-chart-series-toggle, .cv3-chart-open-month, .cv3-mobile-controls-toggle,
  .cv3-ws-jumpnav-link, .cv3-btn, .view-filter-btn) {
  border-radius: 32px !important;
  font-family: var(--sx-font);
  font-weight: 700;
  letter-spacing: .06em;
}
body.clair-spacex :is(.cv3-chart-series-toggle[aria-pressed="true"],
  .cv3-roster-view-btn[aria-pressed="true"], .cv3-tab.is-on,
  .cv3-ws-view-btn[aria-pressed="true"], .cv3-ws-month-btn.is-active,
  .view-filter-btn.active, .rb-seg button.is-on, .rb-seg a.is-on) {
  background: var(--sx-text) !important;
  color: var(--sx-bg) !important;
  border-color: var(--sx-text) !important;
}
body.clair-spacex :is(.cv3-title-help, .cv3-glossary-trigger,
  .cv3-chart-expand, .cv3-chart-series-toggle, .cv3-chart-open-month):hover {
  border-color: var(--sx-text) !important;
}

/* Color-only table overrides: do not change any column widths or display. */
body.clair-spacex :is(.cv3-page, .rep-book) :is(table, th, td) {
  border-color: var(--sx-line) !important;
}
body.clair-spacex :is(.cv3-page, .rep-book) :is(thead th, tfoot th, tfoot td),
body.clair-spacex .monthly-grid :is(thead th, tfoot td, tfoot th),
body.clair-spacex .dt-scroll-head thead th,
body.clair-spacex .dt-scroll-foot tfoot :is(th, td) {
  background: var(--sx-raised) !important;
  color: var(--sx-text) !important;
}
body.clair-spacex :is(.cv3-page, .rep-book) .table-striped tbody tr:nth-of-type(odd) {
  background: var(--sx-surface);
}
body.clair-spacex :is(.cv3-page, .rep-book) .table-hover tbody tr:hover {
  background: #202020;
  color: var(--sx-text);
}
body.clair-spacex .cv3-page tr.table-totals-row :is(th, td) {
  background: var(--sx-raised) !important;
  color: var(--sx-text) !important;
}
body.clair-spacex .cv3-page .form-control {
  background: var(--sx-raised);
  color: var(--sx-text);
  border-color: var(--sx-line);
}
body.clair-spacex .cv3-ws-table .cv3-ws-cust {
  background: var(--sx-surface) !important;
}
body.clair-spacex .cv3-ws-table thead th.cv3-ws-cust {
  background: var(--sx-raised) !important;
}
body.clair-spacex .cv3-ws-table tr.cv3-ws-group td {
  background: var(--sx-bg);
}
body.clair-spacex .cv3-ws-table td.cv3-ws-gap {
  background: #20151a;
  color: #e4aebb;
}
body.clair-spacex .cv3-ws-table td.cv3-ws-neg {
  background: #30240e;
  color: #f7ce79;
}
body.clair-spacex .rep-book .rb-num[style*="color:"] {
  color: var(--sx-text) !important;
}

/* Colored chips communicate state, never decorate a dollar figure. */
body.clair-spacex :is(.cv3-status-badge.is-neutral, .cv3-chip,
  .cv3-chip-bonus, .rb-pill.is-deep, .rb-chip.is-partial,
  .cv3-mobile-active-chip) {
  background: #222 !important;
  color: #e4e4e8 !important;
  border-color: var(--sx-line) !important;
}
body.clair-spacex :is(.cv3-status-badge.is-progress, .rb-chip.is-unpaid,
  .rb-pill.is-amber, .commission-bucket-tag.bucket-credited) {
  background: #30240e !important;
  color: #f7ce79 !important;
  border-color: #775d2c !important;
}
body.clair-spacex :is(.rb-chip.is-paid, .commission-bucket-tag.bucket-paid) {
  background: #102d22 !important;
  color: #8be0b1 !important;
}
body.clair-spacex :is(.rb-chip.is-credit, .rb-pill.is-crimson) {
  background: #341820 !important;
  color: #ffabb8 !important;
}
body.clair-spacex .cv3-chip-shared {
  background: #211d35 !important;
  color: #c9bcff !important;
}
body.clair-spacex .close-danger-zone {
  background: #211115;
  border-color: #7d3949;
  color: #ffabb8;
}
body.clair-spacex .close-danger-zone-head { color: #ffabb8; }

/* The larger title type above collides with commission_layout.css's
   two-column header grid (title column sized "auto" + forced nowrap +
   min-width:max-content): at ~1024-1280px the wider title no longer
   fits column 1, and the grid overflows the viewport instead of
   wrapping. Stack the header here, same remedy commission_layout.css
   already applies at its own 768px breakpoint, just starting earlier.
   Title/name and the Back/Home controls stay, just rearranged. */
@media (max-width: 1300px) and (min-width: 769px) {
  body.clair-spacex .commission-page-header {
    grid-template-columns: 1fr;
  }
  body.clair-spacex .commission-page-header :is(h2, .commission-dashboard-title) {
    white-space: normal !important;
    min-width: 0;
    word-break: normal;
  }
  /* Same phantom-column-2 trap commission_layout.css already documents
     at its own 768px breakpoint: .data-as-of asks for grid-column:2/-1
     unconditionally, which forces an implicit column 2 onto this
     1-column grid instead of stacking. Cancel it the same way. */
  body.clair-spacex .commission-page-header .data-as-of {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }
  /* .cv3-chrome-controls keeps its unconditional grid-row:2 from
     commission_layout.css. With the title left on auto placement, the
     grid's fully-specified items (row 2) get claimed first, then
     auto-placed items fill in DOM order around them -- pushing the
     title (also auto) to row 3, BELOW the filters. Pin every header
     child to an explicit row so the visual order (Back/Home, title,
     filters, timestamp) no longer depends on placement order. */
  body.clair-spacex .commission-page-header :is(.btn-back, .commission-home-btn) {
    grid-row: 1;
  }
  body.clair-spacex .commission-page-header :is(h2, .commission-dashboard-title) {
    grid-row: 2;
  }
  body.clair-spacex .commission-page-header .cv3-chrome-controls {
    grid-column: 1;
    grid-row: 3;
  }
  body.clair-spacex .commission-page-header .data-as-of {
    grid-row: 4;
  }
}
@media (max-width: 768px) {
  body.clair-spacex .commission-page-header {
    padding-top: 18px;
    padding-bottom: 16px;
  }
  body.clair-spacex .commission-page-header :is(h2, .commission-dashboard-title) {
    font-size: clamp(1.35rem, 5.6vw, 1.85rem);
  }
  body.clair-spacex :is(.cv3-mobile-controls-panel, .cv3-mobile-controls-drawer),
  body.clair-spacex .commission-page-header .cv3-chrome-controls {
    background: var(--sx-surface) !important;
    color: var(--sx-text);
  }
}

/* =====================================================================
   Live authenticated contrast repair (audit 2026-09-15) — /commissions/.
   Colour only. No sticky offset, column width, colgroup, scroll or
   DataTables geometry is touched, and no figure, link or control moves.
   ===================================================================== */

/* Pinned first column of the rep grid / commission matrix / monthly grid.
   clair_theme.css freezes these cells with an opaque #ffffff (and #f2f2f2
   striped / #d6d8db state) fill so rows cannot show through during a
   horizontal scroll -- the right mechanic, still painted for the light
   theme, so near-white rep names sat on a white cell (measured 1.13:1).
   The fill becomes the theme's own surface; position/left/z-index/shadow
   and every column width stay exactly as clair_theme.css set them. */
body.clair-spacex .cv3-rg-table :is(thead th:first-child, tbody td:first-child,
  tfoot td:first-child, tfoot th:first-child) {
  background-color: var(--sx-surface) !important;
  color: var(--sx-text);
  box-shadow: 2px 0 4px -2px rgb(0 0 0 / 60%);
}
body.clair-spacex .cv3-rg-table thead th:first-child {
  background-color: var(--sx-raised) !important;
  color: #f0f0fa !important;
}
body.clair-spacex .monthly-grid.table-striped tbody tr:nth-of-type(odd) td:first-child {
  background: #141416 !important;
}
body.clair-spacex .monthly-grid tbody tr.table-active td:first-child,
body.clair-spacex .cv3-page .monthly-grid tbody tr.table-active td:first-child {
  background: #242427 !important;
  color: var(--sx-text) !important;
}
body.clair-spacex :is(.cv3-rg-table, .monthly-grid) tbody tr.table-active :is(td, th) {
  background: #242427 !important;
  color: var(--sx-text) !important;
}
/* Names and drill-through links inside those pinned cells. */
body.clair-spacex :is(.cv3-rg-rep-link, .cv3-rg-rep-link:visited) { color: #f0f0fa; }
body.clair-spacex .cv3-rg-rep-link:hover { color: #fff; }

/* Customer-accounts column: name link, customer number and the
   "show monthly detail" affordance all sat on the same white pinned cell. */
body.clair-spacex :is(.cv3-who-cust, .cv3-who-cust:visited) { color: #f0f0fa; }
body.clair-spacex .cv3-who-no { color: #b5b5bd; }
body.clair-spacex .cv3-who-more { color: #c7c7ce; }
body.clair-spacex .cv3-who-parent { background: #242427; color: #c7c7ce; }

/* Window pills (TTM / YTD / Range). commission_layout.css gives BOTH the
   selected and the unselected pill a white fill, so "which window am I
   looking at" was carried only by label colour (#374151 vs black).
   Selected keeps the light fill with dark ink (set earlier in this file);
   unselected becomes a dark outline pill, so the states are obvious.
   The .active class, hrefs and query strings are untouched. */
body.clair-spacex .cv3-window .btn-outline-secondary,
body.clair-spacex .cv3-window .btn-outline-primary:not(.active),
body.clair-spacex .cv3-window a.btn:not(.active) {
  background: transparent !important;
  color: #f0f0fa !important;
  border-color: #8b8b94 !important;
}
body.clair-spacex .cv3-window .btn-outline-secondary:hover,
body.clair-spacex .cv3-window .btn-outline-primary:not(.active):hover,
body.clair-spacex .cv3-window a.btn:not(.active):hover {
  background: #2b2b31 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.clair-spacex .cv3-window .btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}

/* Invoice drill-down annotations: deductions, rate pills and the
   "earned" hint were all light-theme inks on the dark invoice surface. */
body.clair-spacex .invoice-kpi-sub .deduct { color: #ffaaa9; }
body.clair-spacex .invoice-kpi-sub .deduct .deduct-note { color: #c7c7ce; }
body.clair-spacex .rate-pill-normal { background: rgb(255 255 255 / 12%); color: #dedee4; }
body.clair-spacex .rate-pill-shared { background: #101d2a; color: #a4cefa; }
body.clair-spacex .rate-pill-special { background: #2a1215; color: #ffadae; }
body.clair-spacex .commission-earned-hint { color: #c7c7ce; }
body.clair-spacex .commission-earned-hint i,
body.clair-spacex .commission-earned-fully i { color: #8be0b1; }
body.clair-spacex :is(.line-commission-banner, .line-commission-footer) {
  background: var(--sx-raised);
  border-left-color: var(--sx-text);
  color: var(--sx-text);
}
body.clair-spacex .line-commission-hint { color: #b5b5bd; }
body.clair-spacex :is(.line-foot-deduction, .line-foot-deduction-sub) { color: #c7c7ce; }
body.clair-spacex .line-foot-deduction-orig { color: #b5b5bd; }

/* Phone: the header's help affordances get a hard-coded white pill at
   <=576px, which the theme's pale label then disappeared into. */
@media (max-width: 576px) {
  body.clair-spacex .commission-page-header .data-as-of .cv3-how-to-read,
  body.clair-spacex .commission-page-header .data-as-of .cv3-glossary-trigger {
    background: #1b1b1f;
    color: #f0f0fa;
    border-color: var(--sx-line);
  }
}

/* Monthly Close true-up result (commissions/_trueup_result.html). That
   partial is rendered by BOTH this app and the Django admin changelist,
   which have different stylesheets, so its colours live in style="" --
   light table fills and #444/#555/#666/#777 ink that vanish on black
   (net-paid summary measured 2.03:1). The partial now also carries
   presentation-only classes; those are repainted here, scoped to the app
   theme so the admin rendering is unchanged. !important is required only
   because the element's own style attribute would otherwise win. Every
   amount, sign, reason string and row stays exactly as rendered. */
body.clair-spacex .trueup-res { color: #e3e3ea !important; }
body.clair-spacex .trueup-res-meta { color: #c7c7ce !important; }
body.clair-spacex .trueup-res-summary { color: #e3e3ea !important; }
body.clair-spacex .trueup-res-lensnote { color: #b5b5bd !important; }
body.clair-spacex .trueup-res-ok { color: #8be0b1 !important; }
body.clair-spacex .trueup-res-dry { color: #c7c7ce !important; }
body.clair-spacex .trueup-res-warn { color: #e9c67d !important; }
body.clair-spacex .trueup-res-delta-pos { color: #8be0b1 !important; }
body.clair-spacex .trueup-res-delta-neg { color: #ffaaa9 !important; }
body.clair-spacex .trueup-res-table :is(th, td) {
  border-color: var(--sx-line) !important;
  color: inherit;
}
body.clair-spacex .trueup-res-head { background: #18181b !important; }
body.clair-spacex .trueup-res-head :is(th, td) { color: #f0f0fa !important; }
body.clair-spacex .trueup-res-why { background: #141416 !important; color: #c7c7ce !important; }
body.clair-spacex .trueup-res-why-blocked { background: #241f12 !important; }
body.clair-spacex .trueup-res-more { color: #b5b5bd !important; }
body.clair-spacex .trueup-res-cust { color: #e3e3ea !important; }
body.clair-spacex .trueup-res-reason { color: #b5b5bd !important; }

/* Invoice-detail hint annotations. Their colour is set in style="" on the
   element (amber "credited / paid in another month" warnings, grey footer
   scope notes), which outranks any stylesheet -- so they stayed at the
   light-theme #b45309 / #d97706 / #6b7280 and measured 3.76-3.91 on the
   dark card. The markup now carries a presentation-only class beside the
   untouched inline style; !important is needed purely to out-rank that
   attribute. Amber still means "not applied", grey still means "aside". */
body.clair-spacex :is(.cmm-hint-warn, .cmm-hint-warn-icon) { color: #e9c67d !important; }
body.clair-spacex .cmm-hint-muted { color: #b5b5bd !important; }

/* Phone focused views on the two Sales Opportunities matrices
   (/commissions/opportunities/department/ and .../customer/, every axis:
   by department, by rep, by customer).

   commission_layout.css builds those cards with hardcoded LIGHT fills --
   .cv3-ws-alt-summary #F9FAFB, .cv3-ws-alt-row #fff, .cv3-ws-alt-metric
   #fff -- from before this theme existed, while their text comes from
   --cv3-ink / --cv3-muted, which this file remaps to #fff / #b5b5bd.
   Measured live at 390px: white text on rgb(249,250,251). Two labels went
   the other way and are hardcoded dark (#374151 on .cv3-ws-alt-toggle and
   .cv3-ws-alt-metric-label), so repainting the surfaces alone would have
   left those unreadable instead -- both are set below.

   The full (unfocused) matrix is already dark and is not touched here.
   Neither are the paired semantic cells: .cv3-ws-hit / .cv3-ws-gap /
   .cv3-ws-neg carry their own matched fill AND foreground, so they read
   correctly as-is and keep their meaning. Same breakpoint the focused
   view renders in -- above it these elements are display:none. */
@media (max-width: 768px) {
  body.clair-spacex :is(.cv3-ws-alt-summary,
                        .cv3-ws-alt-row,
                        .cv3-ws-alt-metric) {
    background: var(--sx-surface) !important;
    border-color: var(--sx-line) !important;
  }
  /* Primary text on those cards. */
  body.clair-spacex :is(.cv3-ws-alt-summary > strong,
                        .cv3-ws-alt-summary-value strong,
                        .cv3-ws-alt-entity,
                        .cv3-ws-alt-toggle,
                        .cv3-ws-alt-metric-label) {
    color: var(--sx-text) !important;
  }
  /* Secondary text: labels, keys, group headings, totals, status lines. */
  body.clair-spacex :is(.cv3-ws-alt-parent,
                        .cv3-ws-alt-summary-value,
                        .cv3-ws-alt-entity-key,
                        .cv3-ws-alt-group,
                        .cv3-ws-alt-status,
                        .cv3-ws-alt-empty,
                        .cv3-ws-alt-metric-total,
                        .cv3-ws-alt-detail dt,
                        .cv3-ws-alt-toggle i) {
    color: var(--sx-muted) !important;
  }
  /* A plain cell / dd has no semantic fill of its own, so it inherits the
     card and must be light ink. The .cv3-ws-hit/gap/neg variants below it
     in commission_layout keep their own pair and are deliberately not
     listed here. */
  body.clair-spacex :is(.cv3-ws-alt-cell,
                        .cv3-ws-alt-detail dd):not(.cv3-ws-hit):not(.cv3-ws-gap):not(.cv3-ws-neg) {
    color: var(--sx-text) !important;
  }
  body.clair-spacex :is(.cv3-ws-alt-toggle, .cv3-ws-alt-detail) {
    border-color: var(--sx-line) !important;
  }
  /* Keyboard focus has to be visible against the dark card. */
  body.clair-spacex .cv3-ws-alt-toggle:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
  }
}

/* Projection panels (rep dashboard + team summary, and both modals).
   These surfaces predate the dark theme and still carry their original
   light fills -- #f9fafb panels with #e5e7eb borders. Against them the
   themed axis/muted text (#b5b5bd) is light-on-light and unreadable; the
   browser pass measured the chart wrap at rgb(249,250,251) with DFDEDE
   axis text. Repaint the SURFACES and restate every piece of text that
   was authored for a light background, so nothing is merely inherited
   into the wrong contrast. No figure, formula or label is renamed. */
body.clair-spacex :is(.projection-chart-wrap,
                      .projection-formula,
                      .projection-breakdown) {
  background: var(--sx-surface) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-text);
}
body.clair-spacex .projection-chart-wrap h6 { color: var(--sx-muted) !important; }
body.clair-spacex .projection-formula-row + .projection-formula-row,
body.clair-spacex .projection-formula-divider {
  border-top-color: var(--sx-line) !important;
}
body.clair-spacex .projection-formula-label { color: var(--sx-muted) !important; }
body.clair-spacex .projection-formula-value { color: var(--sx-text) !important; }
/* Kept semantically distinct, as on the light theme: the computed line
   reads as a derived number and the result line as the answer.
   #66AFC9 is the existing approved Paradigm secondary tint (already used
   for the quota-progress pace fill); white is the result's emphasis
   colour. The prior #8ec5ff / #e9c67d were both outside the agreed
   palette. */
body.clair-spacex .projection-formula-computed { color: #66AFC9 !important; }
body.clair-spacex .projection-formula-result {
  border-top-color: var(--sx-text) !important;
}
body.clair-spacex .projection-formula-result .projection-formula-label {
  color: var(--sx-text) !important;
}
body.clair-spacex .projection-formula-result .projection-formula-value {
  color: #fff !important;
}
body.clair-spacex :is(#projectionModal, #teamProjectionModal) .modal-content {
  background: var(--sx-bg);
  color: var(--sx-text);
}
body.clair-spacex :is(#projectionModal, #teamProjectionModal) .text-muted {
  color: var(--sx-muted) !important;
}

/* 2026-09-22: an earlier pass here added fixes for the team page's
   DataTables search/rows-per-page/export controls and a broad
   "sticky first/last column" sweep across .monthly-grid, .admin-wide-table,
   #forecast_table and .cv3-rg-table plus .exec-tile/.exec-board/
   .projection-driver-card. A grok review caught that most of it was
   wrong: those DataTables controls already match spacex-theme.css's
   `input[type=text],input[type=search],select {background:#111
   !important;color:#fff !important}` rule (never found on the first
   pass), and .exec-board/.projection-driver-card use literal DARK text
   (#374151, #1f2937, #6b7280...) that was already readable on their
   original white background -- darkening the card without touching
   those literals would have traded a readable light card for a new
   dark-on-dark one. The sticky-column sweep also collided with several
   already-correct, more specific striped/active-row/header rules
   elsewhere in this file and in spacex-theme.css (e.g. lines 216-222,
   345-370), flattening them. All of that was reverted rather than
   guessed at a third time. .rep-filter-dropdown (the "Find a Rep"
   suggestion list) was the one confirmed-clean case from that sweep --
   literal white container, children already on correctly-remapped
   var() tokens -- kept on its own below. */
body.clair-spacex .rep-filter-dropdown {
  background: var(--sx-surface) !important;
  color: var(--sx-text) !important;
}

/* 2026-09-22: the OTHER checkbox-list filter widget -- .dt-multi-filter /
   .dt-msf-* (built by _buildMultiSelectPicker() in commission_multiselect.js,
   used by team_summary.html's Rep/Manager column filters and by
   _whitespace_matrix.html). Easy to mistake for .rep-filter-dropdown above
   since both are "search box + checkbox list" pickers, but this is a
   separate component with its own literal-white CSS in clair_theme.css
   (~line 2160) that never got a dark-skin remap. Confirmed via a real
   headless-Chrome render: the panel computed to solid white
   (rgb(255,255,255)) while its option text computed to near-white
   (rgb(227,227,234)) -- true white-on-white, not just a bad screenshot.
   The closed trigger button happened to read fine because it also matches
   the generic `.form-control{background:#111 !important;color:#fff
   !important}` remap elsewhere in this file; the popover panel is a plain
   <div>, so that generic rule never reaches it. */
body.clair-spacex .dt-multi-filter-btn {
  background: var(--sx-raised) !important;
  color: var(--sx-text) !important;
  border-color: var(--sx-line) !important;
}
body.clair-spacex .dt-msf-caret {
  color: var(--sx-muted) !important;
}
body.clair-spacex .dt-multi-filter-panel {
  background: var(--sx-surface) !important;
  color: var(--sx-text) !important;
  border-color: var(--sx-line) !important;
  /* clair_theme.css's box-shadow is a black-at-12%-opacity drop shadow,
     invisible against this page's own near-black background -- the panel
     would otherwise have no visible separation from the page behind it. */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
}
body.clair-spacex .dt-msf-search {
  background: var(--sx-raised) !important;
  color: var(--sx-text) !important;
  border-color: var(--sx-line) !important;
}
body.clair-spacex .dt-msf-clear {
  color: var(--sx-muted) !important;
}
body.clair-spacex .dt-msf-list {
  border-top-color: var(--sx-line) !important;
}
body.clair-spacex .dt-msf-option:hover {
  background: var(--sx-raised) !important;
}