/*  Frontier Schools design layer
 *  ---------------------------------------------------------------------------
 *  Global stylesheet. It is linked from _Layout on every page, after Bootstrap,
 *  and it is the single source of truth for the Frontier visual language.
 *
 *  Contents:
 *    :root    → brand tokens and the Bootstrap custom-property overrides
 *    base     → page tint, typography, links, colour utilities
 *    shell    → navbar, dropdowns, nav pills, avatars, badges
 *    surfaces → cards, panels, sections, data grids
 *    controls → buttons, form controls, tables, pagination, modals
 *    feedback → alerts, badges, progress, accordions
 *
 *  Two rules keep this file honest:
 *    - Tokens are declared once, here. No rule below hard-codes a brand colour,
 *      radius, font or shadow.
 *    - Colour is never the only carrier of meaning; every state that gets a hue
 *      also carries text or an icon in the markup.
 *
 *  Bootstrap 5.3 exposes component custom properties, so most restyling here is
 *  done by overriding those rather than out-specifying compiled rules — which
 *  keeps every :hover / :active / :focus / :disabled state intact.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --fx-navy: #001842;
    --fx-navy-hi: #0a2657;
    --fx-navy-lo: #00112e;
    --fx-navy-tint: #eef1f7;
    --fx-navy-tint-2: #e2e7f1;

    --fx-gold: #FFB504;
    --fx-gold-tint: #fff4d9;
    --fx-gold-deep: #8a6200;

    --fx-bg: #FFFCFF;
    --fx-neutral: #ECE7E5;
    --fx-neutral-2: #f5f2f1;
    --fx-white: #FFFFFF;

    --fx-ink: #1E2430;
    --fx-ink-muted: #5C6474;
    --fx-border: #E4DEDC;
    --fx-border-strong: #cfc7c4;

    /* Muted semantics: legible without shouting. Gold is never a semantic colour. */
    --fx-success: #2F6B4F;
    --fx-success-bg: #eef5f1;
    --fx-danger: #A63A32;
    --fx-danger-bg: #fbefee;
    --fx-warning: #8a6200;
    --fx-warning-bg: #fdf6e5;
    --fx-info: #2B4C7E;
    --fx-info-bg: #eef2f8;

    /* Impersonation is a state, not an action: a lighter navy bar, marked with a
       gold rule. Gold stays an accent — never a large fill. */
    --fx-impersonate-bg: #0a2657;

    /* Radii — small controls 8, inputs/buttons 10–12, cards 14–18, panels 18–22. */
    --fx-r-sm: 8px;
    --fx-r-control: 11px;
    --fx-r-card: 16px;
    --fx-r-panel: 20px;

    --fx-font: 'Bricolage Grotesque', Arial, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fx-shadow: 0 1px 2px rgba(0, 24, 66, .04), 0 4px 14px rgba(0, 24, 66, .05);
    --fx-shadow-sm: 0 1px 2px rgba(0, 24, 66, .05);

    /* Bootstrap knobs, so components inherit Frontier geometry and colour without
       each one needing its own override. */
    --bs-body-font-family: var(--fx-font);
    --bs-body-color: var(--fx-ink);
    --bs-body-color-rgb: 30, 36, 48;
    --bs-body-bg: var(--fx-white);
    --bs-heading-color: var(--fx-navy);
    --bs-emphasis-color: var(--fx-navy);
    --bs-secondary-color: var(--fx-ink-muted);
    --bs-secondary-color-rgb: 92, 100, 116;
    --bs-tertiary-color: var(--fx-ink-muted);
    --bs-highlight-bg: var(--fx-gold-tint);

    --bs-border-color: var(--fx-border);
    --bs-border-color-translucent: rgba(0, 24, 66, .08);
    --bs-border-radius: var(--fx-r-control);
    --bs-border-radius-sm: var(--fx-r-sm);
    --bs-border-radius-lg: var(--fx-r-card);
    --bs-border-radius-xl: var(--fx-r-panel);
    --bs-border-radius-xxl: var(--fx-r-panel);

    --bs-link-color: var(--fx-navy);
    --bs-link-color-rgb: 0, 24, 66;
    --bs-link-hover-color: var(--fx-navy-hi);
    --bs-link-hover-color-rgb: 10, 38, 87;

    --bs-focus-ring-color: rgba(0, 24, 66, .18);
    --bs-focus-ring-width: .18rem;

    /* Theme ramps, so .text-* / .bg-* / .border-* utilities land on the palette.
       Warning maps to gold; its text utility is overridden below, because gold
       text on white is not legible. */
    --bs-primary-rgb: 0, 24, 66;
    --bs-secondary-rgb: 236, 231, 229;
    --bs-success-rgb: 47, 107, 79;
    --bs-danger-rgb: 166, 58, 50;
    --bs-warning-rgb: 255, 181, 4;
    --bs-info-rgb: 43, 76, 126;

    --bs-primary-bg-subtle: var(--fx-navy-tint);
    --bs-secondary-bg-subtle: var(--fx-neutral-2);
    --bs-success-bg-subtle: var(--fx-success-bg);
    --bs-danger-bg-subtle: var(--fx-danger-bg);
    --bs-warning-bg-subtle: var(--fx-warning-bg);
    --bs-info-bg-subtle: var(--fx-info-bg);
    --bs-primary-border-subtle: var(--fx-navy-tint-2);
    --bs-secondary-border-subtle: var(--fx-border);
    --bs-success-border-subtle: #cfe2d8;
    --bs-danger-border-subtle: #eccfcc;
    --bs-warning-border-subtle: #f0e0b4;
    --bs-info-border-subtle: #d3ddec;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--fx-bg);
    color: var(--fx-ink);
    font-family: var(--fx-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fx-font);
    color: var(--fx-navy);
    letter-spacing: -.011em;
}

/* Bootstrap's default inline-code pink is off-palette. */
code { color: var(--fx-navy); }
a { text-underline-offset: .15em; }
::selection { background: rgba(255, 180, 4, .32); color: var(--fx-navy); }

/* Numbers are the point of a data platform, so they inherit the crisper
   tabular figures where the font provides them. */
.fx-num,
.metric-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── Colour utilities ────────────────────────────────────────────────────── */
.text-muted,
.text-body-secondary {
    color: var(--fx-ink-muted) !important;
}

.text-primary { color: var(--fx-navy) !important; }
.text-secondary { color: var(--fx-ink-muted) !important; }
.text-danger { color: var(--fx-danger) !important; }
.text-success { color: var(--fx-success) !important; }
.text-info { color: var(--fx-info) !important; }
/* Gold is an accent; as text it has to be the deep gold to stay legible on white. */
.text-warning { color: var(--fx-warning) !important; }
.text-dark { color: var(--fx-ink) !important; }

.bg-light { background-color: var(--fx-neutral-2) !important; }
.bg-white { background-color: var(--fx-white) !important; }
.bg-body { background-color: var(--fx-white) !important; }
.bg-primary { background-color: var(--fx-navy) !important; color: #fff; }
.bg-secondary { background-color: var(--fx-neutral) !important; color: var(--fx-ink); }
.bg-success { background-color: var(--fx-success) !important; }
.bg-danger { background-color: var(--fx-danger) !important; }
.bg-warning { background-color: var(--fx-gold) !important; color: var(--fx-navy); }
.bg-info { background-color: var(--fx-info) !important; }

.border-bottom { border-bottom-color: var(--fx-border) !important; }
.border-top { border-top-color: var(--fx-border) !important; }
.border { border-color: var(--fx-border) !important; }
.border-primary { border-color: var(--fx-navy) !important; }
.border-secondary { border-color: var(--fx-border-strong) !important; }

/* ── Application shell: navbar ───────────────────────────────────────────── */
:root {
    --nav-bg: var(--fx-navy);
    --nav-pill-hover: rgba(255, 255, 255, .10);
    --nav-pill-active: rgba(255, 255, 255, .16);
    --nav-text: rgba(255, 255, 255, .88);
    --nav-text-muted: rgba(255, 255, 255, .58);
    --nav-dd-bg: var(--fx-white);
    --nav-dd-shadow: var(--fx-shadow);
    --nav-dd-radius: var(--fx-r-card);
    --nav-avatar-bg: rgba(255, 255, 255, .18);
    --nav-avatar-color: #ffffff;
    --nav-height: 60px;
}

.navbar-app {
    background: var(--nav-bg);
    min-height: var(--nav-height);
}

/* Impersonation is flagged on the bar itself as well as in the banner above it. */
.navbar-impersonating {
    background: var(--fx-impersonate-bg);
    min-height: var(--nav-height);
    border-bottom: 2px solid var(--fx-gold);
}

/* The banner that names whose account is being viewed. Navy with a gold rule:
   prominent, on-brand, and not a large yellow area. */
.fx-impersonate-banner {
    background: var(--fx-navy);
    color: #fff;
    border-bottom: 3px solid var(--fx-gold);
    font-size: .9rem;
}

.navbar-app,
.navbar-impersonating {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Light toggler icon for dark navbar backgrounds */
.navbar-app .navbar-toggler-icon,
.navbar-impersonating .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-app .navbar-toggler,
.navbar-impersonating .navbar-toggler {
    border-color: rgba(255, 255, 255, .18);
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 .18rem rgba(255, 180, 4, .45);
}

/* Brand — the official logo never sits directly on navy: its wordmark is
   near-black, so it rides a white chip instead of being recoloured. */
.navbar-app .navbar-brand,
.navbar-impersonating .navbar-brand {
    color: #fff;
    font-size: 1rem;
    letter-spacing: -.01em;
    padding: 0;
}
.navbar-app .navbar-brand:hover,
.navbar-impersonating .navbar-brand:hover { color: #fff; opacity: .9; }

.navbar-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, .15);
    border-radius: var(--fx-r-sm);
    font-size: .85rem;
}

.navbar-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fx-white);
    border-radius: var(--fx-r-sm);
    padding: 3px 7px;
    line-height: 0;
}
.navbar-brand-logo img {
    height: 26px;
    width: auto;
    display: block;
}

/* Pill nav links — the active item is navy + gold, per the brand. On the navy
   bar that reads as a lighter pill plus a gold indicator underneath it. */
.nav-link-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--nav-text) !important;
    font-size: .85rem;
    font-weight: 500;
    padding: 6px 12px !important;
    border-radius: var(--fx-r-sm);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav-link-pill::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--fx-gold);
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .15s, transform .15s;
}
.nav-link-pill:hover,
.nav-link-pill:focus { background: var(--nav-pill-hover); color: #fff !important; }
.nav-link-pill:hover::after { opacity: .55; transform: scaleX(1); }
.nav-link-pill.show,
.nav-link-pill[aria-expanded="true"] { background: var(--nav-pill-active); color: #fff !important; }
.nav-link-pill.active { background: var(--nav-pill-active); color: #fff !important; font-weight: 600; }
.nav-link-pill.active::after,
.nav-link-pill.show::after,
.nav-link-pill[aria-expanded="true"]::after { opacity: 1; transform: scaleX(1); }

.nav-icon { font-size: .8rem; opacity: .8; }

/* Icon-only pill */
.nav-link-icon-only {
    padding: 6px 10px !important;
    font-size: .9rem;
}

/* Notification / approval dot badge */
.nav-dot-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--fx-gold);
    border-radius: 50%;
    border: 2px solid var(--nav-bg);
    display: block;
}

/* Avatar circle */
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nav-avatar-bg);
    color: var(--nav-avatar-color);
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, .22);
}
.nav-avatar-lg { width: 36px; height: 36px; font-size: .85rem; }

.nav-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-user-name { font-size: .83rem; font-weight: 500; }

/* Dropdown panel */
.dropdown-menu-app {
    background: var(--nav-dd-bg);
    border: 1px solid var(--fx-border);
    border-radius: var(--nav-dd-radius);
    box-shadow: var(--nav-dd-shadow);
    padding: 6px;
    min-width: 240px;
    margin-top: 4px !important;
    animation: ddFadeIn .13s ease;
}
@keyframes ddFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--fx-r-sm);
    color: var(--fx-ink);
    font-size: .85rem;
    transition: background .12s;
    white-space: normal;
}
.dropdown-item-app:hover,
.dropdown-item-app:focus { background: var(--fx-navy-tint); color: var(--fx-navy); }
.dropdown-item-app.active { background: var(--fx-navy); color: #fff; }
.dropdown-item-app.text-danger { color: var(--fx-danger) !important; }
.dropdown-item-app.text-danger:hover,
.dropdown-item-app.text-danger:focus { background: var(--fx-danger-bg); color: var(--fx-danger) !important; }

.dd-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--fx-r-sm);
    background: var(--fx-neutral-2);
    flex-shrink: 0;
    font-size: .8rem;
    border: 1px solid var(--fx-border);
}

.dd-content { display: flex; flex-direction: column; gap: 1px; }
.dd-label   { font-weight: 600; line-height: 1.2; font-size: .83rem; color: var(--fx-navy); }
.dd-desc    { font-size: .73rem; color: var(--fx-ink-muted); line-height: 1.3; }

.dropdown-header-user { border-radius: var(--fx-r-sm); background: var(--fx-neutral-2); }

.dropdown-menu-app .dropdown-divider { border-color: var(--fx-border); }

/* Generic Bootstrap dropdowns get the same geometry. */
.dropdown-menu {
    --bs-dropdown-border-color: var(--fx-border);
    --bs-dropdown-border-radius: var(--fx-r-card);
    --bs-dropdown-link-color: var(--fx-ink);
    --bs-dropdown-link-hover-color: var(--fx-navy);
    --bs-dropdown-link-hover-bg: var(--fx-navy-tint);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--fx-navy);
    --bs-dropdown-box-shadow: var(--fx-shadow);
    --bs-dropdown-font-size: .875rem;
}

/* Mobile adaptations */
@media (max-width: 1199.98px) {
    .navbar-app,
    .navbar-impersonating { min-height: auto; }

    #navbarMain { padding: 12px 0 8px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 8px; }

    .nav-link-pill { border-radius: var(--fx-r-sm); padding: 8px 10px !important; }
    .gap-lg-1 { gap: 2px !important; }

    .dropdown-menu-app {
        position: static !important;
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, .06);
        border-radius: var(--fx-r-sm);
        margin: 4px 0 !important;
        padding: 4px;
        animation: none;
    }
    .dropdown-item-app { color: rgba(255, 255, 255, .85); }
    .dropdown-item-app:hover { background: rgba(255, 255, 255, .1); color: #fff; }
    .dd-label   { color: rgba(255, 255, 255, .9); }
    .dd-desc    { color: rgba(255, 255, 255, .5); }
    .dd-icon-wrap { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7) !important; }
    .dropdown-header-user { background: rgba(255, 255, 255, .06); }
    .dropdown-header-user .fw-semibold,
    .dropdown-header-user .text-muted { color: rgba(255, 255, 255, .8) !important; }
    .nav-dot-badge { border-color: transparent; }
}

/* SuperAdmin indicator pill */
.sa-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--fx-r-sm);
    background: rgba(255, 180, 4, .14);
    color: var(--fx-gold-deep);
    border: 1px solid rgba(255, 180, 4, .40);
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
}
.sa-badge-nav {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--fx-r-sm);
    background: rgba(255, 180, 4, .22);
    color: #ffd98a;
    border: 1px solid rgba(253, 230, 138, .35);
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
}

/* ── Page header band ────────────────────────────────────────────────────── */
.fx-page-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--fx-navy) 0%, var(--fx-navy-hi) 100%);
    border-radius: var(--fx-r-panel);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--fx-shadow);
}

.fx-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fx-white);
    border-radius: var(--fx-r-control);
    padding: .5rem .75rem;
    line-height: 0;
}

.fx-brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

.fx-page-header-text { flex: 1 1 auto; min-width: 0; }

.fx-page-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.fx-page-subtitle {
    color: rgba(255, 255, 255, .72);
    font-size: .875rem;
    margin: .2rem 0 0;
}

.fx-page-header-extra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Page header used on the non-form pages: navy band with a white icon tile. */
.fx-page-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--fx-r-control);
    background: rgba(255, 255, 255, .14);
    color: var(--fx-gold);
    font-size: 1.1rem;
}

/* Breadcrumb lives inside the navy band, so it inverts. */
.fx-breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .38);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .78);
    margin-bottom: .35rem;
    font-size: .8rem;
}
.fx-breadcrumb .breadcrumb-item,
.fx-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
}
.fx-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .fx-page-header { flex-wrap: wrap; gap: .75rem; padding: 1rem; }
    .fx-page-header-text { flex-basis: 100%; }
    .fx-page-title { font-size: 1.15rem; }
}

/* Generic breadcrumb outside a band. */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--fx-border-strong);
    --bs-breadcrumb-item-active-color: var(--fx-ink-muted);
    font-size: .8rem;
}
.breadcrumb a { color: var(--fx-ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--fx-navy); text-decoration: underline; }

/* ── Page head (non-form pages) ──────────────────────────────────────────── */
/* The consistent title band for list/report/admin pages: a white surface with
   a navy icon tile, navy title and muted subtitle, plus the page's own action
   buttons on the right. White rather than navy because these pages carry real
   controls, which keep their standard (contrast-safe) button styling. */
.fx-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--fx-white);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-panel);
    box-shadow: var(--fx-shadow-sm);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.25rem;
}
.fx-page-head-main {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}
.fx-page-head-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--fx-r-control);
    background: var(--fx-navy);
    color: var(--fx-gold);
    font-size: 1.05rem;
}
.fx-page-head-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--fx-navy);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.fx-page-head-sub {
    color: var(--fx-ink-muted);
    font-size: .855rem;
    margin: .15rem 0 0;
}
.fx-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.fx-page-head .breadcrumb { margin-bottom: .3rem; font-size: .78rem; }
.fx-page-head-icon-sm { width: 34px; height: 34px; font-size: .85rem; }

@media (max-width: 575.98px) {
    .fx-page-head { padding: 1rem; }
    .fx-page-head-title { font-size: 1.05rem; }
    .fx-page-head-actions { width: 100%; }
}

/* Sign-in page: the logo shown at full size on its white panel. */
.fx-login-logo {
    height: 56px;
    width: auto;
    max-width: 100%;
}

/* ── Metrics / stat tiles ────────────────────────────────────────────────── */
.fx-metric-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fx-ink-muted);
}
.fx-metric-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--fx-navy);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.fx-metric-sub { font-size: .78rem; color: var(--fx-ink-muted); }

/* ── Stage chip (Website Publish prototype vs final) ─────────────────────── */
/* Gold is the accent for the milestone that actually ships, navy for the one
   that is still a proposal. Both carry the stage as text, never colour alone. */
.fx-stage-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fx-stage-chip-prototype {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}
.fx-stage-chip-final {
    background: var(--fx-gold);
    color: var(--fx-navy);
    border: 1px solid var(--fx-gold);
}

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.fx-card {
    background: var(--fx-white);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-card);
    box-shadow: var(--fx-shadow-sm);
    padding: 1.5rem;
}

.fx-panel {
    background: var(--fx-white);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-panel);
    box-shadow: var(--fx-shadow-sm);
}

.fx-section {
    background: var(--fx-white);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-card);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card {
    --bs-card-border-color: var(--fx-border);
    --bs-card-border-radius: var(--fx-r-card);
    --bs-card-inner-border-radius: calc(var(--fx-r-card) - 1px);
    --bs-card-bg: var(--fx-white);
    --bs-card-cap-bg: var(--fx-neutral-2);
    --bs-card-cap-color: var(--fx-navy);
    --bs-card-color: var(--fx-ink);
    border-radius: var(--fx-r-card);
}

.card-header {
    font-weight: 600;
    color: var(--fx-navy);
    border-bottom: 1px solid var(--fx-border);
}
.card-header:first-child { border-radius: calc(var(--fx-r-card) - 1px) calc(var(--fx-r-card) - 1px) 0 0; }
.card-footer {
    background: var(--fx-neutral-2);
    border-top: 1px solid var(--fx-border);
}

/* The page-level card carries the panel radius instead. */
.fx-page-card {
    border-radius: var(--fx-r-panel);
    border: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow);
}

/* ── Section titles ──────────────────────────────────────────────────────── */
.fx-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fx-navy);
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--fx-border);
    position: relative;
}
/* Short gold accent — the brand's "small accent indicators". */
.fx-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 2px;
    background: var(--fx-gold);
    border-radius: 2px;
}
.fx-section-title > i { color: var(--fx-navy); font-size: .85rem; }

/* A document's own heading, where a page renders stored content. */
.fx-content-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fx-navy);
    margin: 0 0 .25rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { font-family: var(--fx-font); font-weight: 600; }

.btn:focus-visible {
    box-shadow: 0 0 0 .18rem rgba(0, 24, 66, .18);
    outline: none;
}

/* Destructive-outline and the gold warning button pair navy/gold text so the
   accent stays legible; gold is never the only signal. */
.btn-check:focus-visible + .btn,
.btn:focus-visible { box-shadow: 0 0 0 .18rem rgba(0, 24, 66, .18); }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fx-navy);
    --bs-btn-border-color: var(--fx-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fx-navy-hi);
    --bs-btn-hover-border-color: var(--fx-navy-hi);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fx-navy-lo);
    --bs-btn-active-border-color: var(--fx-navy-lo);
    --bs-btn-focus-shadow-rgb: 0, 24, 66;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--fx-navy);
    --bs-btn-disabled-border-color: var(--fx-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--fx-navy);
    --bs-btn-border-color: var(--fx-border-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fx-navy);
    --bs-btn-hover-border-color: var(--fx-navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fx-navy-lo);
    --bs-btn-active-border-color: var(--fx-navy-lo);
    --bs-btn-focus-shadow-rgb: 0, 24, 66;
}

.btn-outline-secondary {
    --bs-btn-color: var(--fx-navy);
    --bs-btn-bg: var(--fx-white);
    --bs-btn-border-color: var(--fx-border-strong);
    --bs-btn-hover-color: var(--fx-navy);
    --bs-btn-hover-bg: var(--fx-neutral);
    --bs-btn-hover-border-color: var(--fx-neutral);
    --bs-btn-active-color: var(--fx-navy);
    --bs-btn-active-bg: var(--fx-neutral);
    --bs-btn-active-border-color: var(--fx-neutral);
    --bs-btn-focus-shadow-rgb: 0, 24, 66;
    --bs-btn-disabled-color: var(--fx-ink-muted);
    --bs-btn-disabled-bg: var(--fx-white);
    --bs-btn-disabled-border-color: var(--fx-border);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fx-success);
    --bs-btn-border-color: var(--fx-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #275a42;
    --bs-btn-hover-border-color: #275a42;
    --bs-btn-active-bg: #1f4a36;
    --bs-btn-active-border-color: #1f4a36;
    --bs-btn-focus-shadow-rgb: 47, 107, 79;
}

/* Destructive stays red — never gold. The fill and the outline variant need
   separate rules: setting --bs-btn-bg on an outline button would fill it. */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fx-danger);
    --bs-btn-border-color: var(--fx-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8e312b;
    --bs-btn-hover-border-color: #8e312b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7d2b25;
    --bs-btn-active-border-color: #7d2b25;
    --bs-btn-focus-shadow-rgb: 166, 58, 50;
}

.btn-outline-danger {
    --bs-btn-color: var(--fx-danger);
    --bs-btn-border-color: var(--fx-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fx-danger);
    --bs-btn-hover-border-color: var(--fx-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8e312b;
    --bs-btn-active-border-color: #8e312b;
    --bs-btn-focus-shadow-rgb: 166, 58, 50;
}

.btn-warning {
    --bs-btn-color: var(--fx-navy);
    --bs-btn-bg: var(--fx-gold);
    --bs-btn-border-color: var(--fx-gold);
    --bs-btn-hover-color: var(--fx-navy);
    --bs-btn-hover-bg: #f0a904;
    --bs-btn-hover-border-color: #f0a904;
    --bs-btn-active-color: var(--fx-navy);
    --bs-btn-active-bg: #e09d03;
    --bs-btn-active-border-color: #e09d03;
    --bs-btn-focus-shadow-rgb: 255, 181, 4;
}

/* Gold is an accent and has to be paired with navy text — white on #FFB504 is
   about 1.8:1. Existing call sites write `btn-warning text-white`, so the
   utility's !important has to be answered with one and higher specificity. */
.btn-warning.text-white,
.btn-warning .text-white { color: var(--fx-navy) !important; }

.btn-light {
    --bs-btn-color: var(--fx-navy);
    --bs-btn-bg: var(--fx-white);
    --bs-btn-border-color: var(--fx-border);
    --bs-btn-hover-color: var(--fx-navy);
    --bs-btn-hover-bg: var(--fx-neutral-2);
    --bs-btn-hover-border-color: var(--fx-border-strong);
    --bs-btn-active-color: var(--fx-navy);
    --bs-btn-active-bg: var(--fx-neutral);
    --bs-btn-active-border-color: var(--fx-border-strong);
}

.btn-link {
    --bs-btn-color: var(--fx-navy);
    --bs-btn-hover-color: var(--fx-navy-hi);
    --bs-btn-active-color: var(--fx-navy-lo);
    font-weight: 600;
}

/* A disabled control reads as inactive rather than as a faded live button. */
.btn:disabled,
.btn.disabled {
    opacity: 1;
    cursor: not-allowed;
    --bs-btn-disabled-bg: var(--fx-neutral);
    --bs-btn-disabled-border-color: var(--fx-border-strong);
    --bs-btn-disabled-color: var(--fx-ink-muted);
    box-shadow: none;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--fx-navy);
    margin-bottom: .3rem;
}

.form-text { font-size: .78rem; color: var(--fx-ink-muted); }

.form-control,
.form-select {
    border-color: var(--fx-border-strong);
    padding: .5rem .75rem;
    font-size: .9rem;
    color: var(--fx-ink);
    background-color: var(--fx-white);
}

.form-control::placeholder { color: #9aa1ad; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--fx-navy);
    box-shadow: 0 0 0 .16rem rgba(0, 24, 66, .12);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--fx-neutral);
    border-color: var(--fx-border);
    color: var(--fx-ink-muted);
}

.form-check-input { border-color: var(--fx-border-strong); }
.form-check-input:checked {
    background-color: var(--fx-navy);
    border-color: var(--fx-navy);
}
.form-check-input:focus { box-shadow: 0 0 0 .16rem rgba(0, 24, 66, .12); }
.form-check-label { font-size: .875rem; }

.input-group-text {
    background: var(--fx-white);
    border-color: var(--fx-border-strong);
    color: var(--fx-ink-muted);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--fx-ink-muted); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* A selectable tile rather than a bare checkbox on a line. */
.fx-choice {
    background: var(--fx-white);
    border: 1px solid var(--fx-border-strong);
    border-radius: var(--fx-r-control);
    padding: .45rem .8rem;
    margin: 0;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.fx-choice:hover { border-color: var(--fx-navy); }
.fx-choice:has(input:checked) {
    border-color: var(--fx-navy);
    background: var(--fx-navy-tint);
    box-shadow: inset 0 0 0 1px var(--fx-navy);
}
.fx-choice:has(input:checked) .form-check-label {
    color: var(--fx-navy);
    font-weight: 600;
}
.fx-choice .form-check-input { margin-top: .22em; }

.form-check-input:checked ~ .form-check-label { font-weight: 600; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table {
    --bs-table-border-color: var(--fx-border);
    --bs-table-color: var(--fx-ink);
    --bs-table-hover-bg: var(--fx-navy-tint);
    --bs-table-striped-bg: var(--fx-neutral-2);
}
.table > :not(caption) > * > * { border-bottom-color: var(--fx-border); }
.table thead th { color: var(--fx-navy); }
.table > tbody > tr:hover > * { --bs-table-accent-bg: var(--bs-table-hover-bg); }

/* Bootstrap's contextual table classes, re-pointed at the muted palette. */
.table-light     { --bs-table-color: var(--fx-navy);      --bs-table-bg: var(--fx-neutral-2); }
.table-secondary { --bs-table-color: var(--fx-ink-muted); --bs-table-bg: var(--fx-neutral); }
.table-success   { --bs-table-color: var(--fx-success);   --bs-table-bg: var(--fx-success-bg); }
.table-danger    { --bs-table-color: var(--fx-danger);    --bs-table-bg: var(--fx-danger-bg); }
.table-warning   { --bs-table-color: var(--fx-warning);   --bs-table-bg: var(--fx-warning-bg); }
.table-info      { --bs-table-color: var(--fx-info);      --bs-table-bg: var(--fx-info-bg); }
.table-active    { --bs-table-color: var(--fx-navy);      --bs-table-bg: var(--fx-navy-tint); }

.fx-table {
    --bs-table-border-color: var(--fx-border);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--fx-navy-tint);
    --bs-table-accent-bg: transparent;
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--fx-ink);
}
/* The markup keeps `table-bordered`, so the heavy grid is neutralised here
   rather than in the view. */
.fx-table.table-bordered > :not(caption) > * { border-width: 0; }
.fx-table.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--fx-border);
    padding: .7rem .75rem;
    box-shadow: none;
}
.fx-table thead th,
.fx-table > thead > tr > th {
    background: var(--fx-navy-tint);
    color: var(--fx-navy);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fx-border) !important;
}
.fx-table tbody tr:last-child > * { border-bottom-width: 0 !important; }
.fx-table tbody tr:hover > * { background-color: var(--fx-navy-tint); }

/* A row that was explicitly selected/done gets the light navy wash. */
.fx-table tbody tr.fx-row-selected > * { background-color: var(--fx-navy-tint-2); }

/* The scroll wrapper is the one the sticky header positions against — a
   `table-responsive` parent (overflow-x:auto) would not give an unambiguous
   reference. */
.fx-table-scroll {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-card);
    background: var(--fx-white);
}
.fx-table-scroll .fx-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--fx-border);
}
.fx-table-scroll .fx-table > :not(caption) > * > *:first-child { padding-left: 1rem; }
.fx-table-scroll .fx-table > :not(caption) > * > *:last-child { padding-right: 1rem; }
.fx-table-scroll .fx-table thead th:first-child { border-top-left-radius: 0; }
.fx-table-scroll .fx-table thead th:last-child { border-top-right-radius: 0; }

/* Same sticky header, for tables that already sit inside a card (so the card
   supplies the frame and this only supplies the scroll container). */
.fx-table-sticky { max-height: 70vh; overflow: auto; }
.fx-table-sticky .fx-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--fx-border);
}

/* Row headings inside a table read as data labels, not as page headings. */
.fx-table tbody th[scope="row"] { color: var(--fx-navy); font-weight: 600; }

/* ── Badges and pills ────────────────────────────────────────────────────── */
.badge {
    --bs-badge-font-size: .72em;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .4em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.fx-badge-navy { background: var(--fx-navy); color: #fff; }
.fx-badge-gold { background: var(--fx-gold); color: var(--fx-navy); }
.fx-badge-neutral { background: var(--fx-neutral); color: var(--fx-ink); }
.fx-badge-outline {
    background: var(--fx-white);
    color: var(--fx-ink);
    border: 1px solid var(--fx-border-strong);
}

/* Each keeps its own text, so the colour only reinforces what is written.
   Scoped to badges on purpose: `bg-success` also tints whole cards. */
.badge.bg-success { background-color: var(--fx-success) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--fx-danger) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--fx-neutral) !important; color: var(--fx-ink) !important; }
.badge.bg-warning { background-color: var(--fx-gold) !important; color: var(--fx-navy) !important; }
.badge.bg-info { background-color: var(--fx-info) !important; color: #fff !important; }
.badge.bg-light { background-color: var(--fx-neutral) !important; color: var(--fx-ink) !important; }
.badge.bg-primary { background-color: var(--fx-navy) !important; color: #fff !important; }

/* Any badge containing a Font Awesome icon gets flex so the icon and any sibling
   text are vertically centered inside the badge background. */
.badge:has(> i[class*="fa-"]) {
    display: inline-flex !important;
    align-items: center !important;
}
.badge:has(> i[class*="fa-"]:only-child) {
    justify-content: center !important;
    line-height: 0 !important;
    --bs-badge-padding-y: 0.45em;
    --bs-badge-padding-x: 0.55em;
}
.badge:has(> i[class*="fa-"]:only-child) > i {
    display: block !important;
    line-height: 1;
}
.badge:has(> i[class*="fa-"]:only-child) > i::before {
    position: relative;
    top: 0.12em;
}
td .badge { white-space: nowrap; }

/* ── Accordion (the form page's structural device) ───────────────────────── */
.form-info-accordion {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-card);
    background: var(--fx-neutral-2);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-info-accordion:focus-within,
.form-info-accordion:has(.collapse.show) {
    border-color: var(--fx-navy);
    box-shadow: 0 0 0 .16rem rgba(0, 24, 66, .10);
}
.form-info-accordion-accent-primary,
.form-info-accordion-accent-secondary,
.form-info-accordion[style*="border-left"] { border-left: 4px solid var(--fx-navy) !important; }

.form-info-accordion-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.form-info-accordion-toggle:focus,
.form-info-accordion-toggle:active {
    outline: none;
    box-shadow: none;
    background: rgba(0, 24, 66, 0.04);
}
.form-info-accordion-toggle .accordion-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fx-navy) !important;
}
.form-info-accordion-toggle > i:first-child { color: var(--fx-navy) !important; }

/* Gold chevron — a small, purposeful accent. */
.accordion-chevron {
    transition: transform 0.25s ease;
    font-size: 0.75em;
    color: var(--fx-gold-deep) !important;
}
.form-info-accordion-toggle[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }

.form-info-accordion-body {
    padding: 0 1rem 0.75rem 1rem;
    border-top: 1px solid var(--fx-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fx-ink);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--fx-r-control);
    border-width: 1px;
    font-size: .875rem;
}
.alert-danger {
    --bs-alert-color: #7d2b25;
    --bs-alert-bg: var(--fx-danger-bg);
    --bs-alert-border-color: #eccfcc;
    --bs-alert-link-color: #7d2b25;
}
.alert-warning {
    --bs-alert-color: #6b4c00;
    --bs-alert-bg: var(--fx-warning-bg);
    --bs-alert-border-color: #f0e0b4;
    --bs-alert-link-color: #6b4c00;
}
.alert-success {
    --bs-alert-color: #24523d;
    --bs-alert-bg: var(--fx-success-bg);
    --bs-alert-border-color: #cfe2d8;
    --bs-alert-link-color: #24523d;
}
.alert-info {
    --bs-alert-color: #22406c;
    --bs-alert-bg: var(--fx-info-bg);
    --bs-alert-border-color: #d3ddec;
    --bs-alert-link-color: #22406c;
}
.alert-light {
    --bs-alert-color: var(--fx-ink);
    --bs-alert-bg: var(--fx-neutral-2);
    --bs-alert-border-color: var(--fx-border);
    --bs-alert-link-color: var(--fx-navy);
}
.alert-secondary {
    --bs-alert-color: var(--fx-ink);
    --bs-alert-bg: var(--fx-neutral-2);
    --bs-alert-border-color: var(--fx-border);
    --bs-alert-link-color: var(--fx-navy);
}

/* ── Read-only data grid ─────────────────────────────────────────────────── */
.fx-datum {
    background: var(--fx-neutral-2);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-sm);
    padding: .55rem .7rem;
    font-weight: 600;
    color: var(--fx-navy);
    word-break: break-word;
}
.fx-datum-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fx-ink-muted);
    margin-bottom: .25rem;
}

/* ── Footer action bar ───────────────────────────────────────────────────── */
.fx-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--fx-border);
    padding-top: 1rem;
    margin-top: 1.5rem;
}
@media (max-width: 575.98px) {
    .fx-action-bar > * { flex: 1 1 100%; justify-content: center; }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
    --bs-pagination-color: var(--fx-navy);
    --bs-pagination-bg: var(--fx-white);
    --bs-pagination-border-color: var(--fx-border);
    --bs-pagination-hover-color: var(--fx-navy);
    --bs-pagination-hover-bg: var(--fx-navy-tint);
    --bs-pagination-hover-border-color: var(--fx-border);
    --bs-pagination-focus-color: var(--fx-navy);
    --bs-pagination-focus-bg: var(--fx-navy-tint);
    --bs-pagination-focus-box-shadow: 0 0 0 .16rem rgba(0, 24, 66, .12);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--fx-navy);
    --bs-pagination-active-border-color: var(--fx-navy);
    --bs-pagination-disabled-color: var(--fx-ink-muted);
    --bs-pagination-disabled-bg: var(--fx-white);
    --bs-pagination-disabled-border-color: var(--fx-border);
}
.page-link { font-size: .85rem; }

/* ── List groups ─────────────────────────────────────────────────────────── */
.list-group {
    --bs-list-group-color: var(--fx-ink);
    --bs-list-group-border-color: var(--fx-border);
    --bs-list-group-action-color: var(--fx-navy);
    --bs-list-group-action-hover-color: var(--fx-navy);
    --bs-list-group-action-hover-bg: var(--fx-navy-tint);
    --bs-list-group-action-active-color: var(--fx-navy);
    --bs-list-group-action-active-bg: var(--fx-navy-tint-2);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--fx-navy);
    --bs-list-group-active-border-color: var(--fx-navy);
    --bs-list-group-bg: var(--fx-white);
}

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress {
    --bs-progress-bg: var(--fx-neutral);
    --bs-progress-bar-bg: var(--fx-navy);
    --bs-progress-height: .5rem;
    --bs-progress-border-radius: 999px;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--fx-border);
    --bs-nav-tabs-link-hover-border-color: var(--fx-neutral) var(--fx-neutral) var(--fx-border);
    --bs-nav-tabs-link-active-color: var(--fx-navy);
    --bs-nav-tabs-link-active-bg: var(--fx-white);
    --bs-nav-tabs-link-active-border-color: var(--fx-border) var(--fx-border) var(--fx-white);
    --bs-nav-link-color: var(--fx-ink-muted);
    --bs-nav-link-hover-color: var(--fx-navy);
}
.nav-tabs .nav-link.active { font-weight: 600; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-panel);
    box-shadow: var(--fx-shadow);
}
.modal-header { border-bottom-color: var(--fx-border); }
.modal-footer { border-top-color: var(--fx-border); }
.modal-title { color: var(--fx-navy); font-weight: 700; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.fx-fill-note {
    background: var(--fx-gold-tint);
    border-left: 3px solid var(--fx-gold);
    border-radius: var(--fx-r-sm);
    padding: .55rem .75rem;
    font-size: .8rem;
    color: var(--fx-ink);
}

.fx-divider {
    height: 1px;
    background: var(--fx-border);
    border: 0;
    margin: 1.25rem 0;
    opacity: 1;
}

.fx-search .input-group-text,
.fx-search .form-control {
    background: var(--fx-white);
    border-color: var(--fx-border-strong);
}
.fx-search .input-group-text { border-right: 0; }
.fx-search .form-control { border-left: 0; }

/* Small uppercase label used above metrics and in stat tiles. */
.fx-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fx-ink-muted);
}