/* ============================================================================
   BOOTSTRAP -> CANOPY THEME (nav review F3, option C step 1; David 2026-09-25)
   ----------------------------------------------------------------------------
   91 page templates inside the v2 shell still load Bootstrap 5.3.3 for their
   page bodies, so they looked like the old app inside the new one. This file
   is loaded right AFTER that Bootstrap link on every one of them and re-points
   Bootstrap's own custom properties (and, where Bootstrap exposes none, its
   component rules) at Canopy Layer 2 / Layer 3 tokens. Pages are then rebuilt
   natively on tokens over time; tests/test_bootstrap_theme.py holds the
   ratchet that keeps the Bootstrap page count from growing.

   Rules for this file:
   - var() references to tokens.css only. No hex, no rgb(), no new sizes.
   - Everything is scoped under [data-shell="v2"] (the attribute only
     shell/base.html sets), the same scope the palette-A token block uses, so
     a legacy page that still loads Bootstrap without the shell is untouched.
   - Scoping raises specificity to (0,2,0). That beats Bootstrap's variant
     rules (0,1,0), which is the point, but it also means a base rule here
     (e.g. `.btn`) would beat a Bootstrap MODIFIER (e.g. `.btn-sm`). Every
     modifier Bootstrap ships for a component we touch is therefore restated
     here, after its base.

   What cannot be done with variables alone (handled by direct overrides
   below, each marked "DIRECT"):
   - Bootstrap 5.3 builds link, text-*, bg-* and focus-shadow colours from
     *-rgb triplets (`rgba(var(--bs-danger-rgb), ...)`). A token holds a hex,
     and CSS cannot turn a hex custom property into a triplet, so those
     utilities are overridden as whole declarations.
   - .form-control:focus / .form-select:focus / .form-check-input:checked are
     compiled to literal colours, not variables.
   - .form-select's chevron is an SVG data URI with its stroke colour baked
     in; left as Bootstrap's neutral grey.
   ========================================================================= */


/* --- 1. Root: Bootstrap's global variables ------------------------------ */

[data-shell="v2"] {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-body);
  --bs-body-line-height: var(--leading-normal);
  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--color-surface);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-heading-color: var(--color-text-primary);

  /* `.text-muted` reads this. Most text-muted in Canopy is small (emails,
     dates, captions), so it takes the AA-safe small-text ink, not
     --color-text-muted (which is AA only at >=14px). */
  --bs-secondary-color: var(--color-text-quiet);
  --bs-tertiary-color: var(--color-text-muted);
  --bs-secondary-bg: var(--color-sunken);
  --bs-tertiary-bg: var(--color-surface-2);

  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-xxl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);

  /* The hex siblings of the link triplet. `a` itself uses the -rgb form (see
     header); .btn-link and a few components read these. */
  --bs-link-color: var(--color-text-link);
  --bs-link-hover-color: var(--color-brand-hover);

  --bs-focus-ring-color: var(--color-brand-ring);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* Subtle / emphasis families. Alerts, list-group variants and the
     *-subtle / *-emphasis utilities all read these, so remapping them here
     themes those components with no per-component rule. Shell state
     vocabulary: ok / warn / crit. The shell has no "info" state, so info and
     secondary both read as neutral, and primary reads as brand. */
  --bs-primary-text-emphasis: var(--color-brand);
  --bs-primary-bg-subtle: var(--color-brand-subtle);
  --bs-primary-border-subtle: var(--color-brand-border);
  --bs-success-text-emphasis: var(--color-success-fg);
  --bs-success-bg-subtle: var(--color-success-bg);
  --bs-success-border-subtle: var(--color-success-border);
  --bs-warning-text-emphasis: var(--color-warning-fg);
  --bs-warning-bg-subtle: var(--color-warning-bg);
  --bs-warning-border-subtle: var(--color-warning-border);
  --bs-danger-text-emphasis: var(--color-danger-fg);
  --bs-danger-bg-subtle: var(--color-danger-bg);
  --bs-danger-border-subtle: var(--color-danger-border);
  --bs-info-text-emphasis: var(--color-text-secondary);
  --bs-info-bg-subtle: var(--color-surface-2);
  --bs-info-border-subtle: var(--color-border-strong);
  --bs-secondary-text-emphasis: var(--color-text-secondary);
  --bs-secondary-bg-subtle: var(--color-surface-2);
  --bs-secondary-border-subtle: var(--color-border-strong);
  --bs-light-text-emphasis: var(--color-text-secondary);
  --bs-light-bg-subtle: var(--color-surface-2);
  --bs-light-border-subtle: var(--color-border);
  --bs-dark-text-emphasis: var(--color-text-primary);
  --bs-dark-bg-subtle: var(--color-sunken);
  --bs-dark-border-subtle: var(--color-border-strong);

  --bs-form-valid-color: var(--color-success-fg);
  --bs-form-valid-border-color: var(--color-success-solid);
  --bs-form-invalid-color: var(--color-danger-fg);
  --bs-form-invalid-border-color: var(--color-danger-solid);
}


/* --- 2. Headings -------------------------------------------------------- */
/* Bootstrap's h1 is fluid (calc(1.375rem + 1.5vw), 40px at desktop), well
   above the Canopy scale. Only the page-title steps are remapped; h3-h6 keep
   Bootstrap's sizes because pages use them as KPI numerals and card titles. */

/* :where() keeps these at Bootstrap's own (0,0,1) so a page class such as
   shell.css's .shell-page-title (0,1,0) still wins; source order beats
   Bootstrap's bare h1 rule. */
:where([data-shell="v2"]) h1,
:where([data-shell="v2"]) .h1 {
  font-size: var(--text-h1);
}

:where([data-shell="v2"]) h2,
:where([data-shell="v2"]) .h2 {
  font-size: var(--text-h2);
}

:where([data-shell="v2"]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}


/* --- 3. Buttons (CANOPY-DESIGN 4.4) ------------------------------------- */

[data-shell="v2"] .btn {
  --bs-btn-padding-y: var(--button-padding-y);
  --bs-btn-padding-x: var(--button-padding-x);
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-size: var(--text-body-sm);
  --bs-btn-font-weight: var(--weight-semibold);
  --bs-btn-line-height: var(--leading-normal);
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-box-shadow: var(--shadow-sm);
  --bs-btn-focus-box-shadow: var(--shadow-focus);
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

/* Restated after the base rule above (see the header's specificity note). */
[data-shell="v2"] .btn-sm,
[data-shell="v2"] .btn-group-sm > .btn {
  --bs-btn-padding-y: var(--space-2);
  --bs-btn-padding-x: var(--space-3);
  --bs-btn-font-size: var(--text-caption);
  --bs-btn-border-radius: var(--radius-sm);
}

[data-shell="v2"] .btn-lg,
[data-shell="v2"] .btn-group-lg > .btn {
  --bs-btn-padding-y: var(--space-3);
  --bs-btn-padding-x: var(--space-5);
  --bs-btn-font-size: var(--text-body);
  --bs-btn-border-radius: var(--radius-md);
}

/* DIRECT: shell.css paints every `.shell-content a` (0,1,1) link-green,
   which beats Bootstrap's `.btn` colour (0,1,0), so every <a class="btn">
   rendered link-green text in the shell before this file. */
[data-shell="v2"] .shell-content a.btn {
  color: var(--bs-btn-color);
}

[data-shell="v2"] .shell-content a.btn:hover {
  color: var(--bs-btn-hover-color);
}

/* The rule above outranks Bootstrap's own state colors, so the active and
   disabled states are restated. Without this an active outline link button
   (the schedule's "By Room" toggle, seen on dev 2026-09-25) drew brand text
   on the brand fill and read as an empty block. */
[data-shell="v2"] .shell-content a.btn:is(.active, :active, .show) {
  color: var(--bs-btn-active-color);
}

[data-shell="v2"] .shell-content a.btn.disabled {
  color: var(--bs-btn-disabled-color);
}

/* Primary. In Canopy, btn-success IS the primary action (Add, Save), so both
   variants resolve to brand. */
[data-shell="v2"] .btn-primary,
[data-shell="v2"] .btn-success {
  --bs-btn-color: var(--color-text-on-brand);
  --bs-btn-bg: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-color: var(--color-text-on-brand);
  --bs-btn-hover-bg: var(--color-brand-hover);
  --bs-btn-hover-border-color: var(--color-brand-hover);
  --bs-btn-active-color: var(--color-text-on-brand);
  --bs-btn-active-bg: var(--color-brand-active);
  --bs-btn-active-border-color: var(--color-brand-active);
  --bs-btn-disabled-color: var(--color-text-disabled);
  --bs-btn-disabled-bg: var(--color-surface-2);
  --bs-btn-disabled-border-color: var(--color-border);
}

/* Secondary (solid grey in Bootstrap; a bordered surface button in Canopy). */
[data-shell="v2"] .btn-secondary,
[data-shell="v2"] .btn-light,
[data-shell="v2"] .btn-outline-secondary,
[data-shell="v2"] .btn-outline-dark,
[data-shell="v2"] .btn-outline-light {
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: var(--color-surface-2);
  --bs-btn-hover-border-color: var(--color-border-strong);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-bg: var(--color-sunken);
  --bs-btn-active-border-color: var(--color-border-strong);
  --bs-btn-disabled-color: var(--color-text-disabled);
  --bs-btn-disabled-bg: var(--color-surface);
  --bs-btn-disabled-border-color: var(--color-border);
}

/* Brand-tinted secondary: outline-primary / outline-success (Edit,
   Reactivate). Same shape as secondary, brand ink. */
[data-shell="v2"] .btn-outline-primary,
[data-shell="v2"] .btn-outline-success {
  --bs-btn-color: var(--color-brand);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-brand);
  --bs-btn-hover-bg: var(--color-brand-subtle);
  --bs-btn-hover-border-color: var(--color-brand);
  --bs-btn-active-color: var(--color-text-on-brand);
  --bs-btn-active-bg: var(--color-brand);
  --bs-btn-active-border-color: var(--color-brand);
  --bs-btn-disabled-color: var(--color-text-disabled);
  --bs-btn-disabled-bg: var(--color-surface);
  --bs-btn-disabled-border-color: var(--color-border);
}

/* The shell has no "info" state: outline-info (Review Overrides) is a plain
   secondary action. */
[data-shell="v2"] .btn-outline-info {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: var(--color-surface-2);
  --bs-btn-hover-border-color: var(--color-border-strong);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-bg: var(--color-sunken);
  --bs-btn-active-border-color: var(--color-border-strong);
}

[data-shell="v2"] .btn-outline-warning {
  --bs-btn-color: var(--color-warning-fg);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-warning-border);
  --bs-btn-hover-color: var(--color-warning-fg);
  --bs-btn-hover-bg: var(--color-warning-bg);
  --bs-btn-hover-border-color: var(--color-warning-solid);
  --bs-btn-active-color: var(--color-warning-fg);
  --bs-btn-active-bg: var(--color-warning-bg);
  --bs-btn-active-border-color: var(--color-warning-solid);
}

/* Destructive, but still secondary weight on a dense row (CANOPY-DESIGN 4.4:
   the solid danger fill is reserved for .btn-danger). */
[data-shell="v2"] .btn-outline-danger {
  --bs-btn-color: var(--color-danger-fg);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-danger-border);
  --bs-btn-hover-color: var(--color-danger-fg);
  --bs-btn-hover-bg: var(--color-danger-bg);
  --bs-btn-hover-border-color: var(--color-danger-solid);
  --bs-btn-active-color: var(--color-text-on-brand);
  --bs-btn-active-bg: var(--color-danger-solid);
  --bs-btn-active-border-color: var(--color-danger-solid);
}

[data-shell="v2"] .btn-danger {
  --bs-btn-color: var(--color-text-on-brand);
  --bs-btn-bg: var(--color-danger-solid);
  --bs-btn-border-color: var(--color-danger-solid);
  --bs-btn-hover-color: var(--color-text-on-brand);
  --bs-btn-hover-bg: var(--color-danger-fg);
  --bs-btn-hover-border-color: var(--color-danger-fg);
  --bs-btn-active-color: var(--color-text-on-brand);
  --bs-btn-active-bg: var(--color-danger-fg);
  --bs-btn-active-border-color: var(--color-danger-fg);
}

/* White on the mid amber (--color-warning-solid) is under 4.5:1 for button
   text, so the fill is the darker amber ink; hover lightens the border only. */
[data-shell="v2"] .btn-warning {
  --bs-btn-color: var(--color-text-on-brand);
  --bs-btn-bg: var(--color-warning-fg);
  --bs-btn-border-color: var(--color-warning-fg);
  --bs-btn-hover-color: var(--color-text-on-brand);
  --bs-btn-hover-bg: var(--color-warning-fg);
  --bs-btn-hover-border-color: var(--color-warning-solid);
  --bs-btn-active-color: var(--color-text-on-brand);
  --bs-btn-active-bg: var(--color-warning-fg);
  --bs-btn-active-border-color: var(--color-warning-solid);
}

/* Ghost. */
[data-shell="v2"] .btn-link {
  --bs-btn-color: var(--color-text-link);
  --bs-btn-hover-color: var(--color-brand-hover);
  --bs-btn-active-color: var(--color-brand-active);
  --bs-btn-disabled-color: var(--color-text-disabled);
  --bs-btn-box-shadow: var(--shadow-none);
}


/* --- 4. Cards ----------------------------------------------------------- */

[data-shell="v2"] .card {
  --bs-card-spacer-y: var(--space-5);
  --bs-card-spacer-x: var(--space-5);
  --bs-card-border-color: var(--color-border);
  --bs-card-border-radius: var(--radius-md);
  --bs-card-inner-border-radius: var(--radius-md);
  --bs-card-cap-padding-y: var(--space-4);
  --bs-card-cap-padding-x: var(--space-5);
  --bs-card-cap-bg: var(--color-surface);
  --bs-card-cap-color: var(--color-text-primary);
  --bs-card-bg: var(--color-surface);
  --bs-card-color: var(--color-text-primary);
  --bs-card-box-shadow: var(--shadow-sm);
  box-shadow: var(--bs-card-box-shadow);
}

/* No `overflow: hidden` on .card: ffe/school_detail.html and
   workflows/hub.html open dropdown menus inside cards, and clipping would cut
   them off. A table flush to a card's edge keeps square inner corners, which
   the 1px card border hides at this radius. */

[data-shell="v2"] .card-header h5,
[data-shell="v2"] .card-header .h5,
[data-shell="v2"] .card-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}


/* --- 5. Tables (the shell's header shape: sunken band, micro caps) ------- */

[data-shell="v2"] .table {
  --bs-table-color: var(--color-text-primary);
  --bs-table-bg: var(--color-surface);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-striped-bg: var(--color-surface-2);
  --bs-table-active-color: var(--color-text-primary);
  --bs-table-active-bg: var(--color-brand-subtle);
  --bs-table-hover-color: var(--color-text-primary);
  --bs-table-hover-bg: var(--color-surface-2);
  font-size: var(--table-font-size);
  font-variant-numeric: tabular-nums;
}

/* DIRECT: Bootstrap exposes no variable for cell padding. */
[data-shell="v2"] .table > :not(caption) > * > * {
  padding: var(--table-padding-y) var(--table-padding-x);
}

[data-shell="v2"] .table-sm > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
}

[data-shell="v2"] .table > :not(:first-child) {
  border-top: 0;
}

/* The header band: variables for colour/fill, DIRECT for the type. */
[data-shell="v2"] .table > thead {
  --bs-table-bg: var(--color-sunken);
  --bs-table-color: var(--color-text-label);
  vertical-align: bottom;
}

[data-shell="v2"] .table > thead > tr > th {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom-color: var(--color-border-strong);
}

[data-shell="v2"] .table > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

/* A table directly inside a card body loses Bootstrap's bottom margin. */
[data-shell="v2"] .card .table {
  margin-bottom: 0;
}


/* --- 6. Badges (CANOPY-DESIGN 4.3: soft pill, micro caps) ---------------- */

[data-shell="v2"] .badge {
  --bs-badge-padding-x: var(--space-3);
  --bs-badge-padding-y: var(--space-1);
  --bs-badge-font-size: var(--text-micro);
  --bs-badge-font-weight: var(--weight-semibold);
  --bs-badge-border-radius: var(--radius-pill);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-normal);
}

/* DIRECT: badges are coloured by the bg-* utilities (`!important`, -rgb
   triplets), so the soft fill has to be restated per variant, and needs its
   own !important. `.badge.bg-*` (0,3,0 scoped) also beats a `.text-dark`
   paired on the same element. */
[data-shell="v2"] .badge.bg-primary {
  background-color: var(--color-brand-subtle) !important;
  color: var(--color-brand) !important;
}

[data-shell="v2"] .badge.bg-success {
  background-color: var(--color-success-bg) !important;
  color: var(--color-success-fg) !important;
}

[data-shell="v2"] .badge.bg-warning {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning-fg) !important;
}

[data-shell="v2"] .badge.bg-danger {
  background-color: var(--color-danger-bg) !important;
  color: var(--color-danger-fg) !important;
}

/* Info = the MCT / floater blue in Canopy's role vocabulary (Layer 3). */
[data-shell="v2"] .badge.bg-info {
  background-color: var(--role-mct-bg) !important;
  color: var(--role-mct-fg) !important;
}

[data-shell="v2"] .badge.bg-secondary,
[data-shell="v2"] .badge.bg-light {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
}

[data-shell="v2"] .badge.bg-dark {
  background-color: var(--color-surface-inv) !important;
  color: var(--color-text-on-brand) !important;
}


/* --- 7. Alerts (shell state tokens) ------------------------------------ */
/* Colours arrive through the *-subtle / *-emphasis remap in section 1. */

[data-shell="v2"] .alert {
  --bs-alert-padding-x: var(--space-5);
  --bs-alert-padding-y: var(--space-4);
  --bs-alert-margin-bottom: var(--space-5);
  --bs-alert-border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  /* The CANOPY-DESIGN 4.2 left accent. */
  border-left-width: 3px;
}

[data-shell="v2"] .alert-success { border-left-color: var(--color-success-solid); }
[data-shell="v2"] .alert-warning { border-left-color: var(--color-warning-solid); }
[data-shell="v2"] .alert-danger  { border-left-color: var(--color-danger-solid); }
[data-shell="v2"] .alert-info,
[data-shell="v2"] .alert-secondary,
[data-shell="v2"] .alert-light   { border-left-color: var(--color-border-strong); }
[data-shell="v2"] .alert-primary { border-left-color: var(--color-brand); }

[data-shell="v2"] .alert .alert-link {
  font-weight: var(--weight-semibold);
}


/* --- 8. Forms (CANOPY-DESIGN 4.14) -------------------------------------- */

[data-shell="v2"] .form-label {
  margin-bottom: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-label);
}

/* DIRECT: padding and font-size are literals in Bootstrap, not variables. */
[data-shell="v2"] .form-control,
[data-shell="v2"] .form-select {
  padding-top: var(--input-padding-y);
  padding-bottom: var(--input-padding-y);
  padding-left: var(--input-padding-x);
  font-size: var(--input-font-size);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
}

[data-shell="v2"] .form-control {
  padding-right: var(--input-padding-x);
}

[data-shell="v2"] .form-control-sm,
[data-shell="v2"] .form-select-sm {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  font-size: var(--text-caption);
  border-radius: var(--radius-xs);
}

[data-shell="v2"] .form-control::placeholder {
  color: var(--color-text-disabled);
}

/* DIRECT: the focus colours are compiled literals (Bootstrap blue). */
[data-shell="v2"] .form-control:focus,
[data-shell="v2"] .form-select:focus,
[data-shell="v2"] .form-check-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  outline: 0;
}

[data-shell="v2"] .form-control:disabled,
[data-shell="v2"] .form-control[readonly],
[data-shell="v2"] .form-select:disabled {
  background-color: var(--color-sunken);
  color: var(--color-text-secondary);
}

/* Plain (non-.form-check-input) checkboxes and radios, e.g. the Calendar
   board's feed filter, otherwise draw in the browser's default blue. */
[data-shell="v2"] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--color-brand);
}

[data-shell="v2"] .form-check-input:checked {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

[data-shell="v2"] .input-group-text {
  background-color: var(--color-sunken);
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--input-font-size);
}


/* --- 9. Utilities built on -rgb triplets (DIRECT) ----------------------- */

[data-shell="v2"] .text-primary   { color: var(--color-brand) !important; }
[data-shell="v2"] .text-success   { color: var(--color-success-fg) !important; }
[data-shell="v2"] .text-warning   { color: var(--color-warning-fg) !important; }
[data-shell="v2"] .text-danger    { color: var(--color-danger-fg) !important; }
[data-shell="v2"] .text-info      { color: var(--color-text-secondary) !important; }
[data-shell="v2"] .text-secondary { color: var(--color-text-secondary) !important; }
[data-shell="v2"] .text-dark      { color: var(--color-text-primary) !important; }
[data-shell="v2"] .text-body      { color: var(--color-text-primary) !important; }

/* Solid fills outside a badge (e.g. the Add Teacher modal header). Every
   rule here says `:not(.badge)`: these selectors tie the badge rules above
   on specificity (0,3,0, both !important), so without it the later solid
   fill wins and a badge renders dark with its soft-pill dark text on top
   (seen on dev 2026-09-25: the People roster's role and status badges).
   Two more exclusions keep the page readable:
   - `bg-opacity-*` pairs (30 card headers use `bg-success bg-opacity-10`)
     are Bootstrap's faint tints; a solid override would turn them dark with
     dark text on top. They get the soft state fills below instead.
   - `.bg-info` is paired with `text-white` on a modal header, so it takes the
     MCT blue ink (white text reads on it), not a light surface. */
[data-shell="v2"] :is(.bg-primary, .bg-success):not([class*="bg-opacity-"], .badge) { background-color: var(--color-brand) !important; }
[data-shell="v2"] .bg-warning:not([class*="bg-opacity-"], .badge)   { background-color: var(--color-warning-solid) !important; }
[data-shell="v2"] .bg-danger:not([class*="bg-opacity-"], .badge)    { background-color: var(--color-danger-solid) !important; }
[data-shell="v2"] .bg-info:not([class*="bg-opacity-"], .badge)      { background-color: var(--role-mct-fg) !important; }
[data-shell="v2"] .bg-secondary:not([class*="bg-opacity-"], .badge) { background-color: var(--color-surface-2) !important; }
[data-shell="v2"] .bg-light     { background-color: var(--color-surface-2) !important; }
[data-shell="v2"] .bg-dark      { background-color: var(--color-surface-inv) !important; }
[data-shell="v2"] .bg-white,
[data-shell="v2"] .bg-body      { background-color: var(--color-surface) !important; }

/* The faint tints, mapped to the matching soft state fill. */
[data-shell="v2"] :is(.bg-primary, .bg-success)[class*="bg-opacity-"]:not(.badge) { background-color: var(--color-success-bg) !important; }
[data-shell="v2"] .bg-warning[class*="bg-opacity-"]:not(.badge) { background-color: var(--color-warning-bg) !important; }
[data-shell="v2"] .bg-danger[class*="bg-opacity-"]:not(.badge)  { background-color: var(--color-danger-bg) !important; }
[data-shell="v2"] .bg-info[class*="bg-opacity-"]:not(.badge)    { background-color: var(--role-mct-bg) !important; }
[data-shell="v2"] .bg-secondary[class*="bg-opacity-"]:not(.badge) { background-color: var(--color-surface-2) !important; }

[data-shell="v2"] .border       { border-color: var(--color-border) !important; }


/* --- 10. Modal ---------------------------------------------------------- */

[data-shell="v2"] .modal {
  --bs-modal-bg: var(--color-surface);
  --bs-modal-color: var(--color-text-primary);
  --bs-modal-border-color: var(--color-border);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: var(--radius-lg);
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-header-border-color: var(--color-border);
  --bs-modal-footer-border-color: var(--color-border);
  --bs-modal-padding: var(--space-5);
  --bs-modal-header-padding: var(--space-4) var(--space-5);
}

[data-shell="v2"] .modal-backdrop {
  --bs-backdrop-bg: var(--color-scrim);
  --bs-backdrop-opacity: 1;
}