/* ============================================================================
   Echobot Theme  —  applied Dashmix theme layer (overrides xplay)
   ----------------------------------------------------------------------------
   Load order (see _Layout.cshtml): bootstrap -> dashmix.min -> themes/xplay.min
   -> THIS FILE -> site.css (app chrome only).

   This is the single, tweakable source of truth for the app's brand + semantic
   palette. Everything is expressed through the design tokens in the :root block
   below — change a token here and the whole app re-themes (style guide at
   /Account/StyleGuide renders these live; full class catalog at /Account/Components).

   Token naming: --eb-<role>[-<stop>]. Roles:
     primary  — xplay brand brick-red (Bootstrap --bs-primary)
     action   — "echoblue", the primary ACTION color (.btn-echoblue et al.)
     admin    — admin/elevated purple (reserved)
     neutral  — medium-gray utility button
     surface  — structural tokens (card bg, borders, radius, page bg)
     semantic — success / info / warning / danger (Bootstrap passthrough)
   ============================================================================ */

:root {
    /* ── Brand / primary (xplay brick-red) ───────────────────────────────── */
    --eb-primary: #c74433;
    --eb-primary-rgb: 199, 68, 51;
    --eb-primary-light: #d66e61;
    --eb-primary-hover: #a8392b;

    /* ── Action (echoblue) — the primary action color ────────────────────── */
    --eb-action: #338bd2;
    --eb-action-rgb: 51, 139, 210;
    --eb-action-hover: #2970a8;
    --eb-action-emphasis: #1e5380;
    --eb-action-dark: #1f5a8a;
    --eb-action-dark-hover: #153d5e;
    --eb-action-darker: #0e2f4a;
    --eb-action-darker-hover: #071820;
    --eb-action-light: #e8f1fa;
    --eb-action-light-hover: #c8ddf2;
    --eb-action-lighter: #bfdaf1;
    --eb-action-lighter-hover: #99c7ea;
    --eb-action-subtle: #d5e8f8;
    --eb-action-border-subtle: #8bb8e3;
    --eb-action-alt-bg: #c2dcf4;
    --eb-action-gradient-end: #5caae6;
    --eb-action-focus-rgb: 82, 158, 217;

    /* ── Admin (elevated purple, reserved) ───────────────────────────────── */
    --eb-admin: #712cf9;
    --eb-admin-rgb: 113, 44, 249;
    --eb-admin-hover: #5a23c7;
    --eb-admin-emphasis: #441a95;
    --eb-admin-dark: #5521bb;
    --eb-admin-dark-hover: #3a1680;
    --eb-admin-darker: #2e0d66;
    --eb-admin-darker-hover: #1a0740;
    --eb-admin-light: #f3edfe;
    --eb-admin-lighter: #d4bcfd;
    --eb-admin-subtle: #e3d5fe;
    --eb-admin-border-subtle: #b896fc;
    --eb-admin-alt-bg: #dbcafd;
    --eb-admin-gradient-end: #9a6bfb;
    --eb-admin-focus-rgb: 134, 76, 250;

    /* ── Neutral (medium-gray utility button) ────────────────────────────── */
    --eb-neutral: #ced4da;
    --eb-neutral-hover: #b8bec5;
    --eb-neutral-active: #adb5bd;
    --eb-neutral-text: #212529;

    /* ── Surface / structure ─────────────────────────────────────────────── */
    --eb-card-bg: #fff;
    --eb-border: #dee2e6;
    --eb-border-light: #f1f3f5;
    --eb-muted: #5d636a;          /* AA on #f9f9f9 (5.8:1); was #6c757d (4.45, failed) */
    --eb-radius: 0.5rem;
    --eb-page-bg: #f9f9f9;        /* main page-container background */
    --eb-heading-bg: #edf0f7;
    --eb-bottom-bar-h: 3.0625rem;   /* shared footer/toolbar height (consumed in site.css) */

    /* ── Semantic (Bootstrap contextual passthrough) ─────────────────────── */
    --eb-success: var(--bs-success, #198754);
    --eb-info: var(--bs-info, #0dcaf0);
    --eb-warning: var(--bs-warning, #ffc107);
    --eb-danger: var(--bs-danger, #dc3545);

    /* ── Accessibility-tuned variants (WCAG AA ≥4.5:1) ───────────────────────
       The xplay palette's success/danger/action are too light for white text (or as
       text on white). These darker variants are used for BUTTON fills and danger TEXT
       so interactive/required UI passes AA. Badge/alert fills keep the lighter palette. */
    --eb-danger-aa: #b5371a;          /* white text 6.0:1 · as text on white 6.0:1 */
    --eb-danger-aa-hover: #962d15;
    --eb-success-aa: #4a7a2c;         /* white text 5.1:1 */
    --eb-success-aa-hover: #3c6523;

    /* ── Bridge vars: legacy classes consume these; point them at tokens ─── */
    --bs-admin: var(--eb-admin);
    --bs-admin-rgb: var(--eb-admin-rgb);
    --bs-admin-text-emphasis: var(--eb-admin-emphasis);
    --bs-admin-bg-subtle: var(--eb-admin-subtle);
    --bs-admin-border-subtle: var(--eb-admin-border-subtle);

    --bs-echoblue: var(--eb-action);
    --bs-echoblue-rgb: var(--eb-action-rgb);
    --bs-echoblue-text-emphasis: var(--eb-action-emphasis);
    --bs-echoblue-bg-subtle: var(--eb-action-subtle);
    --bs-echoblue-border-subtle: var(--eb-action-border-subtle);
}

/* ===================================================================
   "admin" contextual color family  (token: --eb-admin)
   =================================================================== */

/* --- Text --- */
.text-admin {
    --bs-text-opacity: 1;
    color: rgba(var(--eb-admin-rgb), var(--bs-text-opacity)) !important;
}

a.text-admin:hover,
a.text-admin:focus {
    color: var(--eb-admin-hover) !important;
}

.text-admin-light {
    color: var(--eb-admin-light) !important;
}

.text-admin-emphasis {
    color: var(--eb-admin-emphasis) !important;
}

/* --- Backgrounds --- */
.bg-admin {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--eb-admin-rgb), var(--bs-bg-opacity)) !important;
}

a.bg-admin:hover,
a.bg-admin:focus,
button.bg-admin:hover,
button.bg-admin:focus {
    background-color: var(--eb-admin-hover) !important;
}

.bg-admin-light {
    background-color: var(--eb-admin-light) !important;
}

a.bg-admin-light:hover,
a.bg-admin-light:focus,
button.bg-admin-light:hover,
button.bg-admin-light:focus {
    background-color: #e8e1fe !important;
}

.bg-admin-op {
    background-color: rgba(243, 237, 254, 0.95) !important;
}

.bg-admin-subtle {
    background-color: var(--eb-admin-subtle) !important;
}

.text-bg-admin {
    color: #fff !important;
    background-color: var(--eb-admin) !important;
}

/* --- Borders --- */
.border-admin {
    border-color: var(--eb-admin) !important;
}

.border-admin-subtle {
    border-color: var(--eb-admin-border-subtle) !important;
}

/* --- Buttons: solid (white text, like btn-danger) --- */
.btn-admin {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--eb-admin);
    --bs-btn-border-color: var(--eb-admin);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eb-admin-hover);
    --bs-btn-hover-border-color: var(--eb-admin-dark);
    --bs-btn-focus-shadow-rgb: var(--eb-admin-focus-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eb-admin-hover);
    --bs-btn-active-border-color: var(--eb-admin-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--eb-admin);
    --bs-btn-disabled-border-color: var(--eb-admin);
}

/* --- Buttons: alt (light tinted bg, dark purple text) --- */
.btn-alt-admin {
    --bs-btn-color: var(--eb-admin-emphasis);
    --bs-btn-bg: var(--eb-admin-alt-bg);
    --bs-btn-border-color: var(--eb-admin-alt-bg);
    --bs-btn-hover-color: #2d1164;
    --bs-btn-hover-bg: var(--eb-admin-border-subtle);
    --bs-btn-hover-border-color: var(--eb-admin-border-subtle);
    --bs-btn-focus-shadow-rgb: var(--eb-admin-focus-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--eb-admin-subtle);
    --bs-btn-active-border-color: var(--eb-admin-alt-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--eb-admin-alt-bg);
    --bs-btn-disabled-border-color: var(--eb-admin-alt-bg);
}

/* --- Buttons: outline --- */
.btn-outline-admin {
    --bs-btn-color: var(--eb-admin);
    --bs-btn-border-color: var(--eb-admin);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eb-admin);
    --bs-btn-hover-border-color: var(--eb-admin);
    --bs-btn-focus-shadow-rgb: var(--eb-admin-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eb-admin);
    --bs-btn-active-border-color: var(--eb-admin);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--eb-admin);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--eb-admin);
}

/* --- Alert --- */
.alert-admin {
    --bs-alert-color: var(--eb-admin-emphasis);
    --bs-alert-bg: var(--eb-admin-subtle);
    --bs-alert-border-color: var(--eb-admin-border-subtle);
    --bs-alert-link-color: var(--eb-admin-emphasis);
}

/* --- Table --- */
.table-admin {
    --bs-table-color: #000;
    --bs-table-bg: #e3d5fe;
    --bs-table-border-color: #b5aacb;
    --bs-table-striped-bg: #d8cbf2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #ccc1e5;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d2c6eb;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- List Group --- */
.list-group-item-admin {
    --bs-list-group-color: var(--eb-admin-emphasis);
    --bs-list-group-bg: var(--eb-admin-subtle);
    --bs-list-group-border-color: var(--eb-admin-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--eb-admin-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--eb-admin-border-subtle);
    --bs-list-group-active-color: var(--eb-admin-subtle);
    --bs-list-group-active-bg: var(--eb-admin-emphasis);
    --bs-list-group-active-border-color: var(--eb-admin-emphasis);
}

/* --- Links --- */
.link-admin {
    color: RGBA(var(--eb-admin-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--eb-admin-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--eb-admin-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-admin:hover,
.link-admin:focus {
    color: RGBA(var(--eb-admin-focus-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--eb-admin-focus-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--eb-admin-focus-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-underline-admin {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--eb-admin-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--eb-admin-rgb), var(--bs-link-underline-opacity)) !important;
}

/* --- Focus Ring --- */
.focus-ring-admin {
    --bs-focus-ring-color: rgba(var(--eb-admin-rgb), var(--bs-focus-ring-opacity));
}

/* --- Ribbon --- */
.ribbon-admin .ribbon-box {
    color: #fff;
    background-color: var(--eb-admin);
}

.ribbon-admin.ribbon-bookmark .ribbon-box::before {
    border-color: var(--eb-admin);
    border-left-color: transparent;
}

.ribbon-admin.ribbon-bookmark.ribbon-left .ribbon-box::before {
    border-color: var(--eb-admin);
    border-right-color: transparent;
}

.ribbon-admin.ribbon-modern .ribbon-box::before {
    border-color: var(--eb-admin-dark);
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.ribbon-admin.ribbon-modern.ribbon-bottom .ribbon-box::before {
    border-color: var(--eb-admin-dark);
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-admin.ribbon-modern.ribbon-left .ribbon-box::before {
    border-color: var(--eb-admin-dark);
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.ribbon-admin.ribbon-modern.ribbon-left.ribbon-bottom .ribbon-box::before {
    border-color: var(--eb-admin-dark);
    border-top-color: transparent;
    border-right-color: transparent;
}

/* --- Dark Mode --- */
html.dark .text-admin {
    color: #8b5cfa !important;
}

html.dark a.text-admin:hover,
html.dark a.text-admin:focus {
    color: var(--eb-admin) !important;
}

html.dark .alert-admin {
    --bs-alert-color: #fff;
    --bs-alert-bg: #551fbb;
    --bs-alert-border-color: #551fbb;
    --bs-alert-link-color: #cccccc;
}

html.dark .table-admin {
    --bs-table-color: #fff;
    --bs-table-bg: rgba(68, 26, 149, 0.75);
    --bs-table-border-color: rgba(119, 82, 181, 0.8);
    --bs-table-striped-bg: rgba(78, 38, 159, 0.7625);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: rgba(89, 50, 169, 0.775);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: rgba(84, 44, 164, 0.76875);
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- Admin Extended: dark / darker / lighter / gradient / hero --- */

.bg-admin-dark {
    background-color: var(--eb-admin-dark) !important;
}

a.bg-admin-dark:hover, a.bg-admin-dark:focus,
button.bg-admin-dark:hover,
button.bg-admin-dark:focus {
    background-color: var(--eb-admin-dark-hover) !important;
}

.bg-admin-dark-op {
    background-color: rgba(85, 33, 187, 0.8) !important;
}

a.bg-admin-dark-op:hover, a.bg-admin-dark-op:focus,
button.bg-admin-dark-op:hover,
button.bg-admin-dark-op:focus {
    background-color: rgba(58, 22, 128, 0.8) !important;
}

.bg-admin-darker {
    background-color: var(--eb-admin-darker) !important;
}

a.bg-admin-darker:hover, a.bg-admin-darker:focus,
button.bg-admin-darker:hover,
button.bg-admin-darker:focus {
    background-color: var(--eb-admin-darker-hover) !important;
}

.bg-admin-lighter {
    background-color: var(--eb-admin-lighter) !important;
}

a.bg-admin-lighter:hover, a.bg-admin-lighter:focus,
button.bg-admin-lighter:hover,
button.bg-admin-lighter:focus {
    background-color: var(--eb-admin-border-subtle) !important;
}

.bg-gd-admin {
    background: var(--eb-admin) linear-gradient(135deg, var(--eb-admin) 0%, var(--eb-admin-gradient-end) 100%) !important;
}

.text-admin-dark {
    color: var(--eb-admin-dark) !important;
}

a.text-admin-dark.link-fx::before {
    background-color: var(--eb-admin-dark) !important;
}
a.text-admin-dark:hover, a.text-admin-dark:focus {
    color: var(--eb-admin-dark-hover) !important;
}

.text-admin-darker {
    color: var(--eb-admin-darker) !important;
}

a.text-admin-darker.link-fx::before {
    background-color: var(--eb-admin-darker) !important;
}
a.text-admin-darker:hover, a.text-admin-darker:focus {
    color: var(--eb-admin-darker-hover) !important;
}

.text-admin-lighter {
    color: var(--eb-admin-lighter) !important;
}

a.text-admin-lighter.link-fx::before {
    background-color: var(--eb-admin-lighter) !important;
}
a.text-admin-lighter:hover, a.text-admin-lighter:focus {
    color: var(--eb-admin-border-subtle) !important;
}

.btn-hero.btn-admin {
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    font-weight: 700;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: 0.25rem;
    /* Hover ripple (see .btn-hero.btn-echoblue): darker disc grows from centre over the held base. */
    --bs-btn-hover-bg: var(--eb-admin);
    --bs-btn-hover-border-color: var(--eb-admin);
    background-image: radial-gradient(circle, var(--eb-admin-hover) 0 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0% 0%;
    box-shadow: 0 0.125rem 0.75rem rgba(58, 22, 128, 0.25);
    transition: background-size 0.5s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.btn-hero.btn-admin:hover {
    background-size: 250% 250%;
    box-shadow: 0 0.375rem 0.75rem rgba(58, 22, 128, 0.4);
    transform: translateY(-1px);
}
.btn-check:focus + .btn-hero.btn-admin, .btn-hero.btn-admin:focus {
    box-shadow: 0 0.125rem 0.75rem rgba(58, 22, 128, 0.25);
}
.btn-check:checked + .btn-hero.btn-admin, .btn-check:active + .btn-hero.btn-admin, .btn-hero.btn-admin:active, .btn-hero.btn-admin.active, .show > .btn-hero.btn-admin.dropdown-toggle {
    box-shadow: 0 0.125rem 0.75rem rgba(58, 22, 128, 0.25);
    transform: translateY(0);
}
.btn-check:checked + .btn-hero.btn-admin:focus, .btn-check:active + .btn-hero.btn-admin:focus, .btn-hero.btn-admin:active:focus, .btn-hero.btn-admin.active:focus, .show > .btn-hero.btn-admin.dropdown-toggle:focus {
    box-shadow: 0 0.125rem 0.75rem rgba(58, 22, 128, 0.25);
}
.btn-hero.btn-admin.disabled, .btn-hero.btn-admin:disabled {
    box-shadow: 0 0.125rem 0.75rem rgba(58, 22, 128, 0.25);
    transform: translateY(0);
}

/* ===================================================================
   "echoblue" contextual color family — the ACTION color (token: --eb-action)
   =================================================================== */

/* --- Text --- */
.text-echoblue {
    --bs-text-opacity: 1;
    color: rgba(var(--eb-action-rgb), var(--bs-text-opacity)) !important;
}

a.text-echoblue:hover,
a.text-echoblue:focus {
    color: var(--eb-action-hover) !important;
}

.text-echoblue-light {
    color: var(--eb-action-light) !important;
}

.text-echoblue-emphasis {
    color: var(--eb-action-emphasis) !important;
}

.text-echoblue-dark {
    color: var(--eb-action-dark) !important;
}

a.text-echoblue-dark.link-fx::before {
    background-color: var(--eb-action-dark) !important;
}
a.text-echoblue-dark:hover, a.text-echoblue-dark:focus {
    color: var(--eb-action-dark-hover) !important;
}

.text-echoblue-darker {
    color: var(--eb-action-darker) !important;
}

a.text-echoblue-darker.link-fx::before {
    background-color: var(--eb-action-darker) !important;
}
a.text-echoblue-darker:hover, a.text-echoblue-darker:focus {
    color: var(--eb-action-darker-hover) !important;
}

.text-echoblue-lighter {
    color: var(--eb-action-lighter) !important;
}

a.text-echoblue-lighter.link-fx::before {
    background-color: var(--eb-action-lighter) !important;
}
a.text-echoblue-lighter:hover, a.text-echoblue-lighter:focus {
    color: var(--eb-action-lighter-hover) !important;
}

/* --- Backgrounds --- */
.bg-echoblue {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--eb-action-rgb), var(--bs-bg-opacity)) !important;
}

a.bg-echoblue:hover,
a.bg-echoblue:focus,
button.bg-echoblue:hover,
button.bg-echoblue:focus {
    background-color: var(--eb-action-hover) !important;
}

.bg-echoblue-light {
    background-color: var(--eb-action-light) !important;
}

a.bg-echoblue-light:hover,
a.bg-echoblue-light:focus,
button.bg-echoblue-light:hover,
button.bg-echoblue-light:focus {
    background-color: var(--eb-action-light-hover) !important;
}

.bg-echoblue-op {
    background-color: rgba(232, 241, 250, 0.95) !important;
}

.bg-echoblue-subtle {
    background-color: var(--eb-action-subtle) !important;
}

.text-bg-echoblue {
    color: #fff !important;
    background-color: var(--eb-action) !important;
}

.bg-echoblue-dark {
    background-color: var(--eb-action-dark) !important;
}

a.bg-echoblue-dark:hover, a.bg-echoblue-dark:focus,
button.bg-echoblue-dark:hover,
button.bg-echoblue-dark:focus {
    background-color: var(--eb-action-dark-hover) !important;
}

.bg-echoblue-dark-op {
    background-color: rgba(31, 90, 138, 0.8) !important;
}

a.bg-echoblue-dark-op:hover, a.bg-echoblue-dark-op:focus,
button.bg-echoblue-dark-op:hover,
button.bg-echoblue-dark-op:focus {
    background-color: rgba(21, 61, 94, 0.8) !important;
}

.bg-echoblue-darker {
    background-color: var(--eb-action-darker) !important;
}

a.bg-echoblue-darker:hover, a.bg-echoblue-darker:focus,
button.bg-echoblue-darker:hover,
button.bg-echoblue-darker:focus {
    background-color: var(--eb-action-darker-hover) !important;
}

.bg-echoblue-lighter {
    background-color: var(--eb-action-lighter) !important;
}

a.bg-echoblue-lighter:hover, a.bg-echoblue-lighter:focus,
button.bg-echoblue-lighter:hover,
button.bg-echoblue-lighter:focus {
    background-color: var(--eb-action-lighter-hover) !important;
}

.bg-gd-echoblue {
    background: var(--eb-action) linear-gradient(135deg, var(--eb-action) 0%, var(--eb-action-gradient-end) 100%) !important;
}

/* --- Borders --- */
.border-echoblue {
    border-color: var(--eb-action) !important;
}

.border-echoblue-subtle {
    border-color: var(--eb-action-border-subtle) !important;
}

/* --- Buttons: solid (the primary ACTION button) ---
   Fill uses the darker --eb-action-hover (#2970a8) so white text clears AA (5.3:1);
   the lighter --eb-action (#338bd2) remains the brand color for text/bg/badges/links. */
.btn-echoblue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--eb-action-hover);
    --bs-btn-border-color: var(--eb-action-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eb-action-dark);
    --bs-btn-hover-border-color: var(--eb-action-darker);
    --bs-btn-focus-shadow-rgb: var(--eb-action-focus-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eb-action-dark);
    --bs-btn-active-border-color: var(--eb-action-darker);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--eb-action-hover);
    --bs-btn-disabled-border-color: var(--eb-action-hover);
}

/* --- Accessibility-tuned semantic overrides (WCAG AA) ---
   xplay's success/danger buttons (olive #6f9c40 / orange #e04f1a) fail white-text contrast,
   and .text-danger (used for required-field asterisks + error text) fails on white. Darken the
   button fills and danger text to the AA variants. Badge/alert FILLS are left on the lighter
   palette intentionally (different elements, handled separately). */
.btn-success {
    --bs-btn-bg: var(--eb-success-aa);
    --bs-btn-border-color: var(--eb-success-aa);
    --bs-btn-hover-bg: var(--eb-success-aa-hover);
    --bs-btn-hover-border-color: var(--eb-success-aa-hover);
    --bs-btn-active-bg: var(--eb-success-aa-hover);
    --bs-btn-active-border-color: var(--eb-success-aa-hover);
    --bs-btn-disabled-bg: var(--eb-success-aa);
    --bs-btn-disabled-border-color: var(--eb-success-aa);
}
.btn-danger {
    --bs-btn-bg: var(--eb-danger-aa);
    --bs-btn-border-color: var(--eb-danger-aa);
    --bs-btn-hover-bg: var(--eb-danger-aa-hover);
    --bs-btn-hover-border-color: var(--eb-danger-aa-hover);
    --bs-btn-active-bg: var(--eb-danger-aa-hover);
    --bs-btn-active-border-color: var(--eb-danger-aa-hover);
    --bs-btn-disabled-bg: var(--eb-danger-aa);
    --bs-btn-disabled-border-color: var(--eb-danger-aa);
}
.btn-outline-danger {
    --bs-btn-color: var(--eb-danger-aa);
    --bs-btn-border-color: var(--eb-danger-aa);
    --bs-btn-hover-bg: var(--eb-danger-aa);
    --bs-btn-hover-border-color: var(--eb-danger-aa);
    --bs-btn-active-bg: var(--eb-danger-aa);
    --bs-btn-active-border-color: var(--eb-danger-aa);
    --bs-btn-disabled-color: var(--eb-danger-aa);
    --bs-btn-disabled-border-color: var(--eb-danger-aa);
}
/* Required-field asterisks + danger text on light backgrounds. */
.text-danger {
    --bs-text-opacity: 1;
    color: var(--eb-danger-aa) !important;
}

/* Form validation feedback — Bootstrap's default #dc3545 fails AA on white. Reuse the red
   button base (== --eb-danger-aa, 6:1) for the message text and the invalid field border. */
.invalid-feedback,
.invalid-tooltip {
    color: var(--eb-btn-danger);
}
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid,
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--eb-btn-danger);
}

/* Badge fills — xplay success/danger/info are too light for white text. Darken the BADGE fill
   only (not every .bg-* usage). Info uses a dedicated darker blue so white text clears AA. */
.badge.bg-success { background-color: var(--eb-success-aa) !important; }
.badge.bg-danger  { background-color: var(--eb-danger-aa) !important; }
.badge.bg-info    { background-color: #236fb5 !important; color: #fff !important; }

/* Toast (and any text-bg-*) fills — darken success/danger so white text clears AA. */
.text-bg-success { background-color: var(--eb-success-aa) !important; }
.text-bg-danger  { background-color: var(--eb-danger-aa) !important; }

/* Badges — the standard style going forward: alt-disabled bg (8% root on white) + regular
   body text + a 1px outline border in the root color. One class per type, driven off the
   shared --eb-btn-* roots, so changing a root re-themes badges and buttons together. Works on
   plain .badge and .badge.rounded-pill alike. (The .badge.bg-* semantic fills above are left
   intact and untouched — a separate, still-valid set.) */
.badge.badge-action,
.badge.badge-danger,
.badge.badge-success,
.badge.badge-secondary,
.badge.badge-warning,
.badge.badge-admin {
    background-color: color-mix(in srgb, var(--badge-root) 8%, #fff) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--badge-root) !important;
}
.badge.badge-action    { --badge-root: var(--eb-btn-action); }
.badge.badge-danger    { --badge-root: var(--eb-btn-danger); }
.badge.badge-success   { --badge-root: var(--eb-btn-success); }
.badge.badge-secondary { --badge-root: var(--eb-btn-secondary); }
.badge.badge-warning   { --badge-root: var(--eb-btn-warning); }
.badge.badge-admin     { --badge-root: var(--eb-btn-admin); }

/* Muted/secondary text. Bootstrap's #6c757d fails AA on the page bg (4.45:1); use the darker
   --eb-muted (#5d636a, 5.8:1) in light mode. Dark mode keeps a lighter muted so contrast holds
   on dark surfaces. */
.text-muted { --bs-secondary-color: var(--eb-muted); color: var(--eb-muted) !important; }
html.dark .text-muted { color: #a7adb4 !important; }

/* Medium gray — sits between btn-light and btn-secondary; dark text (token: --eb-neutral) */
.btn-medium-gray {
    --bs-btn-color: var(--eb-neutral-text);
    --bs-btn-bg: var(--eb-neutral);
    --bs-btn-border-color: var(--eb-neutral);
    --bs-btn-hover-color: var(--eb-neutral-text);
    --bs-btn-hover-bg: var(--eb-neutral-hover);
    --bs-btn-hover-border-color: #aeb4bb;
    --bs-btn-focus-shadow-rgb: 173, 181, 189;
    --bs-btn-active-color: var(--eb-neutral-text);
    --bs-btn-active-bg: var(--eb-neutral-active);
    --bs-btn-active-border-color: #a0a8b0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--eb-neutral-text);
    --bs-btn-disabled-bg: var(--eb-neutral);
    --bs-btn-disabled-border-color: var(--eb-neutral);
}

/* --- Buttons: alt --- */
.btn-alt-echoblue {
    --bs-btn-color: var(--eb-action-emphasis);
    --bs-btn-bg: var(--eb-action-alt-bg);
    --bs-btn-border-color: var(--eb-action-alt-bg);
    --bs-btn-hover-color: var(--eb-action-darker);
    --bs-btn-hover-bg: var(--eb-action-border-subtle);
    --bs-btn-hover-border-color: var(--eb-action-border-subtle);
    --bs-btn-focus-shadow-rgb: var(--eb-action-focus-rgb);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--eb-action-subtle);
    --bs-btn-active-border-color: var(--eb-action-alt-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--eb-action-alt-bg);
    --bs-btn-disabled-border-color: var(--eb-action-alt-bg);
}

/* --- Buttons: outline (echoblue) --- */
.btn-outline-echoblue {
    --bs-btn-color: var(--eb-action);
    --bs-btn-border-color: var(--eb-action);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--eb-action);
    --bs-btn-hover-border-color: var(--eb-action);
    --bs-btn-focus-shadow-rgb: var(--eb-action-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--eb-action);
    --bs-btn-active-border-color: var(--eb-action);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--eb-action);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--eb-action);
}

/* --- Buttons: hero --- */
.btn-hero.btn-echoblue {
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    font-weight: 700;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: 0.25rem;
    /* Hover ripple: hold the base fill on hover and grow a darker disc out from the centre
       (instead of a flat colour swap). hover-bg is pinned to the base so only the ripple moves. */
    --bs-btn-hover-bg: var(--eb-action-hover);
    --bs-btn-hover-border-color: var(--eb-action-hover);
    background-image: radial-gradient(circle, var(--eb-action-dark) 0 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0% 0%;
    box-shadow: 0 0.125rem 0.75rem rgba(21, 61, 94, 0.25);
    transition: background-size 0.5s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.btn-hero.btn-echoblue:hover {
    background-size: 250% 250%;
    box-shadow: 0 0.375rem 0.75rem rgba(21, 61, 94, 0.4);
    transform: translateY(-1px);
}
/* The hero hover ripple is an intentional affordance — keep it (and the colour fade) even when the
   OS prefers reduced motion; Bootstrap's reboot otherwise zeroes every transition-duration. The
   lift/shadow are deliberately excluded, so no actual movement happens under reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .btn-hero.btn-echoblue,
    .btn-hero.btn-admin {
        transition: background-size 0.5s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out !important;
    }
}
.btn-check:focus + .btn-hero.btn-echoblue, .btn-hero.btn-echoblue:focus {
    box-shadow: 0 0.125rem 0.75rem rgba(21, 61, 94, 0.25);
}
.btn-check:checked + .btn-hero.btn-echoblue, .btn-check:active + .btn-hero.btn-echoblue, .btn-hero.btn-echoblue:active, .btn-hero.btn-echoblue.active, .show > .btn-hero.btn-echoblue.dropdown-toggle {
    box-shadow: 0 0.125rem 0.75rem rgba(21, 61, 94, 0.25);
    transform: translateY(0);
}
.btn-check:checked + .btn-hero.btn-echoblue:focus, .btn-check:active + .btn-hero.btn-echoblue:focus, .btn-hero.btn-echoblue:active:focus, .btn-hero.btn-echoblue.active:focus, .show > .btn-hero.btn-echoblue.dropdown-toggle:focus {
    box-shadow: 0 0.125rem 0.75rem rgba(21, 61, 94, 0.25);
}
.btn-hero.btn-echoblue.disabled, .btn-hero.btn-echoblue:disabled {
    box-shadow: 0 0.125rem 0.75rem rgba(21, 61, 94, 0.25);
    transform: translateY(0);
}

/* --- Alert --- */
.alert-echoblue {
    --bs-alert-color: var(--eb-action-emphasis);
    --bs-alert-bg: var(--eb-action-subtle);
    --bs-alert-border-color: var(--eb-action-border-subtle);
    --bs-alert-link-color: var(--eb-action-emphasis);
}

/* --- Table --- */
.table-echoblue {
    --bs-table-color: #000;
    --bs-table-bg: #d5e8f8;
    --bs-table-border-color: #a5b9c9;
    --bs-table-striped-bg: #cadcec;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bfd0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c5d6e7;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* --- List Group --- */
.list-group-item-echoblue {
    --bs-list-group-color: var(--eb-action-emphasis);
    --bs-list-group-bg: var(--eb-action-subtle);
    --bs-list-group-border-color: var(--eb-action-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--eb-action-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--eb-action-border-subtle);
    --bs-list-group-active-color: var(--eb-action-subtle);
    --bs-list-group-active-bg: var(--eb-action-emphasis);
    --bs-list-group-active-border-color: var(--eb-action-emphasis);
}

/* --- Links --- */
.link-echoblue {
    color: RGBA(var(--eb-action-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--eb-action-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--eb-action-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-echoblue:hover,
.link-echoblue:focus {
    color: RGBA(var(--eb-action-focus-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--eb-action-focus-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--eb-action-focus-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-underline-echoblue {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--eb-action-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--eb-action-rgb), var(--bs-link-underline-opacity)) !important;
}

/* --- Focus Ring --- */
.focus-ring-echoblue {
    --bs-focus-ring-color: rgba(var(--eb-action-rgb), var(--bs-focus-ring-opacity));
}

/* --- Ribbon --- */
.ribbon-echoblue .ribbon-box {
    color: #fff;
    background-color: var(--eb-action);
}

.ribbon-echoblue.ribbon-bookmark .ribbon-box::before {
    border-color: var(--eb-action);
    border-left-color: transparent;
}

.ribbon-echoblue.ribbon-bookmark.ribbon-left .ribbon-box::before {
    border-color: var(--eb-action);
    border-right-color: transparent;
}

.ribbon-echoblue.ribbon-modern .ribbon-box::before {
    border-color: var(--eb-action-dark);
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.ribbon-echoblue.ribbon-modern.ribbon-bottom .ribbon-box::before {
    border-color: var(--eb-action-dark);
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-echoblue.ribbon-modern.ribbon-left .ribbon-box::before {
    border-color: var(--eb-action-dark);
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.ribbon-echoblue.ribbon-modern.ribbon-left.ribbon-bottom .ribbon-box::before {
    border-color: var(--eb-action-dark);
    border-top-color: transparent;
    border-right-color: transparent;
}

/* --- Dark Mode --- */
html.dark .text-echoblue {
    color: var(--eb-action-gradient-end) !important;
}

html.dark a.text-echoblue:hover,
html.dark a.text-echoblue:focus {
    color: var(--eb-action) !important;
}

html.dark .alert-echoblue {
    --bs-alert-color: #fff;
    --bs-alert-bg: #1a4d73;
    --bs-alert-border-color: #1a4d73;
    --bs-alert-link-color: #cccccc;
}

html.dark .table-echoblue {
    --bs-table-color: #fff;
    --bs-table-bg: rgba(30, 83, 128, 0.75);
    --bs-table-border-color: rgba(72, 126, 170, 0.8);
    --bs-table-striped-bg: rgba(38, 93, 138, 0.7625);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: rgba(46, 103, 148, 0.775);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: rgba(42, 98, 143, 0.76875);
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* =============================================================================
   Button color system — single-root cascade (color-mix)
   -----------------------------------------------------------------------------
   Each button family derives its solid / alt / outline variants AND all states
   (hover, active, disabled) from ONE base color token below. Change a --eb-btn-*
   base and every variant of that type updates together. Disabled reuses the base
   bg and Bootstrap's .btn:disabled { opacity:.65 } dims it — i.e. the base color at
   reduced opacity. Mix percentages are the single place to tune the shifts.
   This section is authoritative; it supersedes the per-family button blocks above.
   Requires color-mix() — Chrome 111+, Firefox 113+, Safari 16.2+.
   ============================================================================= */
:root {
    --eb-btn-action:    #2970a8;   /* echoblue — the regular button background */
    --eb-btn-danger:    #b5371a;
    --eb-btn-success:   #4a7a2c;
    --eb-btn-secondary: #5c636a;
    --eb-btn-admin:     #712cf9;
    --eb-btn-warning:   #e69f17;   /* dark-text family */
    --eb-btn-neutral:   #ced4da;   /* dark-text family (medium gray) */
}

/* Per-class root: each variant points at its family's base. */
.btn-echoblue, .btn-alt-echoblue, .btn-outline-echoblue, .btn-outline-white-echoblue, .btn-light-outline-echoblue       { --btn-root: var(--eb-btn-action); }
.btn-danger, .btn-alt-danger, .btn-outline-danger, .btn-outline-white-danger, .btn-light-outline-danger                { --btn-root: var(--eb-btn-danger); }
.btn-success, .btn-alt-success, .btn-outline-success, .btn-outline-white-success, .btn-light-outline-success            { --btn-root: var(--eb-btn-success); }
.btn-secondary, .btn-alt-secondary, .btn-outline-secondary, .btn-outline-white-secondary, .btn-light-outline-secondary  { --btn-root: var(--eb-btn-secondary); }
.btn-admin, .btn-alt-admin, .btn-outline-admin, .btn-outline-white-admin, .btn-light-outline-admin                     { --btn-root: var(--eb-btn-admin); }
.btn-warning, .btn-alt-warning, .btn-outline-warning, .btn-outline-white-warning, .btn-light-outline-warning           { --btn-root: var(--eb-btn-warning); }
.btn-medium-gray                                              { --btn-root: var(--eb-btn-neutral); }

/* SOLID — white text */
.btn-echoblue, .btn-danger, .btn-success, .btn-secondary, .btn-admin {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-root);
    --bs-btn-border-color: var(--btn-root);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-root) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-root) 74%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--btn-root) 76%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--btn-root) 70%, #000);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-root);
    --bs-btn-disabled-border-color: var(--btn-root);
}

/* SOLID — dark text (warning, neutral gray) */
.btn-warning, .btn-medium-gray {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--btn-root);
    --bs-btn-border-color: var(--btn-root);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-root) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-root) 80%, #000);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: color-mix(in srgb, var(--btn-root) 84%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--btn-root) 78%, #000);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--btn-root);
    --bs-btn-disabled-border-color: var(--btn-root);
}

/* ALT — light tint of the base, dark text mixed from the base */
.btn-alt-echoblue, .btn-alt-danger, .btn-alt-success, .btn-alt-secondary, .btn-alt-admin, .btn-alt-warning {
    --bs-btn-color: color-mix(in srgb, var(--btn-root) 78%, #000);
    --bs-btn-bg: color-mix(in srgb, var(--btn-root) 16%, #fff);
    --bs-btn-border-color: color-mix(in srgb, var(--btn-root) 16%, #fff);
    --bs-btn-hover-color: color-mix(in srgb, var(--btn-root) 90%, #000);
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-root) 32%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-root) 32%, #fff);
    --bs-btn-active-color: color-mix(in srgb, var(--btn-root) 92%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--btn-root) 28%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--btn-root) 32%, #fff);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: color-mix(in srgb, var(--btn-root) 78%, #000);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--btn-root) 8%, #fff);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-root) 16%, #fff);
}

/* OUTLINE — text + border = base; fills with the base on hover/active */
.btn-outline-echoblue, .btn-outline-danger, .btn-outline-success, .btn-outline-secondary, .btn-outline-admin, .btn-outline-warning {
    --bs-btn-color: var(--btn-root);
    --bs-btn-border-color: var(--btn-root);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-root);
    --bs-btn-hover-border-color: var(--btn-root);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-root);
    --bs-btn-active-border-color: var(--btn-root);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--btn-root);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-root);
}
/* OUTLINE (white bg) — identical to .btn-outline-* (border + text = base, hover/active fill the
   base) but with an OPAQUE WHITE resting background instead of transparent. Use on colored, dark,
   or photographic surfaces where a transparent outline would read low-contrast; on plain white it
   looks the same as the transparent outline. */
.btn-outline-white-echoblue, .btn-outline-white-danger, .btn-outline-white-success,
.btn-outline-white-secondary, .btn-outline-white-admin, .btn-outline-white-warning {
    --bs-btn-color: var(--btn-root);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--btn-root);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-root);
    --bs-btn-hover-border-color: var(--btn-root);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-root);
    --bs-btn-active-border-color: var(--btn-root);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--btn-root);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--btn-root);
}

/* Dark-base outline (warning): the raw yellow base is too light as text/border on white, so darken
   the resting text + border to an accessible amber (mixed from the same root → still cascades).
   color-mix 58% base + 42% black ≈ 5.7:1 on white. Hover fills with the bright base + dark text.
   Applies to both the transparent and white-bg outline flavors (both sit on white). */
.btn-outline-warning, .btn-outline-white-warning {
    --bs-btn-color: color-mix(in srgb, var(--btn-root) 58%, #000);
    --bs-btn-border-color: color-mix(in srgb, var(--btn-root) 58%, #000);
    --bs-btn-hover-color: #000;
    --bs-btn-active-color: #000;
    --bs-btn-disabled-color: color-mix(in srgb, var(--btn-root) 58%, #000);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-root) 58%, #000);
}

/* LIGHT-OUTLINE group: a quiet, borderless text-button. No fill, no border; text is the alt
   color (78% root + #000). Hover paints the faint alt-disabled tint (8% root + #fff); active
   deepens to the alt bg (16%). Same single-root cascade as the other variants. */
.btn-light-outline-echoblue, .btn-light-outline-danger, .btn-light-outline-success,
.btn-light-outline-secondary, .btn-light-outline-admin, .btn-light-outline-warning {
    --bs-btn-color: color-mix(in srgb, var(--btn-root) 78%, #000);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: color-mix(in srgb, var(--btn-root) 78%, #000);
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-root) 8%, #fff);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: color-mix(in srgb, var(--btn-root) 90%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--btn-root) 16%, #fff);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: color-mix(in srgb, var(--btn-root) 78%, #000);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}
/* Warning's alt text stays readable, but nudge the light-outline resting text a touch darker
   for AA on white (the 78% amber is borderline as small text). */
.btn-light-outline-warning {
    --bs-btn-color: color-mix(in srgb, var(--btn-root) 60%, #000);
    --bs-btn-hover-color: color-mix(in srgb, var(--btn-root) 60%, #000);
    --bs-btn-disabled-color: color-mix(in srgb, var(--btn-root) 60%, #000);
}

/* ===================================================================
   Button-derived color utility scale  —  .bg-* / .text-*  (6 roots)
   -------------------------------------------------------------------
   A flat color always matches its button. Four bg stops + two text stops,
   all mixed from the SAME --eb-btn-* root the button system uses:
     .bg-{c}          base     = regular button bg          = root
     .bg-{c}-medium   medium   = solid button DISABLED bg    = 65% root + #fff
     .bg-{c}-light    light    = ALT button bg               = 16% root + #fff
     .bg-{c}-lighter  lighter  = ALT button DISABLED bg      =  8% root + #fff
     .text-{c}         base    = regular button bg as text   = root
     .text-{c}-lighter lighter = ALT button text color       = 78% root + #000
   {c} = echoblue · danger · success · secondary · warning · admin.
   Each family cascades from ONE --c-root, so editing an --eb-btn-* root re-themes
   buttons, badges, AND these utilities together. Declared AFTER the legacy
   echoblue/admin families and AFTER Bootstrap, with !important — so the normal
   Bootstrap-style names (.bg-danger, .text-warning, …) render OUR colors. The real
   bootstrap.css is never edited; this is an override layer only. (The .badge.bg-*
   AA fills above win on badges via higher specificity and stay as-is.) */

/* Root token per family (base class + every suffix + text classes) */
.bg-echoblue, .bg-echoblue-medium, .bg-echoblue-light, .bg-echoblue-lighter,
.text-echoblue, .text-echoblue-light, .text-echoblue-dark       { --c-root: var(--eb-btn-action); }
.bg-danger, .bg-danger-medium, .bg-danger-light, .bg-danger-lighter,
.text-danger, .text-danger-light, .text-danger-dark             { --c-root: var(--eb-btn-danger); }
.bg-success, .bg-success-medium, .bg-success-light, .bg-success-lighter,
.text-success, .text-success-light, .text-success-dark          { --c-root: var(--eb-btn-success); }
.bg-secondary, .bg-secondary-medium, .bg-secondary-light, .bg-secondary-lighter,
.text-secondary, .text-secondary-light, .text-secondary-dark    { --c-root: var(--eb-btn-secondary); }
.bg-warning, .bg-warning-medium, .bg-warning-light, .bg-warning-lighter,
.text-warning, .text-warning-light, .text-warning-dark          { --c-root: var(--eb-btn-warning); }
.bg-admin, .bg-admin-medium, .bg-admin-light, .bg-admin-lighter,
.text-admin, .text-admin-light, .text-admin-dark                { --c-root: var(--eb-btn-admin); }

/* Background stops — one formula rule shared by all six colors via --c-root */
.bg-echoblue, .bg-danger, .bg-success, .bg-secondary, .bg-warning, .bg-admin {
    background-color: var(--c-root) !important;
}
.bg-echoblue-medium, .bg-danger-medium, .bg-success-medium, .bg-secondary-medium, .bg-warning-medium, .bg-admin-medium {
    background-color: color-mix(in srgb, var(--c-root) 65%, #fff) !important;
}
.bg-echoblue-light, .bg-danger-light, .bg-success-light, .bg-secondary-light, .bg-warning-light, .bg-admin-light {
    background-color: color-mix(in srgb, var(--c-root) 16%, #fff) !important;
}
.bg-echoblue-lighter, .bg-danger-lighter, .bg-success-lighter, .bg-secondary-lighter, .bg-warning-lighter, .bg-admin-lighter {
    background-color: color-mix(in srgb, var(--c-root) 8%, #fff) !important;
}

/* Text stops:
     base   = regular button bg as text  = root
     -light = DISABLED button text        = root at the .65 disabled opacity → 65% root + #fff (lighter than base)
     -dark  = ALT button text             = 78% root + #000 (slightly darker than base) */
.text-echoblue, .text-danger, .text-success, .text-secondary, .text-warning, .text-admin {
    color: var(--c-root) !important;
}
.text-echoblue-light, .text-danger-light, .text-success-light, .text-secondary-light, .text-warning-light, .text-admin-light {
    color: color-mix(in srgb, var(--c-root) 65%, #fff) !important;
}
.text-echoblue-dark, .text-danger-dark, .text-success-dark, .text-secondary-dark, .text-warning-dark, .text-admin-dark {
    color: color-mix(in srgb, var(--c-root) 78%, #000) !important;
}

/* ===================================================================
   Container menu theming  —  .nav-{color}-light   (+ .colored-icons)
   -------------------------------------------------------------------
   Put ONE class on a vertical .nav (or a .btn-group-vertical) and every
   .nav-link / .btn child is themed from that color's root — no per-item
   classes needed:
     text   = regular body color (icons inherit it)
     hover  = alt-disabled tint (8% root + #fff), text unchanged
     active = alt style (16% root bg + 78%-black text)
   Self-contained (sets its own flex/padding/radius), so .nav-pills isn't
   required. `:is()` keeps each rule at single-class specificity, so it beats
   Bootstrap (incl. `.nav-pills .nav-link.active`) by load order yet stays
   easy to override.
   OVERRIDE one item two ways: (1) set --nav-root on just that item to recolor
   it (custom props beat inheritance regardless of specificity), or (2) give it
   an explicit .btn-* class. Add `.colored-icons` on the container to tint every
   icon with the root (the regular/solid disabled-button background color). */
.nav-echoblue-light  { --nav-root: var(--eb-btn-action); }
.nav-danger-light    { --nav-root: var(--eb-btn-danger); }
.nav-success-light   { --nav-root: var(--eb-btn-success); }
.nav-secondary-light { --nav-root: var(--eb-btn-secondary); }
.nav-warning-light   { --nav-root: var(--eb-btn-warning); }
.nav-admin-light     { --nav-root: var(--eb-btn-admin); }

:is(.nav-echoblue-light,.nav-danger-light,.nav-success-light,.nav-secondary-light,.nav-warning-light,.nav-admin-light) :is(.nav-link,.btn) {
    color: var(--bs-body-color);
    background-color: transparent;
    border-color: transparent;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    text-align: left;
}
:is(.nav-echoblue-light,.nav-danger-light,.nav-success-light,.nav-secondary-light,.nav-warning-light,.nav-admin-light) :is(.nav-link,.btn):hover {
    color: var(--bs-body-color);
    background-color: color-mix(in srgb, var(--nav-root) 8%, #fff);
}
:is(.nav-echoblue-light,.nav-danger-light,.nav-success-light,.nav-secondary-light,.nav-warning-light,.nav-admin-light) :is(.nav-link,.btn).active,
:is(.nav-echoblue-light,.nav-danger-light,.nav-success-light,.nav-secondary-light,.nav-warning-light,.nav-admin-light) .nav-link[aria-current="page"] {
    color: color-mix(in srgb, var(--nav-root) 78%, #000);
    background-color: color-mix(in srgb, var(--nav-root) 16%, #fff);
}
/* Icon tint toggle — icons take the root color (else they inherit the text color). */
:is(.nav-echoblue-light,.nav-danger-light,.nav-success-light,.nav-secondary-light,.nav-warning-light,.nav-admin-light).colored-icons :is(i,svg) {
    color: var(--nav-root);
}