:root {
    color-scheme: light;

    /* Core Brand Colors - Main variables to tweak.
       --brand-primary / --brand-secondary are the two per-tenant inputs; the
       per-tenant CSS (generate_css.py / users:dynamic_css) overrides these.
       Everything else — including the dark-mode accents — derives from them, so
       a tenant only ever sets these two and keeps its hue in BOTH themes. */
    --brand-primary: #6750A4;
    --brand-secondary: #FF6B35;
    --primary: var(--brand-primary);
    --secondary: var(--brand-secondary);
    --white: #FFFFFF;
    --black: oklch(from var(--primary) 0.15 0.02 h);
    --warning: #BA1A1A;

    /* The colour for interactive accents that must stay VISIBLE against a
       surface — selected outlines, status strokes. Normally the brand primary,
       but a tenant whose stored primary_color is itself a surface (Five AM's is
       white) must override this with something that has contrast, the same way
       it already overrides its buttons and links. Do not assume --primary is
       safe to draw with. */
    --action: var(--primary);

    /* Derived Colors - Auto-calculated from core colors */
    --primary-light: color-mix(in srgb, var(--primary) 90%, white 10%);
    --primary-dark: color-mix(in srgb, var(--primary) 90%, black 10%);

    --primary-active: oklch(from var(--primary) 0.925 0.05 h);
    --secondary-active: oklch(from var(--secondary) 0.95 0.08 h);
    --secondary-light: oklch(from var(--secondary) 0.97 0.03 h);

    /* Surface Colors - Consolidated to 3 main levels */
    --surface-base: oklch(from color-mix(in oklch, var(--primary) 85%, var(--secondary) 15%) 0.99 0.005 h);
    --surface-container: oklch(from color-mix(in oklch, var(--primary) 85%, var(--secondary) 15%) 0.97 0.01 h);
    --surface-elevated: oklch(from color-mix(in oklch, var(--primary) 85%, var(--secondary) 15%) 0.93 0.02 h);
    --main-background: var(--surface-base);
    --md-sys-color-surface-container-low: var(--surface-container);
    
    /* Text Colors */
    --text-primary: var(--black);      /* Main text */
    --text-secondary: #49454F;         /* Secondary text, less emphasis */
    --text-on-primary: var(--white);   /* Text on primary color */
    
    /* Border & Outline */
    --outline: #79747E;                /* Main borders */
    --outline-light: #CAC4D0;          /* Lighter borders */

    --text-light: var(--text-on-primary);
    --text-dark: var(--text-primary);

    /* Bootstrap overrides */
    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-success: #198754;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-dark: var(--text-primary);
    --bs-body-bg: var(--surface-base);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--outline-light);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-bg: var(--surface-container);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    --bs-card-bg: var(--surface-container);
    --bs-modal-bg: var(--surface-container);
    --bs-modal-color: var(--text-primary);
    --bs-dropdown-bg: var(--surface-container);
    --bs-dropdown-color: var(--text-primary);
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: var(--surface-elevated);
    --bs-dropdown-link-hover-color: var(--primary);
    /* Bootstrap variables that only ever resolve at `:root`, mapped onto theme
       tokens. Each token already re-resolves per theme, so ONE declaration here
       covers light and dark — no need to repeat them in the dark blocks below.

       Do NOT add `--bs-btn-*` or `--bs-dropdown-*` here. Bootstrap re-declares
       those on the component element itself, and a declaration on the element
       beats an inherited one from `:root`, so the value is silently ignored.
       They live on `.btn-*` / `.dropdown-menu` further down — the same trap the
       `.pagination` note below describes. */

    /* Disabled inputs. Bootstrap paints them `--bs-secondary-bg`, which is a
       fixed light grey (#e9ecef) — a bright box on a dark page. */
    --bs-secondary-bg: var(--surface-elevated);
    --bs-tertiary-color: var(--text-secondary);
    --bs-border-color-translucent: var(--outline-light);

    /* Form validation. crispy-forms (bootstrap5 pack) puts `.is-invalid` and
       `.invalid-feedback` on every field error in the app, and Bootstrap draws
       both in its own red rather than the theme's error tokens. */
    --bs-form-invalid-color: var(--error-text);
    --bs-form-invalid-border-color: var(--error-border);
    --bs-form-valid-color: var(--success-text);
    --bs-form-valid-border-color: var(--success-border);

    /* <mark> / .mark — search-result highlighting. */
    --bs-highlight-bg: var(--warning-bg);
    --bs-highlight-color: var(--text-primary);

    /* Pagination — themed via surface/text tokens so page controls stay legible
       in both light and dark mode (Bootstrap's defaults assume a light canvas). */
    --bs-pagination-color: var(--text-primary);
    --bs-pagination-bg: var(--surface-container);
    --bs-pagination-border-color: var(--outline-light);
    --bs-pagination-hover-color: var(--primary);
    --bs-pagination-hover-bg: var(--surface-elevated);
    --bs-pagination-hover-border-color: var(--outline-light);
    --bs-pagination-focus-color: var(--primary);
    --bs-pagination-focus-bg: var(--surface-elevated);
    --bs-pagination-active-color: var(--text-light);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-color: var(--text-secondary);
    --bs-pagination-disabled-bg: var(--surface-base);
    --bs-pagination-disabled-border-color: var(--outline-light);
    /* default border radius */
    --border-radius: 28px;

    --chart-secondary: var(--secondary);

    /* Elevation & interaction */
    --shadow-color: rgba(0, 0, 0, 0.16);
    --shadow-color-soft: rgba(0, 0, 0, 0.08);
    --shadow-elevation-1: 0 1px 3px var(--shadow-color), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-elevation-2: 0 4px 8px var(--shadow-color), 0 2px 4px var(--shadow-color-soft);
    --shadow-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.15);
    --hover-overlay: rgba(0, 0, 0, 0.1);
    --focus-ring: color-mix(in srgb, var(--primary) 20%, transparent);
    --brand-shadow: color-mix(in srgb, var(--primary) 25%, transparent);
    --secondary-shadow: color-mix(in srgb, var(--secondary) 25%, transparent);
    --mobile-overlay-background: rgba(0, 0, 0, 0.6);

    /* Feedback colors */
    --success-bg: #E8F5E8;
    --success-bg-strong: #C8E6C9;
    --success-text: #2E7D32;
    --success-border: #4CAF50;
    --warning-bg: #FFF3C4;
    --warning-bg-strong: #FFECB3;
    --warning-text: #F57C00;
    --warning-border: #FF9800;
    --info-bg: #E3F2FD;
    --info-bg-strong: #BBDEFB;
    --info-text: #1565C0;
    --info-border: #1E88E5;
    --error-bg: #FFEBEE;
    --error-bg-strong: #FFCDD2;
    --error-text: var(--warning);
    --error-border: var(--warning);

    /* Auto-contrast "on-colors": pick black or white text for a given
       background by thresholding the background's OKLCH lightness (l).
       clamp(0, (0.62 - l) * 1000, 1) collapses to 1 (→ white, L=1) when the
       background is dark and 0 (→ black, L=0) when it is light, with the flip
       near l ≈ 0.62. Each references its own background var, so it recomputes
       automatically for every theme and tenant brand — no hardcoded #fff that
       goes unreadable on a light brand accent or a pastel dark-mode badge. */
    --on-primary: oklch(from var(--primary) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-secondary: oklch(from var(--secondary) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-success-text: oklch(from var(--success-text) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-warning-text: oklch(from var(--warning-text) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-warning: oklch(from var(--warning) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-info-text: oklch(from var(--info-text) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    /* Auto-contrast labels for the filled semantic buttons (.btn-success /
       .btn-warning / .btn-info), which draw on the *-border tokens. */
    --on-success-border: oklch(from var(--success-border) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-warning-border: oklch(from var(--warning-border) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-info-border: oklch(from var(--info-border) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
    --on-text-primary: oklch(from var(--text-primary) clamp(0, calc((0.62 - l) * 1000), 1) 0 0);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme-supported]:not([data-theme="light"]) {
        color-scheme: dark;

        /* Dark-mode brand accents, DERIVED from the tenant's brand inputs so each
           tenant keeps its own hue in dark mode (these were previously hardcoded to
           the default purple, collapsing every brand to one accent). The L/C values
           are calibrated so the DEFAULT brand reproduces the previous hand-picked
           values exactly (#bfa8ff / #ffb59d / #342d46 / …). */
        --primary: oklch(from var(--brand-primary) 0.79 0.1375 h);
        --secondary: oklch(from var(--brand-secondary) 0.835 0.0925 h);
        --black: #0f0d16;
        --warning: #ffb4ab;

        --primary-light: oklch(from var(--brand-primary) 0.315 0.045 h);
        --primary-dark: oklch(from var(--brand-primary) 0.875 0.095 h);
        --secondary-light: oklch(from var(--brand-secondary) 0.285 0.035 h);
        --primary-active: oklch(from var(--brand-primary) 0.315 0.0425 h);
        --secondary-active: oklch(from var(--brand-secondary) 0.29 0.035 h);

        --surface-base: #111018;
        --surface-container: #1c1925;
        --surface-elevated: #272331;
        --main-background: var(--surface-base);
        --md-sys-color-surface-container-low: var(--surface-container);

        --text-primary: #f0edf7;
        --text-secondary: #c8c1d5;
        --text-on-primary: #201830;
        --outline: #8f879d;
        --outline-light: #4a4358;

        --text-light: var(--text-on-primary);
        --text-dark: var(--text-primary);

        --bs-success: #81c784;
        --bs-warning: #ffd54f;
        --bs-info: #4dd0e1;
        --bs-dark: var(--text-primary);

        --shadow-color: rgba(0, 0, 0, 0.42);
        --shadow-color-soft: rgba(0, 0, 0, 0.24);
        --shadow-elevation-1: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color-soft);
        --shadow-elevation-2: 0 8px 18px var(--shadow-color), 0 2px 6px var(--shadow-color-soft);
        --shadow-elevation-3: 0 14px 36px rgba(0, 0, 0, 0.45);
        --hover-overlay: rgba(255, 255, 255, 0.08);
        --focus-ring: color-mix(in srgb, var(--primary) 30%, transparent);
        --brand-shadow: color-mix(in srgb, var(--primary) 35%, transparent);
        --secondary-shadow: color-mix(in srgb, var(--secondary) 30%, transparent);
        --mobile-overlay-background: rgba(0, 0, 0, 0.72);

        --success-bg: #14351f;
        --success-bg-strong: #1e4b2d;
        --success-text: #a6dba8;
        --success-border: #66bb6a;
        --warning-bg: #3a2a05;
        --warning-bg-strong: #503907;
        --warning-text: #ffd36a;
        --warning-border: #ffb74d;
        --info-bg: #102b43;
        --info-bg-strong: #173d5c;
        --info-text: #9bd0ff;
        --info-border: #64b5f6;
        --error-bg: #3a1717;
        --error-bg-strong: #542120;
        --error-text: #ffb4ab;
        --error-border: #ff8a80;

        /* Bootstrap's contextual "subtle" palette (subtle backgrounds, emphasis
           text, subtle borders) ships fixed LIGHT values and only flips when
           data-bs-theme="dark" is set — which this app never does (it themes via
           the --surface-*/--text-* tokens instead). So .bg-*-subtle, .text-*-emphasis
           and the Bootstrap .alert-* variants (which all read these vars) stayed
           light-on-light in dark mode. Remap them to the dark feedback tokens
           here, in one place, so every consumer becomes legible at once. */
        --bs-primary-bg-subtle: var(--primary-light);
        --bs-primary-text-emphasis: var(--primary);
        --bs-primary-border-subtle: var(--primary-active);
        --bs-secondary-bg-subtle: var(--surface-elevated);
        --bs-secondary-text-emphasis: var(--text-secondary);
        --bs-secondary-border-subtle: var(--outline-light);
        --bs-success-bg-subtle: var(--success-bg);
        --bs-success-text-emphasis: var(--success-text);
        --bs-success-border-subtle: var(--success-border);
        --bs-info-bg-subtle: var(--info-bg);
        --bs-info-text-emphasis: var(--info-text);
        --bs-info-border-subtle: var(--info-border);
        --bs-warning-bg-subtle: var(--warning-bg);
        --bs-warning-text-emphasis: var(--warning-text);
        --bs-warning-border-subtle: var(--warning-border);
        --bs-danger-bg-subtle: var(--error-bg);
        --bs-danger-text-emphasis: var(--error-text);
        --bs-danger-border-subtle: var(--error-border);
        --bs-light-bg-subtle: var(--surface-elevated);
        --bs-light-text-emphasis: var(--text-primary);
        --bs-light-border-subtle: var(--outline-light);
        --bs-dark-bg-subtle: var(--surface-base);
        --bs-dark-text-emphasis: var(--text-primary);
        --bs-dark-border-subtle: var(--outline-light);
    }
}

:root[data-theme-supported][data-theme="dark"] {
    color-scheme: dark;

    /* Dark-mode brand accents derived from the tenant inputs — see the matching
       note in the prefers-color-scheme block above. Calibrated so the default
       brand reproduces the previous hardcoded values exactly. */
    --primary: oklch(from var(--brand-primary) 0.79 0.1375 h);
    --secondary: oklch(from var(--brand-secondary) 0.835 0.0925 h);
    --black: #0f0d16;
    --warning: #ffb4ab;

    --primary-light: oklch(from var(--brand-primary) 0.315 0.045 h);
    --primary-dark: oklch(from var(--brand-primary) 0.875 0.095 h);
    --secondary-light: oklch(from var(--brand-secondary) 0.285 0.035 h);
    --primary-active: oklch(from var(--brand-primary) 0.315 0.0425 h);
    --secondary-active: oklch(from var(--brand-secondary) 0.29 0.035 h);

    --surface-base: #111018;
    --surface-container: #1c1925;
    --surface-elevated: #272331;
    --main-background: var(--surface-base);
    --md-sys-color-surface-container-low: var(--surface-container);

    --text-primary: #f0edf7;
    --text-secondary: #c8c1d5;
    --text-on-primary: #201830;
    --outline: #8f879d;
    --outline-light: #4a4358;

    --text-light: var(--text-on-primary);
    --text-dark: var(--text-primary);

    --bs-success: #81c784;
    --bs-warning: #ffd54f;
    --bs-info: #4dd0e1;
    --bs-dark: var(--text-primary);

    --shadow-color: rgba(0, 0, 0, 0.42);
    --shadow-color-soft: rgba(0, 0, 0, 0.24);
    --shadow-elevation-1: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color-soft);
    --shadow-elevation-2: 0 8px 18px var(--shadow-color), 0 2px 6px var(--shadow-color-soft);
    --shadow-elevation-3: 0 14px 36px rgba(0, 0, 0, 0.45);
    --hover-overlay: rgba(255, 255, 255, 0.08);
    --focus-ring: color-mix(in srgb, var(--primary) 30%, transparent);
    --brand-shadow: color-mix(in srgb, var(--primary) 35%, transparent);
    --secondary-shadow: color-mix(in srgb, var(--secondary) 30%, transparent);
    --mobile-overlay-background: rgba(0, 0, 0, 0.72);

    --success-bg: #14351f;
    --success-bg-strong: #1e4b2d;
    --success-text: #a6dba8;
    --success-border: #66bb6a;
    --warning-bg: #3a2a05;
    --warning-bg-strong: #503907;
    --warning-text: #ffd36a;
    --warning-border: #ffb74d;
    --info-bg: #102b43;
    --info-bg-strong: #173d5c;
    --info-text: #9bd0ff;
    --info-border: #64b5f6;
    --error-bg: #3a1717;
    --error-bg-strong: #542120;
    --error-text: #ffb4ab;
    --error-border: #ff8a80;

    /* See the note in the media-query block above: remap Bootstrap's fixed-light
       "subtle" palette to the dark feedback tokens so .bg-*-subtle, .text-*-emphasis
       and .alert-* stay legible under the explicit dark-theme toggle too. */
    --bs-primary-bg-subtle: var(--primary-light);
    --bs-primary-text-emphasis: var(--primary);
    --bs-primary-border-subtle: var(--primary-active);
    --bs-secondary-bg-subtle: var(--surface-elevated);
    --bs-secondary-text-emphasis: var(--text-secondary);
    --bs-secondary-border-subtle: var(--outline-light);
    --bs-success-bg-subtle: var(--success-bg);
    --bs-success-text-emphasis: var(--success-text);
    --bs-success-border-subtle: var(--success-border);
    --bs-info-bg-subtle: var(--info-bg);
    --bs-info-text-emphasis: var(--info-text);
    --bs-info-border-subtle: var(--info-border);
    --bs-warning-bg-subtle: var(--warning-bg);
    --bs-warning-text-emphasis: var(--warning-text);
    --bs-warning-border-subtle: var(--warning-border);
    --bs-danger-bg-subtle: var(--error-bg);
    --bs-danger-text-emphasis: var(--error-text);
    --bs-danger-border-subtle: var(--error-border);
    --bs-light-bg-subtle: var(--surface-elevated);
    --bs-light-text-emphasis: var(--text-primary);
    --bs-light-border-subtle: var(--outline-light);
    --bs-dark-bg-subtle: var(--surface-base);
    --bs-dark-text-emphasis: var(--text-primary);
    --bs-dark-border-subtle: var(--outline-light);
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* Base Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--surface-base);
    color: var(--text-dark);
    min-height: 100vh;
}

::selection {
    background: var(--primary-active);
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-secondary) !important;
}

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

.bg-white,
.bg-light,
.table-light {
    background-color: var(--surface-container) !important;
    color: var(--text-primary) !important;
}

/* No `.border { border-color: ... !important }` here on purpose. Bootstrap's
   border utilities already resolve their colour from --bs-border-color, which
   this theme maps to --outline-light above, so a neutral default needs no help.
   Forcing it with !important also beat every `.border-success` / `.border-danger`
   next to it, which quietly greyed out colour-coded edges — the changelog rows
   colour their left edge by action and every one of them came out neutral. */

/* The brand-coloured border, to pair with Bootstrap's `.border` / `.border-start`
   / `.border-2` utilities the same way `.border-success` does.

   Bootstrap's own `.border-primary` cannot serve: it builds its colour from
   --bs-primary-rgb, and the theme has no triplet to put there — `--primary` is
   an `oklch(from ...)` expression derived from the tenant's brand input. So
   `.border-primary` renders Bootstrap's default blue in every white label. The
   !important matches the border utilities this sits beside.

   Draws with --action, not --primary: a tenant's stored primary can be a
   surface colour (Five AM's is white), which would make this invisible. */
.border-brand {
    border-color: var(--action) !important;
}

/* The `--bs-primary-rgb` family, fixed at the consumer rather than the source.

   Bootstrap builds these utilities from `rgba(var(--bs-primary-rgb), ...)`, and
   the theme has no triplet to supply — `--primary` is an `oklch(from ...)`
   expression, which cannot be decomposed into `13, 110, 253` form. So the
   variable stays at Bootstrap's default and every white label rendered these in
   stock blue. Overriding the classes themselves is the fix that works.

   `.bg-primary` alone appears in ~78 templates. The color-mix keeps Bootstrap's
   `.bg-opacity-*` utilities working instead of pinning the alpha to 1. */
.bg-primary {
    background-color: color-mix(in srgb, var(--primary) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important;
}

.text-bg-primary {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

/* Draws with --action, not --primary, for the same reason .border-brand does:
   a tenant's stored primary can be a surface colour and would vanish. */
.border-primary {
    border-color: var(--action) !important;
}

.link-primary {
    color: var(--primary) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: var(--primary-dark) !important;
}

/* Bootstrap "body" surface utilities resolve their background from
   --bs-*-bg-rgb, a fixed light triplet the theme never overrides, so they stay
   light in dark mode while theme-aware text on them turns light → unreadable
   (e.g. the catalog-export Sections/Format panels). Remap to themed surfaces so
   the panel sits a step above the card it lives in, in both light and dark. */
.bg-body {
    background-color: var(--surface-base) !important;
}

.bg-body-secondary {
    background-color: var(--surface-container) !important;
}

.bg-body-tertiary {
    background-color: var(--surface-elevated) !important;
}

.dropdown-menu {
    /* Bootstrap declares the whole --bs-dropdown-* set on THIS element, so the
       matching declarations cannot live at `:root` — an inherited value loses to
       one set on the element. `--bs-dropdown-link-active-bg` shipped as #0d6efd,
       which is what every dropdown item flashed on mouse-down. */
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-active-color: var(--on-primary);
    --bs-dropdown-link-disabled-color: var(--text-secondary);
    --bs-dropdown-header-color: var(--text-secondary);
    background-color: var(--surface-container);
    color: var(--text-primary);
    border-color: var(--outline-light);
    box-shadow: var(--shadow-elevation-2);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-elevated);
    color: var(--primary);
}

.modal-content {
    background-color: var(--surface-container);
    color: var(--text-primary);
    border-color: var(--outline-light);
    box-shadow: var(--shadow-elevation-3);
}

.modal-header,
.modal-footer {
    border-color: var(--outline-light);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--black);
}

.list-group-item {
    background-color: var(--surface-container);
    color: var(--text-primary);
    border-color: var(--outline-light);
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.75;
}

.form-select option {
    background-color: var(--surface-container);
    color: var(--text-primary);
}



.text-primary {
    color: var(--primary) !important; }
  
.text-secondary {
    color: var(--secondary) !important; }

/* Custom Bootstrap overrides for Material Design */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    /* Route padding through Bootstrap's own size variables instead of a hard
       `padding: 12px 20px !important`. The default `.btn` is unchanged (12px/20px),
       but `.btn-sm` / `.btn-lg` can now actually resize by overriding the vars
       below — the `!important` on the shorthand still beats stray padding rules. */
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 20px;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
    border: none;
    /* Flex-align button content so material-symbols / bi-* icons sit on the
       same line as adjacent text without baseline drift. Buttons remain
       inline-flex (similar layout behaviour to inline-block) so they flow
       inline with text. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* Bootstrap builds the focus ring from `--bs-btn-focus-shadow-rgb`, a comma
       triplet per variant (`.btn-primary` ships 49,132,253). The theme has no
       triplet to put there — `--primary` is an `oklch(from ...)` expression — so
       every brand got a Bootstrap-blue ring on keyboard focus. Override the
       shadow Bootstrap composes from it instead; this covers every variant. */
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

/* Material-scaled size modifiers. Declared after `.btn` so they win the custom
   -property cascade for elements carrying both classes (e.g. `btn btn-sm`).
   Bootstrap already scales font-size via --bs-btn-font-size; we only restore the
   padding that the base rule would otherwise pin for every size. */
.btn-sm {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 14px;
}

.btn-lg {
    --bs-btn-padding-y: 16px;
    --bs-btn-padding-x: 28px;
}

/* Inside buttons, normalize icon size + line-height so a glyph never
   stretches the button taller than its text. */
.btn .material-symbols-rounded,
.btn > i.bi,
.btn > .bi {
    line-height: 1;
    font-size: 1.1em;
}

/* `w-100` / full-width buttons should remain block-level for parent layout. */
.btn.w-100 {
    display: flex;
}

.btn-primary {
    background: linear-gradient(135deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 80%, var(--text-light) 20%) 100%
  );
  /* Pin Bootstrap's per-state text-colour variables to the auto-contrast
     on-colour too. Bootstrap's `.btn:hover` / `.btn.active` / `.btn:disabled`
     selectors (higher specificity than this base rule) each read one of these
     vars — left at Bootstrap's `#fff` they'd flip a light-brand or dark-mode
     pastel button back to unreadable white text on hover/active/disabled. */
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-disabled-color: var(--on-primary);
  /* The gradient above is a background-IMAGE, so it hides whatever
     background-COLOR Bootstrap's state rules paint underneath. Left at
     Bootstrap's values those are #0b5ed7 / #0a58ca / #0d6efd — invisible today,
     but they surface the moment the gradient is flattened or overridden. Pin
     them to the brand so the fallback is right rather than merely hidden. */
  --bs-btn-bg: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-active-bg: var(--primary-active);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  color: var(--on-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--brand-shadow);
    
}
.btn-secondary {
    background: linear-gradient(135deg,
    var(--secondary) 0%,
    color-mix(in srgb, var(--secondary) 80%, var(--text-light) 20%) 100%
  );
  /* See .btn-primary above — pin the state colours so hover/active/disabled
     keep the auto-contrast on-colour instead of Bootstrap's white. */
  --bs-btn-color: var(--on-secondary);
  --bs-btn-hover-color: var(--on-secondary);
  --bs-btn-active-color: var(--on-secondary);
  --bs-btn-disabled-color: var(--on-secondary);
  /* See .btn-primary — same hidden-fallback reasoning for the backgrounds. */
  --bs-btn-bg: var(--secondary);
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-active-bg: var(--secondary-active);
  --bs-btn-disabled-bg: var(--secondary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  color: var(--on-secondary);
}
.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--secondary-shadow);
}

.btn-outline-primary {
    /* `color` below only sets the resting label. Bootstrap's `.btn:disabled`
       rule is more specific and reads --bs-btn-disabled-color, which shipped as
       #0d6efd — so a disabled outline button rendered Bootstrap blue on every
       brand. Pin the whole variable set; the explicit rules further down handle
       the filled hover/active states. */
    --bs-btn-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* The remaining outline variants carried no theme rules at all — every state
   was stock Bootstrap grey/red/green, on both light and dark canvases.
   .btn-outline-secondary alone appears in ~144 templates. */
.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-hover-color: var(--on-text-primary);
    --bs-btn-active-color: var(--on-text-primary);
    --bs-btn-disabled-color: var(--text-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--text-secondary);
    --bs-btn-active-bg: var(--text-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: var(--outline);
    --bs-btn-hover-border-color: var(--text-secondary);
    --bs-btn-active-border-color: var(--text-primary);
    --bs-btn-disabled-border-color: var(--outline-light);
}

.btn-outline-danger {
    --bs-btn-color: var(--error-text);
    --bs-btn-hover-color: var(--on-warning);
    --bs-btn-active-color: var(--on-warning);
    --bs-btn-disabled-color: var(--error-text);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-active-bg: color-mix(in srgb, var(--warning) 85%, black 15%);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: var(--error-border);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-disabled-border-color: var(--error-border);
}

.btn-outline-success {
    --bs-btn-color: var(--success-text);
    --bs-btn-hover-color: var(--on-success-border);
    --bs-btn-active-color: var(--on-success-border);
    --bs-btn-disabled-color: var(--success-text);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--success-border);
    --bs-btn-active-bg: color-mix(in srgb, var(--success-border) 85%, black 15%);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: var(--success-border);
    --bs-btn-hover-border-color: var(--success-border);
    --bs-btn-active-border-color: var(--success-border);
    --bs-btn-disabled-border-color: var(--success-border);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning-text);
    --bs-btn-hover-color: var(--on-warning-border);
    --bs-btn-active-color: var(--on-warning-border);
    --bs-btn-disabled-color: var(--warning-text);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--warning-border);
    --bs-btn-active-bg: color-mix(in srgb, var(--warning-border) 85%, black 15%);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: var(--warning-border);
    --bs-btn-hover-border-color: var(--warning-border);
    --bs-btn-active-border-color: var(--warning-border);
    --bs-btn-disabled-border-color: var(--warning-border);
}

.btn-outline-info {
    --bs-btn-color: var(--info-text);
    --bs-btn-hover-color: var(--on-info-border);
    --bs-btn-active-color: var(--on-info-border);
    --bs-btn-disabled-color: var(--info-text);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--info-border);
    --bs-btn-active-bg: color-mix(in srgb, var(--info-border) 85%, black 15%);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: var(--info-border);
    --bs-btn-hover-border-color: var(--info-border);
    --bs-btn-active-border-color: var(--info-border);
    --bs-btn-disabled-border-color: var(--info-border);
}

/* Semantic (non-brand) filled variants. These had no theme rules at all, so
   every state rendered Bootstrap's stock green/amber/cyan — colours picked for a
   white canvas, unchanged on a dark one. Map them onto the theme's semantic
   tokens, which already re-resolve per theme. */
.btn-success {
    --bs-btn-bg: var(--success-border);
    --bs-btn-hover-bg: var(--success-border);
    --bs-btn-active-bg: color-mix(in srgb, var(--success-border) 85%, black 15%);
    --bs-btn-disabled-bg: var(--success-border);
    --bs-btn-color: var(--on-success-border);
    --bs-btn-hover-color: var(--on-success-border);
    --bs-btn-active-color: var(--on-success-border);
    --bs-btn-disabled-color: var(--on-success-border);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-warning {
    --bs-btn-bg: var(--warning-border);
    --bs-btn-hover-bg: var(--warning-border);
    --bs-btn-active-bg: color-mix(in srgb, var(--warning-border) 85%, black 15%);
    --bs-btn-disabled-bg: var(--warning-border);
    --bs-btn-color: var(--on-warning-border);
    --bs-btn-hover-color: var(--on-warning-border);
    --bs-btn-active-color: var(--on-warning-border);
    --bs-btn-disabled-color: var(--on-warning-border);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-info {
    --bs-btn-bg: var(--info-border);
    --bs-btn-hover-bg: var(--info-border);
    --bs-btn-active-bg: color-mix(in srgb, var(--info-border) 85%, black 15%);
    --bs-btn-disabled-bg: var(--info-border);
    --bs-btn-color: var(--on-info-border);
    --bs-btn-hover-color: var(--on-info-border);
    --bs-btn-active-color: var(--on-info-border);
    --bs-btn-disabled-color: var(--on-info-border);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Filled states of the outline button. Bootstrap paints :hover, :focus-visible,
   .active, .show and :active from the --bs-btn-hover-* / --bs-btn-active-* set,
   which .btn-outline-primary declares above — so no rule is needed for them.
   Only the active-AND-hovered shade has no Bootstrap variable of its own.

   The three colours keep their !important. Three brand sheets — bonfire,
   dB and Five AM — pin `.btn-outline-primary.active` with !important, and a
   brand sheet loads after this one. Without a matching !important here, an
   active button that is hovered holds the brand's flat active colour instead
   of stepping to --primary-dark. */
.btn-outline-primary.active:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--on-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--brand-shadow);
}

/* .btn-danger draws with --warning (this theme's danger red). It carries no
   gradient, so unlike .btn-primary there is nothing hiding the background-COLOUR
   Bootstrap's state rules paint: the button went from the theme red to
   Bootstrap's #bb2d3b on hover and #b02a37 on press. Pin the whole set.

   The label uses --on-warning (auto-contrast), not --text-light: in dark mode
   --warning resolves to a pale pink and fixed white text on it was unreadable. */
.btn-danger {
    --bs-btn-bg: var(--warning);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-active-bg: color-mix(in srgb, var(--warning) 85%, black 15%);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-color: var(--on-warning);
    --bs-btn-hover-color: var(--on-warning);
    --bs-btn-active-color: var(--on-warning);
    --bs-btn-disabled-color: var(--on-warning);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    background-color: var(--warning);
    color: var(--on-warning);
    border: none;
}
.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--warning) 35%, transparent);
}

.btn-block {
    width: 100%;
}
.btn-top {
    padding: 16px 20px !important;
}
/* Only round the bottom corners of the dropdown menu */
.btn-group .dropdown-menu {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-top: 0; /* Remove gap */
    box-shadow: 0 4px 12px var(--brand-shadow);
    /* Optional: add border-top if you want a separation line */
}

/* Split button pill effect (keep as is) */
.btn-group > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn.dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Pagination — restores the circular, brand-coloured pager the app used before
   the shared components/_pagination.html component moved these lists onto stock
   Bootstrap markup.

   The `--bs-pagination-*` values in `:root` above CANNOT do this on their own:
   Bootstrap 5.3's compiled CSS re-declares the whole set on `.pagination`
   itself, with literal hex for the active state. A declaration on the element
   wins over an inherited one from `:root`, so the active page rendered
   Bootstrap blue (#0d6efd) regardless of the tenant's brand. Re-declaring them
   here, at the same scope Bootstrap uses, is what makes the brand colour stick. */
.pagination {
    --bs-pagination-color: var(--text-primary);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-color: var(--primary);
    --bs-pagination-hover-bg: transparent;
    --bs-pagination-hover-border-color: var(--primary);
    --bs-pagination-focus-color: var(--primary);
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--focus-ring);
    --bs-pagination-active-color: var(--text-light);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-color: var(--text-secondary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    /* Bootstrap butts the items together and collapses their borders; pills
       need to stand apart instead. */
    gap: 0.25rem;
    align-items: center;
}

/* Pill/circle geometry. `min-width` + centring makes single digits round while
   the word controls ("Previous", "Next") stretch into pills of the same height;
   the negative-margin border collapsing Bootstrap applies has to go with it. */
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    margin-left: 0;
    border-radius: 999px;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Bootstrap squares off the ends of the group; every control here is a pill. */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 999px;
}

.pagination .page-item.active .page-link {
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.4;
}

.card {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--surface-container);
    box-shadow: var(--shadow-elevation-1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: var(--shadow-elevation-2);
    margin-top: -2px;
    margin-bottom: 2px;
    /* transform: translateY is causing stacking issues with dropdowns */
}

.card-header {
    border-bottom: none;
    background: transparent;
    padding: 1.5rem 1.5rem 0;
}

.text-center {
    text-align: center;
}

.card-subtitle {
    margin-top: 0.3rem;
    margin-bottom: 0;
    margin-left: 2.43rem;
}

.card-body {
    padding: 1.5rem;
}

.form-control {
    border: 1px solid var(--outline-light);
    border-radius: var(--border-radius);
    background-color: var(--surface-container);
    color: var(--text-primary);
    margin-bottom: 16px;
    margin-top: 16px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--shadow-elevation-1);
}

.form-control:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--brand-shadow);
    transform: translateY(-1px);
}

.form-control:focus {
    background-color: var(--surface-elevated);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring), 0 4px 12px var(--brand-shadow);
    transform: translateY(-1px);
}

.form-control.search-form-control {
    padding: 16px 20px 16px 52px;
    margin-bottom: 0px;
    margin-top: 0px;
    background-color: var(--surface-container);
    color: var(--text-secondary);
}

.form-control.search-form-control:focus {
    background-color: var(--surface-container);
    color: var(--text-secondary);
}

/* HTML5 Date Input Styling */
input[type="date"].form-control {
    /* Ensure consistent appearance across browsers */
    position: relative;
}

/* Style the calendar icon button (browser-specific) */
input[type="date"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding: 4px;
    margin-left: 8px;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Firefox date input styling */
input[type="date"].form-control::-moz-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

input[type="date"].form-control::-moz-calendar-picker-indicator:hover {
    opacity: 1;
}

.form-select {
    border: 1px solid var(--outline-light);
    border-radius: var(--border-radius);
    background-color: var(--surface-container);
    color: var(--text-primary);
    margin-bottom: 16px;
    margin-top: 16px;
    padding: 12px 40px 12px 20px; /* More right padding for arrow spacing */
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--shadow-elevation-1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2349454F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 12px;
}

.form-select:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--brand-shadow);
    transform: translateY(-1px);
}

.form-select:focus {
    background-color: var(--surface-elevated);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring), 0 4px 12px var(--brand-shadow);
    transform: translateY(-1px);
}
.form-check-input {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--outline-light);
    background-color: var(--surface-container);
    margin: 0 auto;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--shadow-elevation-1);
}

.form-check-input:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--brand-shadow);
    transform: translateY(-1px);
}

.form-check-input:checked {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, var(--text-light) 20%));
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--brand-shadow);
}

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

.form-check-input:focus {
    /* Bootstrap also sets border-color: #86b7fe here; without this line the ring
       was themed but the box outline stayed Bootstrap blue. */
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring), 0 4px 12px var(--brand-shadow);
    transform: translateY(-1px);
}

/* The switch knob is a background-image Bootstrap swaps per state, with the
   focus variant hardcoded to #86b7fe. Redeclare the resting and focus knobs on
   the element Bootstrap declares them on. */
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23787680'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23787680'/%3e%3c/svg%3e");
}

.form-label {
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    font-size: 0.875rem;
}




  
  .spaced-table tbody tr:not(:first-child) {
    border-top: 1px solid var(--outline-light);
  }
  
  .spaced-table tbody tr td {
    /* Add vertical padding for a more spacious look */
    padding-top: 12px;
    padding-bottom: 12px;
  }

  @media (max-width: 768px) {
    .spaced-table tbody tr td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .spaced-table tbody tr:not(:first-child) {
      border-top: none;
    }
  }

/* =================================== */
/* ACCORDION & TABLE HIERARCHY STYLING */
/* =================================== */

/* Enhanced accordion styling for better visual hierarchy */
.accordion {
    background-color: var(--surface-container);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-elevation-1);
    margin-bottom: 1.5rem;
}

.accordion-item {
    border: none;
    margin-bottom: 0;
    background-color: var(--surface-elevated);
}

.accordion-item:not(:last-child) {
    border-bottom: 1px solid var(--outline-light);
}

.accordion-button {
    background: var(--surface-elevated);
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 0;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
}

.accordion-button:not(.collapsed) {
    background: var(--secondary);
    color: var(--text-light);
    box-shadow: 0 2px 4px var(--secondary-shadow);
}

.accordion-button:hover {
    background: var(--secondary);
    color: var(--text-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--secondary-shadow);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem var(--secondary-shadow);
    border: none;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.2s ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}

.accordion-collapse {
    background-color: var(--surface-base);
}

.accordion-body {
    padding: 1.5rem;
    background-color: var(--surface-base);
}

/* Recordings-sources card on the period statement (summary strip + per-stream accordion) */
.sources-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 0.25rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sources-summary-strip b {
    display: block;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.sources-stream-summary {
    color: inherit;
    opacity: 0.75;
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 0.75rem;
}

.sources-source-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--outline-light);
}

.sources-source-row:last-child {
    border-bottom: none;
}

.sources-source-row .sources-source-periods {
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.sources-statement-link {
    margin-left: 0.25rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Shared module-home components (status chips, needs-attention strip, progress dots,
   first-use onboarding) — introduced for the Sign dashboard, reusable by other module
   homes (e.g. Invoices). */
.status-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--outline-light);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
}

.status-chip b {
    color: var(--text-primary);
}

.status-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.status-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-light);
}

.status-chip.active b {
    color: var(--text-light);
}

.status-chip-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    display: inline-block;
}

.status-chip-dot.warning {
    background: var(--warning-border);
}

.status-chip-dot.success {
    background: var(--success-border);
}

.status-chip.active .status-chip-dot {
    background: var(--text-light);
}

.attn-strip {
    border: 1px solid var(--warning-border);
    border-left: 5px solid var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-text);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
}

.attn-strip .attn-title {
    color: inherit;
    margin-bottom: 0.5rem;
}

.attn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.attn-row + .attn-row {
    border-top: 1px solid color-mix(in srgb, var(--warning-border) 35%, transparent);
}

.attn-doc {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.attn-doc:hover {
    color: inherit;
    text-decoration: underline;
}

.attn-why {
    font-size: 0.85rem;
    opacity: 0.9;
}

.attn-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sig-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sig-progress i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 1.5px solid var(--outline-light);
    display: inline-block;
}

.sig-progress i.done {
    background: var(--success-border);
    border-color: var(--success-border);
}

.sig-progress-frac {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 0.3rem;
    font-variant-numeric: tabular-nums;
}

.onboard {
    padding: 1.5rem 1rem 0.5rem;
}

.onboard > p {
    max-width: 52ch;
}

.onboard-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 60rem;
    margin: 1.5rem auto;
    text-align: left;
}

@media (max-width: 768px) {
    .onboard-steps {
        grid-template-columns: 1fr;
    }
}

.onboard-step {
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 1rem 1.15rem;
}

.onboard-step-number {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.onboard-step h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.onboard-step p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Enhanced table styling for better hierarchy */
.table {
    background-color: var(--surface-base);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-elevation-1);
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--outline-light);
    --bs-table-striped-bg: var(--surface-container);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--surface-elevated);
    --bs-table-hover-color: var(--text-primary);
}

.table-background-transparent {
    background-color: transparent;
}

.table-bordered {
    border: 1px solid var(--outline-light);
}

.table thead {
    background: transparent;
}

.table thead th {
    background: var(--primary-active);
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem;
    border-bottom: 2px solid var(--primary);
    border-top: none;
    border-left: 1px solid var(--outline-light);
    border-right: 1px solid var(--outline-light);
    position: relative;
}

.table thead th:first-child {
    border-left: none;
    border-top-left-radius: 8px;
}

.table thead th:last-child {
    border-right: none;
    border-top-right-radius: 8px;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: var(--surface-container);
}

.table tbody td {
    padding: 0.875rem 0.75rem;
    border-color: var(--outline-light);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Special styling for total rows */
.table tbody tr.table-secondary {
    background: linear-gradient(135deg, 
        var(--secondary-active) 0%, 
        var(--surface-elevated) 100%
    );
    color: var(--text-primary);
    font-weight: 600;
}

.table tbody tr.table-secondary:hover {
    background: linear-gradient(135deg, 
        var(--secondary-active) 0%,
        var(--surface-container) 100%
    );
}

/* Responsive table improvements */
@media (max-width: 768px) {
    .accordion-button {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
    
    .accordion-body {
        padding: 1.25rem;
    }
    
    .table thead th {
        font-size: 0.875rem;
        padding: 0.75rem 0.5rem;
    }
    
    .table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .deal-details-section {
        margin-bottom: 1.5rem;
    }
    
    .deal-details-section h4 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .territory-description {
        padding: 0.875rem 1.25rem;
        margin-bottom: 1rem;
    }
}

/* Custom classes for Material Design components */
.nav-rail {
    background-color: var(--surface-container);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-elevation-1);
    /* Float like the other cards: inset from the viewport edges instead of
       running edge-to-edge top/bottom */
    height: calc(100vh - 48px);
    position: fixed;
    top: 24px;
    left: 24px;
    width: 280px; /* Set default width for the sidebar */
    z-index: 1000; /* Ensure sidebar stays above other content */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.2, 0, 0, 1);
    /* Thin scrollbar that's nearly invisible */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Only show scrollbar on hover */
.nav-rail:hover {
    scrollbar-color: var(--outline-light) transparent;
}

/* Webkit scrollbar - invisible by default */
.nav-rail::-webkit-scrollbar {
    width: 4px;
}

.nav-rail::-webkit-scrollbar-track {
    background: transparent;
}

.nav-rail::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}

.nav-rail:hover::-webkit-scrollbar-thumb {
    background: var(--outline-light);
}

/* Desktop: Keep sidebar visible */
@media (min-width: 769px) {
    .nav-rail {
        transform: translateX(0);
        position: fixed;
    }

    .main-content-wrapper {
        /* Rail right edge is at 304px (24px inset + 280px rail). The content
           inside the wrapper carries 28px of its own left padding
           (container-fluid + main ps-3), so the wrapper starts 4px before
           the rail edge to leave a visual rail-to-content gap of 24px —
           matching the rail's insets from the other viewport edges. */
        margin-left: 300px;
        transition: margin-left 0.25s cubic-bezier(0.2, 0, 0, 1);
    }

    /* Semi-collapsed rail: icons only, labels hidden. Toggled from the
       collapse button in the sidebar footer; persisted in localStorage
       (class is applied to <html> before paint in base.html). */
    html.sidebar-collapsed .nav-rail {
        width: 72px;
    }

    html.sidebar-collapsed .main-content-wrapper {
        margin-left: 92px; /* rail right edge (96px) - 28px content padding + 24px gap */
    }

    /* font-size: 0 hides the raw label text nodes inside each nav link;
       the icon span restores its own size below. */
    html.sidebar-collapsed .nav-rail .nav-link {
        font-size: 0;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
    }

    html.sidebar-collapsed .nav-rail .nav-link .material-symbols-rounded {
        font-size: 24px;
        margin-right: 0;
    }

    html.sidebar-collapsed .nav-rail .nav-link .badge {
        display: none;
    }

    html.sidebar-collapsed .nav-rail .sidebar-logo {
        display: none;
    }

    html.sidebar-collapsed .nav-rail .sidebar-logo-mini {
        display: flex;
    }
}

/* Small laptops and devices with limited height - show visible scrollbar */
@media (min-width: 769px) and (max-height: 800px) {
    .nav-rail {
        scrollbar-color: var(--outline-light) transparent;
    }
    
    .nav-rail::-webkit-scrollbar-thumb {
        background: var(--outline-light);
    }
}

.nav-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0; /* Allow flex item to shrink below content size */
}

.main-nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.account-nav-items {
    width: inherit;
    background-color: var(--surface-container);
    border-radius: 16px;
    margin-top: auto;
    /* 4px padding + 4px last-link margin puts the last button's box 8px from
       the rail edge, so its 24px glyph (centered in a 40px button) reads as
       16px of visual space — matching the 16px above the logo */
    padding: 8px 0 4px;
    margin-bottom: 0;
    flex-shrink: 0;
}
.nav-link {
    color: var(--text-secondary);
}
.nav-link:focus, .nav-link:hover {
    color: var(--primary);
}
.nav-rail .nav-link {
    color: var(--text-secondary);
    border-radius: var(--border-radius);
    margin: 4px 12px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    display: flex;
    align-items: center;
}

.account-divider {
    height: 1px;
    background-color: var(--outline-light);
    margin: 8px 16px 8px 16px;
}

/* Mini logo shown in place of the full logo when collapsed */
.sidebar-logo-mini {
    display: none;
    justify-content: center;
    color: var(--primary); /* tints the inline mark, as .sidebar-logo does */
}

.sidebar-logo-mini img,
.sidebar-logo-mini svg {
    width: 32px;
    height: 32px;
}

/* Raster brand favicons are arbitrary aspect ratios on an opaque tile, so they
   still need fitting and rounded corners. The inline mark needs neither: its
   viewBox is square and it has no tile. */
.sidebar-logo-mini img {
    object-fit: contain;
    border-radius: 8px;
}

/* Collapse/expand toggle in the sidebar footer — styled like a nav link */
.sidebar-collapse-btn {
    background: transparent;
    border: 0;
    width: calc(100% - 24px); /* match nav-link 12px side margins */
    text-align: left;
    cursor: pointer;
}

.nav-rail .nav-link:hover {
    background-color: var(--primary-active);
    color: var(--text-dark);
}

.nav-rail .nav-link.active {
    background-color: var(--primary);
    color: var(--text-light);
}

.nav-rail .material-symbols-rounded {
    margin-right: 12px;
    font-size: 24px;
}

.main-content-wrapper {
    background: var(--surface-base);
    min-height: 100vh;
    padding: 0;
    /* No margin-left here. The rail width is set per breakpoint above — 300px
       from 769px up, 0 below 769px — which covers every width. */
}

.search-container {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    z-index: 10;
}

/* Enhanced search dropdown results styling */
#navbar-search-results .dropdown-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: var(--shadow-elevation-2);
    border-radius: var(--border-radius);
    background-color: var(--surface-container);
    margin-top: 4px;
    width: 100%;
    max-height: 500px;
    overflow-y: overlay;
    overflow-y: auto;
    padding: 8px 0;
    min-width: 400px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Enhanced search dropdown header styling */
#navbar-search-results .dropdown-header {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    background-color: var(--surface-elevated);
    padding: 8px 16px;
    margin: 0;
    border-left: 3px solid var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-elevation-1);
    position: relative;
    z-index: 1;
}

#navbar-search-results .dropdown-header i {
    color: var(--primary);
    font-weight: normal;
}

/* Search dropdown item styling */
#navbar-search-results .dropdown-item {
    padding: 12px 16px;
    color: var(--text-primary);
    border: none;
    background: transparent;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    border-radius: 0;
    font-size: 0.9rem;
}

#navbar-search-results .dropdown-item:hover,
#navbar-search-results .dropdown-item:focus {
    background-color: var(--primary-active);
    color: var(--text-primary);
    transform: translateX(2px);
}

#navbar-search-results .dropdown-item:active {
    background-color: var(--primary-light);
}

/* Search result item content styling */
#navbar-search-results .dropdown-item .fw-medium {
    font-weight: 500;
    line-height: 1.2;
}

#navbar-search-results .dropdown-item small {
    font-size: 0.8125rem;
    opacity: 0.8;
    line-height: 1.1;
}

/* Search dropdown divider */
#navbar-search-results .dropdown-divider {
    margin: 8px 0;
    border-top: 1px solid var(--outline-light);
    opacity: 0.5;
}

/* Search dropdown item text (for help text) */
#navbar-search-results .dropdown-item-text {
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Search result icons */
#navbar-search-results .material-symbols-rounded,
#navbar-search-results .bi {
    color: var(--text-secondary);
    opacity: 0.7;
}

#navbar-search-results .dropdown-item:hover .material-symbols-rounded,
#navbar-search-results .dropdown-item:hover .bi {
    opacity: 1;
    color: var(--primary);
}

/* Search result icon size variants */
.search-results-icon-small {
    font-size: 16px;
}

.search-results-icon {
    font-size: 18px;
}

.search-results-icon-large {
    font-size: 24px;
}

/* No results icon styling - applies to large icons in search results */
#search_results .search-results-icon-large {
    opacity: 0.5;
}

/* Search loading state */
#navbar-search-results .dropdown-item-text.loading {
    background-color: var(--surface-base);
    border-radius: 8px;
    margin: 4px 8px;
}

/* Hide search results when empty */
#navbar-search-results:empty {
    display: none;
}

/* Scrollbar styling for search results - only show on hover */
#navbar-search-results .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

#navbar-search-results .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

#navbar-search-results .dropdown-menu::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

#navbar-search-results .dropdown-menu:hover::-webkit-scrollbar-thumb {
    background: var(--outline-light);
}

#navbar-search-results .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--outline);
}

/* Responsive search dropdown */
@media (max-width: 768px) {
    #navbar-search-results .dropdown-menu {
        min-width: 100%;
        max-height: 60vh;
    }
    
    #navbar-search-results .dropdown-item {
        padding: 16px;
        font-size: 1rem;
    }
    
    #navbar-search-results .dropdown-header {
        padding: 12px 16px 8px;
        font-size: 0.875rem;
    }
}

.chart-container {
    height: 250px;
    background: linear-gradient(135deg, var(--secondary-active) 0%, var(--primary-active) 100%);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: end;
    justify-content: space-around;
}

.charts-card {
    background: linear-gradient(135deg, var(--secondary-active) 0%, var(--primary-active) 100%);
}


.alerts-card {
    background: linear-gradient(135deg, 
        color-mix(in oklch, var(--secondary-active) 80%, var(--primary-active) 20%) 0%, 
        var(--secondary-active) 100%
    );
}
.alert-item {
    display: flex;
    align-items: center;
    padding: 16px;
    margin: 12px 0;
    background-color: var(--surface-base);
    border-radius: 16px;
    border-left: 4px;
    transition: all 0.2s ease;

}

.alert-success {
    border-left: 4px solid var(--bs-success);
}
.alert-warning {
    border-left: 4px solid var(--bs-warning);
}
.alert-danger {
    border-left: 4px solid var(--warning);
}

.alert-item:hover {
    background: var(--hover-overlay) !important;
    transform: translateX(3px);
    cursor: pointer;
}

.alert-item:hover .material-symbols-rounded:last-child {
    opacity: 1 !important;
}

.alert-icon {
    color: var(--warning);
    margin-right: 12px;
}

.alert-item-link {
    color: inherit;
}

.alert-arrow {
    font-size: 1rem;
    opacity: 0.7;
}


.card-title-icon {
    color: var(--secondary);
    margin-right: 8px;
    vertical-align: text-bottom;
    font-size: inherit;
}

/* Title container for cards with subtitles */
.title-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ensure card titles with icons are properly aligned */
.card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Fix Material Icons alignment in card titles */
.card-title .material-symbols-rounded {
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px; /* Fine-tune vertical position */
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
    max-width: 200px;
    color: var(--primary);
}

/* Reduce padding on sidebar logo wrapper */
.nav-rail > .p-4 {
    padding: 1rem !important;
    padding-bottom: 0.5rem !important;
}

.sidebar-logo-no-margin {
    margin-bottom: 0 !important;
}

.sidebar-logo img[alt*="Silent Roar Logo"] {
    max-height: 120px;
}

.sidebar-logo img {
    max-width: 200px;
    height: auto;
    max-height: 175px;
    object-fit: contain;
}

.sidebar-logo svg {
    width: 100%;
    height: auto;
    max-height: 60px;
    fill: currentColor;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
    fill-rule: evenodd;
    clip-rule: evenodd;
}
.accounts-logo {
    max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    object-fit: contain;
}
.accounts-logo svg {
    width: 100%;
    height: auto;
    max-height: 60px; /* Adjust this value to control the logo's maximum height */
    fill: currentColor; /* This will make the SVG use the parent's text color */
}

.accounts-logo img[alt*="Silent Roar Logo"] {
    max-height: 150px;
}

.accounts-logo img {
    max-width: 200px;
    height: auto;
    max-height: 175px;
    object-fit: contain;
}

.accounts-logo svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
    fill-rule: evenodd;
    clip-rule: evenodd;
}

/* links should be in the same color as the text but then when hovered they should be in the same color as the primary color */
a {
    color: var(--text-dark);
    text-decoration: none;
}
a:hover {
    color: var(--primary);
    text-decoration: none;
}

.badge {
    background-color: var(--primary-active);
    color: var(--text-primary);
    font-weight: 600;
    border: none;
    padding: 0.4em 0.75em;
    border-radius: 999px;
    letter-spacing: 0.01em;
    /* line-height: 1 makes padding the sole driver of badge height,
       so badges that contain an inline icon don't grow taller than
       badges that don't. */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    vertical-align: baseline;
}

/* Filled colored badges: brand-aligned background, white text everywhere
   for a consistent "chip" feel. `!important` pins color so global
   `text-white` / `text-dark` utilities on the same element cannot
   downgrade contrast. */
.badge.badge-primary,
.badge.bg-primary {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}
.badge.badge-secondary,
.badge.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important;
}
.badge.badge-success,
.badge.bg-success {
    background-color: var(--success-text) !important;
    color: var(--on-success-text) !important;
}
.badge.badge-warning,
.badge.bg-warning {
    background-color: var(--warning-text) !important;
    color: var(--on-warning-text) !important;
}
.badge.badge-danger,
.badge.bg-danger {
    background-color: var(--warning) !important;
    color: var(--on-warning) !important;
}
.badge.badge-info,
.badge.bg-info {
    background-color: var(--info-text) !important;
    color: var(--on-info-text) !important;
}
.badge.bg-dark {
    background-color: var(--text-primary) !important;
    color: var(--on-text-primary) !important;
}
.badge.bg-light {
    background-color: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
}

/* Soft / "subtle" variants — readable on both light & dark surfaces */
.badge.badge-soft-success {
    background-color: var(--success-bg);
    color: var(--success-text);
}
.badge.badge-soft-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}
.badge.badge-soft-danger {
    background-color: var(--error-bg);
    color: var(--error-text);
}
.badge.badge-soft-info {
    background-color: var(--info-bg);
    color: var(--info-text);
}
.badge-fixed-width {
    min-width: 60px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}
.badge-sm {
    font-size: 0.7rem;
    padding: 0.2em 0.55em;
}
/* bootstrap pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--primary);
    color: var(--text-light);
    border-radius: var(--border-radius);
}
/* bootstrap pills not active should be dark */
.nav-pills .nav-link:not(.active) {
    color: var(--text-dark);
    border-radius: var(--border-radius);

}




/* Mobile Hamburger Menu */
.mobile-menu-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: var(--primary);
    color: var(--text-light);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    /* Beats the .d-md-none the button also carries, which is a Bootstrap
       utility and therefore !important itself. The media query below hides
       the button again on desktop. */
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: all 0.3s ease;
}

/* Show hamburger menu only on mobile */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

.mobile-menu-btn:hover {
    background: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--shadow-color);
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mobile-overlay-background);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    backdrop-filter: blur(4px);
}

.mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}

body.mobile-menu-open {
    overflow: hidden;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .chart-container {
        height: 250px;
    }
}

@media (max-width: 768px) {
    /* Hide sidebar by default on mobile */
    .nav-rail {
        /* Mobile drawer stays flush with the viewport edges */
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        position: fixed;
        z-index: 1000;
        background-color: var(--surface-container);
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        /* The drawer shadow keeps its !important on both rules. Brand sheets
           load after this one and set .nav-rail's box-shadow for the docked
           desktop rail — bonfire to elevation-1, dB to none. Without one here
           the mobile drawer picks up the docked value and loses its depth. */
        box-shadow: var(--shadow-elevation-3) !important;
    }

    /* Show sidebar when mobile-open class is added */
    .nav-rail.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-elevation-3) !important;
    }
    
    /* Remove margin from main content on mobile */
    .main-content-wrapper {
        margin-left: 0;
        transition: margin-left 0.3s ease;
    }
    
    .main-content {
        padding: 16px;
    }
    
    .chart-container {
        height: 200px;
        padding: 15px;
    }
    
    /* Adjust top bar for mobile hamburger menu */
    main.pt-4 {
        padding-top: 5rem !important; /* Account for hamburger menu */
    }
    
    /* Make search bar full width on mobile */
    .search-container {
        width: 100%;
    }
    
    .row.align-items-center.mb-4 {
        flex-direction: column;
        gap: 1rem;
    }
    
    .col-md-8, .col-md-4 {
        width: 100%;
    }

    /* Center only the intended title+actions page-header row on mobile. The old
       broad `.col-md-8, .col-md-4 { text-align: center !important }` collaterally
       centered EVERY col-md-4/8 on mobile — form fields, selects, search inputs,
       stat tiles — and even overrode explicit `text-end` on action columns. Scope
       it to the header pattern (`.row.align-items-center.mb-4`) it was built for. */
    .row.align-items-center.mb-4 > .col-md-8,
    .row.align-items-center.mb-4 > .col-md-4 {
        text-align: center !important;
    }
    
    /* Mobile-specific nav adjustments */
    .nav-rail .nav-link {
        padding: 12px 16px;
        font-size: 16px;
    }
    
    .sidebar-logo {
        max-width: 180px;
    }
}

@media (max-width: 480px) {
    /* No width/height for .mobile-menu-btn and no width for .nav-rail here.
       Both were dead: the <=768px block sets them further down the file, so it
       won on source order once the !important came off. Restoring them is a
       visual change to make on purpose, not a side effect of this cleanup. */
    .mobile-menu-btn {
        top: 15px;
        left: 15px;
    }

    main.pt-4 {
        padding-top: 4.5rem !important;
    }
}

/* Material Design 3 Breadcrumb Styles */
.breadcrumb-container {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' fill='%2349454F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 8px;
    opacity: 0.6;
}

.breadcrumb-item.active {
    color: var(--primary);
    padding: 0;
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    display: flex;
    align-items: center;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    background-color: var(--primary-active);
    color: var(--primary);
    transform: scale(1.02);
}

/* Active state using aria-current attribute selector */
.breadcrumb-item[aria-current="page"] a {
    font-weight: 600;
    pointer-events: none; /* Disable interaction for current page */
    background-color: var(--primary-light);
    color: var(--text-primary);
}

/* Remove hover effects on active item */
.breadcrumb-item[aria-current="page"] a:hover {
    background-color: var(--primary-active);
    color: var(--text-secondary);
    transform: none;
}

/* Style for active breadcrumb span (not link) */
.breadcrumb-item[aria-current="page"] > span {
    font-weight: 600;
    pointer-events: none;
    background-color: var(--primary-active);
    color: var(--text-primary);
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}


.breadcrumb-item .material-symbols-rounded {
    font-size: 18px;
    margin-right: 6px;
    opacity: 0.8;
}

/* Responsive breadcrumbs */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.8125rem;
    }

    .breadcrumb-item a {
        padding: 6px 10px;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        width: 16px;
        height: 16px;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .breadcrumb-item[aria-current="page"] > span {
        padding: 6px 10px;
    }

    .breadcrumb-item .material-symbols-rounded {
        font-size: 16px;
        margin-right: 4px;
    }
}

/* ============================================== */
/* HOMEPAGE CHART STYLES */
/* ============================================== */

.chart-bar {
    /* Anchor the gradient to the shared baseline (in px, not %) so every bar
       samples the same ramp regardless of its own height. With per-bar 0%→100%
       stops the light band lands at a different spot on each bar and the row
       reads as uneven; a baseline-anchored ramp keeps all bars visually even.
       Saturated at the base and lightening upward so the bars stay grounded on
       the transparent backdrop instead of floating. */
    background: linear-gradient(to top,
        var(--secondary) 0,
        color-mix(in srgb, var(--chart-secondary) 78%, var(--text-light) 22%) 200px
    );
    border-radius: 8px 8px 4px 4px;
    min-width: 60px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-bar:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.chart-label {
    white-space: nowrap;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.chart-value {
    position: absolute;
    top: -38px; /* move label a bit higher for clarity */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    background: transparent;
    padding: 4px 8px;
    border-radius: 8px;
    opacity: 1;
}

/* Chart wrapper to ensure vertical stacking */
.chart-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* Override the outer chart-container to center content within card-body */
.card-body .chart-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Brand stylesheets load after this one and paint .chart-container, so this
       one declaration still has to outrank them. */
    background: none !important;
    border-radius: 0;
    padding: 0;
}

/* Chart bars container styling */
.chart-bars-container {
    height: 250px;
    /* Transparent backdrop: bars sit directly on the card, no panel. Removes the
       old decorative diagonal gradient entirely for the most open look. */
    background: transparent;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

/* Chart toggle buttons positioning */
.chart-toggle-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 16px;
    width: 100%;
}

/* Responsive chart styles */
@media (max-width: 768px) {
    .chart-bar {
        min-width: 40px;
    }
    
    .chart-bars-container {
        height: 200px;
        padding: 15px;
        gap: 1rem;
    }
    
    .chart-toggle-container {
        margin-top: 20px;
        margin-bottom: 12px;
    }
    
    .chart-toggle-container .btn {
        font-size: 13px;
        padding: 10px 16px !important;
    }
}


.accordion {
    background-color: var(--primary-active);
    color: var(--text-dark);
    --bs-accordion-active-bg: var(--primary-active);
    --bs-accordion-active-color: var(--text-dark);
}
    
.progress {
    height: 24px;
    border-radius: var(--border-radius);
    background: var(--outline-light);
}

.progress-bar {
    background: var(--primary);
    border-radius: var(--border-radius);
}

/* =================================== */
/* MODAL FIXES - Prevent Flickering   */
/* =================================== */

/* Ensure modals have proper z-index hierarchy */
.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1050;
}

/* Prevent transforms on hover from affecting modal stacking */
.modal-open .btn:hover,
.modal-open .card:hover,
.modal-open .alert-item:hover,
.modal-open .deal-item:hover,
.modal-open .track-item:hover,
.modal-open .merge-btn:hover,
.modal-open .breadcrumb-item a:hover,
.modal-open .chart-bar:hover {
    transform: none;
} 

/* Disable problematic will-change properties when modal is open */
.modal-open .deal-item {
    will-change: auto;
}

.modal-open .modal.show {
    will-change: auto;
}

/* Ensure modal positioning is isolated from other stacking contexts */
.modal-dialog {
    position: relative;
    z-index: 1;
}

/* Prevent mobile overlay from interfering with modals */
.modal-open .mobile-overlay {
    z-index: 1040;
}

/* Fix search results z-index to not conflict */
.modal-open #navbar-search-results {
    z-index: 1040;
}

/* Prevent body scroll conflicts during modal display */
body.modal-open.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Ensure sidebar doesn't interfere with modal backdrop */
.modal-open .nav-rail {
    z-index: 1045;
}

/* Prevent hover effects on any elements while modal is open */
.modal-open .btn,
.modal-open .card,
.modal-open .alert-item,
.modal-open .deal-item,
.modal-open .track-item,
.modal-open .merge-btn,
.modal-open .breadcrumb-item a,
.modal-open .chart-bar {
    transition: none;
}

/* Specifically target lazy_load_incomplete_tracks modal issues */
.modal-open .deal-selection-container {
    contain: none;
}

/* Prevent chart hover effects from affecting modals */
.modal-open .chart-wrapper *,
.modal-open .chart-bars-container * {
    transition: none;
    transform: none;
}

/* Fix div.sidebar-logo centering inside anchor */
a.sidebar-text-decoration-none {
    display: flex;
    justify-content: center;
    width: 100%;
}

.list-group-item {
    background-color: var(--surface-container) !important;
    color: var(--text-primary) !important;
    border-color: var(--outline-light) !important;
}

@media (max-width: 768px) {
    #unvalidateSelectedPayeesBtn {
        margin-bottom: 10px;
        width: 100%; /* Optional: make both buttons full width on mobile */
    }
    #validateSelectedPayeesBtn {
        width: 100%; /* Optional: match width for both buttons */
    }
}

@media (max-width: 768px) {
    .payee-validated-count {
      display: block;
      margin-left: 0 !important;
      margin-top: 8px;
    }
  }



/* Earnings Summary Table Styles */
.earnings-summary-table {
    background: linear-gradient(135deg, var(--surface-container) 0%, var(--surface-elevated) 100%);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-elevation-1);
    margin: 0;
}

.earnings-summary-table tbody {
    border: none;
}

.earnings-summary-table tr {
    border: none;
    transition: all 0.2s ease;
}

.earnings-summary-table tr:hover {
    background-color: var(--hover-overlay);
}

/* Ensure proper table layout */
.earnings-summary-table td {
    border: none;
    vertical-align: middle;
}

.earnings-summary-table .earnings-label {
    font-weight: 500;
    text-align: left;
}

/* Starting Balance - Special styling to stand out */
.earnings-row-starting {
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 90%, var(--text-light) 10%) 100%);
    color: var(--text-light);
    font-weight: 600;
    border-bottom: 2px solid color-mix(in srgb, var(--text-light) 20%, transparent);
}

.earnings-row-starting:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 95%, var(--text-light) 5%) 0%, var(--primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--brand-shadow);
}

.earnings-label-starting,
.earnings-value-starting {
    color: var(--text-light) !important;
    font-weight: 600;
    font-size: 1.1em;
    padding: 16px 20px;
}

/* Income rows - Surface base color */
.earnings-row-income {
    background-color: var(--surface-base);
    border-left: 2px solid var(--outline-light);
}

.earnings-row-income:hover {
    background-color: var(--hover-overlay);
}

.earnings-label-income,
.earnings-value-income {
    color: var(--text-primary);
    font-weight: 400;
    padding: 12px 20px;
}

/* Ending Balance - Special styling to stand out */
.earnings-row-ending {
    background: linear-gradient(135deg, var(--secondary) 0%, color-mix(in srgb, var(--secondary) 90%, var(--text-light) 10%) 100%);
    color: var(--text-light);
    font-weight: 600;
    border-top: 2px solid color-mix(in srgb, var(--text-light) 20%, transparent);
}

.earnings-row-ending:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 95%, var(--text-light) 5%) 0%, var(--secondary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--secondary-shadow);
}

.earnings-label-ending,
.earnings-value-ending {
    color: var(--text-light) !important;
    font-weight: 600;
    font-size: 1.1em;
    padding: 16px 20px;
}

/* Deduction amounts - expense/recoupment lines inside the section waterfalls. Doubled class
   keeps this above .earnings-value-income even if the rules are ever reordered or merged. */
.earnings-value.earnings-value-deduction {
    color: var(--secondary);
    font-weight: 400;
}

/* Subtotal rows - the "=" line that closes a waterfall chain */
.earnings-row-subtotal > td {
    font-weight: 600;
    border-top: 1px solid var(--outline-light);
}

.earnings-payment-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.earnings-summary-table .earnings-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .earnings-summary-table {
        border-radius: 12px;
        margin: 0 -10px;
    }
    
    .earnings-label-starting,
    .earnings-value-starting,
    .earnings-label-ending,
    .earnings-value-ending {
        padding: 14px 16px;
        font-size: 1em;
    }
    
    .earnings-label-income,
    .earnings-value-income {
        padding: 10px 16px;
    }
}

/* Deal details specific improvements */
.deal-details-section {
    margin-bottom: 2rem;
}

.deal-details-section h4 {
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-active);
}

/* Territory tabs styling */
.nav-tabs {
    border-bottom: 2px solid var(--outline-light);
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    background-color: var(--surface-container);
    border: none;
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    background-color: var(--surface-elevated);
    border-bottom: 2px solid var(--primary);
    font-weight: 600;
}

/* Territory description styling */
.territory-description {
    background-color: var(--surface-container);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary);
}

.territory-description strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* =================================== */
/* ROYALTY PROCESSING - TRACK MANAGEMENT */
/* =================================== */

/* Optimized CSS for modal performance - NO transforms during modal open */
.modal.show {
    will-change: auto; /* Remove problematic will-change */
}

.merge-btn {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.merge-btn:hover {
    background-color: var(--primary);
    color: var(--text-light);
    border-color: var(--primary);
}

.merge-btn:active {
    background-color: var(--primary);
}

/* Deal items without transforms when modal might be open */
.deal-item {
    background: var(--surface-container);
    border: 1px solid var(--outline-light);
    cursor: pointer;
    border-radius: 24px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Remove will-change and transform transitions */
}

.deal-item:hover:not(.deal-item-selected) {
    background: var(--surface-container);
    border-color: var(--primary);
    /* No transform to prevent stacking context issues */
}

.deal-item.deal-item-selected {
    background: var(--primary-active);  /* Light tinted purple - readable with dark text */
    border-color: var(--primary);       /* Primary purple border for selection indicator */
    color: var(--text-primary);         /* Ensure dark text for readability */
}

.deal-item.deal-item-selected:hover {
    background: var(--primary-active); /* Slightly darker light background on hover */
    border-color: var(--primary);        /* Keep primary border */
    color: var(--text-primary);          /* Keep dark text */
}

/* Optimize scrollable area without CSS containment */
.deal-selection-container {
    overflow-y: auto;
    /* Remove contain: layout paint - this was causing issues */
}

.deal-selection-container.copy-tracks-results-scroll {
    max-height: 300px;
}

/* Prevent layout shifts */
.deal-item h6,
.deal-item .small {
    margin: 0;
    line-height: 1.2;
}

/* Selected deal display styling - matches deal-item-selected */
.selected-deal-display {
    background: var(--primary-active);        /* Light tinted purple - readable with dark text */
    color: var(--text-primary);              /* Dark text for readability */
    /* The element also carries .border and .rounded, Bootstrap utilities that
       are !important, so these two have to match them. */
    border-color: var(--primary) !important; /* Primary purple border for selection indicator */
    border-radius: 24px !important;          /* Match brand border radius */
}

.selected-deal-icon {
    color: var(--primary);                   /* Primary color for the check icon */
}

/* Bulk track management banner */
.bulk-track-management-banner {
    background-color: var(--primary);
    color: var(--text-light);
}

/* Modal header styling */
.modal-header-primary {
    background-color: var(--primary);
    color: var(--text-light);
}

.modal-header-secondary {
    background-color: var(--secondary);
    color: var(--text-light);
}

/* Modal alert styling */
.modal-alert-primary {
    background-color: var(--primary-active);
    color: var(--primary);
}

.modal-alert-secondary {
    background-color: var(--surface-container);
    color: var(--secondary);
}

/* Custom input group styling */
.custom-input-group {
    --bs-border-radius-lg: 1rem;
}

/* Zero form-control vertical margins inside input-groups so the input and
   adjacent .input-group-text / .btn render at the same height. The global
   .form-control rule adds 16px top/bottom margin which breaks input-group
   alignment. */
.input-group > .form-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* Checkbox indeterminate state styling. Scoped to checkboxes on purpose: a radio
   is :indeterminate while no radio in its group is selected, so an unscoped rule
   fills every option of an unanswered radio group and they all read as chosen. */
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Content Hero Header Styling */
.content-hero {
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface-container) 100%);
    border-radius: 16px;
    padding: 2rem;
    margin: 1rem 0;
    border: 1px solid var(--outline-light);
    position: relative;
}

.content-hero-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.content-hero-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.content-hero-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--brand-shadow);
}

.content-hero-badge .material-symbols-rounded {
    color: var(--text-light);
    font-size: 2rem;
}

.content-hero-text {
    flex: 1;
}

.content-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.content-hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.edit-link {
    color: var(--primary);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.edit-link:hover {
    opacity: 1;
    color: var(--primary);
}

.edit-link i {
    font-size: 1rem;
    margin-left: 0.5rem;
}

/* Dropdown Menu Styling */
.content-hero .dropdown-menu {
    border: 1px solid var(--outline-light);
    border-radius: 12px;
    box-shadow: var(--shadow-elevation-2);
    background: var(--surface-container);
    color: var(--text-primary);
    padding: 0.5rem;
    min-width: 200px;
}

.content-hero .dropdown-item {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.content-hero .dropdown-item:hover {
    background-color: var(--surface-container);
    color: var(--primary);
}

.content-hero .dropdown-item .material-symbols-rounded {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.content-hero .dropdown-item:hover .material-symbols-rounded {
    color: var(--primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-hero {
        padding: 1.5rem;
    }
    
    .content-hero-actions {
        top: 0.75rem;
        right: 0.75rem;
    }
    
    .content-hero-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .content-hero-badge {
        width: 56px;
        height: 56px;
    }
    
    .content-hero-badge .material-symbols-rounded {
        font-size: 1.75rem;
    }
    
    .content-hero-title {
        font-size: 2rem;
    }
    
    .content-hero-subtitle {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .content-hero {
        padding: 1rem;
    }
    
    .content-hero-title {
        font-size: 1.75rem;
    }
    
    .content-hero-subtitle {
        font-size: 1rem;
    }
}

/* The open state of a content-detail dropdown toggle, which is a
   .btn-outline-primary. Keeps its !important: bonfire, dB and Five AM each pin
   .btn-outline-primary's resting colours with !important, and a brand sheet
   loads after this one, so a plain declaration here leaves the button looking
   shut while its menu is open. */
.content-hero-actions .btn.show {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-light) !important;
}

/* Custom breakpoint to handle dropdown interference */
@media (max-width: 1080px) {
    .content-hero {
        position: relative;
    }
    
    .content-hero-actions {
        position: static;
        margin-top: 1rem;
        align-self: flex-start;
    }
    
    .content-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .content-hero-text {
        width: 100%;
    }
    
    .content-hero-title,
    .content-hero-subtitle {
        padding-right: 0;
    }
}

/* Further adjustments for smaller screens */
@media (max-width: 768px) {
    .content-hero-content {
        text-align: center;
        align-items: center;
    }
    
    .content-hero-actions {
        align-self: center;
    }
}

/* Product details layout - flexbox approach */
.product-details-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.product-art-section {
    flex: 0 0 300px;
    max-width: 300px;
}

.product-info-section {
    flex: 1;
    min-width: 0; /* Allows flex item to shrink below content size */
}

/* Product art container alignment fix */
.product-art-container.text-start {
    text-align: left !important;
}

.product-art-container.text-start img {
    margin-left: 0;
    margin-right: auto;
}

/* Responsive breakpoint for product details layout */
@media (max-width: 1260px) {
    .product-details-layout {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .product-art-section {
        flex: none;
        max-width: 100%;
    }
    
    .product-info-section {
        flex: none;
        width: 100%;
    }
}

/* =================================== */
/* GENERATING REPORTS SPINNER          */
/* =================================== */

.generating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.spinner-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 4px solid var(--outline-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.spinner-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: var(--primary);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
}

.generating-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.generating-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.progress-steps {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface-container);
    border-radius: 2rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    opacity: 0;
    animation: fadeInStep 0.4s ease-out forwards;
}

.progress-step:nth-child(1) { animation-delay: 0.1s; }
.progress-step:nth-child(2) { animation-delay: 0.2s; }
.progress-step:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInStep {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.progress-step .material-symbols-rounded {
    font-size: 1.125rem;
    animation: dotPulse 1.5s ease-in-out infinite;
}

.progress-step:nth-child(1) .material-symbols-rounded { animation-delay: 0s; }
.progress-step:nth-child(2) .material-symbols-rounded { animation-delay: 0.5s; }
.progress-step:nth-child(3) .material-symbols-rounded { animation-delay: 1s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@media (max-width: 768px) {
    .generating-container {
        padding: 1.5rem;
    }
    
    .spinner-wrapper {
        width: 64px;
        height: 64px;
    }
    
    .spinner {
        width: 64px;
        height: 64px;
    }
    
    .spinner-icon {
        font-size: 1.5rem;
    }
    
    .progress-steps {
        gap: 0.5rem;
    }
    
    .progress-step {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* Download Ready Container */
.download-ready-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

.download-ready-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.download-ready-icon {
    font-size: 1.5rem;
    color: var(--bs-success);
}

.download-ready-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.download-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.download-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.download-buttons .btn .material-symbols-rounded {
    font-size: 1.125rem;
}

@media (max-width: 768px) {
    .download-ready-container {
        padding: 1rem;
    }
    
    .download-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .download-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Ledger error/restricted state styling */
.ledger-error-container {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ledger-error-icon {
    font-size: 3rem;
}

/* Search selection styling */
.search-selected {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-ring) !important;
}

.search-selected:hover {
    background-color: var(--primary-active) !important;
    opacity: 0.8;
}

/* Ensure search results are properly styled for keyboard navigation */
#navbar-search-results a,
#navbar-search-results .list-group-item {
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

#navbar-search-results a:focus,
#navbar-search-results .list-group-item:focus {
    /* Inset outline, not `outline: none`. The background tint below is the only
       other cue, and a tint alone is not a focus indicator. The negative offset
       keeps the ring inside the dropdown so it does not clip on the edge.
       :focus, not :focus-visible — the arrow-key handler moves focus with
       element.focus(), which does not always match :focus-visible. */
    outline: 2px solid var(--action);
    outline-offset: -2px;
    background-color: var(--primary-active);
    border-color: var(--primary-active);
}

/* Search loading indicator positioning */
.search-loading {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Search results container positioning */
#navbar-search-results {
    top: 100%;
    z-index: 1050;
}

/* HTMX Indicator Styles */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Content Home Spinner */
.content-home .spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--outline-light);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spinner-spin 1s linear infinite;
}

@keyframes spinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Content Templates Common Styles */
.product-art-img {
    max-width: 300px;
    height: auto;
}

.surface-container-box {
    background-color: var(--surface-container);
    border-radius: 12px;
    border: 1px solid var(--outline-light);
}

.surface-elevated-box {
    background-color: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--outline-light);
}

.icon-size-18 {
    font-size: 18px;
}

.icon-size-16 {
    font-size: 16px;
}

.explicit-badge {
    background-color: var(--warning);
    color: var(--text-light);
}

.icon-vertical-align {
    vertical-align: text-bottom;
}

.icon-secondary-color {
    color: var(--secondary);
}

.icon-primary-color {
    color: var(--primary);
}

/* Muted neutral-gray badge for status/labels that should NOT compete
   with brand color. Use over `bg-secondary` (brand orange) when the
   chip is informational rather than an accent. White text for AA contrast
   on the dark-gray background. */
.badge-muted {
    background-color: var(--text-secondary) !important;
    color: #fff !important;
}
/* Processing status spinners and icons */
.spinner-xs {
    width: 0.7em;
    height: 0.7em;
}

.spinner-xxs {
    width: 0.6em;
    height: 0.6em;
}

.icon-sm-inline {
    font-size: 16px;
    vertical-align: middle;
}

/* Dismiss animation for homepage alerts */
.alert-dismissible-item.htmx-swapping,
.alert-dismissible-item.dismissing {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    margin-bottom: 0 !important;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease 0.1s, margin-bottom 0.25s ease 0.1s;
}

.alert-dismissible-item {
    max-height: 100px;
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, margin-bottom 0.25s ease;
}

/* Dismiss button sits inside the card surface — prevent it from shrinking */
.alert-dismiss-btn {
    flex-shrink: 0;
}

/* Clickable body inside a dismissible card fills available width */
.alert-item-body {
    min-width: 0;
}

/* Alerts overflow: show/hide toggle */
.alerts-card .card-body {
    position: relative;
}

.alerts-overflow-container {
    overflow: hidden;
}

/* JS adds .alerts-collapsed when there are more than 5 items; hidden items get .alert-hidden */
.alerts-overflow-container .alert-hidden {
    display: none;
}

.alerts-show-more-btn {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 6px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    text-align: center;
}

.alerts-show-more-btn:hover {
    text-decoration: underline;
}

/* Collapsible card sections */
.chevron-toggle {
    transition: transform 0.2s ease;
}
[aria-expanded="true"] .chevron-toggle {
    transform: rotate(180deg);
}
.card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
}
.card-header[data-bs-toggle="collapse"]:hover {
    background-color: var(--hover-overlay);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme-supported]:not([data-theme="light"]) .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8c1d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    }

    :root[data-theme-supported]:not([data-theme="light"]) .breadcrumb-item + .breadcrumb-item::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' fill='%23c8c1d5'/%3E%3C/svg%3E");
    }

    :root[data-theme-supported]:not([data-theme="light"]) input[type="date"].form-control::-webkit-calendar-picker-indicator,
    :root[data-theme-supported]:not([data-theme="light"]) .btn-close {
        filter: invert(1) grayscale(100%) brightness(160%);
    }
}

:root[data-theme-supported][data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8c1d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
}

:root[data-theme-supported][data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' fill='%23c8c1d5'/%3E%3C/svg%3E");
}

:root[data-theme-supported][data-theme="dark"] input[type="date"].form-control::-webkit-calendar-picker-indicator,
:root[data-theme-supported][data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(160%);
}

/* Pricing cards (billing + signup plan pickers).
   The base .card-header strips backgrounds, so the "Most popular" banner needs its
   own class pinned to the brand primary — Bootstrap's .bg-primary compiles to its
   stock blue and ignores our --bs-primary override. Every card renders the banner
   slot (invisible on non-popular cards) so titles and action buttons align. */
.pricing-card .pricing-popular-banner {
    background: var(--primary);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-bottom: none;
}
.pricing-card .card-body {
    padding: 1.5rem;
}
.pricing-cap-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.pricing-cap-icon {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Analytics Overview (royalties period charts endpoint + tab fragments).
   Scoped to .analytics-overview so the nav-tab restyle does not leak to
   other .nav-tabs on the site. All colors use theme tokens for dark mode. */
.analytics-overview .nav-tabs-container {
    background-color: var(--surface-container);
    border-bottom: 2px solid var(--outline-light);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    position: relative;
}

.analytics-overview .nav-tabs {
    border-bottom: none;
    margin-bottom: 0;
}

.analytics-overview .nav-tabs .nav-link {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
    position: relative;
    transition: all 0.3s ease;
    font-weight: 500;
}

.analytics-overview .nav-tabs .nav-link:hover {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: transparent;
}

.analytics-overview .nav-tabs .nav-link.active {
    background-color: var(--surface-elevated);
    color: var(--primary);
    font-weight: 600;
    border-color: transparent;
    box-shadow: var(--shadow-elevation-1);
    z-index: 1;
}

.analytics-overview .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--surface-elevated);
    z-index: 2;
}

.analytics-overview .nav-tabs .nav-link i {
    font-size: 0.9em;
    opacity: 0.8;
}

.analytics-overview .nav-tabs .nav-link.active i {
    opacity: 1;
}

.analytics-overview .tab-content {
    border-top: none;
    min-height: 400px;
}

/* Metric cards in the Usage tab: elevated wells with a subtle outline. */
.analytics-overview .usage-metric-card {
    background-color: var(--surface-elevated);
    border: 1px solid var(--outline-light);
    box-shadow: none;
}

.analytics-overview .usage-metric-card:hover {
    box-shadow: var(--shadow-elevation-1);
    margin: 0;
}

.analytics-overview .usage-type-title {
    color: var(--text-primary);
}

.analytics-overview .top-territories-list .border-bottom {
    border-color: var(--outline-light) !important;
}

/* Territories tab: recessed well behind the choropleth and the raised "Top Markets"
   panel. Explicit theme tokens so they render correctly on every tenant build. */
.analytics-overview .territory-map-surface {
    background-color: var(--surface-base);
}

.analytics-overview .top-markets-panel {
    background-color: var(--surface-elevated);
    border: 1px solid var(--outline-light);
}

.analytics-overview .circle-badge {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.analytics-overview .dropdown-item i {
    width: 16px;
    text-align: center;
}

@media (max-width: 768px) {
    .analytics-overview .row .col-lg-6:last-child {
        text-align: left !important;
        margin-top: 1rem;
    }

    .analytics-overview .row .col-lg-6:last-child .btn {
        width: 100%;
    }
}

/* Statement Tracker row-actions dropdown.
   The dropdown lives inside the sticky first-column cell, which forms its own
   stacking context; without help, the next row's sticky cell paints later in
   the DOM and covers the open menu. Raise the cell (and its menu) above sibling
   rows while the dropdown is open. */
.tracker-matrix tbody td.position-sticky {
    z-index: 1;
}

.tracker-matrix tbody tr:has(.dropdown-menu.show) td.position-sticky {
    z-index: 1030;
}

/* White-label logo, light and dark ink
   ------------------------------------
   includes/logo.html renders both files; exactly one is shown. The default is
   full_logo_url, which is what every tenant showed before this existed, so a
   `client` tenant — which never carries data-theme-supported — is unaffected.

   A `native` tenant in light mode swaps to the dark-ink file. It has to: the
   light surface is the brand colour taken to lightness 0.97 (see
   --surface-container), so a light-ink logo lands on near-white and disappears.
   The selectors below mirror the theme selectors used for the palette itself. */
.wl-logo-ink-dark {
    display: none;
}

@media (prefers-color-scheme: light) {
    :root[data-theme-supported]:not([data-theme="dark"]) .wl-logo-ink-dark {
        display: block;
    }

    :root[data-theme-supported]:not([data-theme="dark"]) .wl-logo-ink-light {
        display: none;
    }
}

:root[data-theme-supported][data-theme="light"] .wl-logo-ink-dark {
    display: block;
}

:root[data-theme-supported][data-theme="light"] .wl-logo-ink-light {
    display: none;
}

/* =================================== */
/* KEYBOARD FOCUS                      */
/* =================================== */

/* One visible ring on every interactive element, for keyboard users.

   Most focus styling in this file is a soft `--focus-ring` box-shadow at 20-30%
   alpha, and several components had no focus styling at all. That is thin as a
   sole indicator, so this adds a solid outline on top of it.

   :focus-visible, not :focus, so a mouse click does not draw the outline. The
   existing `:focus` rules above stay as they are: each one exists to beat a
   Bootstrap default on the same element, and narrowing them to :focus-visible
   would let the stock Bootstrap colour back in on mouse focus.

   Drawn with --action, not --primary. A tenant's stored primary can be a
   surface colour — Five AM's is white — and the ring would vanish. Same reason
   `.border-brand` above uses --action.

   tabindex="-1" is excluded: Bootstrap puts it on `.modal`, which takes
   programmatic focus on open, and the ring would frame the whole dialog. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--action);
    outline-offset: 2px;
}

/* =================================== */
/* REDUCED MOTION                      */
/* =================================== */

/* Honour prefers-reduced-motion on every page that loads main.css. This block
   is the shared one; a page or brand sheet only needs its own if it adds
   movement of its own. The Django admin does not load main.css at all, so
   django_admin_theme.css carries its own copy of the universal rule. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: -1ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    /* The delays above are cut for a reason. `.progress-step` starts at
       opacity 0 and is made visible by an animation that carries an
       animation-delay; cut the duration but keep the delay and the step stays
       invisible for the length of the delay. A negative delay starts it
       already finished. */

    /* Spinners are the exception to the rule above. They are the only sign
       that work is still running, and the universal rule freezes them: it
       cuts the duration to nothing and stops the repeat. Give them back a
       slow, steady turn. !important, because the rule above uses it, and
       Bootstrap's own reduced-motion rule for .spinner-border does not, so
       ours would otherwise override it. */
    .spinner,
    .content-home .spinner,
    .spinner-border,
    .spinner-grow {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
        animation-delay: 0s !important;
    }

    /* The rule above removes the tween, not the movement — a hover lift still
       jumps to its new position. Name each lift and hold it still.

       Do not replace this list with a blanket `transform: none`. translateY(-50%)
       and translateX(-50%) centre the search loader, the chart labels and the
       floating form labels; nulling those would move them, not stop them. */
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-danger:hover,
    .btn-outline-primary.active:hover,
    .form-control:hover,
    .form-control:focus,
    .form-select:hover,
    .form-select:focus,
    .form-check-input:hover,
    .form-check-input:focus,
    .accordion-button:hover,
    .alert-item:hover,
    .breadcrumb-item a:hover,
    .chart-bar:hover,
    .earnings-row-starting:hover,
    .earnings-row-ending:hover,
    #navbar-search-results .dropdown-item:hover,
    #navbar-search-results .dropdown-item:focus,
    .mobile-menu-btn:hover,
    .mobile-menu-btn:active {
        transform: none;
    }
}