/**
 * Dark-mode safety net — catch-all readability layer.
 *
 * v3.7.1 (2026-05-17): platform-wide theme-switching audit found 897 raw-color
 * declarations across 75 CSS files. Burndown is multi-wave. In the meantime
 * this file is the "no one is invisible in dark mode" safety floor: it adds
 * default dark overrides for the bootstrap-derived component classes the
 * platform uses everywhere (.card, .btn, .table, .modal, body, etc.) PLUS
 * the project-prefixed shells (.rmc-page, .rmc-card, .cp-*, .portal-*) so
 * a tenant or operator switching to dark gets readable contrast even on
 * surfaces whose component CSS still uses raw light-mode colors.
 *
 * Load order: AFTER design-tokens.css, AFTER all component CSS, BEFORE any
 * per-tenant brand stylesheet. The selector specificity is intentionally low
 * (no !important except where bootstrap inline-styles fight back) so
 * properly-tokenized components keep winning over this safety net.
 *
 * Marketing surface (cream-only, intentionally NOT theme-switching) is
 * scoped OUT via `:not(.marketing-surface)` so this file never inverts
 * the editorial palette.
 *
 * Token references resolve through the existing dark-mode cascade in
 * design-tokens.css — confirmed available: --surface-canvas, --surface-elevated,
 * --text-primary, --text-secondary, --hairline, --ds-success, --ds-danger,
 * --ds-info, --school-accent.
 */

/* ====================================================================== */
/* 1. Resolved-dark scope (the html attribute the theme-bootstrap sets).  */
/*    Both data-theme="dark" AND data-bs-theme="dark" cover all callers.  */
/* ====================================================================== */

html[data-theme="dark"] body:not(.marketing-surface),
html[data-resolved-theme="dark"] body:not(.marketing-surface),
html[data-bs-theme="dark"] body:not(.marketing-surface){
  background-color: var(--surface-canvas);
  color: var(--text-primary);
}

/* ====================================================================== */
/* 2. Bootstrap-derived components — used across portal, manager, backend. */
/*    Without these, switching to dark leaves white cards on dark canvas. */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .card,
html[data-theme="dark"] body:not(.marketing-surface) .card,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .card,
html[data-bs-theme="dark"] body:not(.marketing-surface) .widget-card,
html[data-theme="dark"] body:not(.marketing-surface) .widget-card,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .widget-card,
html[data-bs-theme="dark"] body:not(.marketing-surface) .panel,
html[data-theme="dark"] body:not(.marketing-surface) .panel,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .panel {
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .card-header,
html[data-theme="dark"] body:not(.marketing-surface) .card-header,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .card-header,
html[data-bs-theme="dark"] body:not(.marketing-surface) .card-footer{
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .card-title,
html[data-theme="dark"] body:not(.marketing-surface) .card-title,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .card-title,
html[data-bs-theme="dark"] body:not(.marketing-surface) .card-text{
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .text-muted,
html[data-theme="dark"] body:not(.marketing-surface) .text-muted,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .text-muted,
html[data-bs-theme="dark"] body:not(.marketing-surface) .text-secondary{
  color: var(--text-secondary) !important;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .text-dark,
html[data-theme="dark"] body:not(.marketing-surface) .text-dark,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .text-dark{
  /* In dark mode, ".text-dark" would render dark-on-dark = invisible.
     Flip to the readable primary text color. */
  color: var(--text-primary) !important;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .bg-white,
html[data-theme="dark"] body:not(.marketing-surface) .bg-white,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .bg-white,
html[data-bs-theme="dark"] body:not(.marketing-surface) .bg-light,
html[data-theme="dark"] body:not(.marketing-surface) .bg-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .bg-light {
  /* Same bug class — ".bg-white" / ".bg-light" in dark mode leaves a glaring white slab.
     Demote to the elevated surface so it still tone-lifts but stays dark. */
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .text-bg-light,
html[data-theme="dark"] body:not(.marketing-surface) .text-bg-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .text-bg-light {
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  color: var(--text-primary) !important;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    .proof-app-card,
    .proof-panel,
    .proof-card,
    .proof-compare-table,
    .proof-step,
    .proof-preview,
    .rmc-install-impact-graph,
    .rmc-surface-muted-panel,
    .rmc-surface-elevated-pre
  ),
html[data-theme="dark"] body:not(.marketing-surface) :is(
    .proof-app-card,
    .proof-panel,
    .proof-card,
    .proof-compare-table,
    .proof-step,
    .proof-preview,
    .rmc-install-impact-graph,
    .rmc-surface-muted-panel,
    .rmc-surface-elevated-pre
  ),
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    .proof-app-card,
    .proof-panel,
    .proof-card,
    .proof-compare-table,
    .proof-step,
    .proof-preview,
    .rmc-install-impact-graph,
    .rmc-surface-muted-panel,
    .rmc-surface-elevated-pre
  ) {
  /* Marketplace catalog cards use token backgrounds but can still resolve to
     light fallbacks when aesthetic dark overrides miss — force elevated slab. */
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  color: var(--text-primary);
  border-color: var(--hairline-strong, var(--hairline));
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .proof-app-card .text-muted,
html[data-theme="dark"] body:not(.marketing-surface) .proof-app-card .text-muted,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .proof-app-card .text-muted,
html[data-bs-theme="dark"] body:not(.marketing-surface) .proof-panel .text-muted,
html[data-theme="dark"] body:not(.marketing-surface) .proof-panel .text-muted,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .proof-panel .text-muted {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* ====================================================================== */
/* 3. Bootstrap buttons — the .btn-light / .btn-outline-light pair break    */
/*    in dark mode without this. Other btn-* variants are tenant-branded.  */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .btn-light,
html[data-theme="dark"] body:not(.marketing-surface) .btn-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .btn-light{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .btn-outline-light,
html[data-theme="dark"] body:not(.marketing-surface) .btn-outline-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .btn-outline-light{
  color: var(--text-primary);
  border-color: var(--hairline);
  background-color: transparent;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .btn-outline-light:hover,
html[data-theme="dark"] body:not(.marketing-surface) .btn-outline-light:hover,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .btn-outline-light:hover{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
}

/* ====================================================================== */
/* 4. Tables — the worst offender. Without this, .table renders with        */
/*    inherited dark-text-on-dark-canvas striping in dark mode.            */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .table,
html[data-theme="dark"] body:not(.marketing-surface) .table,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .table{
  color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--hairline);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: var(--surface-elevated, var(--surface-canvas));
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--surface-popover, var(--surface-elevated));
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .table th,
html[data-theme="dark"] body:not(.marketing-surface) .table th,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .table th,
html[data-bs-theme="dark"] body:not(.marketing-surface) .table td{
  border-color: var(--hairline);
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .table thead th,
html[data-theme="dark"] body:not(.marketing-surface) .table thead th,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .table thead th{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
  border-bottom-color: var(--hairline);
}

/* 4b. Platform chromatic floor (v1298) — tables / list-groups / bg-light slabs.
   Catches incident console, AI Center assistants, and any Bootstrap table
   that still resolves --bs-table-bg or cell backgrounds to near-white while
   --text-primary is already in the dark palette. !important is intentional:
   this file is the last-resort safety net after component CSS. */
html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table tbody tr,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table tbody tr,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table tbody tr,
html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table tbody td,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table tbody td,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table tbody td,
html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table-family tbody td,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table-family tbody td,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) .table-family tbody td {
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  color: var(--text-primary) !important;
  --bs-table-bg: var(--surface-elevated, var(--surface-canvas));
  --bs-table-color: var(--text-primary);
  --bs-table-hover-bg: var(--surface-popover, var(--surface-elevated));
  --bs-table-hover-color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .table thead.table-light th,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .table thead.table-light th,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .table thead.table-light th,
html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .table-family thead th,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .table-family thead th,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .table-family thead th {
  background-color: var(--surface-canvas, var(--surface-elevated)) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline) !important;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .list-group-item,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .list-group-item,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .list-group-item {
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .list-group-item-action:not(.active):hover,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .list-group-item-action:not(.active):hover,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .list-group-item-action:not(.active):hover {
  background-color: var(--surface-popover, var(--surface-elevated));
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .alert-light,
html[data-theme="dark"] body:not(.marketing-surface) .alert-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .alert-light {
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline) !important;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .card-header.bg-light,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .card-header.bg-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ) .card-header.bg-light {
  background-color: var(--surface-canvas, var(--surface-elevated)) !important;
  color: var(--text-primary) !important;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) :is(.card-body.bg-light, pre.bg-light, thead.bg-light th),
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) :is(.card-body.bg-light, pre.bg-light, thead.bg-light th),
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main],
    .cp-shell-content
  ) :is(.card-body.bg-light, pre.bg-light, thead.bg-light th) {
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ).bg-white,
html[data-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ).bg-white,
html[data-resolved-theme="dark"] body:not(.marketing-surface) :is(
    #cp-main-content,
    [data-rmc-shell-main]
  ).bg-white,
html[data-bs-theme="dark"] body:not(.marketing-surface) #main.bg-white,
html[data-theme="dark"] body:not(.marketing-surface) #main.bg-white,
html[data-resolved-theme="dark"] body:not(.marketing-surface) #main.bg-white {
  background-color: var(--surface-canvas, var(--color-base-900)) !important;
  color: var(--text-primary) !important;
}

/* ====================================================================== */
/* 5. Modals / popovers / tooltips / dropdowns — overlay surfaces.        */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .modal-content,
html[data-theme="dark"] body:not(.marketing-surface) .modal-content,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .modal-content,
html[data-bs-theme="dark"] body:not(.marketing-surface) .popover,
html[data-theme="dark"] body:not(.marketing-surface) .popover,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .popover,
html[data-bs-theme="dark"] body:not(.marketing-surface) .dropdown-menu,
html[data-theme="dark"] body:not(.marketing-surface) .dropdown-menu,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .dropdown-menu,
html[data-bs-theme="dark"] body:not(.marketing-surface) .tooltip-inner,
html[data-theme="dark"] body:not(.marketing-surface) .tooltip-inner,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .tooltip-inner {
  background-color: var(--surface-popover, var(--surface-elevated));
  color: var(--text-primary);
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .modal-header,
html[data-theme="dark"] body:not(.marketing-surface) .modal-header,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .modal-header,
html[data-bs-theme="dark"] body:not(.marketing-surface) .modal-footer{
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .dropdown-item,
html[data-theme="dark"] body:not(.marketing-surface) .dropdown-item,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .dropdown-item{
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .dropdown-item:hover,
html[data-theme="dark"] body:not(.marketing-surface) .dropdown-item:hover,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .dropdown-item:hover,
html[data-bs-theme="dark"] body:not(.marketing-surface) .dropdown-item:focus{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
}

/* ====================================================================== */
/* 6. Form controls — invisible labels are the #1 reported bug.            */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .form-control,
html[data-theme="dark"] body:not(.marketing-surface) .form-control,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-control,
html[data-bs-theme="dark"] body:not(.marketing-surface) .form-select,
html[data-theme="dark"] body:not(.marketing-surface) .form-select,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-select{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
  border-color: var(--hairline);
}
/* Native <select> option list on dark (the "weird" blueprint dropdowns): keep
   the popped-open option menu readable, not light-on-dark. */
html[data-bs-theme="dark"] body:not(.marketing-surface) .form-select option,
html[data-theme="dark"] body:not(.marketing-surface) .form-select option,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-select option{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .form-control::placeholder,
html[data-theme="dark"] body:not(.marketing-surface) .form-control::placeholder,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-control::placeholder{
  color: var(--text-secondary);
  opacity: 0.7;
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .form-label,
html[data-theme="dark"] body:not(.marketing-surface) .form-label,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-label,
html[data-bs-theme="dark"] body:not(.marketing-surface) .form-text{
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .form-check-label,
html[data-theme="dark"] body:not(.marketing-surface) .form-check-label,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-check-label{
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .input-group-text,
html[data-theme="dark"] body:not(.marketing-surface) .input-group-text,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .input-group-text{
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  border-color: var(--hairline);
}

/* ====================================================================== */
/* 7. Project-prefixed primitives — .rmc-* / .cp-* / .portal-* shells.    */
/*    Catches component CSS that uses these shells but hasn't tokenized.  */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-card,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-card,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-card,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-card{
  background-color: var(--surface-elevated, var(--surface-canvas));
  color: var(--text-primary);
  border-color: var(--hairline);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-empty,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-empty,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-empty{
  color: var(--text-secondary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-back,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-back,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-back,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-h1,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-h1,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-h1,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-h2,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-h2,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-h2,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-h3,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-h3,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-h3 {
  color: var(--text-primary);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-muted,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-muted,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-muted,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-lede,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-lede,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-lede,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-form__help,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-form__help,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-form__help {
  color: var(--text-secondary);
}

/* ====================================================================== */
/* 8. Borders + hairlines — single rule covers every component using       */
/*    .border / .border-* utilities.                                      */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .border,
html[data-theme="dark"] body:not(.marketing-surface) .border,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .border,
html[data-bs-theme="dark"] body:not(.marketing-surface) .border-top,
html[data-theme="dark"] body:not(.marketing-surface) .border-top,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .border-top,
html[data-bs-theme="dark"] body:not(.marketing-surface) .border-bottom,
html[data-theme="dark"] body:not(.marketing-surface) .border-bottom,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .border-bottom,
html[data-bs-theme="dark"] body:not(.marketing-surface) .border-start,
html[data-theme="dark"] body:not(.marketing-surface) .border-start,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .border-start,
html[data-bs-theme="dark"] body:not(.marketing-surface) .border-end,
html[data-theme="dark"] body:not(.marketing-surface) .border-end,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .border-end {
  border-color: var(--hairline) !important;
}

/* ====================================================================== */
/* 9. Links — keep brand accent in dark; ensure visited stays visible.    */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) a:not(.btn):not(.rmc-back),
html[data-theme="dark"] body:not(.marketing-surface) a:not(.btn):not(.rmc-back),
html[data-resolved-theme="dark"] body:not(.marketing-surface) a:not(.btn):not(.rmc-back){
  color: var(--school-accent);
}

html[data-bs-theme="dark"] body:not(.marketing-surface) a:not(.btn):visited,
html[data-theme="dark"] body:not(.marketing-surface) a:not(.btn):visited,
html[data-resolved-theme="dark"] body:not(.marketing-surface) a:not(.btn):visited{
  color: var(--school-accent);
  opacity: 0.85;
}

/* ====================================================================== */
/* 10. Alerts — bootstrap variants stay readable.                          */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .alert,
html[data-theme="dark"] body:not(.marketing-surface) .alert,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .alert{
  background-color: var(--surface-elevated, var(--surface-canvas));
  border-color: var(--hairline);
  color: var(--text-primary);
}

/* ====================================================================== */
/* 11. Inline <code>/<pre> — the #1 platform-wide dark-mode invisibility.   */
/*     The base code/pre rule (design-tokens.css) paints --surface-bg-subtle */
/*     which stays LIGHT on tenant/admin/default planes while the text flips */
/*     near-white → white-on-white boxes over every inline data value (config */
/*     values, feature-flag keys, module paths). design-tokens.css carries the */
/*     source fix; this is the belt-and-suspenders backstop the safety net was */
/*     missing (it targeted .card/.table/.alert but never code/pre).           */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) code:not(pre code),
html[data-theme="dark"] body:not(.marketing-surface) code:not(pre code),
html[data-resolved-theme="dark"] body:not(.marketing-surface) code:not(pre code),
body.portal-backend-dark code:not(pre code),
html[data-bs-theme="dark"] body:not(.marketing-surface) pre,
html[data-theme="dark"] body:not(.marketing-surface) pre,
html[data-resolved-theme="dark"] body:not(.marketing-surface) pre,
body.portal-backend-dark pre{
  background-color: var(--surface-elevated, var(--surface-canvas));
  border-color: var(--hairline);
  color: var(--text-primary);
}

/* ====================================================================== */
/* 12. Bespoke value-bearing surfaces that paint --surface-bg-subtle       */
/*     (or --color-base-50/100) as a PRIMARY background — the same class as */
/*     §11's code/pre bug. That token stays LIGHT on the tenant/admin/      */
/*     default/onboarding planes in dark mode (it is only flipped on the    */
/*     control-plane surface), so under the flipping --text-primary /       */
/*     --admin-content-text these render near-white-on-light. Bootstrap     */
/*     primitives with this bug (.alert-light/.input-group-text/.card-*)    */
/*     are already caught above; these are the app's own classes the        */
/*     platform-wide audit surfaced (highest concern: the account/security  */
/*     surface, which paints MFA backup recovery codes + security panels).  */
/*     Backstop only — the owning sheets remain the source of truth.        */
/* ====================================================================== */

html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-account-backup-codes,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-account-backup-codes,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-account-backup-codes,
body.portal-backend-dark .rmc-account-backup-codes,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-profile-security-hub__panel,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-profile-security-hub__panel,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-profile-security-hub__panel,
body.portal-backend-dark .rmc-profile-security-hub__panel,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-card__foot,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-card__foot,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-card__foot,
body.portal-backend-dark .rmc-account-mfa-card__foot,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-secret,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-secret,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-secret,
body.portal-backend-dark .rmc-account-mfa-secret,
html[data-bs-theme="dark"] body:not(.marketing-surface) .page-family-filter-row,
html[data-theme="dark"] body:not(.marketing-surface) .page-family-filter-row,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .page-family-filter-row,
body.portal-backend-dark .page-family-filter-row,
html[data-bs-theme="dark"] body:not(.marketing-surface) .apple-class-status-pill,
html[data-theme="dark"] body:not(.marketing-surface) .apple-class-status-pill,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .apple-class-status-pill,
body.portal-backend-dark .apple-class-status-pill,
html[data-bs-theme="dark"] body:not(.marketing-surface) .world-class-status-pill,
html[data-theme="dark"] body:not(.marketing-surface) .world-class-status-pill,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .world-class-status-pill,
body.portal-backend-dark .world-class-status-pill,
html[data-bs-theme="dark"] body:not(.marketing-surface) .backend-intent-pill,
html[data-theme="dark"] body:not(.marketing-surface) .backend-intent-pill,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .backend-intent-pill,
body.portal-backend-dark .backend-intent-pill,
html[data-bs-theme="dark"] body:not(.marketing-surface) .admin-telemetry-chip,
html[data-theme="dark"] body:not(.marketing-surface) .admin-telemetry-chip,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .admin-telemetry-chip,
body.portal-backend-dark .admin-telemetry-chip,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-pill-ok,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-pill-ok,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-pill-ok,
body.portal-backend-dark .rmc-pill-ok,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-callout-warn,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-callout-warn,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-callout-warn,
body.portal-backend-dark .rmc-callout-warn,
html[data-bs-theme="dark"] body:not(.marketing-surface) .world-class-summary-strip,
html[data-theme="dark"] body:not(.marketing-surface) .world-class-summary-strip,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .world-class-summary-strip,
body.portal-backend-dark .world-class-summary-strip,
html[data-bs-theme="dark"] body:not(.marketing-surface) .apple-class-summary-strip,
html[data-theme="dark"] body:not(.marketing-surface) .apple-class-summary-strip,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .apple-class-summary-strip,
body.portal-backend-dark .apple-class-summary-strip,
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-os-status-strip,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-os-status-strip,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-os-status-strip,
body.portal-backend-dark .rmc-os-status-strip,
html[data-bs-theme="dark"] body:not(.marketing-surface) .form-control[type="file"]::file-selector-button,
html[data-theme="dark"] body:not(.marketing-surface) .form-control[type="file"]::file-selector-button,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .form-control[type="file"]::file-selector-button,
body.portal-backend-dark .form-control[type="file"]::file-selector-button{
  background-color: var(--surface-elevated, var(--surface-canvas));
  border-color: var(--hairline);
  color: var(--text-primary);
}

/* Carve-out: the MFA QR code wrapper must stay LIGHT in dark mode so the dark
   QR modules keep enough contrast to scan. Pin it white regardless of theme. */
html[data-bs-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-qr-wrap,
html[data-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-qr-wrap,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .rmc-account-mfa-qr-wrap,
body.portal-backend-dark .rmc-account-mfa-qr-wrap{
  background-color: #ffffff;  /* off-token-allow: qr-must-be-light-to-scan */
}

/* §13 — "Effective settings (safe fields)" / config-hub evidence cards.
   .cp-evidence-summary/-related/-advanced (rmc-class-grammar.css) paint from
   var(--surface-canvas|--surface-bg) — which are LIGHT on the tenant/default plane —
   with warm-white hex fallbacks, and the Bootstrap .card / .card-header.bg-light /
   .bg-body-secondary shells paint fixed light. On a dark shell the value rows
   ("site_name", "tagline", feature flags…) render as opaque WHITE BARS over white
   text — the "Effective settings masked / Backend feature flags blanked" report.
   Repoint the card surfaces + their <code> values to the flipping surface/text
   tokens so the tenant admin can actually read their own config on dark. */
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-page,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-page,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-page,
body.portal-backend-dark .cp-evidence-page,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-summary,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-summary,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-summary,
body.portal-backend-dark .cp-evidence-summary,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-related,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-related,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-related,
body.portal-backend-dark .cp-evidence-related,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-advanced,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-advanced,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-advanced,
body.portal-backend-dark .cp-evidence-advanced,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .card,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .card,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .card,
body.portal-backend-dark .cp-evidence-page .card,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .card-header,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .card-header,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .card-header,
body.portal-backend-dark .cp-evidence-page .card-header,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .bg-light,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .bg-light,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .bg-light,
body.portal-backend-dark .cp-evidence-page .bg-light,
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .bg-body-secondary,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .bg-body-secondary,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-page .bg-body-secondary,
body.portal-backend-dark .cp-evidence-page .bg-body-secondary{
  background-color: var(--surface-elevated, var(--surface-canvas)) !important;
  border-color: var(--hairline) !important;
  color: var(--text-primary) !important;
}
html[data-bs-theme="dark"] body:not(.marketing-surface) .cp-evidence-page code,
html[data-theme="dark"] body:not(.marketing-surface) .cp-evidence-page code,
html[data-resolved-theme="dark"] body:not(.marketing-surface) .cp-evidence-page code,
body.portal-backend-dark .cp-evidence-page code{
  background-color: transparent;
  color: var(--text-primary);
}