:root {
    /* ── Brand palette: primary #EDD600 (yellow), secondary #2B345D (navy) ──
       --cp-primary / --cp-secondary are the raw brand colors (same in both themes).
       Yellow is too light to read as text on white, so text-colored accents go
       through --cp-accent, which is navy on the light theme and yellow on the dark one.
       Anything filled with --cp-primary uses --cp-primary-contrast (navy) for its text. */
    --cp-primary:           #EDD600;
    --cp-primary-contrast:  #2B345D;
    --cp-secondary:         #2B345D;

    /* ── Light theme (default) ── */
    color-scheme: light;
    --cp-bg-primary:      #F5F6FA;
    --cp-bg-secondary:    #FFFFFF;
    --cp-text-primary:    #1F2540;
    --cp-text-secondary:  #4A5275;
    --cp-accent:          #2B345D;
    --cp-accent-deep:     #1E2544;
    --cp-accent-soft:     rgba(237, 214, 0, 0.22);
    --cp-muted:           #6B7394;
    --cp-muted-light:     #8A91AD;
    --cp-divider:         rgba(43, 52, 93, 0.12);

    /* Legacy vars kept for backward-compat with gv-theme / gv-theme-secondary.
       Note: MainLayout.razor also injects its own :root override for these
       five names (DB-driven design colors, !important) - that override wins
       regardless of theme, so these only apply where MainLayout's <style>
       block doesn't reach. */
    --primary-color:               #EDD600;
    --secondary-color:             #2B345D;
    --background-color-primary:    #F5F6FA;
    --background-color-secondary:  #FFFFFF;
    --text-color:                  #1F2540;

    /* Per-theme accent for filled controls (mirrors AppTheme.cs' MudBlazor palettes).
       Navy with white text on the light theme, yellow with navy text on the dark one.
       Used by the login page. */
    --cp-theme-accent:           #2B345D;
    --cp-theme-accent-hover:     #1E2544;
    --cp-theme-accent-contrast:  #FFFFFF;
}

:root.dark {
    /* ── Dark theme: navy-tinted surfaces, yellow accent ── */
    color-scheme: dark;
    --cp-bg-primary:      #151A2E;
    --cp-bg-secondary:    #1C2240;
    --cp-text-primary:    #FFFFFF;
    --cp-text-secondary:  #E3E6F0;
    --cp-accent:          #EDD600;
    --cp-accent-deep:     #C4B000;
    --cp-accent-soft:     rgba(237, 214, 0, 0.14);
    --cp-muted:           #8A91AD;
    --cp-muted-light:     #A9AFC7;
    --cp-divider:         rgba(255, 255, 255, 0.08);

    --primary-color:               #EDD600;
    --secondary-color:             #2B345D;
    --background-color-primary:    #151A2E;
    --background-color-secondary:  #1C2240;
    --text-color:                  #FFFFFF;

    --cp-theme-accent:           #EDD600;
    --cp-theme-accent-hover:     #C4B000;
    --cp-theme-accent-contrast:  #2B345D;
}

.gv-text-primary-theme {
    color: var(--cp-accent);
}

.gv-theme {
    background-color: var(--cp-bg-primary);
    color: var(--cp-text-primary);
}

.gv-theme-secondary {
    background-color: var(--cp-bg-secondary) !important;
    color: var(--cp-text-primary) !important;
    fill: var(--cp-text-primary) !important;
}

/* MudAutocomplete/MudSelect popovers default to a fixed 300px MaxHeight
   regardless of how much vertical room the window actually has. MudBlazor
   flips the popover above/below the field to find more space, but the
   height itself stays fixed - on a short browser window neither side may
   have 300px available, so the list still runs off the top/bottom edge.
   Apply this via PopoverClass="cp-popover-fit" to cap it at whichever is
   smaller: MudBlazor's own MaxHeight, or ~70% of the current viewport
   height, so the list always fits and scrolls internally instead of
   clipping. !important is required to win over the inline max-height style
   MudBlazor sets on the popover paper. */
.cp-popover-fit {
    max-height: min(300px, 70vh) !important;
}

/* Opt-in for a label+field row where the field can show MudBlazor error text
   (e.g. ClientAutocomplete's ErrorText="Writer is required"). MudBlazor only
   renders that helper/error line when a field is actually erroring, and it's
   laid out in normal flow, so the field grows taller than its plain sibling
   (the label) right next to it the moment it errors.
   Top-aligning the row (align-items:flex-start) was tried first, but that
   pins the label flush to the row's top edge - which doesn't match where a
   Dense Outlined field's own text actually sits (a few px down, inside the
   outline chrome), so the label reads as vertically off even when there's
   no error. Centering (align-items:center) gets that alignment right, but
   only because it's implicitly centering against the field's fixed
   single-line height - once the field grows from its own error text, the
   row re-centers on that new taller height and the label drifts off again.
   So: keep centering, and instead stop the field from growing in the first
   place - take its helper/error line out of flow (it overlays just below
   the field instead of pushing it), so the field's in-flow height - and
   therefore the row's centering - never depends on whether it's currently
   erroring. Scoped to fields inside a Class="cp-field-row" row rather than
   a blanket override on .mud-input-control-helper-container, since that
   class is shared by every Mud input across the app. Trade-off: an error
   message can overlap whatever sits directly below the row instead of
   pushing it down - acceptable here since these rows already sit in dense,
   tightly-packed tables. */
.cp-field-row {
    align-items: center;
}

.cp-field-row .mud-input-control-helper-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
}