/* SpaceX-inspired sales workspace. Loaded after the legacy theme and page CSS.
   Preserve the existing responsive layouts and status semantics. */
/* Opportunity names share one alignment across open/closed/won/lost lists,
   forecasting and review tables. Do not target oppty-name-cell generally:
   that legacy class also identifies contacts and activity descriptions. */
body.clair-spacex #content .clair-oppty-table .col-name,
body.clair-spacex #content .opportunity-name-column,
body.clair-spacex #content .clair-oppty-table .col-name a,
body.clair-spacex #content .opportunity-name-column a,
body.clair-spacex #content .clair-oppty-name {
    text-align: left !important;
}
body.clair-spacex #content .opportunity-name-column .dt-column-header {
    justify-content: flex-start;
}
body.clair-spacex .main_content .sales-card {
    background: var(--sx-surface); border: 1px solid var(--sx-line);
    border-radius: 4px; box-shadow: none; padding: 24px; margin-bottom: 24px;
}
body.clair-spacex .main_content .sales-card-header {
    background: transparent; color: var(--sx-text); border-bottom: 1px solid var(--sx-line);
    padding-bottom: 16px; margin-bottom: 20px; text-transform: uppercase;
    font-family: var(--sx-font); font-weight: 700; letter-spacing: .08em;
}
body.clair-spacex .main_content .sales-card-header > i:first-child,
body.clair-spacex .main_content .kpi-icon,
body.clair-spacex .main_content .kpi-list li i { color: var(--sx-muted); }
body.clair-spacex .main_content :is(.kpi-card, .smry_stats > div) {
    background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: 4px; box-shadow: none;
}
body.clair-spacex .main_content .kpi-card::before { background: var(--sx-text); height: 1px; }
body.clair-spacex .main_content :is(.kpi-value, .stats_amount) {
    color: var(--sx-text); font-family: var(--sx-font); font-variant-numeric: tabular-nums;
}
body.clair-spacex .main_content :is(.kpi-label, .section-label) {
    color: var(--sx-muted); font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
}
body.clair-spacex .main_content .kpi-list li { border-color: var(--sx-line); }
body.clair-spacex :is(.sales-card-action, .chart-toggle, .mycust-search button,
    .mycust-reset, .clair-oppty-export-link, .clair-oppty-pager-link,
    .clair-oppty-sort-dir, .clair-oppty-open-link, .clair-oppty-per-page-link) {
    background: transparent; color: var(--sx-text); border: 1px solid var(--sx-line);
    border-radius: 32px; box-shadow: none; font-family: var(--sx-font);
}
body.clair-spacex :is(.sales-card-action, .clair-oppty-export-link, .clair-oppty-open-link) {
    padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
}
body.clair-spacex :is(.sales-card-action, .chart-toggle, .mycust-search button,
    .mycust-reset, .clair-oppty-export-link, .clair-oppty-pager-link,
    .clair-oppty-sort-dir, .clair-oppty-open-link, .clair-oppty-per-page-link):hover {
    background: var(--sx-text); border-color: var(--sx-text); color: var(--sx-bg);
}
body.clair-spacex .clair-oppty-per-page-link.is-current {
    background: var(--sx-text); color: var(--sx-bg); border-color: var(--sx-text);
}
body.clair-spacex :is(.clair-oppty-list, .clair-oppty-expand, .clair-oppty-detail,
    .mycust-sites-row > td, .mycust-site-table, .mycust-note, .oppty-readonly-note,
    .forecast-detail-summary) {
    background: var(--sx-surface); border-color: var(--sx-line); color: var(--sx-text); box-shadow: none;
}
body.clair-spacex .clair-oppty-summary { color: var(--sx-text); }
body.clair-spacex .clair-oppty-item { border-color: var(--sx-line); }
body.clair-spacex .clair-oppty-name { color: var(--sx-text) !important; }
body.clair-spacex :is(.clair-oppty-meta, .clair-oppty-detail dt,
    .clair-oppty-sort-label, .clair-oppty-page-note, .clair-oppty-pager-status,
    .mycust-codes, .mycust-note-small, .mycust-site-addr, .mycust-site-note) { color: var(--sx-muted); }
body.clair-spacex :is(.clair-oppty-search, .clair-oppty-sort-field,
    .mycust-search input[type="search"], .mycust-switch select, .search-input) {
    background: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-line);
    border-radius: 4px; min-height: 44px; box-shadow: none;
}
body.clair-spacex :is(.clair-oppty-search-go, .mycust-sort-btn, .mycust-expand) { color: var(--sx-text); }
body.clair-spacex .mycust-fam td { background: var(--sx-raised); }
body.clair-spacex .mycust-warn { color: #e8c18c; }
body.clair-spacex .mycust-site-table thead th { background: var(--sx-raised) !important; color: var(--sx-muted) !important; }
body.clair-spacex .mycust-site-table td { border-color: var(--sx-line); }
body.clair-spacex :is(.mycust-chip, .mycust-tag) { border: 1px solid var(--sx-line); border-radius: 32px; }
body.clair-spacex .mycust-chip { background: transparent; color: var(--sx-muted); }
body.clair-spacex :is(.mycust-tag--card, .mycust-chip.is-on.mycust-chip--card) { background: #101d2a; color: #a4cefa; border-color: #35506d; }
body.clair-spacex :is(.mycust-tag--inv, .mycust-chip.is-on.mycust-chip--inv) { background: #102219; color: #99dcad; border-color: #365e43; }
body.clair-spacex :is(.mycust-tag--rule, .mycust-chip.is-on.mycust-chip--rule) { background: #281e10; color: #e8c18c; border-color: #70512a; }
body.clair-spacex .clair-oppty-chip--won { background: #102219; color: #99dcad; border-color: #365e43; }
body.clair-spacex .clair-oppty-chip--lost { background: #2a1215; color: #ffadae; border-color: #71333a; }
body.clair-spacex .clair-oppty-chip--closed { background: #202023; color: #c0c0c7; border-color: #54545b; }
body.clair-spacex .clair-oppty-chip--open { background: #101d2a; color: #a4cefa; border-color: #35506d; }
body.clair-spacex .clair-oppty-chip--waiting { background: #DFDEDE; color: #000000; border-color: #DFDEDE; }
body.clair-spacex .clair-oppty-chip--commit { background: #281e10; color: #e8c18c; border-color: #70512a; }

/* Forecast: keep sticky column and total column surfaces opaque during scroll. */
body.clair-spacex #forecast_table :is(th, td):first-child,
body.clair-spacex #forecast_table :is(th, td):last-child { background: var(--sx-surface) !important; color: var(--sx-text); border-color: var(--sx-line); }
body.clair-spacex #forecast_table thead th,
body.clair-spacex #forecast_table tr.table-active > :is(th, td),
body.clair-spacex #forecast_table tfoot > tr > :is(th, td) { background: var(--sx-raised) !important; color: var(--sx-text) !important; }
body.clair-spacex .forecast-toolbar { border-block: 1px solid var(--sx-line); padding: 20px 0 !important; margin-block: 24px; }
body.clair-spacex .forecast-detail-summary-amount { font-family: var(--sx-font); color: var(--sx-text); }

/* Proposals: the same numerical hierarchy, on a dark bid sheet. */
body.clair-spacex .pq {
    --pq-ink: var(--sx-text); --pq-paper: var(--sx-surface); --pq-shell: var(--sx-raised);
    --pq-line: var(--sx-line); --pq-line-firm: #69696f; --pq-muted: var(--sx-muted);
    --pq-red: var(--sx-text); --pq-on: #99dcad; --pq-over: #e8c18c; --pq-under: #ffadae;
    --pq-mono: var(--sx-font);
}
body.clair-spacex .pq-project { font-family: var(--sx-font); font-size: clamp(28px, 4vw, 48px) !important; line-height: 1.08; text-transform: uppercase; letter-spacing: .02em; }
body.clair-spacex :is(.pq-section-title, .pq-headline-label, .pq-eyebrow, .pq-actions-label) { text-transform: uppercase; letter-spacing: .08em; }
body.clair-spacex .pq-headline-total { font-family: var(--sx-font); font-variant-numeric: tabular-nums; }
body.clair-spacex .pq-stop.is-current { background: var(--sx-raised); border-top-color: var(--sx-text); }
body.clair-spacex .pq-note { background: var(--sx-raised); color: var(--sx-text); }
body.clair-spacex .pq-note--ok,
body.clair-spacex .pq-grid tbody tr.is-saved td { background: #102219; }
body.clair-spacex .pq-btn { border-radius: 32px; min-height: 44px; padding: 10px 18px; text-transform: uppercase; font-size: 12px; letter-spacing: .07em; }
body.clair-spacex .pq-btn--primary { background: transparent; color: var(--sx-text); border-color: var(--sx-text); }
body.clair-spacex .pq-btn--primary:hover { background: var(--sx-text); color: var(--sx-bg); }
body.clair-spacex .pq-btn--danger { color: #ffadae; border-color: #71333a; background: #2a1215; }
body.clair-spacex .pq-btn--danger:hover { color: #fff; border-color: #ffadae; background: #4a1c21; }
body.clair-spacex :is(.pq-cell--bad, .pq-why .pq-cell[data-needs-reason], .pq-row-error td) { background: #2a1215; color: #ffadae; border-color: #71333a; }
body.clair-spacex :is(.pq-cell, .pq-note-input, .pq-inline-form select) { color: var(--sx-text); background-color: var(--sx-surface); border-color: var(--sx-line); border-radius: 4px; }
body.clair-spacex .pq-cell:focus { background: var(--sx-raised); border-color: var(--sx-text); }

/* clair_theme.css's .sidebar/.sidebar_link rules paint from --crs-charcoal
   and --crs-white, both inverted above (charcoal -> white, white -> near-
   black) for the new monochrome palette elsewhere in the app. Those two
   sidebar rules were written assuming the old meanings (charcoal = a dark
   fill, white = light text on it), so the sidebar stayed a bright white
   panel with near-invisible dark-on-dark text. Give it the same dark
   surface and light text as the rest of the workspace; every link/action
   and the reassignment/FAQ dropdown keep their existing destinations. */
body.clair-spacex .sidebar {
    background-color: var(--sx-bg) !important;
    color: var(--sx-text);
}
body.clair-spacex .sidebar #teamscore {
    color: var(--sx-text);
}
body.clair-spacex a.sidebar_link {
    color: var(--sx-text) !important;
}
body.clair-spacex a.sidebar_link:hover {
    background-color: #222225 !important;
    border-left-color: var(--sx-text);
    color: var(--sx-text) !important;
}
body.clair-spacex a.sidebar_link:active {
    background-color: #303038 !important;
}
/* Same --crs-white inversion trap, on .sidebar-toggle (the mobile drawer
   button): clair_theme.css paints its resting state from
   var(--crs-charcoal)/var(--crs-white), inverted above to white/near-
   black, so the button rendered as a white bar with near-invisible dark
   text. Explicit Paradigm blue instead of the broken variables; hover,
   active and the expanded (aria-expanded="true", set by base.html's own
   click handler) states step up to the brighter #007AA5 so a tap gives
   visible feedback. Icon and chevron go white for guaranteed contrast
   against either fill. */
body.clair-spacex .sidebar-toggle {
    background: #003b49;
    color: #fff;
}
body.clair-spacex .sidebar-toggle:hover,
body.clair-spacex .sidebar-toggle:active,
body.clair-spacex .sidebar-toggle[aria-expanded="true"] {
    background: #007AA5;
    color: #fff;
}
body.clair-spacex .sidebar-toggle-icon {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.15);
}
body.clair-spacex .sidebar-toggle-chevron {
    color: #fff;
}
/* Same --crs-white inversion trap as the sidebar itself: these two
   still-!important legacy rules paint their label text from
   var(--crs-white), now near-black, onto a near-black fill -- the
   Company/Sales Rep pickers and the FAQ pencil icon all went dark-on-
   dark. Text color only; the pickers' translucent fill/border and the
   pencil's hover-to-red stay as designed. */
body.clair-spacex .sidebar .btn-group > .dropdown-toggle,
body.clair-spacex .sidebar .btn-group > .dropdown-toggle:hover,
body.clair-spacex .sidebar .btn-group > .dropdown-toggle:focus,
body.clair-spacex .sidebar .btn-group > .dropdown-toggle[aria-expanded="true"] {
    color: var(--sx-text) !important;
}
body.clair-spacex .faq-edit-button {
    color: var(--sx-text) !important;
}

/* Auth and legacy crispy forms retain their original fields and help text. */
body.clair-spacex :is(.image-codered-login, .image-codered-logout, .auth-hero) {
    background: var(--sx-bg) !important; color: var(--sx-text); box-shadow: none;
}
body.clair-spacex #login_form {
    background: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-line) !important;
    border-radius: 4px; box-shadow: none; padding: clamp(24px, 5vw, 48px);
}
body.clair-spacex #login_form :is(h1, h2) { color: var(--sx-text); font-family: var(--sx-font); text-transform: uppercase; font-size: clamp(32px, 5vw, 48px); line-height: 1.08; letter-spacing: .03em; }
body.clair-spacex #login_form :is(label, .auth-footer-link) { color: var(--sx-text); }
body.clair-spacex #login_form :is(.help-block, .form-text, small, #hint_id_new_password1, #hint_id_new_password2) { color: var(--sx-muted) !important; }
body.clair-spacex #login_form .form-control { background: var(--sx-bg); border-color: var(--sx-line); color: var(--sx-text); }
body.clair-spacex #login_form .login_btn { background: transparent !important; border: 1px solid var(--sx-text) !important; color: var(--sx-text) !important; border-radius: 32px !important; min-height: 50px; letter-spacing: .09em; text-transform: uppercase !important; box-shadow: none; }
body.clair-spacex #login_form .login_btn:hover { color: var(--sx-bg) !important; background: var(--sx-text) !important; }
body.clair-spacex :is(.form-sticky-actions, .form-end-actions, .edit-oppty-submit-wrap) { background-color: var(--sx-bg); border-color: var(--sx-line); box-shadow: none; }
body.clair-spacex :is(.clair-oppty-search, .clair-oppty-sort-field, .mycust-chip, .pq-cell, .pq-btn):focus-visible { outline: 2px solid var(--sx-text); outline-offset: 3px; }
@media (max-width: 767px) {
    body.clair-spacex .main_content .sales-card { padding: 16px; margin-bottom: 16px; }
    body.clair-spacex .main_content .sales-card-header { gap: 10px; font-size: 14px; }
    body.clair-spacex .sales-card-action { padding: 10px 14px; }
    body.clair-spacex .clair-oppty-summary { padding-block: 18px; }
    body.clair-spacex .pq-project { font-size: 28px !important; }
}

/* =====================================================================
   Live authenticated contrast repair (audit 2026-09-15) — /sales/.
   ===================================================================== */

/* "Deals closing soon" rail. clair_theme.css draws its heading and links
   with var(--crs-white), which the inversion redefined from #fff to the
   near-black surface #0a0a0a -- so the text became the same colour as the
   panel it sits on (measured 1:1). The link rule is !important there. */
body.clair-spacex .deals-closing-header { color: var(--sx-text); }
body.clair-spacex .deals-closing-header i { color: var(--sx-muted); }
body.clair-spacex .deals-closing-list a { color: #f0f0fa !important; }
body.clair-spacex .deals-closing-list a:hover { background: #222225; }
body.clair-spacex .deals-closing-name { color: var(--sx-text); }
body.clair-spacex .deals-closing-date { color: #b5b5bd; }

/* Sidebar "Download Report" menu. #66AFC9 is the existing approved
   Paradigm secondary tint (see spacex-commissions.css), used here as a
   subdued hover/focus accent so this menu reads as its own action
   distinct from the red-accented Company/Sales Rep scope pickers right
   above it. Specificity is bumped one class (.sidebar ...) above the
   generic body.clair-spacex .dropdown-item:hover rule in spacex-theme.css
   so this wins on its own merits rather than on file load order. */
body.clair-spacex .sidebar .sidebar-reports-item:hover,
body.clair-spacex .sidebar .sidebar-reports-item:focus {
    background: rgba(102, 175, 201, 0.16) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #66AFC9;
}
body.clair-spacex .sidebar-reports-item-desc { color: var(--sx-muted); }
body.clair-spacex .sidebar-reports-item:hover .sidebar-reports-item-desc,
body.clair-spacex .sidebar-reports-item:focus .sidebar-reports-item-desc {
    color: #e3e3ea;
}
body.clair-spacex .sidebar-reports-toggle i { color: var(--sx-muted); }
body.clair-spacex .sidebar-reports-item i { color: var(--sx-muted); }
body.clair-spacex .sidebar-reports-item:hover i,
body.clair-spacex .sidebar-reports-item:focus i { color: #66AFC9; }

/* Drill-down sidebar report navigation. Same --crs-white inversion trap as
   a.sidebar_link above (both charcoal -> white, white -> near-black) --
   but this text is a <summary>, not an <a class="sidebar_link">, so that
   fix does not reach it: near-black text on the near-black .sidebar fill. */
body.clair-spacex .drill-nav-summary { color: var(--sx-text) !important; }
body.clair-spacex .drill-nav-summary:hover { background-color: #222225 !important; }
body.clair-spacex .drill-nav-summary:focus-visible { outline-color: var(--sx-text); }
body.clair-spacex .drill-nav-caret { color: var(--sx-muted); }
body.clair-spacex .drill-nav-link[aria-current="page"] {
    background-color: #303038 !important;
    border-left-color: var(--sx-text);
}

/* Opportunity choice chips (New / Edit opportunity, coveralls). The chip
   keeps its native checkbox, label text, ids and :has(:checked) mechanic;
   only the light-theme fills (#fff / #e8f4fd) become dark surfaces, and
   the checked state now reads as a lifted, accented chip rather than a
   pale blue one that the light label text disappeared into. */
body.clair-spacex :is(.clair-choice, .clair-choice-list .custom-control,
  .clair-choice-list .form-check) {
  background: #141416;
  border-color: #55555e;
  color: var(--sx-text);
}
body.clair-spacex :is(.clair-choice, .clair-choice-list .custom-control,
  .clair-choice-list .form-check) :is(span, label) { color: var(--sx-text); }
body.clair-spacex :is(.clair-choice:hover, .clair-choice-list .custom-control:hover,
  .clair-choice-list .form-check:hover) { border-color: #8b8b94; }
body.clair-spacex :is(.clair-choice:has(input:checked),
  .clair-choice-list .custom-control:has(input:checked),
  .clair-choice-list .form-check:has(input:checked)) {
  background: #2b2b31;
  border-color: #fff;
}
body.clair-spacex :is(.clair-choice:has(input:checked),
  .clair-choice-list .custom-control:has(input:checked),
  .clair-choice-list .form-check:has(input:checked)) :is(span, label) {
  color: #fff;
  font-weight: 600;
}
body.clair-spacex :is(.clair-choice, .clair-choice-list .custom-control,
  .clair-choice-list .form-check):focus-within {
  outline: 2px solid #fff;
  outline-offset: 2px;
}