/* threshold-bootstrap.css — Bootstrap 5.3+ theme-variable override layer.
   --------------------------------------------------------------------
   Load order: bootstrap.min.css → threshold-tokens.css → THIS FILE →
   DevExpress base theme (office-white) → threshold-devexpress.css.

   Strategy per design handoff BOOTSTRAP_PORTING.md and ADR-0035:
   Bootstrap atoms (.btn, .form-control, .badge, .alert, .modal, .dropdown,
   .nav, .table, .breadcrumb, grid utilities) keep their structure; only
   the underlying --bs-* CSS custom properties are remapped to read from
   Threshold tokens. Bootstrap renders in Threshold's visual language
   because the values it consumes resolve through the Threshold tokens.

   Hard rules enforced here:
   - HR5: $success→--ok, $warning→--warn, $danger→--risk, $info→--advant.
   - HR6: --marigold-deep has NO Bootstrap theme-color slot. No
          text-copper / bg-copper / btn-copper. Copper is referenced by
          CSS variable name only at the chrome-component level.
   - HR7: --xr-bind has NO Bootstrap theme-color slot. No utility class
          for it; the oxblood rule is hand-placed by the chrome CSS.
   - HR8: data-theme and data-bs-theme are written in sync; both light
          and dark blocks below mirror each other.

   sRGB approximations for *-rgb tokens follow the handoff's
   threshold-devexpress-blazor.css and threshold-chart-palette.js.
   Imprecision in the lower-traffic status colors is acceptable —
   they only surface in rgba() utility usage. */

/* ====================================================================
   Light mode — :root selector matches the no-attribute case as a
   defensive default; the [data-bs-theme="light"] selector is the
   authoritative source when the attribute is set explicitly by the
   pre-paint script.
   ==================================================================== */
:root,
[data-bs-theme="light"] {
    /* — Brand palette — */
    --bs-primary:                 var(--th-advant);
    --bs-primary-rgb:             42, 111, 219;
    --bs-primary-bg-subtle:       var(--th-advant-soft);
    --bs-primary-text-emphasis:   var(--th-advant-deep);
    --bs-primary-border-subtle:   var(--th-line-2);

    /* HR5 status mapping. */
    --bs-success:                 var(--th-ok);
    --bs-success-rgb:             50, 145, 95;
    --bs-success-bg-subtle:       var(--th-ok-soft);
    --bs-success-text-emphasis:   var(--th-ok);
    --bs-success-border-subtle:   var(--th-line-2);

    --bs-warning:                 var(--th-warn);
    --bs-warning-rgb:             213, 165, 75;
    --bs-warning-bg-subtle:       var(--th-warn-soft);
    --bs-warning-text-emphasis:   var(--th-warn);
    --bs-warning-border-subtle:   var(--th-line-2);

    --bs-danger:                  var(--th-risk);
    --bs-danger-rgb:              215, 90, 75;
    --bs-danger-bg-subtle:        var(--th-risk-soft);
    --bs-danger-text-emphasis:    var(--th-risk);
    --bs-danger-border-subtle:    var(--th-line-2);

    --bs-info:                    var(--th-advant);
    --bs-info-rgb:                42, 111, 219;
    --bs-info-bg-subtle:          var(--th-advant-soft);
    --bs-info-text-emphasis:      var(--th-advant-deep);
    --bs-info-border-subtle:      var(--th-line-2);

    /* HR6: --marigold-deep is intentionally NOT mapped here. No copper
       theme-color slot. HR7: --xr-bind is intentionally NOT mapped here.
       Both are referenced by variable name in chrome CSS only. */

    --bs-secondary:               var(--th-ink-3);
    --bs-secondary-rgb:           109, 121, 138;
    --bs-secondary-bg-subtle:     var(--th-paper-2);
    --bs-secondary-text-emphasis: var(--th-ink-2);
    --bs-secondary-border-subtle: var(--th-line);

    --bs-dark:                    var(--th-ink);
    --bs-dark-rgb:                34, 38, 50;

    /* — Surface — */
    --bs-body-bg:                 var(--th-paper);
    --bs-body-bg-rgb:             248, 249, 249;
    --bs-secondary-bg:            var(--th-paper-2);
    --bs-secondary-bg-rgb:        243, 244, 246;
    --bs-tertiary-bg:             var(--th-paper-3);
    --bs-tertiary-bg-rgb:         235, 237, 240;
    --bs-emphasis-color:          var(--th-ink);

    /* — Ink — */
    --bs-body-color:              var(--th-ink);
    --bs-body-color-rgb:          34, 38, 50;
    --bs-secondary-color:         var(--th-ink-2);
    --bs-secondary-color-rgb:     78, 84, 95;
    --bs-tertiary-color:          var(--th-ink-3);
    --bs-tertiary-color-rgb:      109, 121, 138;
    --bs-link-color:              var(--th-advant);
    --bs-link-color-rgb:          42, 111, 219;
    --bs-link-hover-color:        var(--th-advant-deep);
    --bs-link-hover-color-rgb:    32, 75, 165;

    /* — Borders / radii — */
    --bs-border-color:            var(--th-line);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
    --bs-border-width:            1px;
    --bs-border-radius:           var(--th-radius-3);
    --bs-border-radius-sm:        var(--th-radius-2);
    --bs-border-radius-lg:        var(--th-radius-5);
    --bs-border-radius-xl:        var(--th-radius-8);
    --bs-border-radius-pill:      var(--th-radius-pill);

    /* — Typography — */
    --bs-body-font-family:        var(--th-font-sans);
    --bs-font-monospace:          var(--th-font-mono);
    --bs-body-font-size:          var(--th-size-14);
    --bs-body-font-weight:        400;
    --bs-body-line-height:        1.5;

    /* — Form controls / focus — */
    --bs-form-control-bg:         var(--th-paper);
    --bs-form-control-color:      var(--th-ink);
    --bs-form-control-disabled-bg: var(--th-paper-2);

    /* — Code / kbd — */
    --bs-code-color:              var(--th-advant-deep);
}

/* ====================================================================
   Dark mode — warm-dark substrate per ADR-0035 §11 + Threshold tokens.
   Mirrors the light block above; threshold-tokens.css already redeclares
   --paper / --ink / --line / etc. under [data-theme="dark"], so the
   var() references below resolve to the dark values automatically.
   The repeated overrides here are for Bootstrap's own per-theme tokens
   that exist as separate --bs-* values rather than reading through the
   underlying tokens (the *-rgb variants, the *-bg-subtle family, etc.).
   ==================================================================== */
[data-bs-theme="dark"] {
    --bs-primary:                 var(--th-advant);
    --bs-primary-rgb:             114, 168, 245;
    --bs-primary-bg-subtle:       var(--th-advant-soft);
    --bs-primary-text-emphasis:   var(--th-advant-deep);
    --bs-primary-border-subtle:   var(--th-line-2);

    --bs-success:                 var(--th-ok);
    --bs-success-rgb:             120, 200, 155;
    --bs-success-bg-subtle:       var(--th-ok-soft);
    --bs-success-text-emphasis:   var(--th-ok);
    --bs-success-border-subtle:   var(--th-line-2);

    --bs-warning:                 var(--th-warn);
    --bs-warning-rgb:             230, 200, 130;
    --bs-warning-bg-subtle:       var(--th-warn-soft);
    --bs-warning-text-emphasis:   var(--th-warn);
    --bs-warning-border-subtle:   var(--th-line-2);

    --bs-danger:                  var(--th-risk);
    --bs-danger-rgb:              240, 140, 130;
    --bs-danger-bg-subtle:        var(--th-risk-soft);
    --bs-danger-text-emphasis:    var(--th-risk);
    --bs-danger-border-subtle:    var(--th-line-2);

    --bs-info:                    var(--th-advant);
    --bs-info-rgb:                114, 168, 245;
    --bs-info-bg-subtle:          var(--th-advant-soft);
    --bs-info-text-emphasis:      var(--th-advant-deep);
    --bs-info-border-subtle:      var(--th-line-2);

    --bs-secondary:               var(--th-ink-3);
    --bs-secondary-rgb:           150, 145, 130;
    --bs-secondary-bg-subtle:     var(--th-paper-2);
    --bs-secondary-text-emphasis: var(--th-ink-2);
    --bs-secondary-border-subtle: var(--th-line);

    --bs-dark:                    var(--th-ink);
    --bs-dark-rgb:                239, 235, 220;

    --bs-body-bg:                 var(--th-paper);
    --bs-body-bg-rgb:             40, 35, 25;
    --bs-secondary-bg:            var(--th-paper-2);
    --bs-secondary-bg-rgb:        52, 47, 35;
    --bs-tertiary-bg:             var(--th-paper-3);
    --bs-tertiary-bg-rgb:         32, 28, 20;
    --bs-emphasis-color:          var(--th-ink);

    --bs-body-color:              var(--th-ink);
    --bs-body-color-rgb:          239, 235, 220;
    --bs-secondary-color:         var(--th-ink-2);
    --bs-secondary-color-rgb:     180, 175, 160;
    --bs-tertiary-color:          var(--th-ink-3);
    --bs-tertiary-color-rgb:      135, 130, 115;
    --bs-link-color:              var(--th-advant);
    --bs-link-color-rgb:          114, 168, 245;
    --bs-link-hover-color:        var(--th-advant-deep);
    --bs-link-hover-color-rgb:    175, 200, 245;

    --bs-border-color:            var(--th-line);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);

    --bs-form-control-bg:         var(--th-paper);
    --bs-form-control-color:      var(--th-ink);
    --bs-form-control-disabled-bg: var(--th-paper-2);

    --bs-code-color:              var(--th-advant);
}

/* ====================================================================
   Atom-level chrome refinements — keep Bootstrap's structure, refine
   the visual treatment to match Threshold's hairline language. Things
   that would require SCSS partials to express (flag-set toggles like
   $enable-shadows: false) get neutralized here as runtime overrides.
   ==================================================================== */

/* Suppress drop shadows. Threshold is a hairline language, not a
   shadow language. Bootstrap utility .shadow* and component shadow
   defaults are zeroed; only modal/popover backdrop shadow remains
   (set on the component directly). */
.btn,
.card,
.dropdown-menu,
.form-control,
.form-select {
    box-shadow: none;
}

/* Tighten the corner radii on common atoms — Bootstrap defaults to
   0.375rem; Threshold's atoms read tighter (3px / var(--th-radius-3)). The
   token overrides above already cover this for components that read
   --bs-border-radius, but a few component sub-pieces (close button,
   form-check) carry hardcoded values worth pinning explicitly. */
.btn { border-radius: var(--th-radius-3); }
.btn-sm { border-radius: var(--th-radius-2); }
.btn-lg { border-radius: var(--th-radius-5); }

/* Buttons — refine padding so .btn doesn't render larger than the
   chrome's typical icon-button footprint. Bootstrap's defaults are
   sized for SaaS apps with a denser footprint than Threshold. */
.btn {
    padding: 5px 11px;
    font-size: var(--th-size-13);
    font-weight: 500;
    line-height: 1.4;
}

.btn-primary {
    background-color: var(--th-advant-deep);
    border-color: var(--th-advant-deep);
    color: var(--th-advant-fg);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--th-advant);
    border-color: var(--th-advant);
    color: var(--th-advant-fg);
}

.btn-outline-secondary {
    background-color: var(--th-paper-sunk);
    border-color: var(--th-line-2);
    color: var(--th-ink);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background-color: var(--th-paper-2);
    border-color: var(--th-ink-4);
    color: var(--th-ink);
}

/* Form controls — single hairline, focused state uses --advant-soft
   ring rather than Bootstrap's default heavier glow. */
.form-control,
.form-select {
    background-color: var(--th-paper);
    border: 1px solid var(--th-line-2);
    color: var(--th-ink);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--th-advant);
    box-shadow: 0 0 0 3px var(--th-advant-soft);
    outline: none;
}

/* Tables — hairline rows, no zebra by default; .table-striped users
   get --bs-secondary-bg. */
.table {
    --bs-table-color: var(--th-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--th-line-soft);
    --bs-table-striped-bg: var(--th-paper-2);
    --bs-table-hover-bg: var(--th-paper-2);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--th-line-soft);
}

/* Breadcrumbs — small caps muted separators per Threshold chrome. */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--th-ink-4);
    --bs-breadcrumb-item-active-color: var(--th-ink-3);
    font-size: var(--th-size-12);
}

/* Modals — opaque paper-sunk surface, hairline border, single shadow
   for elevation. */
.modal-content {
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
[data-bs-theme="dark"] .modal-content {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.modal-header,
.modal-footer {
    border-color: var(--th-line);
}

/* Alerts — hairline border, paper-sunk surface variant per status. */
.alert {
    border-radius: var(--th-radius-3);
    border-width: 1px;
}

/* Dropdown menus — hairline border, paper-sunk surface, popup shadow. */
.dropdown-menu {
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    color: var(--th-ink);
}
[data-bs-theme="dark"] .dropdown-menu {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.dropdown-item {
    color: var(--th-ink);
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: var(--th-paper-2);
    color: var(--th-ink);
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--th-advant-soft);
    color: var(--th-advant-deep);
}

/* Pills / badges — text-bg-* utilities resolve through the *-bg-subtle
   tokens overridden above; the .badge component itself stays. */
.badge {
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Nav / nav-pills active state — pick up --advant rather than Bootstrap
   default. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--th-advant);
    color: var(--th-advant-fg);
}

/* Card — Threshold's hairline language: thin border, no shadow. */
.card {
    background-color: var(--th-paper-sunk);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    color: var(--th-ink);
}
.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--th-line);
}

/* List groups — same hairline language. */
.list-group {
    border-radius: var(--th-radius-3);
    --bs-list-group-color: var(--th-ink);
    --bs-list-group-bg: var(--th-paper-sunk);
    --bs-list-group-border-color: var(--th-line);
    --bs-list-group-action-hover-bg: var(--th-paper-2);
    --bs-list-group-active-bg: var(--th-advant);
    --bs-list-group-active-border-color: var(--th-advant);
}