/* =================================================================
   SQOUT Muted Color Palette
   Central color override file — loaded AFTER bootstrap.min.css
   to override Bootstrap's default bright colors with muted variants.

   Two themes, one token set. The light palette is scoped to
   :root, [data-bs-theme="light"] — on a bare :root it shadows
   Bootstrap's own dark block at equal specificity and dark mode
   renders light colours on a dark ground.

   Element rules below resolve through var(--…) only. The single
   exception is the TLP block, which is a FIRST TLP 2.0 handling
   label and must not follow the theme.

   See docs/sys_recoloring.md for the full analysis and rationale.
   ================================================================= */

:root,
[data-bs-theme="light"] {
    /* === Surface === */
    --bs-body-bg:            #ffffff;
    --bs-body-color:         #39434c;
    --bs-secondary-color:    #5a6570;
    --bs-border-color:       #dee2e6;

    /* === Raised surfaces. A card sits one step above the page ground; in light
       both are white, in dark they must not be, or every panel edge disappears. === */
    --sqout-surface:         #ffffff;
    --sqout-surface-alt:     #f8f9fa;
    --sqout-surface-sunken:  #f2f2f2;

    /* === Data-visualisation scales ===
       These name DATA, not chrome, so they are the one set of tokens that is deliberately
       identical in both themes and defined here only: a sweep cell means the same rate on
       either ground, and re-hueing it by theme would make two screenshots of one run
       disagree. `test_style_tokens.THEME_INDEPENDENT` carries the exemption.
       Ramp: Viridis, monotonic in relative luminance, so it still reads low-to-high in
       greyscale and for a dichromat — the red/blue ramp it replaces put both ends at the
       same lightness and had no direction at all.
       Series: ColorBrewer Dark2, categorical — chosen to stay apart from each other rather
       than to mean anything, so no run inherits a verdict from its position in the list. */
    --sqout-data-ramp-0:    #440154;
    --sqout-data-ramp-1:    #482878;
    --sqout-data-ramp-2:    #3e4989;
    --sqout-data-ramp-3:    #31688e;
    --sqout-data-ramp-4:    #26828e;
    --sqout-data-ramp-5:    #1f9e89;
    --sqout-data-ramp-6:    #35b779;
    --sqout-data-ramp-7:    #6ece58;
    --sqout-data-ramp-8:    #b5de2b;
    --sqout-data-ramp-9:    #fde725;
    --sqout-data-series-1:  #1b9e77;
    --sqout-data-series-2:  #d95f02;
    --sqout-data-series-3:  #7570b3;
    --sqout-data-series-4:  #e7298a;
    --sqout-data-series-5:  #66a61e;
    --sqout-data-series-6:  #e6ab02;

    /* Text and rules drawn on the always-dark navbar, which does not follow the theme */
    --sqout-on-dark-muted:   rgba(255, 255, 255, 0.75);
    --sqout-on-dark-divider: rgba(255, 255, 255, 0.8);

    --sqout-code-color:      #c63e1f;
    --sqout-shadow-sm:       rgba(0, 0, 0, 0.075);

    /* Membership badges. Neither hue exists in the semantic palette and both carry
       meaning the semantic colours would collide with. */
    --sqout-badge-admin:     #6b4a8a;
    --sqout-badge-expiring:  #c2661a;

    /* QAnalyser verdict grounds — semantic, not decorative */
    --sqout-verdict-safe:      #77ff8e;
    --sqout-verdict-mitigated: #93ff7e;
    --sqout-verdict-warn:      #f17676;
    --sqout-verdict-threat:    #f52f2f;

    /* Informational tints the app stylesheets used one-off literals for. Named rather
       than mapped onto --bs-info-bg-subtle because several are a *second* step of tint
       within one page and collapsing them would flatten the hierarchy they encode. */
    --sqout-tint-info:      #e6f3ff;
    --sqout-tint-info-edge: #99c2e6;
    --sqout-tint-neutral:   #f9f9f9;
    --sqout-tint-accent:    #eef4ff;
    --sqout-tint-caution:   #fffaf0;
    --sqout-text-subtle:    #7a869a;

    /* The log viewer is a terminal surface: a syntax scheme, not the semantic palette,
       and it is dark in BOTH themes because that is what a log pane is. */
    --sqout-log-bg:    #1e1e2e;
    --sqout-log-text:  #cdd6f4;
    --sqout-log-info:  #a0c8e0;
    --sqout-log-warn:  #ddd0a0;
    --sqout-log-error: #e8a0ac;
    --sqout-log-success: #a8d8b4;

    /* === Base semantic colors (muted versions of Bootstrap defaults) === */
    --bs-primary:     #3a6fa0;    /* was #0d6efd */
    --bs-secondary:   #5a6570;    /* was #6c757d */
    --bs-success:     #3a7a5c;    /* was #198754 */
    --bs-danger:      #a04050;    /* was #dc3545 */
    --bs-warning:     #b8942e;    /* was #ffc107 */
    --bs-info:        #4a8a9a;    /* was #0dcaf0 */
    --bs-dark:        #3a434a;    /* Q3/Decision 5 — judged on .badge.bg-dark */

    /* === RGB triplets (required for Bootstrap's rgba() usage) === */
    --bs-primary-rgb:     58, 111, 160;
    --bs-secondary-rgb:   90, 101, 112;
    --bs-success-rgb:     58, 122, 92;
    --bs-danger-rgb:      160, 64, 80;
    --bs-warning-rgb:     184, 148, 46;
    --bs-info-rgb:        74, 138, 154;
    --bs-dark-rgb:        58, 67, 74;

    /* === Subtle variants (badge/alert backgrounds — Bootstrap 5.3) === */
    --bs-primary-bg-subtle:       #d6e3f0;
    --bs-primary-text-emphasis:   #1e3a5c;
    --bs-primary-border-subtle:   #a8c4dc;

    --bs-success-bg-subtle:       #d5e8dd;
    --bs-success-text-emphasis:   #1e3e2e;
    --bs-success-border-subtle:   #a0c8b0;

    --bs-danger-bg-subtle:        #f0d5da;
    --bs-danger-text-emphasis:    #5a2030;
    --bs-danger-border-subtle:    #d4a0aa;

    --bs-warning-bg-subtle:       #f0e8cc;
    --bs-warning-text-emphasis:   #5a4410;
    --bs-warning-border-subtle:   #d4c48a;

    --bs-info-bg-subtle:          #d5e8ec;
    --bs-info-text-emphasis:      #1e3a40;
    --bs-info-border-subtle:      #a0c8d0;

    --bs-secondary-bg-subtle:     #e0e3e6;
    --bs-secondary-text-emphasis: #2a2f34;
    --bs-secondary-border-subtle: #b0b8c0;

    /* === SQOUT Custom Variables (for non-Bootstrap elements) === */
    --sqout-accent:         #4a7ab5;
    --sqout-accent-hover:   #3d6a9e;
    --sqout-accent-dark:    #345d8a;

    --sqout-danger-light:   #ffeef0;   /* hover backgrounds */
    --sqout-success-light:  #e8f5ec;
    --sqout-warning-light:  #fdf5e0;
    --sqout-info-light:     #e4f0f4;

    /* === Link colors (Bootstrap pre-computes these too) === */
    --bs-link-color:         #3a6fa0;   /* was #0d6efd */
    --bs-link-color-rgb:     58, 111, 160;
    --bs-link-hover-color:   #2e5880;   /* was #0a58ca */
    --bs-link-hover-color-rgb: 46, 88, 128;

    /* === Focus ring. Opaque so its contrast against the body ground is a
       property of the token rather than of whatever it happens to sit on
       (SC 1.4.11 wants >=3:1, and Bootstrap's translucent default is ~1.3:1
       over a dark ground). === */
    --sqout-focus-ring-color: #3a6fa0;
    --sqout-focus-ring-rgb:   58, 111, 160;
    /* Derived, never restated: the contrast bound is asserted on the opaque token above,
       and a literal here could drift away from the value that was measured. */
    --bs-focus-ring-color: rgba(var(--sqout-focus-ring-rgb), 0.25);

    /* === Form controls === */
    --sqout-input-focus-border: #8db3d0;   /* was #86b7fe */
    --sqout-selection-bg:       rgba(var(--sqout-focus-ring-rgb), 0.3);
    --sqout-check-border:       #8a939c;

    /* === Table variants (Bootstrap pre-computes from original blue) === */
    --sqout-table-primary-bg:      #d6e3f0;   /* was #cfe2ff */
    --sqout-table-primary-border:  #a8c4dc;   /* was #a6b5cc */
    --sqout-table-primary-striped: #ccdae8;   /* was #c5d7f2 */

    /* === Buttons. Bootstrap 5.3 compiles literal per-variant values into
       .btn-*, so they inherit nothing from --bs-primary and each needs its
       own token. hover-border and active-border are deliberately not
       separate tokens: the 3px difference they carried was invisible. === */
    --sqout-btn-color: #ffffff;

    /* Foreground for a SEMANTIC ground (--bs-success/-warning/-info/…). Those grounds
       lighten in dark, so a near-white text on them drops to ~1.7:1; this flips instead. */
    --sqout-on-accent: #ffffff;

    /* The warning ground is light in BOTH themes (#b8942e / #d9bd6a), so its foreground
       is dark in both — white measures 2.87 on it in light. One of the few pairs where
       the correct value genuinely does not change with the theme. */
    --sqout-on-tint: #212529;

    --sqout-btn-primary-bg:          #3a6fa0;
    --sqout-btn-primary-hover-bg:    #315e88;
    --sqout-btn-primary-active-bg:   #2e5880;

    --sqout-btn-secondary-bg:        #5a6570;
    --sqout-btn-secondary-hover-bg:  #4c555f;
    --sqout-btn-secondary-active-bg: #485059;

    --sqout-btn-success-bg:          #3a7a5c;
    --sqout-btn-success-hover-bg:    #31674e;
    --sqout-btn-success-active-bg:   #2e6149;

    --sqout-btn-danger-bg:           #a04050;
    --sqout-btn-danger-hover-bg:     #883644;
    --sqout-btn-danger-active-bg:    #803340;

    --sqout-btn-warning-bg:          #b8942e;
    --sqout-btn-warning-hover-bg:    #9c7d27;
    --sqout-btn-warning-active-bg:   #937624;

    --sqout-btn-info-bg:             #4a8a9a;
    --sqout-btn-info-hover-bg:       #3e7582;
    --sqout-btn-info-active-bg:      #3b6e7b;

    --sqout-btn-dark-bg:             #3a434a;
    --sqout-btn-dark-hover-bg:       #31383e;
    --sqout-btn-dark-active-bg:      #2c3338;
}

/* =================================================================
   Dark theme — the same property set, re-chosen against a dark
   ground. Nothing here is a copy of its light counterpart; a copied
   value renders a light page under a dark attribute.
   ================================================================= */
[data-bs-theme="dark"] {
    /* === Surface === */
    --bs-body-bg:            #1b1f23;
    --bs-body-color:         #e4e7ea;
    --bs-secondary-color:    #a8b1b9;
    --bs-border-color:       #3a4149;

    /* === Raised surfaces === */
    --sqout-surface:         #22272c;
    --sqout-surface-alt:     #262c31;
    --sqout-surface-sunken:  #1a1e22;

    --sqout-on-dark-muted:   rgba(255, 255, 255, 0.68);
    --sqout-on-dark-divider: rgba(255, 255, 255, 0.28);

    --sqout-code-color:      #e8907a;
    --sqout-shadow-sm:       rgba(0, 0, 0, 0.45);   /* a dark ground needs a deeper shadow to read at all */

    --sqout-badge-admin:     #9b7bbd;
    --sqout-badge-expiring:  #d98a45;


    /* Verdict grounds carry white-ish text here, so they darken rather than lighten */
    --sqout-verdict-safe:      #1f5a33;
    --sqout-verdict-mitigated: #2a5f28;
    --sqout-verdict-warn:      #6b2c2c;
    --sqout-verdict-threat:    #8a1f1f;

    --sqout-tint-info:      #17293a;
    --sqout-tint-info-edge: #2f4d69;
    --sqout-tint-neutral:   #202428;
    --sqout-tint-accent:    #1a2433;
    --sqout-tint-caution:   #2b2617;
    --sqout-text-subtle:    #8b95a3;

    --sqout-log-bg:    #16161f;
    --sqout-log-text:  #dbe3f7;
    --sqout-log-info:  #b0d4e8;
    --sqout-log-warn:  #e6dcb0;
    --sqout-log-error: #f0b4bd;
    --sqout-log-success: #b8e4c4;

    /* === Base semantic colors, lightened to carry on the dark ground === */
    --bs-primary:     #7aa7d6;
    --bs-secondary:   #98a2ac;
    --bs-success:     #6bb491;
    --bs-danger:      #d98a97;
    --bs-warning:     #d9bd6a;
    --bs-info:        #84bfcd;
    --bs-dark:        #2a3036;    /* still the darkest surface, one step below body */

    /* === RGB triplets === */
    --bs-primary-rgb:     122, 167, 214;
    --bs-secondary-rgb:   152, 162, 172;
    --bs-success-rgb:     107, 180, 145;
    --bs-danger-rgb:      217, 138, 151;
    --bs-warning-rgb:     217, 189, 106;
    --bs-info-rgb:        132, 191, 205;
    --bs-dark-rgb:        42, 48, 54;

    /* === Subtle variants — dark ground, light emphasis text === */
    --bs-primary-bg-subtle:       #16283a;
    --bs-primary-text-emphasis:   #aac9e8;
    --bs-primary-border-subtle:   #2c4a6b;

    --bs-success-bg-subtle:       #163024;
    --bs-success-text-emphasis:   #a5d8bd;
    --bs-success-border-subtle:   #2c5741;

    --bs-danger-bg-subtle:        #3a1a20;
    --bs-danger-text-emphasis:    #e8b0ba;
    --bs-danger-border-subtle:    #6b3038;

    --bs-warning-bg-subtle:       #33290e;
    --bs-warning-text-emphasis:   #e6d199;
    --bs-warning-border-subtle:   #6b5620;

    --bs-info-bg-subtle:          #142e33;
    --bs-info-text-emphasis:      #aad8e0;
    --bs-info-border-subtle:      #2a545c;

    --bs-secondary-bg-subtle:     #24292e;
    --bs-secondary-text-emphasis: #c4cbd2;
    --bs-secondary-border-subtle: #454d55;

    /* === SQOUT Custom Variables === */
    --sqout-accent:         #8ab0dc;
    --sqout-accent-hover:   #a3c2e6;
    --sqout-accent-dark:    #6d95c4;

    --sqout-danger-light:   #33191d;   /* hover backgrounds */
    --sqout-success-light:  #16291f;
    --sqout-warning-light:  #2e2711;
    --sqout-info-light:     #16292e;

    /* === Link colors === */
    --bs-link-color:         #7fb0e0;
    --bs-link-color-rgb:     127, 176, 224;
    --bs-link-hover-color:   #a3c8ec;
    --bs-link-hover-color-rgb: 163, 200, 236;

    /* === Focus ring === */
    --sqout-focus-ring-color: #7fb0e0;
    --sqout-focus-ring-rgb:   127, 176, 224;
    --bs-focus-ring-color: rgba(var(--sqout-focus-ring-rgb), 0.35);

    /* === Form controls === */
    --sqout-input-focus-border: #5c86b4;
    --sqout-selection-bg:       rgba(var(--sqout-focus-ring-rgb), 0.35);
    --sqout-check-border:       #7d8892;

    /* === Table variants === */
    --sqout-table-primary-bg:      #1c3348;
    --sqout-table-primary-border:  #2c4a6b;
    --sqout-table-primary-striped: #223b53;

    /* === Buttons. Solid grounds stay saturated enough to hold white-ish
       text; hover moves *up* the scale here, not down, because darkening a
       button on a dark page reads as disabled rather than as pressed. === */
    --sqout-btn-color: #f2f4f6;   /* not pure white: it haloes on dark grounds */
    --sqout-on-accent: #212529;

    --sqout-btn-primary-bg:          #3f79ad;
    --sqout-btn-primary-hover-bg:    #4b8ac2;
    --sqout-btn-primary-active-bg:   #5697cf;

    --sqout-btn-secondary-bg:        #5f6b77;
    --sqout-btn-secondary-hover-bg:  #6e7b88;
    --sqout-btn-secondary-active-bg: #7b8794;

    --sqout-btn-success-bg:          #3f8564;
    --sqout-btn-success-hover-bg:    #4a9874;
    --sqout-btn-success-active-bg:   #55a681;

    --sqout-btn-danger-bg:           #ad4657;
    --sqout-btn-danger-hover-bg:     #c25265;
    --sqout-btn-danger-active-bg:    #cf5f71;

    --sqout-btn-warning-bg:          #a37f22;
    --sqout-btn-warning-hover-bg:    #ba9229;
    --sqout-btn-warning-active-bg:   #cca231;

    --sqout-btn-info-bg:             #4f95a6;
    --sqout-btn-info-hover-bg:       #5aa8ba;
    --sqout-btn-info-active-bg:      #66b6c8;

    --sqout-btn-dark-bg:             #2a3036;
    --sqout-btn-dark-hover-bg:       #353c43;
    --sqout-btn-dark-active-bg:      #414951;
}

/* =================================================================
   Form controls — Bootstrap hardcodes the focus border & shadow
   ================================================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--sqout-input-focus-border);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* An unchecked box inherits --bs-border-color, which is tuned for a rule between table
   rows, not for a 1em control that has to be found on an empty row. In dark mode that is
   #3a4149 on #212529 — the checkbox is present, clickable and invisible. */
.form-check-input:not(:checked):not(:indeterminate) {
    border-color: var(--sqout-check-border);
}

.form-check-input:focus {
    border-color: var(--sqout-input-focus-border);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* Select option highlight — accent-color controls checkboxes, radios,
   range sliders and progress elements. For multi-select option highlight
   we use ::selection and option:checked. */
select,
.form-select,
.form-control,
.form-check-input {
    accent-color: var(--bs-primary);
}

/* Multi-select option styling (Chromium/Firefox) */
select option:checked,
.form-select option:checked {
    background: var(--sqout-btn-primary-bg);
    color: var(--sqout-btn-color);
}

/* Text selection highlight across the app */
::selection {
    background-color: var(--sqout-selection-bg);
    color: inherit;
}

/* List group active items — hardcoded #0d6efd in Bootstrap */
.list-group {
    --bs-list-group-active-bg: var(--sqout-btn-primary-bg);
    --bs-list-group-active-border-color: var(--sqout-btn-primary-bg);
}

/* Nav pills active state */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--sqout-btn-primary-bg);
}

/* Dropdown menu active item — the bright blue background on selected submenu items */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--sqout-btn-primary-bg);
}

/* Pagination active state — hardcoded #0d6efd */
.pagination {
    --bs-pagination-active-bg: var(--sqout-btn-primary-bg);
    --bs-pagination-active-border-color: var(--sqout-btn-primary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Accordion focus state — hardcoded #86b7fe border and bright blue shadow */
.accordion {
    --bs-accordion-btn-focus-border-color: var(--sqout-input-focus-border);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Info and warning are LIGHT grounds in both themes (info 3.89/2.04 against white, warning
   2.87/1.84), so they take the dark foreground in both — the note this rule used to carry
   said the muted colours were dark enough for white text, which stopped being true. */
.badge.bg-info {
    color: var(--sqout-on-tint) !important;
}
.badge.bg-warning {
    color: var(--sqout-on-tint) !important;
}

/* Bootstrap redefines neither --bs-white-rgb nor --bs-light-rgb in its dark block, so both
   utilities stay near-white on a dark ground and carry body text at 1.24:1. As a surface they
   mean "one step off the page"; an element pinning its own foreground compensates already. */
[data-bs-theme="dark"] .bg-white:not(.text-dark):not(.text-black) {
    background-color: var(--sqout-surface) !important;
}

[data-bs-theme="dark"] .bg-light:not(.text-dark):not(.text-black) {
    background-color: var(--sqout-surface-alt) !important;
}

/* The home admin bar is a solid --bs-primary ground, and that token lightens in dark, so its
   foreground flips rather than staying near-white (2.29:1). */
.home-admin-bar {
    background-color: var(--bs-primary);
    color: var(--sqout-on-accent);
}

.home-admin-bar .btn-outline-light {
    --bs-btn-color: var(--sqout-on-accent);
    --bs-btn-border-color: var(--sqout-on-accent);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--sqout-on-accent);
    --bs-btn-hover-border-color: var(--sqout-on-accent);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--sqout-on-accent);
    --bs-btn-active-border-color: var(--sqout-on-accent);
}

/* TLP badges — FIRST TLP 2.0 standard: label colour on black */
.tlp-badge {
    background-color: #000000;
    color: #ffffff;
}
.tlp-badge.tlp-red {
    color: #ff2b2b;
}
.tlp-badge.tlp-amber,
.tlp-badge.tlp-amber_strict {
    color: #ffc000;
}
.tlp-badge.tlp-green {
    color: #33ff00;
}

/* Table variant colors — Bootstrap pre-computes from original blue */
/* Bootstrap's contextual .table-* classes are literal: a pale ground with #000 on it, and no
   dark counterpart. The ground was tokenised here and the foreground was not, which left black
   on the dark navy at 1.62:1. */
.table-primary {
    --bs-table-bg: var(--sqout-table-primary-bg);
    --bs-table-border-color: var(--sqout-table-primary-border);
    --bs-table-striped-bg: var(--sqout-table-primary-striped);
    --bs-table-color: var(--bs-primary-text-emphasis);
    --bs-table-striped-color: var(--bs-primary-text-emphasis);
    --bs-table-active-color: var(--bs-primary-text-emphasis);
    --bs-table-hover-color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--sqout-surface-alt);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: var(--sqout-surface);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: var(--sqout-surface);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--sqout-surface);
}

[data-bs-theme="dark"] .table-success {
    --bs-table-color: var(--bs-success-text-emphasis);
    --bs-table-bg: var(--bs-success-bg-subtle);
    --bs-table-border-color: var(--bs-success-border-subtle);
    --bs-table-striped-color: var(--bs-success-text-emphasis);
    --bs-table-striped-bg: var(--bs-success-bg-subtle);
    --bs-table-active-color: var(--bs-success-text-emphasis);
    --bs-table-active-bg: var(--bs-success-border-subtle);
    --bs-table-hover-color: var(--bs-success-text-emphasis);
    --bs-table-hover-bg: var(--bs-success-border-subtle);
}

[data-bs-theme="dark"] .table-danger {
    --bs-table-color: var(--bs-danger-text-emphasis);
    --bs-table-bg: var(--bs-danger-bg-subtle);
    --bs-table-border-color: var(--bs-danger-border-subtle);
    --bs-table-striped-color: var(--bs-danger-text-emphasis);
    --bs-table-striped-bg: var(--bs-danger-bg-subtle);
    --bs-table-active-color: var(--bs-danger-text-emphasis);
    --bs-table-active-bg: var(--bs-danger-border-subtle);
    --bs-table-hover-color: var(--bs-danger-text-emphasis);
    --bs-table-hover-bg: var(--bs-danger-border-subtle);
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-color: var(--bs-warning-text-emphasis);
    --bs-table-bg: var(--bs-warning-bg-subtle);
    --bs-table-border-color: var(--bs-warning-border-subtle);
    --bs-table-striped-color: var(--bs-warning-text-emphasis);
    --bs-table-striped-bg: var(--bs-warning-bg-subtle);
    --bs-table-active-color: var(--bs-warning-text-emphasis);
    --bs-table-active-bg: var(--bs-warning-border-subtle);
    --bs-table-hover-color: var(--bs-warning-text-emphasis);
    --bs-table-hover-bg: var(--bs-warning-border-subtle);
}

[data-bs-theme="dark"] .table-info {
    --bs-table-color: var(--bs-info-text-emphasis);
    --bs-table-bg: var(--bs-info-bg-subtle);
    --bs-table-border-color: var(--bs-info-border-subtle);
    --bs-table-striped-color: var(--bs-info-text-emphasis);
    --bs-table-striped-bg: var(--bs-info-bg-subtle);
    --bs-table-active-color: var(--bs-info-text-emphasis);
    --bs-table-active-bg: var(--bs-info-border-subtle);
    --bs-table-hover-color: var(--bs-info-text-emphasis);
    --bs-table-hover-bg: var(--bs-info-border-subtle);
}

/* Select2 4.0.13 (Django admin's copy) marks rows with aria-selected, not the 4.1 classes */
html .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bs-secondary-bg);
}

html .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sqout-btn-primary-bg);
    color: var(--sqout-btn-color);
}

/* Select2 focus border */
/* select2 paints its own light surfaces, and create_edit.html puts it on every
   `select[multiple]`. The vendor sheet arrives with the form media, LONG after this file, so
   an equal-specificity override loses: the `html` prefix is what makes these apply at all. */
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
    background-color: var(--sqout-surface);
    border-color: var(--bs-border-color);
}

html .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

html .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

html .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--bs-secondary-color);
}

html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--bs-secondary-color);
}

html .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--sqout-surface-sunken);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html .select2-container--default .select2-selection__clear {
    color: var(--bs-secondary-color);
}

html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--bs-body-color);
}

html .select2-dropdown {
    background-color: var(--sqout-surface);
    border-color: var(--bs-border-color);
}

html .select2-container--default.select2-container--disabled .select2-selection--single,
html .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--sqout-surface-alt);
}

html .select2-container--default .select2-results__option {
    color: var(--bs-body-color);
}

html .select2-search--dropdown .select2-search__field {
    background-color: var(--sqout-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--sqout-input-focus-border);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* =================================================================
   Button overrides
   Bootstrap 5.3 buttons use pre-computed internal variables
   (--bs-btn-bg, etc.) that don't inherit from --bs-primary.
   We must override each variant explicitly.

   --bs-btn-focus-shadow-rgb is the one focus ring for every variant
   rather than a per-variant tint: SC 1.4.11 asks for a ring whose
   contrast is known, and one token is the only way to assert it.
   ================================================================= */

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

.btn-secondary {
    --bs-btn-color: var(--sqout-btn-color);
    --bs-btn-bg: var(--sqout-btn-secondary-bg);
    --bs-btn-border-color: var(--sqout-btn-secondary-bg);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-secondary-hover-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-secondary-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-secondary-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-secondary-active-bg);
    --bs-btn-disabled-color: var(--sqout-btn-color);
    --bs-btn-disabled-bg: var(--sqout-btn-secondary-bg);
    --bs-btn-disabled-border-color: var(--sqout-btn-secondary-bg);
}

.btn-success {
    --bs-btn-color: var(--sqout-btn-color);
    --bs-btn-bg: var(--sqout-btn-success-bg);
    --bs-btn-border-color: var(--sqout-btn-success-bg);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-success-hover-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-success-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-success-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-success-active-bg);
    --bs-btn-disabled-color: var(--sqout-btn-color);
    --bs-btn-disabled-bg: var(--sqout-btn-success-bg);
    --bs-btn-disabled-border-color: var(--sqout-btn-success-bg);
}

.btn-danger {
    --bs-btn-color: var(--sqout-btn-color);
    --bs-btn-bg: var(--sqout-btn-danger-bg);
    --bs-btn-border-color: var(--sqout-btn-danger-bg);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-danger-hover-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-danger-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-danger-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-danger-active-bg);
    --bs-btn-disabled-color: var(--sqout-btn-color);
    --bs-btn-disabled-bg: var(--sqout-btn-danger-bg);
    --bs-btn-disabled-border-color: var(--sqout-btn-danger-bg);
}

.btn-warning {
    --bs-btn-color: var(--sqout-btn-color);
    --bs-btn-bg: var(--sqout-btn-warning-bg);
    --bs-btn-border-color: var(--sqout-btn-warning-bg);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-warning-hover-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-warning-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-warning-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-warning-active-bg);
    --bs-btn-disabled-color: var(--sqout-btn-color);
    --bs-btn-disabled-bg: var(--sqout-btn-warning-bg);
    --bs-btn-disabled-border-color: var(--sqout-btn-warning-bg);
}

.btn-info {
    --bs-btn-color: var(--sqout-btn-color);
    --bs-btn-bg: var(--sqout-btn-info-bg);
    --bs-btn-border-color: var(--sqout-btn-info-bg);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-info-hover-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-info-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-info-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-info-active-bg);
    --bs-btn-disabled-color: var(--sqout-btn-color);
    --bs-btn-disabled-bg: var(--sqout-btn-info-bg);
    --bs-btn-disabled-border-color: var(--sqout-btn-info-bg);
}

.btn-dark {
    --bs-btn-color: var(--sqout-btn-color);
    --bs-btn-bg: var(--sqout-btn-dark-bg);
    --bs-btn-border-color: var(--sqout-btn-dark-bg);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-dark-hover-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-dark-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-dark-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-dark-active-bg);
    --bs-btn-disabled-color: var(--sqout-btn-color);
    --bs-btn-disabled-bg: var(--sqout-btn-dark-bg);
    --bs-btn-disabled-border-color: var(--sqout-btn-dark-bg);
}

/* Outline button variants */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-primary-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-primary-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-primary-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-primary-active-bg);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-secondary-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-secondary-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-secondary-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-secondary-active-bg);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-success-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-success-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-success-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-success-active-bg);
    --bs-btn-disabled-color: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-danger-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-danger-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-danger-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-danger-active-bg);
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-warning-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-warning-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-warning-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-warning-active-bg);
    --bs-btn-disabled-color: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-info-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-info-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-info-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-info-active-bg);
    --bs-btn-disabled-color: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-outline-dark {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--sqout-btn-color);
    --bs-btn-hover-bg: var(--sqout-btn-dark-bg);
    --bs-btn-hover-border-color: var(--sqout-btn-dark-bg);
    --bs-btn-focus-shadow-rgb: var(--sqout-focus-ring-rgb);
    --bs-btn-active-color: var(--sqout-btn-color);
    --bs-btn-active-bg: var(--sqout-btn-dark-active-bg);
    --bs-btn-active-border-color: var(--sqout-btn-dark-active-bg);
    --bs-btn-disabled-color: var(--bs-body-color);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}