/*
 * iBenthos site-wide theme layer  —  "Refined Navy-Teal"
 * --------------------------------------------------------
 * Non-disruptive theming for Bootstrap 5.3.x. This file recolours and lightly
 * polishes existing Bootstrap components by overriding Bootstrap's own CSS
 * custom properties (--bs-*) plus a small number of targeted component rules.
 * It adds NO new markup requirements and introduces no new class contracts, so
 * it can be removed by deleting its single <link> in ibenthospagetemplate.html.
 *
 * Loaded AFTER the Bootstrap CDN stylesheet so :root overrides win by source
 * order. Component-level button colours are set via Bootstrap's per-component
 * --bs-btn-* variables (the compiled .btn-primary hardcodes its own colour, so
 * overriding --bs-primary alone is not enough for buttons).
 */

:root {
    /* Brand palette */
    --theme-primary: #1C5A78;        /* deep navy-teal — navbar, buttons, links */
    --theme-primary-rgb: 28, 90, 120;
    --theme-primary-dark: #15485F;   /* hover / active / pressed */
    --theme-accent: #2FA0A8;         /* cyan-teal — highlights, active edge */
    --theme-accent-rgb: 47, 160, 168;
    --theme-ink: #16252E;            /* sidebar / dark surfaces */
    --theme-ink-rgb: 22, 37, 46;
    --theme-bg: #F6F8FA;             /* page background (subtle cool tint) */
    --theme-surface: #FFFFFF;        /* cards */

    /* Site-wide type voice. The fonts are loaded in ibenthospagetemplate.html;
       here we point Bootstrap's body font family at Plex Sans (system stack as
       fallback) so headings, UI and body share one voice. Mono is reserved for
       eyebrows, captions, tokens and data via --theme-mono / .eyebrow. */
    --theme-sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --theme-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
    --bs-body-font-family: var(--theme-sans);

    /* Re-point Bootstrap's brand variables. .bg-primary / .text-primary /
       .border-primary all derive from --bs-primary-rgb, so these recolour
       the navbar and any primary-tinted utility automatically. */
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-link-color: var(--theme-primary);
    --bs-link-color-rgb: var(--theme-primary-rgb);
    --bs-link-hover-color: var(--theme-primary-dark);
    --bs-link-hover-color-rgb: var(--theme-primary-rgb);

    /* Slightly softer, more deliberate corners */
    --bs-border-radius: 0.55rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.8rem;

    /* Top navbar height. Routed through a token because the app sidebar offsets
       (sticky top + viewport-height calc) must stay in lock-step with it. */
    --app-navbar-h: 64px;

    /* Category coding — each question a model answers owns a hue, used on card
       top-borders, filter swatches and chart accents. Accent colour is signal,
       not decoration. */
    --ds-presence: var(--theme-primary);   /* navy  — presence */
    --ds-cover: var(--theme-accent);        /* teal  — cover */
    --ds-morphology: #3E7C5A;               /* green — morphology */

    /* Elevation — three levels only. Every shadow is tinted with ink (never
       pure black) with a long, soft spread so white surfaces float off the
       cool-grey page. */
    --ds-elev-1: 0 1px 2px rgba(var(--theme-ink-rgb), 0.05),
                 0 16px 32px -24px rgba(var(--theme-ink-rgb), 0.35);
    --ds-elev-2: 0 2px 4px rgba(var(--theme-ink-rgb), 0.07),
                 0 24px 40px -24px rgba(var(--theme-ink-rgb), 0.45);
    --ds-elev-3: 0 14px 28px -12px rgba(var(--theme-ink-rgb), 0.40),
                 0 2px 6px rgba(var(--theme-ink-rgb), 0.08);
}

body {
    background-color: var(--theme-bg);
    --bs-body-bg: var(--theme-bg);
    font-family: var(--theme-sans);
}

/* ---- Design-system pattern helpers ----
   Small, shared building blocks for the launch page anatomy. The eyebrow is the
   mono, letter-spaced kicker that opens every section header (eyebrow -> title
   -> lede), giving Home, About and Mapping the same considered voice that Model
   Garden already has. */
.eyebrow {
    display: inline-block;
    font-family: var(--theme-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 0.75rem;
}

/* Lede — the calm one-line summary that sits under a title, held to a
   comfortable measure. Pair with a Bootstrap heading (styled below). */
.page-lede {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(var(--theme-ink-rgb), 0.72);
    max-width: 62ch;
}

/* Page header beat — the eyebrow -> title -> subtitle block paired with a
   right-aligned action cluster, shared by the project workspace screens
   (Summary, Uploads, Sample, Team, Collections). Centralises the flex layout
   that was hand-rolled on each page and had drifted between gap-2/gap-3 and
   wrap/no-wrap. Pages keep their own header content; only the layout is shared.
   Pair with Bootstrap spacing utilities (e.g. mb-3) for the gap to what follows. */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Page header accent — the optional navy->teal gutter bar that marks the
   eyebrow -> title -> lede block as the page's opening beat. */
.page-header--accent {
    position: relative;
    padding-left: 1.6rem;
}
.page-header--accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
}

/* Sidebar shell — shared dark navigation treatment used by legacy sidebar
   shells. App-sidebar-specific rules remain in the app shell template. */
.sidebar {
    padding: 0;
    position: fixed;
}
.sidebar.bg-dark {
    background-color: var(--theme-ink, #16252E) !important;
}
.sidebar hr {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 0 0 0.4rem;
    opacity: 1;
}
.sidebar-title {
    color: white;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.7rem 0.75rem 0.5rem;
}
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar .nav-link .bi {
    font-size: 1.05em;
    opacity: 0.9;
}
.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.sidebar .nav-link.active {
    background-color: var(--theme-primary, #1C5A78);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--theme-accent, #2FA0A8);
}

/* ---- Typography refinement ---- */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--theme-ink);
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    letter-spacing: -0.02em;
}

/* ---- Navbar: keep height, add depth ---- */
.navbar.bg-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.06));
    box-shadow: 0 4px 14px -8px rgba(var(--theme-ink-rgb), 0.6);
}

/* ---- Buttons ---- */
.btn {
    --bs-btn-font-weight: 600;
}
.btn-primary {
    --bs-btn-bg: var(--theme-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-bg: var(--theme-primary-dark);
    --bs-btn-hover-border-color: var(--theme-primary-dark);
    --bs-btn-active-bg: var(--theme-primary-dark);
    --bs-btn-active-border-color: var(--theme-primary-dark);
    --bs-btn-disabled-bg: var(--theme-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--theme-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-bg: var(--theme-primary);
    --bs-btn-hover-border-color: var(--theme-primary);
    --bs-btn-active-bg: var(--theme-primary);
    --bs-btn-active-border-color: var(--theme-primary);
    /* Theme the disabled state too — Bootstrap otherwise falls back to its
       stock blue (#0d6efd) for disabled outline buttons (e.g. a paginator's
       Previous on page 1). */
    --bs-btn-disabled-color: var(--theme-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
}

/* ---- Focus rings in the brand colour (Bootstrap hardcodes blue here) ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.18);
}
.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}
.btn:focus-visible,
.btn.focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.3);
}

/* ---- Cards: gentle elevation so white surfaces lift off the tinted page ---- */
.card {
    /* Bootstrap 5.3 derives --bs-card-bg from --bs-body-bg, which we tint for
       the page background — that leak made plain cards (and the tables inside
       them) pick up the tint instead of staying white. Pin them to the surface
       colour; bg-light / bg-transparent utilities still override as usual. */
    --bs-card-bg: var(--theme-surface);
    border-color: rgba(var(--theme-ink-rgb), 0.08);
    box-shadow: var(--ds-elev-1);
}

/* Card lift — gentle raise on hover for interactive cards (catalogue, model
   and mapping cards). Layer onto a Bootstrap .card. */
.card-lift {
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.card-lift:hover {
    box-shadow: var(--ds-elev-2);
    transform: translateY(-2px);
    /* Tint the border toward primary on hover so anchor cards (project,
       collection and resource link cards) read as interactive without a
       per-page bespoke hover rule. */
    border-color: rgba(var(--theme-primary-rgb), 0.35);
}

/* Tossed card — expressive rotated card treatment for signature product output
   moments. Tune angle/position with CSS variables instead of local variants. */
.card-toss {
    --card-toss-x: 0;
    --card-toss-y: 0px;
    --card-toss-rotate: -3deg;
    --card-toss-hover-y: -3px;
    --card-toss-hover-rotate: -1deg;
    --card-toss-z: auto;
    position: relative;
    z-index: var(--card-toss-z);
    background: var(--theme-surface);
    border: 1px solid rgba(var(--theme-ink-rgb), 0.08);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--ds-elev-3);
    transform: translate(var(--card-toss-x), var(--card-toss-y)) rotate(var(--card-toss-rotate));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-toss:hover {
    box-shadow: 0 20px 38px -14px rgba(var(--theme-ink-rgb), 0.45),
                0 3px 8px rgba(var(--theme-ink-rgb), 0.10);
    transform: translate(var(--card-toss-x), calc(var(--card-toss-y) + var(--card-toss-hover-y))) rotate(var(--card-toss-hover-rotate));
}
.card-toss--static {
    --card-toss-hover-y: 0px;
    --card-toss-hover-rotate: var(--card-toss-rotate);
}
@media (prefers-reduced-motion: reduce) {
    .card-toss {
        transition: none;
        transform: translate(var(--card-toss-x), var(--card-toss-y));
    }
}
@media (max-width: 575.98px) {
    .card-toss {
        --card-toss-rotate: 0deg;
        --card-toss-hover-y: 0px;
        --card-toss-hover-rotate: 0deg;
        transform: translate(var(--card-toss-x), var(--card-toss-y));
    }
    .card-toss:hover {
        transform: translate(var(--card-toss-x), var(--card-toss-y));
    }
}

/* Card accent top-border — the category-coded 3px cap. Default navy; set the
   category with data-category, or point --card-accent at any token. */
.card-accent-top {
    border-top: 3px solid var(--card-accent, var(--theme-primary));
}
.card-accent-top[data-category="presence"]   { --card-accent: var(--ds-presence); }
.card-accent-top[data-category="cover"]       { --card-accent: var(--ds-cover); }
.card-accent-top[data-category="morphology"]  { --card-accent: var(--ds-morphology); }

/* ---- Stat tile: a headline number with a label, on the standard surface.
   For compact "at a glance" metric rows (project home, dashboard). Shares the
   card surface/border/elevation tokens but is non-interactive and tighter than
   a full .card, so it earns its own small recipe rather than a .card variant. */
.stat-tile {
    height: 100%;
    background: var(--theme-surface);
    border: 1px solid rgba(var(--theme-ink-rgb), 0.10);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--ds-elev-1);
    padding: 0.9rem 1rem;
}
.stat-tile__num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-ink);
    line-height: 1.1;
}
.stat-tile__label {
    font-size: 0.74rem;
    color: rgba(var(--theme-ink-rgb), 0.55);
}

/* ---- Tables: white surface + calmer, more legible headers ---- */
/* Bootstrap 5.3 resolves --bs-table-bg from --bs-body-bg, which the theme tints
   for the page background — so table cells would otherwise pick up the grey tint
   instead of the white card behind them (the recurring "grey table" bug, until
   now patched per page). Pin cells to the surface colour globally; contextual
   .table-* classes and .table-hover striping still override as usual. */
.table {
    --bs-table-bg: var(--theme-surface);
    --bs-table-border-color: rgba(var(--theme-ink-rgb), 0.07);
}
/* Column headers carry the mono "eyebrow" treatment from the design system's
   Data table — small, tracked, uppercase, ink at 55%, on a barely-there tint —
   so labels read as quiet metadata rather than shouting bold text. The
   vertical padding (13px) is set here, specific enough to beat Bootstrap's
   `.table > :not(caption) > * > *` rule, which hard-codes 0.5rem (it does NOT
   read --bs-table-cell-padding-y in this version — verified in-browser). */
.table > thead th,
.table > thead > tr > th {
    font-family: var(--theme-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(var(--theme-ink-rgb), 0.55);
    background-color: #FBFCFD;
    border-bottom: 1px solid rgba(var(--theme-ink-rgb), 0.1);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
/* Body cells: compact (~0.85rem) with the row's primary column (first cell) in
   full ink and the rest in calmer ink, matching the design system's Data
   table. The first-child = primary-label assumption holds for our list tables
   (project title, member name, upload name…). */
.table > tbody > tr > td {
    font-size: 0.85rem;
    color: rgba(var(--theme-ink-rgb), 0.68);
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.table > tbody > tr > td:first-child {
    color: var(--theme-ink);
}
/* Tables that sit flush inside a card (.card-body.p-0): give cells comfortable
   edge padding, round the four corner cells to follow the card's radius
   (otherwise the table's square corners overhang the card's curve), and drop
   the final row's divider so it meets the card edge cleanly. Uses the card's
   own inner radius so it tracks whatever card radius the design system uses.
   The `> div >` variants cover tables wrapped in .table-responsive. */
.card-body.p-0 > .table > :not(caption) > * > *:first-child,
.card-body.p-0 > div > .table > :not(caption) > * > *:first-child {
    padding-left: 1.5rem;
}
.card-body.p-0 > .table > :not(caption) > * > *:last-child,
.card-body.p-0 > div > .table > :not(caption) > * > *:last-child {
    padding-right: 1.5rem;
}
.card-body.p-0 > .table > thead > tr:first-child > *:first-child,
.card-body.p-0 > div > .table > thead > tr:first-child > *:first-child {
    border-top-left-radius: var(--bs-card-inner-border-radius);
}
.card-body.p-0 > .table > thead > tr:first-child > *:last-child,
.card-body.p-0 > div > .table > thead > tr:first-child > *:last-child {
    border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card-body.p-0 > .table > tbody > tr:last-child > *:first-child,
.card-body.p-0 > div > .table > tbody > tr:last-child > *:first-child {
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card-body.p-0 > .table > tbody > tr:last-child > *:last-child,
.card-body.p-0 > div > .table > tbody > tr:last-child > *:last-child {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
}
.card-body.p-0 > .table > tbody > tr:last-child > *,
.card-body.p-0 > div > .table > tbody > tr:last-child > * {
    border-bottom: 0;
}
.table .clickable-table-row {
    cursor: pointer;
}
.table .clickable-table-row:hover > * {
    background-color: rgba(var(--theme-primary-rgb), 0.04);
}
.table .clickable-table-row:focus-visible > * {
    box-shadow: inset 0 0 0 2px rgba(var(--theme-primary-rgb), 0.32);
}
/* Row action — the quiet teal "Edit"/"Manage" text link the design system's
   Data table uses in place of an icon button. Underlines only on interaction. */
.table-action {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary);
    text-decoration: none;
    white-space: nowrap;
}
.table-action:hover,
.table-action:focus-visible {
    color: var(--theme-primary);
    text-decoration: underline;
}
button.table-action {
    background: none;
    border: 0;
    padding: 0;
}
.table-action--danger {
    color: var(--bs-danger);
}
.table-action--danger:hover,
.table-action--danger:focus-visible {
    color: var(--bs-danger);
}
.table-col-fit,
.table-col-actions {
    width: 1%;
    white-space: nowrap;
}
.table-col-actions {
    text-align: right;
}
.table-col-date {
    width: 10rem;
    white-space: nowrap;
}
.table-col-numeric {
    width: 7rem;
    text-align: right;
}
.table-col-status {
    width: 8rem;
    white-space: nowrap;
}
.table-col-thumb {
    width: 5.25rem;
}
.table-cell-truncate {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Neutral pill: a calm, bordered label for tags, permissions, inert
   status text and other non-signal metadata. Layer onto Bootstrap's .badge
   (which supplies the box/padding/sizing); this only sets the on-palette
   colours. Replaces the repeated `rounded-pill text-bg-light border fw-normal`
   utility string copied across Team, Activity, Model Garden, Playground and the
   sample filters. Ink-tinted (not Bootstrap's cool grey) so it sits in-system;
   teal/navy are reserved for signal, so a neutral pill stays deliberately quiet. */
.badge.badge-neutral {
    border-radius: 50rem;
    background-color: rgba(var(--theme-ink-rgb), 0.05);
    color: rgba(var(--theme-ink-rgb), 0.72);
    border: 1px solid rgba(var(--theme-ink-rgb), 0.12);
    font-weight: 400;
}

/* ---- Filter pill: a toggleable rounded control for narrowing a list by
   category (the model-category filter above galleries/tables). Quiet bordered
   pill when inactive; fills with brand navy when .is-active. Pair with a
   .filter-swatch dot to carry the category colour — set --filter-swatch to one
   of the --ds-* category tokens (defaults to primary, used for "all"). */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid rgba(var(--theme-ink-rgb), 0.12);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(var(--theme-ink-rgb), 0.68);
    background: transparent;
}
.filter-pill.is-active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}
.filter-swatch {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--filter-swatch, var(--theme-primary));
}

/* ---- Icon chip: a tinted circular badge that sits behind a concept icon
   (dashboard tiles, concept legends, workflow markers). Navy by default;
   .icon-chip--accent switches to teal for the act/produce concepts. Put the
   Bootstrap icon inside as a child <i>. */
.icon-chip {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.1);
    flex: 0 0 auto;
    font-size: 1.15rem;
}
.icon-chip--accent {
    color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.12);
}

/* ---- Metadata list — aligned label/value rows for provenance and summary
   panels (sample provenance, snapshot / job / collection meta). A two-column
   CSS grid, so the dt/dd need no per-row col-* or text-muted utilities: it
   replaces both the repeated `dt.col-5.text-muted` / `dd.col-7` soup and the
   page-local .prov-grid. Labels read muted; values take the remaining width. */
.meta-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.9rem;
    margin: 0;
    font-size: 0.875rem;
}
.meta-list dt {
    color: rgba(var(--theme-ink-rgb), 0.55);
    font-weight: 600;
}
.meta-list dd {
    margin: 0;
}

/* ---- Empty / panel state — the dashed, centred "no data yet" panel shown in
   place of an empty list (Uploads, Jobs, Snapshots, job-detail charts, report
   collections, Model Garden, the playground sample picker). The design system's
   "Panels & states" beat. Was hand-rolled per page as an inline
   `2px dashed rgba(ink,.15)` border with drifting p-4/p-5 + rounded-3, or
   renamed (.mg-empty). Headings keep their ink colour from the h-rule above, so
   the title stays strong while the body copy reads muted. ---- */
.empty-state {
    text-align: center;
    color: rgba(var(--theme-ink-rgb), 0.7);
    padding: 3rem 1.5rem;
    border: 2px dashed rgba(var(--theme-ink-rgb), 0.15);
    border-radius: var(--bs-border-radius-lg);
}
/* The large brand-tinted icon that opens the panel. */
.empty-state__icon {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    color: var(--theme-primary);
    opacity: 0.85;
}

/* Shared partner attribution logos used by public landing pages. */
.partner-logos img {
    height: 56px;
    width: auto;
}

/* ---- Public site footer ----
   The partner-aware footer that closes every public page (see the Site footer
   section of the design system): brand context, compact navigation, and the
   funding/platform partner logos. Calm surface tone so it reads as a quiet
   close rather than a second hero. */
.site-footer {
    background: var(--theme-surface);
    color: rgba(var(--theme-ink-rgb), 0.72);
    border-top: 1px solid rgba(var(--theme-ink-rgb), 0.1);
}
.site-footer .brand-lockup__word {
    color: var(--theme-ink);
}
.site-footer .brand-lockup__tagline {
    color: rgba(var(--theme-ink-rgb), 0.56);
}
.site-footer .eyebrow {
    color: rgba(var(--theme-ink-rgb), 0.58);
}
.site-footer a {
    color: var(--theme-primary);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--theme-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.site-footer__logos img {
    max-height: 32px;
    width: auto;
}

/* ---- Alerts: tie every tone to the brand ----
   All four variants the app uses get the same soft-tint treatment (8% fill,
   ~20-28% border, dark readable text). Semantic colours match the
   <status-badge> / handoff palette so an alert and a status badge read as the
   same green/amber/red. Bootstrap otherwise leaves these at its stock colours,
   which clash with the Navy-Teal theme. */
.alert-info {
    --bs-alert-bg: rgba(var(--theme-primary-rgb), 0.08);
    --bs-alert-border-color: rgba(var(--theme-primary-rgb), 0.2);
    --bs-alert-color: var(--theme-primary-dark);
}
.alert-success {
    --bs-alert-bg: rgba(25, 135, 84, 0.10);
    --bs-alert-border-color: rgba(25, 135, 84, 0.26);
    --bs-alert-color: #14653A;
}
.alert-warning {
    --bs-alert-bg: rgba(217, 119, 6, 0.10);
    --bs-alert-border-color: rgba(217, 119, 6, 0.28);
    --bs-alert-color: #9A5B08;
}
.alert-danger {
    --bs-alert-bg: rgba(220, 53, 69, 0.10);
    --bs-alert-border-color: rgba(220, 53, 69, 0.26);
    --bs-alert-color: #B02A37;
}

/* ---- Misc accents ---- */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--theme-primary);
}
.progress {
    --bs-progress-bar-bg: var(--theme-primary);
}
.page-link {
    --bs-pagination-color: var(--theme-primary);
    --bs-pagination-active-bg: var(--theme-primary);
    --bs-pagination-active-border-color: var(--theme-primary);
    --bs-pagination-hover-color: var(--theme-primary-dark);
}