/* ============================================================
   bootstrap_bridges.css
   ============================================================
   Owns Bootstrap COMPONENT customizations — selector overrides
   that re-map Bootstrap's per-component variables (.btn-primary,
   .btn-outline-primary, .badge.bg-primary, .popover, .card,
   .modal-content) onto our design tokens.

   Bootstrap 5 hardcodes per-component variables inside each
   component's own selector, so :root-level token overrides in
   tokens.css don't reach them. This file is where we bridge
   our tokens INTO those component selectors.

   Load order: AFTER tokens.css and base.css, BEFORE feature
   files. Per-feature Bootstrap overrides (e.g. navbar, forms)
   live in their own feature files, not here.

   Reference: markdown/design/DESIGN_DECISIONS_CSS_REFACTOR.md
   ============================================================ */

.btn-primary {
    --bs-btn-bg: var(--color-accent);
    /* app1 — phosphor-on-midnight contract: text + outline always
       midnight regardless of theme. Bootstrap defaults btn-primary to
       white text, which goes invisible against bright phosphor green.
       Forcing midnight gives proper contrast in BOTH light and dark
       modes. */
    --bs-btn-color: var(--color-on-accent);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-disabled-color: var(--color-on-accent);
    /* app1 — 2px midnight outline carves the button into the surface.
       Replaces the default 1px same-color border (which disappeared
       against the bg). Visible in both themes. */
    --bs-btn-border-color: var(--color-accent-outline);
    --bs-btn-hover-border-color: var(--color-accent-outline);
    --bs-btn-active-border-color: var(--color-accent-outline);
    --bs-btn-disabled-border-color: var(--color-accent-outline);
    --bs-btn-border-width: 2px;
    --bs-btn-hover-bg: var(--color-accent-hover);
    --bs-btn-active-bg: var(--color-accent-hover);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* app1 — badge / pill components that take bg-primary or text-bg-primary
   inherit the same phosphor-on-midnight + 2px-outline contract so they
   carve cleanly against any backdrop. */
.badge.bg-primary,
.badge.text-bg-primary {
    color: var(--color-on-accent) !important;
    border: 2px solid var(--color-accent-outline);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-active-bg: var(--color-accent);
    --bs-btn-active-border-color: var(--color-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* ============================================================
   Bootstrap component overrides — pr6c spillover
   ============================================================
   Bootstrap 5 hardcodes per-component variables inside each
   component's own selector with literal values, so :root-level
   overrides don't reach them. We override the components we
   actually use here. The full sweep is pr6d's job; these are
   only the ones that broke visibly in dark mode.
   ============================================================ */

/* Popover — header background is hardcoded in Bootstrap, so we
   re-declare popover variables on the .popover selector. */
.popover {
    --bs-popover-bg: var(--color-bg-surface);
    --bs-popover-header-bg: var(--color-bg-subtle);
    --bs-popover-header-color: var(--color-text);
    --bs-popover-body-color: var(--color-text);
    --bs-popover-border-color: var(--color-border);
}

/* Card — Bootstrap's default sets --bs-card-bg to --bs-body-bg, which
   in our setup is the page background. We want cards to be raised
   surfaces, just like dashboard columns. */
.card {
    --bs-card-bg: var(--color-bg-surface);
    --bs-card-border-color: var(--color-border);
    --bs-card-color: var(--color-text);
}

/* Modal — same pattern as .card. Bootstrap declares modal variables
   on the .modal-content selector itself, hardcoded, so :root tokens
   don't reach them. Re-map to our surface tokens. */
.modal-content {
    --bs-modal-bg: var(--color-bg-surface);
    --bs-modal-border-color: transparent;
    --bs-modal-color: var(--color-text);
    /* Border becomes the glow instead. Setting the var to transparent
       and letting box-shadow do the work, rather than fighting Bootstrap's
       border declaration. */
}