/* ============================================================================
   Built For More Works — brand theme
   ============================================================================
   THE STYLE GUIDE (the five swatches, verbatim):

     #546486  Slate   — the primary brand colour. Navbar, primary actions, links.
     #D7ECFE  Sky     — pale accent surface. Highlights, info panels, selection.
     #6B8396  Steel   — secondary. Muted chrome, borders, secondary actions.
     #DDDDDD  Cloud   — neutral. Dividers, rules, resting surfaces.
     #999999  Grey    — muted UI. Disabled states, decorative marks.

   WHY THERE ARE MORE TOKENS THAN SWATCHES
   A palette names a look; an interface also needs hover states, pressed states,
   and text that stays legible on every one of those surfaces. Every extra token
   below is DERIVED from a swatch (same hue, shifted lightness) and is labelled
   as such — nothing new is invented, and the five originals still carry the
   identity wherever they can be seen at full strength.

   THE ONE PLACE THE GUIDE IS BENT, AND WHY
   White text on Steel #6B8396 measures 3.95:1, under the 4.5:1 WCAG AA floor
   for body-sized text. Badges and secondary buttons put white text on exactly
   that colour, so those surfaces use --bfc-steel-deep #55697A (5.69:1) instead.
   Steel itself is unchanged wherever it is seen as a colour rather than read
   through — borders, rules, icons, large text. Contrast ratios against white
   are noted per token so the next edit doesn't quietly regress one.

   HOW THIS FILE WORKS
   Two layers. First the brand tokens (--bfc-*), which are what page and
   component CSS should reference. Then a bridge that feeds those tokens into
   Bootstrap 5.3's own CSS variables, so the ~460 cards, ~140 primary buttons,
   ~470 muted labels and every alert and badge already in the app re-skin from
   here without touching a single page. Load order matters: this file must come
   after bootstrap.min.css.
   ============================================================================ */

:root {
    /* ---- The five brand colours ------------------------------------------ */
    --bfc-slate: #546486; /* primary                      5.93:1 on white */
    --bfc-sky: #D7ECFE; /* pale accent surface                          */
    --bfc-steel: #6B8396; /* secondary                    3.95:1 on white */
    --bfc-cloud: #DDDDDD; /* neutral border / surface                     */
    --bfc-grey: #999999; /* muted UI, disabled           2.85:1 on white */

    /* ---- Derived from Slate ---------------------------------------------- */
    --bfc-slate-hover: #43506C; /* hover                  8.07:1 on white */
    --bfc-slate-active: #353F55; /* pressed / headings   10.6:1 on white */
    --bfc-slate-tint: #EEF2F8; /* faintest slate wash — resting surface  */
    --bfc-slate-rgb: 84, 100, 134;

    /* ---- Derived from Sky ------------------------------------------------- */
    --bfc-sky-hover: #B9DBF6; /* hover on a sky surface                  */
    --bfc-sky-border: #A9CDEC; /* edge of a sky surface                   */

    /* ---- Derived from Steel ----------------------------------------------- */
    --bfc-steel-deep: #55697A; /* white text sits here   5.69:1 on white */
    --bfc-steel-rgb: 85, 105, 122; /* the AA-safe steel, for bg-* utilities */

    /* ---- Text ------------------------------------------------------------- */
    --bfc-ink: #262E3F; /* body copy — slate family    13.6:1 on white */
    /* Muted copy has to clear 4.5:1 on EVERY surface it can land on, not just
       white. .text-muted has ~470 uses and appears on card headers and
       highlight rows too, so it is measured against the three backgrounds it
       actually meets: white 5.84:1, --bfc-slate-tint 5.20:1, --bfc-sky 4.82:1.
       A lighter grey passes on white and quietly fails on the tint. */
    --bfc-ink-muted: #5D6472;
    --bfc-ink-rgb: 38, 46, 63;

    /* ---- Surfaces --------------------------------------------------------- */
    --bfc-surface: #FFFFFF;
    --bfc-surface-sunken: #F5F7FA; /* page wash beneath cards               */
    --bfc-border: #DDDDDD; /* = Cloud                               */
    --bfc-border-strong: #C3CBD6; /* Cloud shifted toward slate            */

    /* ---- Status --------------------------------------------------------------
       The guide is a neutral blue-grey family with no success/danger/warning
       colour, so these are desaturated to sit beside Slate rather than shout
       over it. All four text tones clear 4.5:1 on white and on their own
       subtle background. ---------------------------------------------------- */
    --bfc-success: #2F6B4F; /* 6.29:1 on white */
    --bfc-success-subtle: #E4F0EA;
    --bfc-success-border: #B7D5C6;
    --bfc-success-rgb: 47, 107, 79;

    --bfc-danger: #A23B32; /* 6.55:1 on white */
    --bfc-danger-subtle: #FAE9E7;
    --bfc-danger-border: #E8C0BB;
    --bfc-danger-rgb: 162, 59, 50;

    --bfc-warning: #8A5A00; /* 5.93:1 on white */
    --bfc-warning-subtle: #FDF3D7;
    --bfc-warning-border: #EBD9A4;
    --bfc-warning-rgb: 138, 90, 0;

    --bfc-info: #2C4A63; /* 9.26:1 on white — Sky, darkened to read */
    --bfc-info-subtle: #D7ECFE; /* = Sky at full strength */
    --bfc-info-border: #A9CDEC;
    --bfc-info-rgb: 44, 74, 99;

    /* ---- Shape ------------------------------------------------------------- */
    --bfc-radius: 0.375rem;
    --bfc-focus-ring: 0 0 0 0.25rem rgba(84, 100, 134, 0.35);

    /* ---- Type ------------------------------------------------------------------
       The style guide is colour only, so the typeface is unchanged: Calibri still
       leads, and on Windows nothing about the current look moves. What is new is
       the rest of the stack. The old rules said `font-family: Calibri` with no
       fallback, so a Mac, an iPad or an Android phone — every family registering
       from a phone, in other words — silently dropped to the browser default,
       which for a bare font-family declaration can be a serif. Segoe UI and
       system-ui carry the same humanist proportions where Calibri is absent. */
    --bfc-font-sans: Calibri, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================================
   Bootstrap 5.3 bridge
   Bootstrap reads these at :root for backgrounds, text utilities and every
   alert; per-component overrides follow further down for the parts that bake
   their colours into class-scoped variables (buttons, chiefly).
   ============================================================================ */

:root,
[data-bs-theme="light"] {
    --bs-primary: var(--bfc-slate);
    --bs-primary-rgb: var(--bfc-slate-rgb);
    --bs-primary-text-emphasis: var(--bfc-slate-active);
    --bs-primary-bg-subtle: var(--bfc-sky);
    --bs-primary-border-subtle: var(--bfc-sky-border);

    /* Secondary resolves to the AA-safe steel because bg-secondary and
       text-bg-secondary both force white text on top of it. */
    --bs-secondary: var(--bfc-steel-deep);
    --bs-secondary-rgb: var(--bfc-steel-rgb);
    --bs-secondary-text-emphasis: #3E4E5C;
    --bs-secondary-bg-subtle: var(--bfc-slate-tint);
    --bs-secondary-border-subtle: var(--bfc-border-strong);

    --bs-success: var(--bfc-success);
    --bs-success-rgb: var(--bfc-success-rgb);
    --bs-success-text-emphasis: #245239;
    --bs-success-bg-subtle: var(--bfc-success-subtle);
    --bs-success-border-subtle: var(--bfc-success-border);

    --bs-danger: var(--bfc-danger);
    --bs-danger-rgb: var(--bfc-danger-rgb);
    --bs-danger-text-emphasis: #7E2D26;
    --bs-danger-bg-subtle: var(--bfc-danger-subtle);
    --bs-danger-border-subtle: var(--bfc-danger-border);

    --bs-warning: var(--bfc-warning);
    --bs-warning-rgb: var(--bfc-warning-rgb);
    --bs-warning-text-emphasis: #6B4600;
    --bs-warning-bg-subtle: var(--bfc-warning-subtle);
    --bs-warning-border-subtle: var(--bfc-warning-border);

    --bs-info: var(--bfc-info);
    --bs-info-rgb: var(--bfc-info-rgb);
    --bs-info-text-emphasis: #223A4E;
    --bs-info-bg-subtle: var(--bfc-info-subtle);
    --bs-info-border-subtle: var(--bfc-info-border);

    --bs-light: var(--bfc-surface-sunken);
    --bs-light-rgb: 245, 247, 250;
    --bs-dark: var(--bfc-slate-active);
    --bs-dark-rgb: 53, 63, 85;

    /* Body, text and rules */
    --bs-body-color: var(--bfc-ink);
    --bs-body-color-rgb: var(--bfc-ink-rgb);
    --bs-body-bg: var(--bfc-surface);
    --bs-emphasis-color: var(--bfc-slate-active);
    --bs-heading-color: var(--bfc-slate-active);

    /* .text-muted and .text-secondary — 471 uses, so this one carries weight. */
    --bs-secondary-color: var(--bfc-ink-muted);
    --bs-secondary-bg: var(--bfc-surface-sunken);
    --bs-tertiary-color: var(--bfc-grey);
    --bs-tertiary-bg: var(--bfc-slate-tint);

    --bs-border-color: var(--bfc-border);
    --bs-border-color-translucent: rgba(38, 46, 63, 0.14);

    --bs-link-color: var(--bfc-slate);
    --bs-link-color-rgb: var(--bfc-slate-rgb);
    --bs-link-hover-color: var(--bfc-slate-hover);
    --bs-link-hover-color-rgb: 67, 80, 108;

    --bs-focus-ring-color: rgba(84, 100, 134, 0.35);
    --bs-code-color: #7A4A6E;
    --bs-highlight-bg: var(--bfc-sky);
}

/* ---- Buttons ---------------------------------------------------------------
   Bootstrap bakes literal hex into each .btn-* class rather than reading
   --bs-primary, so each variant in use across the app is restated here. Filled
   variants keep white text; every background below clears 4.5:1 against it.
   -------------------------------------------------------------------------- */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bfc-slate);
    --bs-btn-border-color: var(--bfc-slate);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bfc-slate-hover);
    --bs-btn-hover-border-color: var(--bfc-slate-hover);
    --bs-btn-focus-shadow-rgb: var(--bfc-slate-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bfc-slate-active);
    --bs-btn-active-border-color: var(--bfc-slate-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bfc-steel);
    --bs-btn-disabled-border-color: var(--bfc-steel);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bfc-steel-deep);
    --bs-btn-border-color: var(--bfc-steel-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #47596A;
    --bs-btn-hover-border-color: #47596A;
    --bs-btn-focus-shadow-rgb: var(--bfc-steel-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3E4E5C;
    --bs-btn-active-border-color: #3E4E5C;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-grey);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bfc-success);
    --bs-btn-border-color: var(--bfc-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #275A43;
    --bs-btn-hover-border-color: #275A43;
    --bs-btn-focus-shadow-rgb: var(--bfc-success-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1F4A37;
    --bs-btn-active-border-color: #1F4A37;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-grey);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bfc-danger);
    --bs-btn-border-color: var(--bfc-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8B322A;
    --bs-btn-hover-border-color: #8B322A;
    --bs-btn-focus-shadow-rgb: var(--bfc-danger-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #742A23;
    --bs-btn-active-border-color: #742A23;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-grey);
}

/* Filled warning keeps DARK text — the amber is a surface, not an ink here. */
.btn-warning {
    --bs-btn-color: var(--bfc-slate-active);
    --bs-btn-bg: #F0D89A;
    --bs-btn-border-color: #E3C87F;
    --bs-btn-hover-color: var(--bfc-slate-active);
    --bs-btn-hover-bg: #E7CB84;
    --bs-btn-hover-border-color: #D9B968;
    --bs-btn-focus-shadow-rgb: var(--bfc-warning-rgb);
    --bs-btn-active-color: var(--bfc-slate-active);
    --bs-btn-active-bg: #D9B968;
    --bs-btn-active-border-color: #D9B968;
    --bs-btn-disabled-color: var(--bfc-ink-muted);
    --bs-btn-disabled-bg: var(--bfc-cloud);
    --bs-btn-disabled-border-color: var(--bfc-cloud);
}

.btn-info {
    --bs-btn-color: var(--bfc-info);
    --bs-btn-bg: var(--bfc-sky);
    --bs-btn-border-color: var(--bfc-sky-border);
    --bs-btn-hover-color: var(--bfc-info);
    --bs-btn-hover-bg: var(--bfc-sky-hover);
    --bs-btn-hover-border-color: var(--bfc-sky-border);
    --bs-btn-focus-shadow-rgb: var(--bfc-slate-rgb);
    --bs-btn-active-color: var(--bfc-info);
    --bs-btn-active-bg: var(--bfc-sky-hover);
    --bs-btn-active-border-color: var(--bfc-sky-border);
}

.btn-light {
    --bs-btn-color: var(--bfc-slate-active);
    --bs-btn-bg: var(--bfc-surface);
    --bs-btn-border-color: var(--bfc-border);
    --bs-btn-hover-color: var(--bfc-slate-active);
    --bs-btn-hover-bg: var(--bfc-slate-tint);
    --bs-btn-hover-border-color: var(--bfc-border-strong);
    --bs-btn-active-color: var(--bfc-slate-active);
    --bs-btn-active-bg: var(--bfc-sky);
    --bs-btn-active-border-color: var(--bfc-sky-border);
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bfc-slate-active);
    --bs-btn-border-color: var(--bfc-slate-active);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2B3345;
    --bs-btn-hover-border-color: #2B3345;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #22293A;
    --bs-btn-active-border-color: #22293A;
}

/* Outline variants: the resting label sits on white, so each colour below is
   the AA-safe tone rather than the decorative one. */
.btn-outline-primary {
    --bs-btn-color: var(--bfc-slate);
    --bs-btn-border-color: var(--bfc-slate);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bfc-slate);
    --bs-btn-hover-border-color: var(--bfc-slate);
    --bs-btn-focus-shadow-rgb: var(--bfc-slate-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bfc-slate-active);
    --bs-btn-active-border-color: var(--bfc-slate-active);
    --bs-btn-disabled-color: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-cloud);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bfc-steel-deep);
    --bs-btn-border-color: var(--bfc-border-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bfc-steel-deep);
    --bs-btn-hover-border-color: var(--bfc-steel-deep);
    --bs-btn-focus-shadow-rgb: var(--bfc-steel-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3E4E5C;
    --bs-btn-active-border-color: #3E4E5C;
    --bs-btn-disabled-color: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-cloud);
}

.btn-outline-success {
    --bs-btn-color: var(--bfc-success);
    --bs-btn-border-color: var(--bfc-success-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bfc-success);
    --bs-btn-hover-border-color: var(--bfc-success);
    --bs-btn-focus-shadow-rgb: var(--bfc-success-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1F4A37;
    --bs-btn-active-border-color: #1F4A37;
    --bs-btn-disabled-color: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-cloud);
}

.btn-outline-danger {
    --bs-btn-color: var(--bfc-danger);
    --bs-btn-border-color: var(--bfc-danger-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bfc-danger);
    --bs-btn-hover-border-color: var(--bfc-danger);
    --bs-btn-focus-shadow-rgb: var(--bfc-danger-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #742A23;
    --bs-btn-active-border-color: #742A23;
    --bs-btn-disabled-color: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-cloud);
}

.btn-outline-warning {
    --bs-btn-color: var(--bfc-warning);
    --bs-btn-border-color: var(--bfc-warning-border);
    --bs-btn-hover-color: var(--bfc-slate-active);
    --bs-btn-hover-bg: #F0D89A;
    --bs-btn-hover-border-color: #E3C87F;
    --bs-btn-focus-shadow-rgb: var(--bfc-warning-rgb);
    --bs-btn-active-color: var(--bfc-slate-active);
    --bs-btn-active-bg: #E7CB84;
    --bs-btn-active-border-color: #D9B968;
    --bs-btn-disabled-color: var(--bfc-grey);
    --bs-btn-disabled-border-color: var(--bfc-cloud);
}

.btn-outline-info {
    --bs-btn-color: var(--bfc-info);
    --bs-btn-border-color: var(--bfc-sky-border);
    --bs-btn-hover-color: var(--bfc-info);
    --bs-btn-hover-bg: var(--bfc-sky);
    --bs-btn-hover-border-color: var(--bfc-sky-border);
    --bs-btn-focus-shadow-rgb: var(--bfc-slate-rgb);
    --bs-btn-active-color: var(--bfc-info);
    --bs-btn-active-bg: var(--bfc-sky-hover);
    --bs-btn-active-border-color: var(--bfc-sky-border);
}

.btn-link {
    --bs-btn-color: var(--bfc-slate);
    --bs-btn-hover-color: var(--bfc-slate-hover);
    --bs-btn-active-color: var(--bfc-slate-active);
    --bs-btn-disabled-color: var(--bfc-grey);
    --bs-btn-focus-shadow-rgb: var(--bfc-slate-rgb);
}

/* ---- Cards, tables, forms, badges ----------------------------------------- */

.card {
    --bs-card-border-color: var(--bfc-border);
    --bs-card-cap-bg: var(--bfc-slate-tint);
    --bs-card-cap-color: var(--bfc-slate-active);
}

.table {
    --bs-table-border-color: var(--bfc-border);
    --bs-table-striped-bg: var(--bfc-slate-tint);
    --bs-table-hover-bg: var(--bfc-sky);
    --bs-table-active-bg: var(--bfc-sky-hover);
}

.table-light {
    --bs-table-color: var(--bfc-slate-active);
    --bs-table-bg: var(--bfc-slate-tint);
    --bs-table-border-color: var(--bfc-border);
    --bs-table-striped-bg: #E7ECF3;
    --bs-table-striped-color: var(--bfc-slate-active);
    --bs-table-active-bg: var(--bfc-sky-hover);
    --bs-table-active-color: var(--bfc-slate-active);
    --bs-table-hover-bg: var(--bfc-sky);
    --bs-table-hover-color: var(--bfc-slate-active);
}

.form-control,
.form-select {
    border-color: var(--bfc-border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bfc-slate);
    box-shadow: var(--bfc-focus-ring);
}

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

.form-check-input:focus {
    border-color: var(--bfc-slate);
    box-shadow: var(--bfc-focus-ring);
}

.badge {
    font-weight: 600;
}

/* text-bg-warning forces white text in Bootstrap, which fails on any amber
   light enough to read as a warning. Dark ink on the amber surface instead. */
.text-bg-warning {
    color: var(--bfc-slate-active) !important;
    background-color: #F0D89A !important;
}

.text-bg-light {
    color: var(--bfc-slate-active) !important;
    background-color: var(--bfc-slate-tint) !important;
}

.list-group {
    --bs-list-group-border-color: var(--bfc-border);
    --bs-list-group-action-hover-bg: var(--bfc-slate-tint);
    --bs-list-group-active-bg: var(--bfc-slate);
    --bs-list-group-active-border-color: var(--bfc-slate);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bfc-slate);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--bfc-border);
    --bs-dropdown-link-hover-bg: var(--bfc-slate-tint);
    --bs-dropdown-link-active-bg: var(--bfc-slate);
}

.progress {
    --bs-progress-bar-bg: var(--bfc-slate);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: var(--bfc-focus-ring);
    --bs-accordion-active-color: var(--bfc-slate-active);
    --bs-accordion-active-bg: var(--bfc-sky);
}