: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;

    /* 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);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-color: var(--text-light);
    --bs-btn-active-border-color: var(--primary-active);
    /* 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);
}

@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);
        --bs-btn-active-bg: var(--primary-active);
        --bs-btn-active-color: var(--text-primary);
        --bs-btn-active-border-color: var(--primary-active);

        --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);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-color: var(--text-primary);
    --bs-btn-active-border-color: var(--primary-active);

    --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;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: var(--outline-light) !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 {
    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;
}

/* 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%
  );
  color: var(--text-light);
}

.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%
  );
  color: var(--text-light);
}
.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--secondary-shadow);
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-success.disabled,
.btn-success:disabled {
    color: var(--text-dark);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-light);
    border: 1px solid var(--primary);
}

.btn-outline-primary:focus-visible {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--primary) !important;
}

/* Active class for outline-primary buttons (persistent active state) */
.btn-outline-primary.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--primary) !important;
}

.btn-outline-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--primary) !important;
}

.btn-outline-primary.active:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--brand-shadow);
}

.btn-danger {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--text-light);
    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;
}


.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 {
    box-shadow: 0 0 0 4px var(--focus-ring), 0 4px 12px var(--brand-shadow);
    transform: translateY(-1px);
}

.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) !important;
        position: fixed !important;
    }

    .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 !important;
        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 !important; /* 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;
    margin-left: 280px; /* Match the sidebar width to prevent overlap */
}

.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 !important;
    position: static !important;
    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: #fff !important;
}
.badge.badge-secondary,
.badge.bg-secondary {
    background-color: var(--secondary) !important;
    color: #fff !important;
}
.badge.badge-success,
.badge.bg-success {
    background-color: var(--success-text) !important;
    color: #fff !important;
}
.badge.badge-warning,
.badge.bg-warning {
    background-color: var(--warning-text) !important;
    color: #fff !important;
}
.badge.badge-danger,
.badge.bg-danger {
    background-color: var(--warning) !important;
    color: #fff !important;
}
.badge.badge-info,
.badge.bg-info {
    background-color: var(--info-text) !important;
    color: #fff !important;
}
.badge.bg-dark {
    background-color: var(--text-primary) !important;
    color: #fff !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) !important;
    color: var(--text-light) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    transition: all 0.3s ease !important;
}

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

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

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

.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 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
        position: fixed !important;
        z-index: 1000 !important;
        background-color: var(--surface-container) !important;
        border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
        box-shadow: var(--shadow-elevation-3) !important;
    }
    
    /* Show sidebar when mobile-open class is added */
    .nav-rail.mobile-open {
        transform: translateX(0) !important;
        box-shadow: var(--shadow-elevation-3) !important;
    }
    
    /* Remove margin from main content on mobile */
    .main-content-wrapper {
        margin-left: 0 !important;
        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) {
    .mobile-menu-btn {
        width: 44px;
        height: 44px;
        top: 15px;
        left: 15px;
    }
    
    main.pt-4 {
        padding-top: 4.5rem !important;
    }
    
    .nav-rail {
        width: 260px;
    }
}

/* 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% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* 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 !important;
}

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

/* 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 !important;
} 

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

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

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

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

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

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

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

/* 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 !important;
}

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

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

/* 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-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) !important;
    color: var(--text-light) !important;
    border-color: var(--primary) !important;
}

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

/* 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) !important;  /* Light tinted purple - readable with dark text */
    border-color: var(--primary) !important;       /* Primary purple border for selection indicator */
    color: var(--text-primary) !important;         /* Dark text for readability */
    border-radius: 24px !important;                /* Match brand border radius */
}

.selected-deal-icon {
    color: var(--primary) !important;              /* 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 */
.form-check-input:indeterminate {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* 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;
    }
}

.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%;
    }
}

.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 {
    outline: none;
    background-color: var(--primary-active);
    border-color: var(--primary-active);
}

/* =================================== */
/* 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 {
    outline: none;
    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;
}

/* 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 !important;
    margin-bottom: 0;
}

.analytics-overview .nav-tabs .nav-link {
    border: none !important;
    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 !important;
}

.analytics-overview .nav-tabs .nav-link.active {
    background-color: var(--surface-elevated) !important;
    color: var(--primary) !important;
    font-weight: 600;
    border-color: transparent !important;
    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 !important;
    height: 24px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.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;
}