/*
 * Apex Plus Design System
 *
 * POLICY (read before editing)
 *  - This file is intentionally kept as one reduced stylesheet. Keep pruning
 *    dead, duplicated, and design-mismatched rules here rather than splitting
 *    the file to hide size.
 *
 *  - The canonical palette lives in src/ApexPlus.Web/Themes/DesignTokens.cs
 *    and is wired into MudBlazor via src/ApexPlus.Web/Themes/ApexTheme.cs.
 *    MudBlazor emits every PaletteLight entry as a --mud-palette-* CSS
 *    variable on :root, so all .mud-* components already render with the
 *    brand colors.
 *
 *  - To change a color, font, or sizing token: edit DesignTokens.cs (and,
 *    if it's a CSS-only token like --hover-bg, mirror it in the :root
 *    block in this file). Do NOT hardcode hex values in component rules.
 *
 *  - Do NOT add body-qualified overrides for palette values.
 *    MudBlazor already themes from PaletteLight. If you need to change
 *    a brand color, update DesignTokens.cs once, not here.
 *
 *  - There is exactly ONE @layer utilities block. Add new utility classes
 *    inside it, not at the bottom of the file.
 *
 *  - Body-qualified selector prefixes are forbidden going forward. Plain
 *    .mud-X already wins over MudBlazor.min.css - by LAYER, not by source
 *    order. Put new MudBlazor overrides in @layer overrides.
 *
 *  - TWO CASCADE RULES THAT SURPRISE PEOPLE (both have caused live bugs here):
 *    1. An UNLAYERED rule beats every layer, including @layer overrides. Most of
 *       this file is unlayered, so a rule placed in @layer overrides to make it
 *       win can still lose to a plain rule elsewhere in this file. When that
 *       happens, theme a token instead of escalating the selector.
 *    2. For !important the layer order RUNS BACKWARDS - the FIRST layer wins and
 *       unlayered comes last. Every !important in this file is unlayered, so it
 *       LOSES to a MudBlazor !important on the same property. Never add an
 *       !important to beat MudBlazor; remap the --mud-palette-* token it reads
 *       (see the prefers-contrast block for the worked example).
 *
 * CSS Layer Order (controls cascade priority):
 * 1. mudblazor  - MudBlazor.min.css wrapped by css/mud-layer.css (lowest)
 * 2. reset      - Base reset styles
 * 3. base       - Design tokens and base styles
 * 4. components - Component-specific styles
 * 5. layouts    - Layout structures
 * 6. utilities  - Utility classes
 * 7. overrides  - MudBlazor overrides
 */
@layer mudblazor, reset, base, components, layouts, utilities, overrides;


:root {

    --nts-blue-950: #000a18;
    --nts-blue-900: #001029;
    --nts-blue-800: #001a3a;
    --nts-blue-700: #002147;
    --nts-blue-600: #0a3460;
    --nts-blue-550: #243f5c;
    --nts-blue-500: #1a4a7a;
    --nts-blue-450: #355E8C;
    --nts-blue-400: #2d6299;
    --nts-blue-300: #5a8fc4;
    --nts-blue-200: #9bbde0;
    --nts-blue-200-rgb: 155, 189, 224;
    --nts-blue-100: #d4e5f5;
    --nts-blue-75:  #e6eef5;
    --nts-blue-50:  #eef5fb;

    --nts-red-950: #4a0718;
    --nts-red-900: #7a0c28;
    --nts-red-800: #960f32;
    --nts-red-780: #9A1830;
    --nts-red-700: #BB133E;
    --nts-red-650: #C41E3A;
    --nts-red-600: #d42a54;
    --nts-red-400: #e87390;
    --nts-red-400-rgb: 232, 115, 144;
    --nts-red-300: #f09db1;
    --nts-red-200: #f7c7d3;
    --nts-red-200-rgb: 247, 199, 211;
    --nts-red-150: #FEE2E6;
    --nts-red-100: #fce8ed;
    --nts-red-50:  #fef5f7;

    --nts-gray-800: #2d343d;
    --nts-gray-700: #434c59;
    --nts-gray-600: #5c6778;
    --nts-gray-500: #798496;
    --nts-gray-400: #9aa4b3;
    --nts-gray-300: #bcc4cf;
    --nts-gray-200: #dee3ea;
    --nts-gray-100: #f0f3f6;
    --nts-gray-50:  #f8f9fb;

    --nts-green-800: #1f4a34;
    --nts-green-100: #e8f5ec;

    --color-primary: var(--nts-blue-700);
    --color-primary-hover: var(--nts-blue-600);
    --color-primary-active: var(--nts-blue-800);
    --color-primary-light: var(--nts-blue-100);
    --color-primary-rgb: 0, 33, 71;

    --color-accent: var(--nts-red-700);
    --color-accent-active: var(--nts-red-800);
    --color-accent-light: var(--nts-red-100);
    --color-accent-rgb: 187, 19, 62;
    --color-tertiary: var(--nts-blue-500);
    --color-tertiary-light: var(--nts-blue-100);
    --color-tertiary-rgb: 26, 74, 122;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    --color-success: #2F6F4E;
    --color-success-dark: #1f4a34;
    --color-success-light: #e8f5ec;

    /* Contract: Warning is the deep-burgundy end of the NTS red scale so it stays
       distinguishable at a glance from Error's brighter cardinal red. Do not re-alias
       Warning onto Accent/Error - caution and failure are different messages. */
    --color-warning: #7A0C28;
    --color-warning-rgb: 122, 12, 40;
    --color-warning-dark: #4A0718;
    --color-warning-light: #FEF5F7;

    --color-error: #C41E3A;
    --color-error-rgb: 196, 30, 58;
    --color-error-dark: #9A1830;
    --color-error-light: #FEE2E6;

    --color-info: #355E8C;
    --color-info-dark: #243f5c;
    --color-info-light: #e6eef5;

    /* Contract: Alert is urgent attention, not failure - it aliases the Warning
       family so alert surfaces never render identically to Error surfaces. */
    --color-alert: var(--color-warning);
    --color-alert-rgb: var(--color-warning-rgb);
    --color-alert-dark: var(--color-warning-dark);
    --color-alert-light: var(--color-warning-light);

    --status-tracker-normal-bg: var(--color-success-light);
    --status-tracker-normal-text: var(--color-success);
    --status-tracker-info-bg: var(--color-info-light);
    --status-tracker-info-text: var(--color-info-dark);
    --status-tracker-warning-bg: var(--color-warning-light);
    --status-tracker-warning-text: var(--color-warning-dark);
    --status-tracker-problem-bg: var(--color-error-light);
    --status-tracker-problem-text: var(--color-error);
    --status-tracker-error-bg: var(--bg-muted);
    --status-tracker-error-text: var(--text-secondary);

    --bg-page: #F4F6F8;
    --bg-app-canvas: #DFEAF4;
    /* Contract: interactive surfaces stay white. Less-white application chrome uses the
       dedicated semantic surfaces below so controls and popovers keep their contrast. */
    --bg-surface: #ffffff;
    --bg-panel-surface: #F3F7FA;
    --bg-metric-surface: #EDF4F9;
    --bg-status-surface: #EAF2F8;
    --bg-section-header: #D7E6F3;
    --bg-operation-alternate: #E9F1F7;
    --bg-dialog-surface: #F7FAFC;
    --bg-muted: var(--nts-gray-100);
    --bg-form: var(--nts-gray-100);
    --bg-header: var(--nts-blue-700);
    --bg-sidebar: var(--nts-blue-900);
    --hover-bg: #DEE7F2;
    --striped-row: var(--bg-operation-alternate);
    --table-lines: var(--border-divider);
    --table-striped: var(--striped-row);
    --table-hover: var(--hover-bg);
    --table-header-bg: var(--bg-page);
    --dialog-backdrop: rgba(16, 31, 47, 0.20);
    --overlay-bg: var(--dialog-backdrop);

    --diff-added: var(--color-success-light);
    --diff-removed: var(--color-error-light);
    --diff-modified: var(--color-info-light);

    --color-diff-from: var(--color-error-light);
    --color-diff-to: var(--color-info-light);
    --color-diff-both: var(--color-success-light);
    /* Contract: the four work-queue lock-ownership states must stay visually
       distinct (legacy DarkOrange/DarkSalmon/Gold/Red carried this). Current doc
       reads as the open/selected navy row; your own lock elsewhere on this machine
       is neutral; your lock from another machine is Warning; another user's lock
       is Error. Never collapse two of these onto one treatment. */
    --color-lock-current-doc: var(--nts-blue-100);
    --color-lock-current-doc-hover: rgba(var(--color-primary-rgb), 0.16);
    --color-lock-current-doc-text: var(--nts-blue-700);
    --color-lock-self-same: var(--nts-gray-200);
    --color-lock-self-same-hover: var(--nts-gray-300);
    --color-lock-self-same-text: var(--nts-gray-800);
    --color-lock-self-diff: var(--nts-red-100);
    --color-lock-self-diff-hover: rgba(var(--color-warning-rgb), 0.20);
    --color-lock-self-diff-text: var(--color-warning);
    --color-lock-other: var(--nts-red-200);
    --color-lock-other-hover: rgba(var(--color-error-rgb), 0.30);
    --color-lock-other-text: var(--color-error-dark);


    --text-primary: #1F2933;
    --text-secondary: #4B5563;
    --text-muted: var(--nts-gray-600);
    --text-inverse: #ffffff;
    --text-on-filled: var(--text-inverse);
    --text-link: var(--nts-blue-500);
    --text-on-dark: rgba(var(--color-white-rgb), 0.85);
    --text-on-dark-strong: rgba(var(--color-white-rgb), 0.9);
    --text-on-dark-subtle: rgba(var(--color-white-rgb), 0.7);
    --text-on-dark-muted: rgba(var(--color-white-rgb), 0.6);
    --text-on-dark-disabled: rgba(var(--color-white-rgb), 0.5);
    --border-on-dark: rgba(var(--color-white-rgb), 0.3);
    --border-on-dark-subtle: rgba(var(--color-white-rgb), 0.12);
    --border-on-dark-strong: rgba(var(--color-white-rgb), 0.6);
    --border-on-dark-hover: rgba(var(--color-white-rgb), 0.5);
    --surface-on-dark-faint: rgba(var(--color-white-rgb), 0.05);
    --surface-on-dark-rest: rgba(var(--color-white-rgb), 0.1);
    --surface-on-dark-hover: rgba(var(--color-white-rgb), 0.15);
    --surface-on-dark-active: rgba(var(--color-white-rgb), 0.18);
    --surface-on-dark-border: rgba(var(--color-white-rgb), 0.2);
    --surface-on-dark-border-hover: rgba(var(--color-white-rgb), 0.3);
    --popover-item-hover-bg: rgba(var(--color-black-rgb), 0.08);
    --annotation-page-number-bg: rgba(var(--color-black-rgb), 0.6);
    --surface-table-total: rgba(var(--color-black-rgb), 0.04);
    --surface-table-grand-total: rgba(var(--color-primary-rgb), 0.12);
    --connection-overlay-bg: rgba(var(--color-primary-rgb), 0.95);

    --border-surface: #B8CCDE;
    --border-divider: #C8D7E4;
    --border-default: #D1D5DB;
    --border-light: var(--nts-gray-100);
    --border-strong: var(--nts-gray-300);
    --border-control: var(--nts-gray-500);
    --border-control-hover: var(--nts-blue-400);
    --footer-border: var(--color-accent);
    --print-background: #ffffff;
    --print-text: #000000;
    --print-border: var(--nts-gray-300);
    --print-link: var(--nts-gray-600);
    --signature-selection-bg: rgba(var(--color-primary-rgb), 0.1);
    --map-label-color: var(--color-primary);
    --field-truncated-warning: var(--color-alert);
    /* The four NYS send/receive queue row states, mapped onto approved semantic tokens only -
       the NTS palette has no fourth hue, so Queued and Processing are both blues and separate by
       ~7 dE00 in light mode. That closeness is a known, accepted trade: do NOT "fix" it by adding
       a teal/green primitive, which would be a second palette.
       Processing rides Info because Info is the standard's in-progress blue; Queued rides the
       non-semantic Tertiary category family. Do not put Processing back on --color-primary: the
       dark block collapses Primary and Info onto --nts-blue-300 and the two states become identical.
       SOURCE: /Apex/Nts.Suite/WinForms/IMSNew/SendQueueStatus.cs lines 535-561 - ERROR=Red,
       QUEUED=DarkCyan, ATNYSVOTER=ForestGreen, PROCESSING=Blue, all bold, other states reset. */
    --queue-state-error: var(--color-error);
    --queue-state-queued: var(--color-tertiary);
    --queue-state-at-state: var(--color-success);
    --queue-state-processing: var(--color-info);
    --print-dashboard-border: var(--nts-gray-200);
    --high-contrast-primary: var(--nts-blue-950);
    --high-contrast-accent: var(--nts-red-900);
    --high-contrast-text: #000000;
    --high-contrast-text-secondary: var(--nts-gray-800);
    --high-contrast-background: #ffffff;
    --high-contrast-link: var(--nts-blue-800);
    --high-contrast-disabled-bg: var(--nts-gray-300);
    --dark-color-primary-light: rgba(90, 143, 196, 0.18);
    --dark-color-accent-light: rgba(232, 115, 144, 0.18);
    --dark-bg-page: var(--nts-blue-950);
    --dark-bg-surface: var(--nts-blue-900);
    --dark-bg-muted: var(--nts-blue-800);
    --dark-bg-header: var(--nts-blue-950);
    --dark-bg-header-rgb: 0, 10, 24;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: var(--nts-blue-200);
    --dark-text-muted: var(--nts-gray-400);
    --dark-border-default: var(--nts-blue-600);
    --dark-border-strong: var(--nts-blue-500);
    --dark-success-light: rgba(47, 111, 78, 0.22);
    --dark-warning-light: rgba(247, 199, 211, 0.16);
    --dark-error-light: rgba(196, 30, 58, 0.20);
    --dark-info-light: rgba(53, 94, 140, 0.24);
    --dark-alert-light: var(--dark-warning-light);
    --dark-sidebar-shadow: rgba(var(--color-black-rgb), 0.35);
    --dark-backdrop-bg: rgba(var(--color-black-rgb), 0.45);
    --shortcuts-overlay-bg: rgba(0, 16, 41, 0.6);
    --shortcuts-modal-shadow: 0 25px 50px -12px rgba(var(--color-black-rgb), 0.5);
    --shortcut-key-shadow: 0 1px 2px rgba(var(--color-black-rgb), 0.05);
    --pivot-recomputing-overlay: rgba(var(--color-white-rgb), 0.7);
    --pending-add-bg: var(--color-success-light);
    --pending-remove-bg: var(--color-error-light);
    --district-mismatch-shadow: 0 1px 3px rgba(var(--color-alert-rgb), 0.3);
    --focus-ring-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
    --focus-ring-width: 2px;
    --focus-ring-color: var(--color-primary);
    --focus-ring-offset: 2px;
    --focus-field-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
    --focus-subtle-bg: rgba(var(--color-primary-rgb), 0.05);
    --focus-tab-bg: rgba(var(--color-primary-rgb), 0.08);
    --quick-search-overlay-bg: rgba(0, 16, 41, 0.6);
    --pivot-row-color: var(--color-primary);
    --pivot-row-color-rgb: var(--color-primary-rgb);
    --pivot-col-color: var(--color-tertiary);
    --pivot-col-color-rgb: var(--color-tertiary-rgb);
    --pivot-value-color: var(--color-accent);
    --pivot-value-color-rgb: var(--color-accent-rgb);
    --pivot-filter-color: var(--nts-gray-600);
    --pivot-filter-color-rgb: 92, 103, 120;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    /* Contract: --font-mono intentionally aliases Inter; preserve proportional identifiers and use tabular-nums only for compared magnitudes. */
    --font-mono: var(--font-sans);

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);

    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    --shadow-xs:  0 1px 2px rgba(0, 33, 71, 0.04);
    --shadow-sm:  0 1px 2px rgba(0, 33, 71, 0.06);
    --shadow-md:  0 2px 4px rgba(0, 33, 71, 0.08), 0 1px 2px rgba(0, 33, 71, 0.04);
    --shadow-lg:  0 6px 12px rgba(0, 33, 71, 0.10), 0 2px 4px rgba(0, 33, 71, 0.06);
    --shadow-xl:  0 12px 24px rgba(0, 33, 71, 0.12), 0 4px 8px rgba(0, 33, 71, 0.08);

    --chart-1: var(--nts-blue-700);
    --chart-2: var(--nts-red-700);
    --chart-3: #2d6299;
    --chart-4: var(--nts-gray-600);
    --chart-5: var(--color-success);
    --chart-6: var(--nts-blue-300);
    --chart-7: var(--nts-red-800);
    --chart-8: var(--nts-gray-500);

    --transition-fast: 0.1s ease;
    --transition-normal: 0.15s ease;
    --ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1);

    --header-height: 56px;
    --sidebar-width: 260px;
    --app-footer-height: 112px;
    --snackbar-footer-clearance: calc(var(--app-footer-height) + var(--space-4));
    --content-max: 1600px;
    --field-helper-line: 1.25rem;
    --field-width-micro: 6rem;
    --field-width-short: 10rem;
    --field-width-medium: 18rem;
    --field-width-long: 28rem;
    --date-range-field-width: 10.75rem;
    --filter-option-column: 15rem;

    --label-font-weight: 500;
    --label-font-size: var(--text-sm);

    --surface-page: var(--bg-page);
    --surface-card: var(--bg-surface);
    --surface-form: var(--bg-form);


    --density-row-height: 36px;
    --density-input-height: 32px;
    --density-button-height: 32px;
    --density-touch-target: 44px;
    --density-cell-padding-y: 8px;
    --density-cell-padding-x: 12px;
    --density-control-padding-y: 6px;
    --density-control-padding-x: 10px;
    --checkbox-size: 18px;
    --tree-row-min-height: 28px;
    --tree-row-max-height: 30px;
    --tree-checkbox-size: 15px;
    --checkbox-list-max-height: 300px;

    --layout-padding: var(--space-5);
    --content-footer-clearance: var(--space-6);
    --topbar-search-placeholder: var(--text-on-dark-strong);
    --section-padding: var(--space-4);
    --section-gap: var(--space-lg);
    --field-gap: var(--space-sm);
    --group-gap: var(--space-md);
    --form-label-width: 150px;


    --password-toggle-width: 40px;
    --password-toggle-offset-x: var(--space-2);
    --top-bar-control-height: 38px;
    --standard-grid-pagination-control-height: 24px;
}

@media (any-pointer: coarse), (max-width: 600px) {
    :root {
        --density-input-height: var(--density-touch-target);
        --density-button-height: var(--density-touch-target);
        --top-bar-control-height: var(--density-touch-target);
        --standard-grid-pagination-control-height: var(--density-touch-target);
    }
}


@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }
}

@layer base {
    html {
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        color: var(--text-primary);
        background-color: var(--surface-page);
        margin: 0;
        padding: 0;
    }
}

@layer layouts {

.page {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.form-container {
    background-color: var(--surface-form);
    border-radius: var(--radius-lg);
    padding: var(--section-padding);
    margin-bottom: var(--section-gap);
    max-width: var(--content-max);
}

.form-container .mud-paper,
.form-container .mud-card {
    border: 1px solid var(--border-default);
}

.content-aside-container {
    container: content-aside / inline-size;
    min-width: 0;
    max-width: 100%;
}

.content-aside-layout {
    display: grid;
    grid-template-areas:
        "aside"
        "main";
    grid-template-columns: minmax(0, 1fr);
    gap: var(--section-gap);
    align-items: start;
    min-width: 0;
}

.content-aside-layout--single {
    grid-template-areas: "main";
}

.content-aside-main {
    grid-area: main;
    min-width: 0;
}

.content-aside-panel {
    grid-area: aside;
    min-width: 0;
    outline-offset: var(--focus-ring-offset);
}

.content-aside-panel:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
}

@container content-aside (min-width: 80rem) {
    .content-aside-layout:not(.content-aside-layout--single) {
        grid-template-areas: "main aside";
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 20rem);
    }

    .content-aside-panel {
        position: sticky;
        top: var(--space-4);
        align-self: start;
        max-height: calc(100dvh - var(--header-height) - var(--app-footer-height) - var(--space-8));
        overflow: auto;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 600px) {
    .form-container {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }
}


.form-container .mud-grid {
    align-items: stretch;
}

.form-container .mud-grid-item {
    display: flex;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    min-height: 72px;
    /* Contract: fill the grid cell so every tile in a row is the same height. Only some tiles
       carry the Export/Print footer, and with height: auto those stood taller than row-mates. */
    height: 100%;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-surface);
    border-left: 4px solid var(--color-primary);
    background-color: var(--bg-metric-surface);
    overflow: visible;
    border-radius: var(--radius-md);
}

.dashboard-card-alert {
    border-left-color: var(--color-alert);
    background-color: var(--color-alert-light);
}

.dashboard-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    min-height: auto;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
}

.dashboard-card .mud-divider {
    margin: 0;
}

/* Contract: the Export/Print footer is secondary and must not drive tile height. MudButton's
   36px min-height made the footer as tall as the metric above it. */
.dashboard-card-actions .mud-button-root {
    min-height: 0;
    min-width: 0;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
}

.dashboard-card-actions {
    padding: 2px 0;
}

.dashboard-card-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-muted);
    text-align: left;
    line-height: 1.3;
}

.dashboard-card-sublabel {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    min-height: 16px;
    line-height: 1.3;
}

.dashboard-card-value {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Contract: inline date/detail value inside a dashboard card stays body-sized (base/semibold),
   never the 3xl stat size; pairs with .text-error for the alert state. */
.dashboard-card-date {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
}

.dashboard-card-value-alert {
    color: var(--color-alert-dark);
    font-weight: var(--font-weight-bold);
}

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

}

@layer utilities {

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

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

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-mono {
    font-family: var(--font-mono);
}

.error-display-panels {
    width: 100%;
    max-width: min(50rem, 100%);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning-dark);
}

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

.confidential-voter-row,
.confidential-voter-row td {
    color: var(--color-error);
}

.w-100 { width: 100%; }

.w-220 { width: 220px; min-width: 220px; max-width: 220px; }

.max-w-150 { max-width: 150px; }
.max-w-200 { max-width: 200px; }
.max-w-280 { max-width: 280px; }
.max-w-300 { max-width: 300px; }

.min-h-16 { min-height: 16px; }
.min-h-72 { min-height: 72px; }
.min-h-120 { min-height: 120px; }
.min-h-150 { min-height: 150px; }
.min-h-180 { min-height: 180px; }
.min-h-200 { min-height: 200px; }
.min-h-400 { min-height: 400px; }
.min-h-600 { min-height: 600px; }

.h-100 { height: 100%; }
.h-130 { height: 130px; }
.max-h-130 { max-height: 130px; }
.max-h-150 { max-height: 150px; overflow-y: auto; }

.flex-column {
    display: flex;
    flex-direction: column;
}
.bg-muted {
    background-color: var(--bg-muted);
}

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

.bg-light {
    background-color: var(--bg-surface);
}

.bg-light-gray {
    background-color: var(--bg-muted);
}

.bg-success-light {
    background-color: var(--color-success-light);
}

.grid-row-modified {
    background-color: var(--color-warning-light);
    font-weight: bold;
    color: var(--color-warning-dark);
}

.bg-warning-light {
    background-color: var(--color-warning-light);
}

.bipartisan-party-panel {
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.bipartisan-party-panel-dem {
    border-left: 4px solid var(--color-tertiary);
    background-color: var(--color-tertiary-light);
}

.bipartisan-party-panel-rep {
    border-left: 4px solid var(--color-accent);
    background-color: var(--color-accent-light);
}

.bg-canvas {
    background-color: var(--bg-app-canvas);
}

.bg-canvas-dark {
    background-color: var(--bg-muted);
}

.bg-preview {
    background-color: var(--bg-muted);
}

.bg-subtle {
    background-color: var(--bg-page);
}

.bg-white {
    background-color: var(--bg-surface);
}

.bg-diff-from {
    background-color: var(--color-diff-from);
}
.bg-diff-to {
    background-color: var(--color-diff-to);
}
.bg-diff-both {
    background-color: var(--color-diff-both);
}

.audit-diff-token {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.audit-status-bar {
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}


.dialog-sm,
.dialog-md,
.dialog-lg,
.dialog-xl { max-width: 95vw; }
.dialog-sm { min-width: min(400px, 95vw); max-width: min(600px, 95vw); }
.dialog-md { min-width: min(600px, 95vw); max-width: min(900px, 95vw); }
.dialog-lg { min-width: min(800px, 95vw); max-width: min(1100px, 95vw); }
.dialog-xl { min-width: min(1000px, 95vw); max-width: min(1400px, 95vw); }


.rounded-sm { border-radius: var(--radius-md); }
.rounded { border-radius: 6px; }
.rounded-xl { border-radius: var(--radius-xl); }

.status-border-warning { border-left: 4px solid var(--color-warning); }
.status-border-success { border-left: 4px solid var(--color-success); }
.status-border-error { border-left: 4px solid var(--color-error); }
.status-border-info { border-left: 4px solid var(--color-info); }
.status-border-neutral { border-left: 4px solid var(--border-default); }

.text-error-bold { color: var(--color-error); font-weight: bold; }
.text-warning-bold { color: var(--color-warning); font-weight: bold; }

.h-full { height: 100%; }

.scrollable-list { max-height: 300px; overflow-y: auto; }

.text-bold { font-weight: 600; }
.text-line-spacing { line-height: 1.5; }
.align-middle { vertical-align: middle; }
.text-on-dark { color: var(--text-inverse); }
.text-on-filled { color: var(--text-on-filled); }

.acceptable-use-banner {
    width: 100%;
    min-width: 0;
    padding: var(--space-6);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background-color: var(--bg-muted);
}

.hidden { display: none; }
.visible { display: block; }

.sidebar {
    width: min(var(--sidebar-width), max(260px, calc(100vw - 40rem)));
    flex-shrink: 0;
    background: var(--bg-sidebar);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Contract: Sidebar z-index is 1100 normally and 1200 off-canvas; both must remain below dialogs at 1300. */
    z-index: 1100;

    --mud-palette-text-primary: var(--text-on-dark);
    --mud-palette-text-secondary: var(--text-on-dark-subtle);
    --mud-palette-text-disabled: var(--text-on-dark-disabled);
    --mud-palette-action-default: var(--text-on-dark);
    --mud-palette-action-default-hover: var(--text-inverse);
    --mud-palette-drawer-text: var(--text-on-dark);
    --mud-palette-drawer-icon: var(--text-on-dark);
}

/* Contract: ApexPlusSidebar in app.js updates and persists --sidebar-width; hide this handle in off-canvas mode. */
.sidebar-resizer {
    flex: 0 0 auto;
    width: 8px;
    cursor: col-resize;
    background: var(--bg-sidebar);
    box-shadow: inset -1px 0 0 var(--border-on-dark-subtle);
    transition: background 0.2s ease;
    z-index: 1100;
}

.sidebar-resizer:hover,
body.sidebar-resizing .sidebar-resizer,
.sidebar-resizer:focus-visible {
    background: var(--surface-on-dark-active);
}

.sidebar-resizer:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

body.sidebar-resizing {
    cursor: col-resize;
    user-select: none;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
}

.user-name {
    font-size: var(--text-sm);
}

.content {
    flex: 1;
    padding: var(--layout-padding) var(--layout-padding) calc(var(--layout-padding) + var(--content-footer-clearance));
    scroll-padding-bottom: var(--content-footer-clearance);
    overflow-y: auto;
}

@media screen {
    html:not(.dark-mode):not([data-theme="dark"]) .content {
        background-color: var(--bg-app-canvas);
    }
}

.header-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.header-actions {
    display: flex;
    gap: var(--space-3);
}

.dmv-processing .header-actions {
    align-items: center;
    flex-wrap: wrap;
}

.dmv-processing .auto-refresh {
    /* Contract: The interval is a micro value; let the canonical medium wrapper resolve to that semantic
       width inside this exact header host without targeting .nts-field from feature CSS. */
    --field-width-medium: var(--field-width-micro);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dmv-processing .last-refresh {
    white-space: nowrap;
}

.header-action-btn {
    color: var(--color-primary);
    border-color: var(--border-strong);
}

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

.header-meta-select {
    flex: 0 1 18.75rem;
    min-width: min(18.75rem, 100%);
}

.header-meta-select .mud-input-control {
    width: 100%;
}

.cell-training-expired {
    background-color: var(--color-warning);
    color: var(--text-on-filled);
}

.scroll-150 {
    max-height: 150px;
    overflow-y: auto;
}

.scroll-250 {
    max-height: 250px;
    overflow-y: auto;
}

.scroll-400 {
    max-height: 400px;
    overflow-y: auto;
}

.scroll-500 {
    max-height: 500px;
    overflow-y: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.panel-toggle {
    cursor: pointer;
    flex-grow: 1;
}

.folder-row {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
}

.folder-row .folder-name {
    flex: 1 1 10rem;
    min-width: min(10rem, 100%);
    overflow-wrap: anywhere;
}

.folder-row-counts {
    flex: 0 1 auto;
    min-width: 0;
}

.folder-node {
    padding-left: var(--folder-indent, 0);
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}

.folder-node:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.folder-node.selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.folder-node.selected .folder-name {
    font-weight: var(--font-weight-semibold);
}

.folder-node.modified .mud-typography {
    color: var(--color-warning);
    font-style: italic;
}

.folder-toggle-button {
    min-width: 24px;
    min-height: 24px;
}

.folder-toggle-spacer {
    width: 32px;
}

.pending-add {
    background-color: var(--pending-add-bg);
    border-left: 3px solid var(--color-success);
    padding-left: 4px;
    margin-left: -7px;
}

.pending-remove {
    background-color: var(--pending-remove-bg);
    border-left: 3px solid var(--color-error);
    padding-left: 4px;
    margin-left: -7px;
    text-decoration: line-through;
    opacity: 0.7;
}

.folder-tree.show-lines .folder-node {
    position: relative;
}

.folder-tree.show-lines .folder-node::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    height: 100%;
    border-left: 1px dashed var(--mud-palette-lines-default);
}

.folder-tree.show-lines .folder-node::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 12px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.folder-tree.show-lines > .folder-node::before {
    top: 50%;
    height: 50%;
}

.folder-tree.show-lines .folder-node:last-child::before {
    height: 50%;
}

.folder-tree-scroll {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
}

.signature-preview {
    background: var(--bg-muted);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
}

.signature-preview img {
    max-width: 100%;
    max-height: 120px;
    display: block;
    margin: 0 auto;
}

.public-page-container {
    width: 100%;
    box-sizing: border-box;
    padding: 80px 1rem 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.search-criteria-layout {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    container: search-criteria / inline-size;
}

.search-criteria-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.search-criteria-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: center;
    min-width: 0;
}

.search-criteria-label {
    text-align: right;
    font-weight: var(--font-weight-semibold);
}

.search-criteria-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2) var(--space-4);
    flex: 1 1 var(--field-width-long);
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: var(--density-input-height);
    align-self: center;
}

.search-criteria-checks .mud-checkbox {
    width: fit-content;
    flex: 0 0 auto;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.search-criteria-checks .mud-input-control {
    width: auto;
    min-width: 0;
}

.search-criteria-checks > .mud-input-control {
    width: fit-content;
    flex: 0 0 auto;
    min-width: 0;
}

.record-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.record-search-row .record-search-field {
    /* Contract: The search/action host owns the available row width; the canonical medium field consumes it. */
    --field-width-medium: 100%;
    flex: 1 1 16rem;
    min-width: min(16rem, 100%);
}

.record-search-row .record-search-field .mud-input-control {
    width: 100%;
}

.record-search-row .record-search-action {
    flex: 0 0 auto;
}

@container search-criteria (max-width: 56.25rem) {
    .search-criteria-row {
        grid-template-columns: 1fr;
        row-gap: var(--space-2);
    }

    .search-criteria-label {
        text-align: left;
    }
}

@container search-criteria (max-width: 37.5rem) {
    .search-criteria-fields > .search-criteria-checks {
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {
    .record-search-row {
        align-items: stretch;
    }

    .record-search-row .record-search-field,
    .record-search-row .record-search-action {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

.error-pre {
    white-space: pre-wrap;
    margin: 0;
    font-family: var(--font-mono);
    background: var(--bg-muted);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.file-input-hidden {
    display: none;
}

.list-spaced {
    margin-top: 10px;
}

.row-mismatch {
    background-color: var(--color-warning-light);
}

.diff-from-prev {
    background-color: var(--diff-removed);
}

.diff-current {
    background-color: var(--diff-added);
}

.diff-to-next {
    background-color: var(--diff-modified);
}

.text-overdue {
    color: var(--mud-palette-error);
}

.nts-uppercase input,
.nts-uppercase textarea {
    text-transform: uppercase;
}

.nts-uppercase input::placeholder,
.nts-uppercase textarea::placeholder {
    text-transform: none;
}

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

.mb-4 { margin-bottom: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

.d-flex { display: flex; }

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bg-header);
    color: var(--text-inverse);
    padding: var(--space-2) var(--space-4);
    z-index: 2000;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

.section-content-pad {
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.page-action-btn {
    background: var(--bg-surface);
    color: var(--color-primary);
}

.page-action-btn:hover {
    background: var(--hover-bg);
}

.signature-image {
    max-width: min(100%, 400px);
    max-height: 150px;
    object-fit: contain;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--bg-surface);
}

}



.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.form-label.required::after {
    content: ' *';
    color: var(--color-error);
}

select option {
    color: var(--text-primary);
    font-weight: 500;
    background: var(--bg-surface);
    padding: var(--space-2) var(--space-3);
}

.form-section .mud-grid {
    align-items: flex-start;
    justify-content: flex-start;
}

.form-section .mud-grid + .mud-grid {
    margin-top: var(--space-2);
}

.form-section .mud-grid > .mud-grid-item {
    min-height: var(--density-row-height);
}

.form-section .mud-grid > .mud-grid-item > .mud-typography {
    margin: 0;
    line-height: 1.2;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-align: left;
}

@supports selector(:has(*)) {
    @media (min-width: 900px) {
        .form-section .mud-grid > .mud-grid-item:has(> .mud-typography:only-child):not(:has(.mud-input-control, .mud-select, .mud-checkbox, .mud-autocomplete, .mud-picker)) {
            flex: 0 0 var(--form-label-width);
            max-width: var(--form-label-width);
        }
    }
}

.form-section .mud-grid .mud-checkbox {
    margin: 0;
    align-items: center;
}

.form-section h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
    line-height: 1.3;
}


.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}


.mud-container > .mud-paper,
body > .mud-paper {
    margin-bottom: var(--space-4);
}

.mud-container > .mud-paper:last-child,
body > .mud-paper:last-child {
    margin-bottom: 0;
}

.mud-grid .mud-paper {
    margin-bottom: 0;
}

.mud-paper .mud-typography-h6,
.form-section .mud-typography-h6 {
    margin-bottom: var(--space-2);
}

.mud-paper .mud-typography-subtitle2,
.form-section .mud-typography-subtitle2 {
    margin-bottom: var(--space-2);
}

.mud-paper .mud-typography-h6:not(:first-child),
.mud-paper .mud-typography-subtitle2:not(:first-child) {
    margin-top: var(--space-6);
}

.mud-paper .mud-divider,
.form-section .mud-divider {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.mud-container > .mud-alert,
.mud-paper > .mud-alert,
body > .mud-alert {
    margin-bottom: var(--space-4);
}

.mud-alert:last-child {
    margin-bottom: 0;
}

.mud-container > .mud-tabs,
body > .mud-tabs {
    margin-bottom: var(--space-4);
}

.mud-paper .mud-table-container,
.mud-paper .mud-data-grid {
    margin-bottom: var(--space-4);
}


.form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-field label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-field-shadow);
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled,
.form-field input[readonly],
.form-field select[readonly] {
    background: var(--bg-muted);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-field.flex-1 { flex: 1; }
.form-field.flex-grow { flex-grow: 1; }
.form-field.flex-shrink { flex-shrink: 1; flex-grow: 0; }

.form-field label .required {
    color: var(--color-error);
    margin-left: var(--space-1);
}


.phone-input {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.phone-input > .nts-field {
    min-width: 0;
}

.phone-input > .nts-field:first-child {
    flex: 0 0 5rem;
}

.phone-input > .nts-field:nth-child(2) {
    flex: 1 1 10rem;
}

.phone-input--with-ext > .nts-field:nth-child(3) {
    flex: 0 0 7rem;
}

.phone-input .phone-area,
.phone-input .phone-ext {
    text-align: center;
}

.phone-input .phone-number {
    min-width: 0;
}


.detail-card {
    container: detail-row / inline-size;
    background: var(--bg-panel-surface);
    border: 1px solid var(--border-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.detail-card.full-width {
    grid-column: 1 / -1;
}

.card-header {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-section-header);
    border-bottom: 1px solid var(--border-divider);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-body {
    padding: var(--space-5);
}

.detail-row {
    display: flex;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
}

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

.detail-row label {
    flex: 0 0 140px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Contract: a detail value stays inside its own row. A flex item defaults to min-width:auto, so one
   long unbroken value (a projection definition, a URL, a hash) pushes past its column and overlaps
   the neighbouring cell instead of wrapping. */
.detail-row span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

@container detail-row (max-width: 24rem) {
    .detail-row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .detail-row label {
        flex: 0 0 auto;
        width: 100%;
    }

    .detail-row span {
        width: 100%;
    }
}

.editable-record-list {
    container: editable-record-list / inline-size;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-y: hidden;
}

.editable-record-list-header,
.editable-record-list-row {
    display: grid;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

.editable-record-list-header {
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.editable-record-list-row {
    background: var(--bg-surface);
    cursor: pointer;
}

.editable-record-list-row:hover {
    background: var(--bg-muted);
}

.editable-record-list-row.is-selected {
    background: var(--color-primary-light);
}

.editable-record-list-row:last-child {
    border-bottom: none;
}

.staffing-list-row {
    grid-template-columns: minmax(0, 1fr) minmax(var(--space-16), 0.75fr) minmax(var(--space-12), 0.35fr);
}

.asset-list-row {
    grid-template-columns: minmax(0, 1fr) minmax(var(--space-16), 0.45fr) minmax(var(--space-12), 0.3fr) minmax(var(--space-12), 0.3fr);
}

@container editable-record-list (max-width: 32rem) {
    .editable-record-list-header,
    .editable-record-list-row {
        min-width: 32rem;
    }
}

.auth-card {
    width: 100%;
    margin: 0 auto;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.login-signin-card {
    max-width: 30rem;
    padding: var(--space-6);
    border: 1px solid var(--border-default);
}

.password-container {
    max-width: 520px;
}

.password-container-wide {
    max-width: 560px;
}

/* Contract: an auth surface is one narrow column and every control on it is a credential -
   username, password, or a verification code. Their semantic widths are a data-shape default, not a
   size cue, so the column fills its card. Unlayered on purpose: .nts-field.nts-field-width-* lives in @layer overrides and an
   unlayered rule beats a layered one outright, so this needs no escalated specificity and no
   forced override. Replaces a sign-in-only copy that used to sit with the login card rules; every
   auth surface opts in by carrying .auth-surface, so do not add a per-page width override. */
.auth-surface .nts-field {
    width: 100%;
    max-width: 100%;
}

/* Contract: an auth surface hosted in a dialog stays the same narrow credential column as the auth
   cards. Two classes on purpose - it has to win over the one-class
   "@media (max-width: 1200px) { .mud-dialog { max-width: calc(100vw - var(--space-6)) } }" below,
   which otherwise takes the dialog near-full-width on a 1200px screen and would stretch a password
   box to about 1100px. */
.mud-dialog.auth-surface {
    max-width: min(600px, 95vw);
}


.clickable-row {
    cursor: pointer;
}



.results-panel {
    background: var(--bg-panel-surface);
    border: 1px solid var(--border-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-section-header);
    border-bottom: 1px solid var(--border-divider);
}

.results-count {
    font-size: var(--text-sm);
    color: var(--color-primary);
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}


.mud-tabs .mud-tab.mud-tab-active {
    color: var(--color-primary);
    font-weight: 600;
}

.mud-tabs,
.mud-tabs-tabbar,
.mud-tabs-panels {
    box-shadow: none;
    border-radius: 0;
}


.panel {
    background: var(--bg-panel-surface);
    border: 1px solid var(--border-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}


.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg-page);
    color: var(--color-primary);
    text-align: center;
}

.loading-content {
    animation: loading-fade-in 0.5s ease;
}

.loading-logo,
.loading-fullscreen-icon.loading-logo {
    display: block;
    width: 200px;
    height: auto;
    margin-bottom: var(--space-4);
}

.loading-content h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-4xl);
}

.loading-content p {
    margin: 0 0 var(--space-6);
    opacity: 0.8;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-primary-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

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

@keyframes loading-fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4) var(--space-6);
    background: var(--color-error);
    color: var(--text-on-filled);
    text-align: center;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#blazor-error-ui .error-message {
    margin-right: var(--space-4);
}

#blazor-error-ui .reload {
    color: var(--text-on-filled);
    text-decoration: underline;
    margin: 0 var(--space-4);
    font-weight: 600;
}

#blazor-error-ui .reload:hover {
    text-decoration: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    padding: var(--space-2);
    opacity: 0.8;
}

#blazor-error-ui .dismiss:hover {
    opacity: 1;
}

.blazor-error-reset-link {
    color: var(--text-on-filled);
    text-decoration: underline;
}

.startup-failure {
    padding: var(--space-8);
    text-align: center;
}

.startup-failure-title {
    color: var(--color-error);
}

.startup-failure-message {
    color: var(--text-secondary);
}

.startup-failure-button {
    padding: 10px 20px;
    margin-top: var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--text-on-filled);
    cursor: pointer;
}

.reset-page {
    max-width: 560px;
    margin: 4rem auto;
    padding: 0 var(--space-6);
    color: var(--text-primary);
}

.reset-page-title,
.reset-page a {
    color: var(--color-primary);
}

.reset-log {
    padding: var(--space-3);
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    font-size: var(--text-sm);
}

.reset-status {
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    border-radius: var(--radius-md);
}

.reset-status.working {
    border-left: 4px solid var(--color-warning);
    background: var(--color-warning-light);
}

.reset-status.done {
    border-left: 4px solid var(--color-success);
    background: var(--color-success-light);
}

.reset-status.error {
    border-left: 4px solid var(--color-error);
    background: var(--color-error-light);
}

.no-data {
    text-align: center;
    padding: var(--space-6);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.error-message {
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--color-error);
}

/* Contract: District-validation styling mirrors VoterDetails.cs MatchStreetAdressAndNotifyResidanceAdress(), lines 2777-2814. */

/* District Validation Visual Indicator
   Source: VoterDetails.cs MatchStreetAdressAndNotifyResidanceAdress() lines 2777-2814 */
.detail-card.district-mismatch {
    border: 3px solid var(--color-alert);
    box-shadow: var(--district-mismatch-shadow);
}

.detail-card.district-mismatch .card-header {
    background: var(--color-alert-light);
    border-bottom: 1px solid var(--color-alert);
}

.collapse-icon,
.toggle-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
    transition: transform var(--transition-normal);
    margin-right: var(--space-2);
}

.collapse-icon.expanded,
.toggle-icon.expanded {
    transform: rotate(90deg);
}

@layer overrides {


.mud-typography {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.mud-input-slot:not(textarea):not(.mud-field *) {
    min-height: var(--density-input-height);
    max-height: var(--density-input-height);
    height: var(--density-input-height);
    padding: var(--density-control-padding-y) var(--density-control-padding-x);
    font-size: 14px;
    display: flex;
    align-items: center;
}

/* Contract: In MudBlazor, textarea.mud-input-slot is the slot itself; exclude it from the single-line height cap.
   line-height must be set here: the textarea otherwise inherits mud-typography-subtitle1's 1.1875, which is
   tighter than Inter needs at 14px, and the first line's ascenders and i-dots are clipped by the top edge. */
textarea.mud-input-slot {
    min-height: var(--density-input-height);
    max-height: none;
    height: auto;
    overflow-y: auto;
    align-items: flex-start;
    line-height: 1.4;
}

/* Contract: no rule here on purpose. A rule targeting ".mud-input-control .mud-input-slot
   input/textarea" used to sit here and matched nothing - mud-input-slot sits ON the input, so an
   input inside it cannot exist. Do NOT "repair" it by retargeting to input.mud-input-slot: that
   would newly apply font-weight 400 and line-height 1.4 to every input in the app. The textarea
   line-height it was meant to set is on textarea.mud-input-slot above. */

.mud-input-root {
    font-size: var(--text-sm);
}

.mud-input {
    font-size: var(--text-sm);
}

.mud-input-outlined .mud-input-slot {
    min-height: var(--density-input-height);
    padding: var(--density-control-padding-y) var(--density-control-padding-x);
}

/* Contract: canonical outlined controls own the white control surface even when their panel or
   dialog uses a tinted semantic surface. The content/dialog scope excludes special controls on
   the navy top bar and footer; dark mode remaps --bg-surface to its existing dark control fill. */
:is(.content, .mud-dialog) .nts-field .mud-input.mud-input-outlined,
:is(.content, .mud-dialog) .nts-field .mud-input.mud-input-outlined > .mud-input-slot {
    background-color: var(--bg-surface);
}

:is(.content, .mud-dialog) .nts-field .mud-input.mud-input-outlined {
    border-radius: var(--radius-md);
}

/* Contract: MudBlazor 9.5 dense selects require zero wrapper padding; do not qualify this rule with .mud-input-margin-dense. */
.nts-field .mud-select .mud-input.mud-input-outlined {
    padding-top: 0;
    padding-bottom: 0;
}

.mud-field div.mud-input-slot {
    line-height: normal;
    display: flex;
    align-items: center;
}

.mud-input-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--text-primary);
}

.mud-input-label.mud-input-label-inputcontrol {
    font-weight: var(--label-font-weight);
    font-size: var(--label-font-size);
}

.nts-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
}

.nts-field--unlabeled:has(> .header-search-field) {
    --field-width-medium: min(22rem, 100%);
    flex: 1 1 16rem;
    width: min(22rem, 100%);
    min-width: min(16rem, 100%);
    max-width: min(22rem, 100%);
}

.nts-field--unlabeled:has(> .grid-toolbar-search-field) {
    flex: 1 1 15.625rem;
    width: min(21.875rem, 100%);
    min-width: min(15.625rem, 100%);
    max-width: min(21.875rem, 100%);
}

.nts-field--unlabeled:has(> .annotation-zoom-select) {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    margin-inline: 4px;
}

/* Contract: descendant match, NOT ":has(> ...)". MudBlazor 9 renders an extra
   <div class="mud-select mud-width-full"> between .nts-field and the control, so a
   direct-child match silently stops matching -- and because this block is the only
   place --footer-status-interval-width is defined, every rule that reads it below
   becomes invalid and is dropped, leaving the control at MudBlazor's percentage width. */
.nts-field--unlabeled:has(.footer-status-interval) {
    --footer-status-interval-width: 72px;
    --footer-status-control-height: 22px;
    --footer-status-control-inner-height: 20px;
    flex: 0 0 var(--footer-status-interval-width);
    width: var(--footer-status-interval-width);
    min-width: var(--footer-status-interval-width);
    max-width: var(--footer-status-interval-width);
    height: var(--footer-status-control-height);
    min-height: var(--footer-status-control-height);
    max-height: var(--footer-status-control-height);
    gap: 0;
}

@media (any-pointer: coarse), (max-width: 600px) {
    .nts-field--unlabeled:has(.footer-status-interval) {
        --footer-status-control-height: var(--density-touch-target);
        --footer-status-control-inner-height: calc(var(--density-touch-target) - 2px);
    }
}

.nts-field--unlabeled:has(> .w-220) {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
}

.nts-field--fit-content {
    width: fit-content;
}

.nts-field.nts-field-width-micro {
        width: min(100%, var(--field-width-micro));
}

.nts-field.nts-field-width-short {
        width: min(100%, var(--field-width-short));
}

.nts-date-field.nts-field-width-short {
        width: min(100%, var(--date-range-field-width));
}

.nts-field.nts-field-width-medium {
        width: min(100%, var(--field-width-medium));
}

.nts-field.nts-field-width-long {
        width: min(100%, var(--field-width-long));
}

.nts-field.nts-field-width-full {
        width: 100%;
        max-width: 100%;
}

.standard-data-grid .mud-table-cell .nts-field--unlabeled,
.editable-record-list-row > div > .nts-field--unlabeled,
.pivot-filter-popover .nts-field--unlabeled,
.top-bar-search > .nts-field--unlabeled {
    width: 100%;
    max-width: 100%;
}

.nts-field--unlabeled:has(> .report-list-search-field) {
    --field-width-medium: 100%;
}

.form-field-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--field-gap);
    column-gap: var(--group-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Contract: the single reviewed Batch Number + compact Batch Date composite stacks by default and only
   opens into two columns once its filter subsection can actually hold both. Stated in that direction on
   purpose: an engine without container-query support ignores the @container block below and keeps this
   stacked rule, where declaring the two fixed tracks here would leave a 41.25rem row overflowing a phone
   with no fallback to catch it. */
.form-field-flow.voter-registration-batch-row {
    --voter-registration-batch-date-pair-width: calc(
        var(--date-range-field-width) + var(--date-range-field-width) + var(--space-2)
    );
    display: grid;
    grid-template-columns: minmax(0, min(100%, var(--voter-registration-batch-date-pair-width)));
    justify-content: start;
    align-items: end;
    gap: var(--space-3);
    padding: 0 var(--space-1) var(--space-1);
}

.form-field-flow.voter-registration-batch-row .date-range-pair-fields {
    width: 100%;
}

/* Contract: keep the medium Batch Number (18rem) beside the exact two-date pair (22rem) without elastic
   grid tracks inserting a large painted gap between them. That needs both semantic widths plus the
   0.75rem gap and 0.5rem inline padding - 41.25rem - measured against the filter subsection's usable
   width rather than the viewport, which is wider than the space the row actually gets. */
@container report-filter-subsection (min-width: 41.25rem) {
    .form-field-flow.voter-registration-batch-row {
        grid-template-columns: var(--field-width-medium) var(--voter-registration-batch-date-pair-width);
    }
}

.form-field-flow:not(.form-field-flow--keep-together) + .form-field-flow:not(.form-field-flow--keep-together) {
    margin-top: var(--space-2);
}

.form-field-flow--stacked {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Contract: stacked children are container-bounded and non-shrinking. This exact declaration set is
   pinned by field-density-standards-audit.mjs, so keep all three. Note the width does NOT reach a
   child carrying a semantic width class - .nts-field.nts-field-width-* above is two classes in the
   same layer and wins - which is what made the auth-screen fields look half-width (APEXPLUS-348).
   A field that must fill its column opts in explicitly; see .auth-surface .nts-field. */
.form-field-flow--stacked > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* Contract: a dense filter group whose cells mix segmented pills, selects, and checkboxes packs
   into uniform columns instead of free-flowing. Free packing starts every wrapped row at its own
   offsets and squeezes a long caption onto two lines, which drops that cell's control below its
   row neighbours. Each cell still owns its semantic width inside the column - only the column
   rhythm is uniform, so a short field is never widened to even out a row. */
.form-field-flow--option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--filter-option-column), 100%), 1fr));
    align-items: start;
}

.form-field-flow--option-grid > .nts-field-width-full,
.form-field-flow--option-grid > .subsection-heading {
    grid-column: 1 / -1;
}

.form-field-flow > .nts-field {
    flex: 0 0 auto;
    max-width: 100%;
}

.form-field-flow > .nts-field-width-full,
.form-field-flow > .subsection-heading {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
}

.form-field-flow > .nts-checkbox,
.form-field-flow > .nts-radio,
.form-field-flow > .mud-button-root,
.form-field-flow > .mud-icon-button,
.form-field-flow > .mud-button-group-root {
    flex: 0 0 auto;
    max-width: 100%;
}

.form-field-flow > .nts-checkbox,
.form-field-flow > .nts-radio {
    align-self: center;
}

/* Contract: a button sharing a row with labelled fields belongs on the INPUT line, not the caption line.
   The flow aligns to flex-start, so a bare button rode up level with the labels - 22px above the input
   beside it, which read as a button floating out of its own row. Offset it by exactly one caption band
   (label line-height plus the label gap) so its box lands on the input row. Sized from the label tokens,
   not the button's own em, so a Small button still lands on the line. A row carrying no labelled field
   has no caption band to clear and is deliberately left alone. */
.form-field-flow:has(> .nts-field:not(.nts-field--unlabeled)) > .mud-button-root,
.form-field-flow:has(> .nts-field:not(.nts-field--unlabeled)) > .mud-icon-button,
.form-field-flow:has(> .nts-field:not(.nts-field--unlabeled)) > .mud-button-group-root {
    margin-top: calc(var(--label-font-size) * 1.3 + var(--space-1));
}

/* Contract: the caption band a row's labelled fields reserve, published so the controls that carry no
   caption of their own can clear it. Published as an inherited variable on purpose - a nested
   keep-together group has to land on the same input line even when its own children carry no label,
   which is what the disposition queue's Auto Refresh becomes once its interval field is hidden. */
.form-field-flow:has(> .nts-field:not(.nts-field--unlabeled)) {
    --row-caption-band: calc(var(--label-font-size) * 1.3 + var(--space-1));
}

/* Contract: a checkbox or radio sharing a row with labelled fields belongs on the INPUT line, exactly
   like the buttons above. Centring it on the flex line - correct when the row is nothing but choices,
   and kept for that case by the rule further up - hung it 13px above the inputs beside it, measured on
   the Clearing House disposition queue's Auto Refresh. A stacked flow gives every child its own row,
   where there is no neighbouring caption to clear, so it is excluded. */
.form-field-flow:not(.form-field-flow--stacked):has(> .nts-field:not(.nts-field--unlabeled)) > .nts-checkbox,
.form-field-flow:not(.form-field-flow--stacked):has(> .nts-field:not(.nts-field--unlabeled)) > .nts-radio,
.form-field-flow--keep-together > .nts-checkbox,
.form-field-flow--keep-together > .nts-radio {
    align-self: flex-start;
    margin-top: var(--row-caption-band, 0);
}

.form-field-flow > .form-field-flow--keep-together {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    column-gap: var(--field-gap);
}

.form-field-flow--keep-together > .nts-field-width-micro {
    width: var(--field-width-micro);
}

.form-field-flow--keep-together > .nts-field-width-short {
    width: var(--field-width-short);
}

.form-field-flow--keep-together > .nts-date-field.nts-field-width-short {
    width: var(--date-range-field-width);
}

.form-field-flow--keep-together > .nts-field-width-medium {
    width: var(--field-width-medium);
}

.form-field-flow--keep-together > .nts-field-width-long {
    width: var(--field-width-long);
}

/* Contract: the reserved label band covers EVERY caption kind in the group, not just .nts-field-label.
   A date range captions itself with a legend, so without this it rode 18px above the plain fields
   sharing its row. Published as a variable each caption kind opts into; the rule below repeats the
   literal because the field-density audit fingerprints that selector pair verbatim. */
.form-field-flow--long-labels {
    --field-label-band: 2.6em;
}

.form-field-flow--long-labels > .nts-field:not(.nts-field--unlabeled) > .nts-field-label,
.form-field-flow--long-labels > .mud-tooltip-root > .nts-field:not(.nts-field--unlabeled) > .nts-field-label {
    min-height: 2.6em;
}

.nts-choice-field-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.nts-checkbox-field-control {
        display: flex;
        align-items: center;
        min-height: var(--density-input-height);
}

.nts-choice-helper {
        min-height: var(--field-helper-line);
        color: var(--text-muted);
        font-size: var(--text-xs);
        line-height: 1.25;
}

.nts-checkbox.mud-checkbox,
.nts-radio.mud-radio {
        min-height: var(--density-button-height);
}

.nts-checkbox .mud-typography,
.nts-radio .mud-typography {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-normal);
}

.nts-radio-group,
.nts-radio-group-options {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: var(--space-1) var(--space-2);
        width: fit-content;
        max-width: 100%;
}

.choice-followup-field {
        margin-top: var(--space-2);
}

.standard-maintenance-actions {
        gap: var(--space-2);
}

.standard-maintenance-save-progress {
        flex: 0 0 auto;
}

@media (any-pointer: coarse), (max-width: 600px) {
    .nts-checkbox.mud-checkbox,
    .nts-radio.mud-radio {
        min-height: var(--density-touch-target);
    }

}

.mud-tooltip-root.mud-tooltip-inline:has(> .nts-field) {
    display: block;
    width: 100%;
}

.form-field-flow > .mud-tooltip-root:has(> .nts-field) {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.form-field-flow > .mud-tooltip-root:has(> .nts-field-width-micro) {
    width: min(100%, var(--field-width-micro));
}

.form-field-flow > .mud-tooltip-root:has(> .nts-field-width-short) {
    width: min(100%, var(--field-width-short));
}

.form-field-flow > .mud-tooltip-root:has(> .nts-date-field.nts-field-width-short) {
    width: min(100%, var(--date-range-field-width));
}

.form-field-flow > .mud-tooltip-root:has(> .nts-field-width-medium) {
    width: min(100%, var(--field-width-medium));
}

.form-field-flow > .mud-tooltip-root:has(> .nts-field-width-long) {
    width: min(100%, var(--field-width-long));
}

.form-field-flow > .mud-tooltip-root:has(> .nts-field-width-full) {
    flex-basis: 100%;
    width: 100%;
}

.mud-grid-item:has(> .mud-input-control-boolean-input),
.mud-grid-item:has(> .mud-checkbox),
.mud-grid-item:has(> .mud-switch) {
    align-self: center;
}

.nts-field > :not(.nts-field-label) {
    margin-top: 0;
    width: 100%;
    min-width: 0;
}

.nts-field .mud-input-control {
    margin-top: 0;
}

.nts-field-label {
    font-size: var(--text-sm);
    font-weight: var(--label-font-weight);
    color: var(--text-secondary);
    line-height: 1.3;
}

.nts-field-required {
    color: var(--color-error);
    margin-left: 2px;
}

.nts-field.nts-field--has-support:not(.nts-field--unlabeled) .mud-input-control {
    min-height: calc(var(--density-input-height) + var(--field-helper-line));
}

.nts-field.nts-field--has-support:not(.nts-field--unlabeled) .mud-input-control-helper-container {
    position: static;
    min-height: var(--field-helper-line);
    margin: 0;
    overflow: visible;
}

.nts-field:not(.nts-field--unlabeled) .mud-input-control-helper-container .mud-input-helper-text {
    margin-top: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.nts-choice-field.nts-choice-field--external-helper:not(:has(.mud-input-error)) .mud-input-control {
    min-height: var(--density-input-height);
}

.nts-choice-field.nts-choice-field--external-helper:not(:has(.mud-input-error)) .mud-input-control-helper-container {
    display: none;
    min-height: 0;
}

.nts-choice-field--external-helper:has(.mud-input-error) .nts-choice-helper {
    display: none;
}

.mud-input-outlined .mud-input-label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    background: var(--bg-surface);
    padding: 0 4px;
}

.mud-input-outlined .mud-input-label.mud-shrink {
    transform: translate(12px, -6px) scale(0.85);
    font-size: var(--text-xs);
    font-weight: var(--label-font-weight);
}

.mud-input-outlined .mud-input-outlined-border,
.mud-input-outlined-border {
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--border-control-hover);
}

.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--color-primary);
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.mud-input-error:not(.mud-focused) .mud-input-outlined-border {
    border-color: var(--color-error);
}

.mud-input-error .mud-input-label {
    color: var(--color-error);
}

.mud-input-control {
    margin-bottom: 2px;
}

.mud-checkbox .mud-typography,
.mud-radio .mud-typography {
    color: var(--color-primary);
    font-weight: 600;
}

.mud-input-label-animated {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
}

.mud-input-label-animated.mud-shrink {
    transform: translateY(-12px) scale(0.85);
    font-size: var(--text-xs);
    font-weight: var(--label-font-weight);
}

.mud-select .mud-input-slot {
    min-height: var(--density-input-height);
    padding: var(--density-control-padding-y) var(--density-control-padding-x);
}

.mud-select-input {
    font-size: var(--text-sm);
    padding: 6px 0;
    line-height: 1.4;
    font-weight: 400;
}

.mud-select .mud-input-adornment {
    margin: 0;
}

.mud-select .mud-icon-root {
    font-size: 16px;
}

.mud-list-item {
    min-height: 32px;
    padding: 6px 10px;
    font-size: var(--text-sm);
}

.mud-list-item-text {
    font-size: var(--text-sm);
}

.mud-autocomplete .mud-input-slot {
    min-height: var(--density-input-height);
    padding: var(--density-control-padding-y) var(--density-control-padding-x);
}

.mud-picker .mud-input-slot {
    min-height: var(--density-input-height);
    padding: var(--density-control-padding-y) var(--density-control-padding-x);
}

.mud-picker-inline-paper {
    font-size: var(--text-sm);
}

.mud-picker .mud-input-adornment {
    margin-left: 2px;
    margin-right: 2px;
}

.mud-picker .mud-input-adornment .mud-icon-button {
    padding: 4px;
    width: 28px;
    height: 28px;
}

.mud-picker .mud-input-adornment .mud-icon-button .mud-icon-root {
    font-size: 1.1rem;
}

.mud-input-number-control .mud-input-slot {
    min-height: var(--density-input-height);
    padding: var(--density-control-padding-y) var(--density-control-padding-x);
}

.mud-input-filled .mud-input-slot,
.mud-input-filled .mud-select-input,
.mud-select.mud-input-filled .mud-input-slot,
.mud-input-filled.mud-input-control .mud-input-slot {
    background-color: var(--bg-surface);
}

.mud-checkbox {
    margin: 0;
    padding: 2px;
}

.mud-checkbox .mud-icon-root {
    font-size: 18px;
}

.mud-checkbox .mud-typography {
    font-size: var(--text-sm);
}

.form-section .mud-input-control-input-container .mud-checkbox,
.form-section .mud-grid-item .mud-checkbox {
    min-height: var(--density-input-height);
    display: flex;
    align-items: center;
}

.mud-radio {
    margin: 0;
    padding: 2px;
}

.mud-radio .mud-icon-root {
    font-size: 18px;
}

.mud-radio .mud-typography {
    font-size: var(--text-sm);
}

.mud-radio-group {
    gap: 4px;
}

.mud-switch {
    margin: 0;
}

.mud-switch .mud-typography {
    font-size: var(--text-sm);
}

.mud-button-root {
    font-size: var(--text-sm);
    padding: var(--density-control-padding-y) calc(var(--density-control-padding-x) + 2px);
    min-height: var(--density-button-height);
    height: auto;
}

.mud-input-number-control .mud-input-numeric-spin .mud-button-root {
    padding: revert-layer;
    min-width: revert-layer;
    min-height: revert-layer;
    height: revert-layer;
}

.mud-button-filled-size-small,
.mud-button-outlined-size-small,
.mud-button-text-size-small {
    font-size: var(--text-xs);
    padding: calc(var(--density-control-padding-y) - 2px) calc(var(--density-control-padding-x) - 2px);
    min-height: var(--density-button-height);
}

@media (any-pointer: coarse), (max-width: 600px) {
    .mud-button-filled-size-small,
    .mud-button-outlined-size-small,
    .mud-button-text-size-small {
        min-height: var(--density-touch-target);
    }
}

.mud-button-filled-size-large,
.mud-button-outlined-size-large,
.mud-button-text-size-large {
    min-height: 44px;
}

.mud-icon-button {
    padding: 4px;
}

.mud-icon-button .mud-icon-root {
    font-size: 18px;
}

.mud-button-root.mud-icon-button {
    min-width: var(--density-button-height);
    min-height: var(--density-button-height);
    padding: 6px;
}

.mud-chip {
    height: 24px;
    font-size: var(--text-xs);
    padding: 0 10px;
}

.mud-chip .mud-chip-content {
    font-size: var(--text-xs);
}

.mud-card {
    margin-bottom: 8px;
}

.mud-card-header {
    padding: 8px 12px;
}

.mud-card-content {
    padding: 8px 12px;
}

.mud-card-actions {
    padding: 4px 8px;
}

.mud-paper {
    padding: var(--section-padding);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--surface-card);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.content .mud-typography-h1,
.content .mud-typography-h2,
.content .mud-typography-h3,
.content .mud-typography-h4,
.content .mud-typography-h5,
.content .mud-typography-h6 {
    font-family: var(--font-sans);
    letter-spacing: 0;
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.content .mud-typography-h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
}

.content .mud-typography-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
}

.content .mud-typography-h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
}

.content .mud-typography-h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
}

.content .mud-typography-h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.content .mud-typography-h6 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
}

.content .mud-paper > .mud-typography-h6:first-child {
    margin: 0 0 var(--space-3);
}

.mud-expand-panel {
    margin-bottom: 4px;
}

.mud-expand-panel-header {
    padding: 8px 12px;
    min-height: 40px;
}

.mud-expand-panel-text {
    font-size: var(--text-sm);
}

.mud-expand-panel-content {
    padding: 10px 14px;
}

.apportionment-totals-summary {
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-table-total);
}

.apportionment-totals-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.apportionment-total-item {
    min-width: 7rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-variant-numeric: tabular-nums;
}

.apportionment-total-item-grand {
    background: var(--surface-table-grand-total);
    border-color: var(--color-primary);
}

.mud-table-row {
    height: auto;
}

.mud-table-container {
    font-size: var(--text-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

article.content > .mud-container .mud-table-container,
article.content > .mud-paper .mud-table-container {
    min-height: 200px;
}

.mud-tab {
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--text-sm);
}

.mud-tabs-header {
    min-height: 36px;
}

.mud-tabs-tabbar-primary .mud-tabs-scroll-button > .mud-icon-button:disabled,
.mud-tabs-tabbar-primary .mud-tabs-scroll-button > .mud-icon-button:disabled .mud-icon-root {
    color: var(--text-on-dark-disabled);
}

.mud-menu-item {
    min-height: 32px;
    padding: 6px 14px;
    font-size: var(--text-sm);
}

.mud-dialog-title {
    padding: 14px 18px;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.mud-dialog-content {
    padding: 12px 18px;
}

.mud-dialog-actions {
    padding: 10px 18px;
    gap: var(--field-gap);
}

.mud-dialog-actions .mud-button:not(.mud-icon-button) {
    min-height: 32px;
    padding: 4px 12px;
    font-size: var(--text-sm);
    line-height: 1.4;
}

.mud-dialog-actions .mud-button:not(.mud-icon-button) .mud-icon-root {
    font-size: 1.125rem;
}

/* Contract: MudMessageBox emits Text buttons only; this scoped override supplies the shared confirm hierarchy without affecting custom dialogs. */
.mud-message-box .mud-button-text-primary {
    background-color: var(--color-primary);
    color: var(--text-on-filled);
    border-radius: var(--radius-md);
}

.mud-message-box .mud-button-text-primary:hover {
    background-color: var(--color-primary-active);
}

.mud-message-box .mud-button-text-primary:focus,
.mud-message-box .mud-button-text-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

.mud-message-box .mud-button-text-primary:disabled {
    background-color: var(--border-default);
    color: var(--text-muted);
}

.mud-message-box .mud-button-text-default {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.mud-message-box .mud-button-text-default:focus,
.mud-message-box .mud-button-text-default:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.mud-message-box .mud-button-text-default:disabled {
    opacity: 0.5;
}

.mud-alert {
    padding: 8px 14px;
    font-size: var(--text-sm);
}

.mud-alert-message {
    font-size: var(--text-sm);
}

.mud-breadcrumbs {
    font-size: var(--text-sm);
}

.mud-breadcrumb-item {
    font-size: var(--text-sm);
}

.mud-nav-item {
    min-height: var(--density-row-height);
}

.mud-nav-link {
    padding: var(--density-cell-padding-y) var(--density-cell-padding-x);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.mud-navmenu > .mud-nav-item > .mud-nav-link {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.mud-navmenu .mud-nav-group .mud-nav-link {
    font-size: var(--text-xs);
}

.mud-toolbar {
    min-height: 40px;
    padding: 4px 12px;
}

.mud-appbar {
    min-height: 48px;
}

.mud-drawer .mud-list-item {
    min-height: 36px;
}

.mud-input-helper-text {
    font-size: var(--text-xs);
    margin-top: 2px;
}

.mud-input-error {
    font-size: var(--text-xs);
}

.mud-grid {
    margin: -4px;
    max-width: 100%;
}

.mud-grid-item {
    padding: 4px;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}



.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--color-primary);
    border-width: 1px;
}

.mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol.mud-input-label-filled {
    color: var(--color-primary);
}

.mud-input-helper-text.mud-input-error {
    color: var(--color-error);
}

.mud-grid.mud-grid-spacing-xs-3 {
    margin: calc(var(--space-3) / -2);
}

/* Contract: MudBlazor Color.Default checkboxes need this scoped primary color; explicit semantic colors must continue to win. */
.mud-checkbox .mud-default-text {
    color: var(--color-primary);
    --mud-ripple-color: var(--color-primary);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--color-primary-active);
}

.mud-button-filled.mud-button-filled-primary:focus,
.mud-button-filled.mud-button-filled-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: rgba(var(--color-primary-rgb), 0.08);
}

.mud-button-filled.mud-button-filled-secondary:hover {
    background-color: var(--color-accent-active);
}

.mud-button-filled.mud-button-filled-warning:hover {
    background-color: var(--color-warning-dark);
}

.mud-button-filled.mud-button-filled-info:hover {
    background-color: var(--color-info-dark);
}

.mud-button-filled.mud-button-filled-success:hover {
    background-color: var(--color-success-dark);
}

.mud-button-filled.mud-button-filled-error:hover {
    background-color: var(--color-error-dark);
}

.mud-button-outlined.mud-button-outlined-warning:hover {
    background-color: var(--color-warning-light);
}

.mud-button-outlined.mud-button-outlined-info:hover {
    background-color: var(--color-info-light);
}

.mud-button-outlined.mud-button-outlined-success:hover {
    background-color: var(--color-success-light);
}

.mud-button-outlined.mud-button-outlined-error:hover {
    background-color: var(--color-error-light);
}

.mud-input.mud-input-outlined:focus-within {
    border-color: var(--color-primary);
}

.mud-input-outlined .mud-input-slot:focus-within {
    border-color: var(--color-primary);
}

.mud-select:focus-within .mud-input-slot {
    border-color: var(--color-primary);
}

}



.filter-scroll-container {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}

.filter-section {
    margin-bottom: 4px;
    border: 1px solid var(--border-surface);
    border-radius: var(--radius-md);
    background: var(--bg-panel-surface);
}

.filter-header {
    background: var(--bg-section-header);
    padding: 6px 10px;
    font-weight: 600;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-divider);
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.filter-section .mud-input-control {
    margin: 0;
}

/* Contract: Filter-card content owns vertical rhythm; fields no longer carry feature-scoped margins. */
.filter-section > .pa-2 {
    display: grid;
    gap: var(--space-2);
}

.filter-section .mud-input-label {
    font-size: var(--text-sm);
}

.filter-section .mud-select {
    font-size: var(--text-sm);
}

.filter-section .mud-checkbox {
    margin: 0;
    padding: 0;
}

.filter-section .mud-checkbox .mud-typography {
    font-size: var(--text-xs);
}

.filter-section .mud-button {
    padding: 4px 10px;
    font-size: var(--text-xs);
}

.filter-section .mud-button-group-root .mud-button {
    padding: 4px 8px;
    font-size: var(--text-xs);
    min-width: auto;
}

.filter-section .mud-picker {
    min-width: 110px;
}


@media (max-width: 1200px) {
    .form-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-card-label,
    .dashboard-card-sublabel,
    .dashboard-card-value,
    .selected-count-value,
    .mud-input-label,
    .mud-typography {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .dashboard-card-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .dashboard-card-value {
        font-size: var(--text-xl);
    }

    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr;
    }

    .phone-input {
        --field-width-micro: 100%;
        --field-width-short: 100%;
        flex-direction: column;
    }

    .phone-input > .nts-field {
        flex-basis: auto;
        width: 100%;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .results-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

}

/* Contract: the responsive modifier follows the grid's available content width instead of the
   viewport, so a resized navigation drawer cannot squeeze a fixed MudGrid column below card content. */
.stats-grid.stats-grid--responsive {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

/* Contract: icon StatCards need room for the icon plus the metric stack. Keep compact, text-only
   responsive stats at 9rem and widen only grids whose direct cards actually render an icon. */
.stats-grid.stats-grid--responsive:has(> .stat-card .stat-card-icon-container) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

@media (max-width: 600px) {
    .stats-grid.stats-grid--responsive:has(> .stat-card .stat-card-icon-container) {
        grid-template-columns: 1fr;
    }
}


.text-normal-case { text-transform: none; }

.candidate-winner { font-weight: 600; color: var(--color-success); }

.w-full { width: 100%; }
.w-80px { width: 80px; }
.w-100px { width: 100px; }

.max-w-250px { max-width: 250px; }
.max-w-300px { max-width: 300px; }
.max-w-400px { max-width: 400px; }

.min-w-150px { min-width: 150px; }
.min-w-200px { min-width: 200px; }
.min-w-400px { min-width: 400px; }
.min-w-450px { min-width: 450px; }
.min-w-500px { min-width: 500px; }
.min-w-600px { min-width: 600px; }

.max-w-100px { max-width: 100px; }

.h-40px { height: 40px; }
.h-500px { height: 500px; }

.max-h-200px-scroll { max-height: 200px; overflow-y: auto; }
.max-h-400px-scroll { max-height: 400px; overflow-y: auto; }
.max-h-500px-scroll { max-height: 500px; overflow-y: auto; }
.max-h-700px-scroll { max-height: 700px; overflow-y: auto; }

.min-h-screen { min-height: 100vh; }

.max-h-350px { max-height: 350px; }

.dropzone-paper {
    border-style: dashed;
    min-height: 120px;
    cursor: pointer;
}

/* Contract: MudFileUpload puts its drag handlers on the file input, so the input must cover the drop
   zone for a dropped file to register at all — invisible, but present and full size. The host is the
   positioning context for it. Removing either one silently breaks drag and drop. */
.dropzone-overlay-host {
    position: relative;
}

.dropzone-overlay-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Contract: while the upload is disabled the overlay must stop intercepting clicks, so the click
   reaches the zone beneath and it can explain WHY it is disabled. Without this the input still wins
   the hit test, the explanation never appears, and the zone is silently inert again. */
.dropzone-overlay-host--disabled .dropzone-overlay-input {
    pointer-events: none;
}

/* Contract: the disabled drop zone must read as unavailable WITHOUT dimming its text below AA
   contrast — the message explaining why it is disabled is the whole point of the state, so the
   cursor and muted text colour carry the signal instead of an opacity wash. */
.dropzone-paper-disabled {
    border-style: dashed;
    min-height: 120px;
    color: var(--text-secondary);
    cursor: not-allowed;
}

.max-w-80px { max-width: 80px; }

.d-inline { display: inline; }
.d-none { display: none; }

.overflow-auto { overflow: auto; }

.opacity-80 { opacity: 0.8; }

.flex-1 { flex: 1; }

.invisible { visibility: hidden; }

.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cursor-pointer { cursor: pointer; }
.cursor-help { cursor: help; }

.bg-grey { background-color: var(--bg-muted); }

.text-sm { font-size: var(--text-sm); }
.text-icon-lg { font-size: 4rem; }


.border { border: 1px solid var(--border-default); }
.border-2 { border: 2px solid var(--color-primary); }
.border-error { border: 2px solid var(--color-error); }
.border-success { border: 2px solid var(--color-success); }
.border-warning { border: 2px solid var(--color-warning); }
.border-color-error { border-color: var(--color-error); }

.border-color-error .mud-input-outlined-border {
    border-color: var(--color-error);
}

.surface-primary {
    background: var(--color-primary);
    color: var(--text-on-filled);
}

.primary-bold {
    color: var(--color-primary);
    font-weight: 700;
}

.signature-container {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.standard-data-grid .mud-table-container tbody tr.row-locked-current-doc,
.standard-data-grid .mud-table-container tbody tr.row-locked-current-doc > .mud-table-cell {
    background-color: var(--color-lock-current-doc);
    color: var(--color-lock-current-doc-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-current-doc:hover,
.standard-data-grid .mud-table-container tbody tr.row-locked-current-doc:hover > .mud-table-cell {
    background-color: var(--color-lock-current-doc-hover);
    color: var(--color-lock-current-doc-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-self-same-machine,
.standard-data-grid .mud-table-container tbody tr.row-locked-self-same-machine > .mud-table-cell {
    background-color: var(--color-lock-self-same);
    color: var(--color-lock-self-same-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-self-same-machine:hover,
.standard-data-grid .mud-table-container tbody tr.row-locked-self-same-machine:hover > .mud-table-cell {
    background-color: var(--color-lock-self-same-hover);
    color: var(--color-lock-self-same-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-self-diff-machine,
.standard-data-grid .mud-table-container tbody tr.row-locked-self-diff-machine > .mud-table-cell {
    background-color: var(--color-lock-self-diff);
    color: var(--color-lock-self-diff-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-self-diff-machine:hover,
.standard-data-grid .mud-table-container tbody tr.row-locked-self-diff-machine:hover > .mud-table-cell {
    background-color: var(--color-lock-self-diff-hover);
    color: var(--color-lock-self-diff-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-other-user,
.standard-data-grid .mud-table-container tbody tr.row-locked-other-user > .mud-table-cell {
    background-color: var(--color-lock-other);
    color: var(--color-lock-other-text);
}

.standard-data-grid .mud-table-container tbody tr.row-locked-other-user:hover,
.standard-data-grid .mud-table-container tbody tr.row-locked-other-user:hover > .mud-table-cell {
    background-color: var(--color-lock-other-hover);
    color: var(--color-lock-other-text);
}

.shapefile-map-container {
    width: 100%;
    height: var(--shapefile-map-height, 350px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.shapefile-label {
    background: rgba(var(--color-white-rgb), 0.8);
    border: none;
    box-shadow: none;
    color: var(--map-label-color);
    font-size: 10px;
    font-weight: normal;
    padding: 2px 4px;
    text-shadow: 0 0 3px var(--bg-surface), 0 0 3px var(--bg-surface);
}

.shapefile-label::before {
    display: none;
}

.leaflet-popup-content {
    margin: 8px 12px;
    font-size: var(--text-sm);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
}

/* Election Stats (APEXPLUS-320) turnout section: dimension dropdown + column-mode toggles left,
   WYSIWYG export right. Bottom-aligned for the same label-above-input reason as the map toolbar. */
.turnout-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.turnout-toolbar > .mud-button:last-child {
    margin-left: auto;
}

.turnout-toolbar > .mud-button-group-root,
.turnout-toolbar > .mud-button {
    margin-bottom: 2px;
}

/* Election Stats (APEXPLUS-320) district-map legend: discrete ramp for rate/volume modes,
   categorical chips for the vote-method mode. Swatch/ramp colors arrive via CssVarBuilder
   custom properties. */
.map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.map-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.map-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background-color: var(--map-swatch-color);
}

/* ShapefileMap's own toolbar row (APEXPLUS-320): host controls (ToolbarContent) left, basemap
   picker right. Bottom-aligned, not centered: the pickers stack a label above their input, so
   centering floats plain buttons above the input line; flex-end plus a 2px trim puts every
   control on the input's baseline. */
.shapefile-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.shapefile-map-toolbar > .mud-button-group-root,
.shapefile-map-toolbar > .mud-button {
    margin-bottom: 2px;
}

/* Compact basemap picker on the map toolbar's right edge (APEXPLUS-320). */
.map-basemap-select {
    width: 200px;
    margin-left: auto;
}

/* The ramp legend (APEXPLUS-320) is a row of the shading's actual DISCRETE steps (the fills use
   five fixed shades, never a continuous gradient), lightest to darkest. */
.map-legend-ramp-steps {
    display: inline-flex;
}

.map-legend-ramp-steps > .map-legend-swatch {
    border-radius: 0;
}

.map-legend-ramp-steps > .map-legend-swatch:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.map-legend-ramp-steps > .map-legend-swatch:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.map-legend-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}


.page-header-container {
    margin-bottom: var(--section-gap);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

.page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: var(--section-gap);
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: var(--section-gap);
    flex: 1 1 auto;
    min-width: 0;
}

.page-header-back {
    color: var(--text-secondary);
    transition: color var(--transition-normal), background var(--transition-normal);
}

.page-header-back:hover {
    color: var(--color-primary);
    background: var(--hover-bg);
}

.page-header-titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.page-header-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
}

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

.page-header-title {
    margin: 0;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: 0;
    color: var(--text-primary);
}

.page-header-subtitle {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
}

.page-header-badge {
    display: flex;
    align-items: center;
}

.page-header-right {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.page-header-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.page-header-meta {
    margin-top: var(--section-gap);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.page-header-breadcrumbs {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

@layer components {
    .nts-card {
        container: detail-row / inline-size;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        background: var(--bg-panel-surface);
        border: 1px solid var(--border-surface);
        border-left: 4px solid var(--color-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    /* Contract: the 4px primary rail is structural on top-level surfaces only;
       a Card nested in a Card or FormSection stays flat, like nested sections. */
    .nts-card .nts-card,
    .form-section .nts-card {
        border-left: 1px solid var(--border-surface);
    }

    .nts-card[role="button"] {
        cursor: pointer;
    }

    .nts-card[role="button"]:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
    }

    .nts-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--bg-section-header);
        border-bottom: 1px solid var(--border-divider);
    }

    .nts-card-heading,
    .nts-card-header-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
    }

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

    .nts-card-title {
        color: var(--text-primary);
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
    }

    .nts-card-subtitle {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .nts-card-body {
        padding: var(--space-4);
    }

    .nts-card-footer {
        padding: var(--space-2) var(--space-4);
        border-top: 1px solid var(--border-divider);
    }

    .voter-snapshot-card {
        box-shadow: var(--shadow-md);
    }

    .voter-snapshot-card .nts-card-body {
        padding: var(--space-4);
    }

    .voter-snapshot-content {
        display: grid;
        gap: var(--space-4);
    }

    .voter-snapshot-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        gap: var(--space-4);
        margin: 0;
    }

    .voter-snapshot-list--compact {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
        gap: var(--space-3);
    }

    .voter-snapshot-item {
        display: grid;
        align-content: start;
        gap: var(--space-1);
        min-width: 0;
    }

    .voter-snapshot-item--wide {
        grid-column: 1 / -1;
    }

    .voter-snapshot-item dt {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-tight);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .voter-snapshot-item dd {
        min-width: 0;
        margin: 0;
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        line-height: var(--leading-normal);
        overflow-wrap: anywhere;
    }

    .voter-snapshot-item dd small {
        display: block;
        margin-top: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-normal);
    }

    .voter-snapshot-multiline {
        white-space: pre-line;
    }

    .voter-snapshot-note {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-3);
        color: var(--color-info-dark);
        background: var(--color-info-light);
        border: 1px solid var(--color-info);
        border-radius: var(--radius-md);
        font-size: var(--text-xs);
        line-height: var(--leading-normal);
    }

    .voter-snapshot-note .mud-icon-root {
        flex: 0 0 auto;
        color: var(--color-info);
    }

    .voter-snapshot-section {
        padding-top: var(--space-4);
        border-top: 1px solid var(--border-divider);
    }

    .voter-snapshot-section .subsection-heading {
        color: var(--color-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-tight);
    }

    .voter-snapshot-item dd .voter-snapshot-expired {
        color: var(--color-error);
        font-weight: var(--font-weight-semibold);
    }

    .progress-status-card {
        margin-bottom: var(--space-3);
    }

    .progress-status-content {
        display: grid;
        gap: var(--space-2);
    }

    .surface-stack {
        display: grid;
        gap: var(--section-gap);
    }

    .inset-card {
        margin: var(--space-2);
    }

    .dialog-data-region {
        display: grid;
        gap: var(--space-3);
        min-width: 0;
    }

    .choice-scroll-region {
        padding: var(--space-2);
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
    }

    .error-display-card {
        margin: var(--space-4);
    }

    .error-display-card .nts-card-body {
        padding: var(--space-8);
    }

    .mfa-authenticator-card .nts-card-body {
        display: grid;
        gap: var(--space-2);
    }

    .mfa-qr-preview {
        display: flex;
        justify-content: center;
        padding: var(--space-2);
        background: var(--bg-surface);
    }

    .mfa-verification-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        max-width: 17.5rem;
    }

    .form-section {
        container-type: inline-size;
        container-name: form-section detail-row;
        background: var(--bg-panel-surface);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-5);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-surface);
        border-left: 4px solid var(--color-primary);
        overflow: hidden;
    }

    .form-section.collapsible .form-section-header {
        cursor: pointer;
    }

    .form-section.collapsible .form-section-header:hover {
        background: var(--hover-bg);
    }

    .form-section.no-surface {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .form-section .form-section {
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .form-section.nested-form-section {
        margin-top: var(--space-4);
    }

    .form-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
        padding: var(--space-3) var(--section-padding);
        background: var(--bg-section-header);
        border-bottom: 1px solid var(--border-divider);
        transition: background var(--transition-normal);
    }

    .form-section-header-content {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex: 1 1 auto;
        min-width: 0;
    }

    .form-section-icon {
        color: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-section-icon .mud-icon-root,
    .form-section-icon svg,
    .form-section-icon .mud-icon-size-small {
        color: var(--color-primary);
        fill: var(--color-primary);
        font-size: 1.25rem;
        width: 20px;
        height: 20px;
    }

    .form-section-titles {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .form-section-title {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
        letter-spacing: 0;
    }

    .subsection-heading-space-after {
        margin-bottom: var(--space-2);
    }

    .subsection-heading-separated {
        margin-top: var(--space-4);
    }

    .subsection-heading-inline {
        display: flex;
        align-items: center;
    }

    .subsection-heading-centered {
        text-align: center;
    }

    .form-section-subtitle {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .form-section-header-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .form-section-header-action-slot {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2);
        min-width: 0;
        max-width: 100%;
    }

    @container form-section (max-width: 37.5rem) {
        .form-section-header:has(.form-section-header-action-slot) {
            flex-direction: column;
            align-items: stretch;
        }

        .form-section-header:has(.form-section-header-action-slot) .form-section-header-content,
        .form-section-header:has(.form-section-header-action-slot) .form-section-header-actions,
        .form-section-header-action-slot {
            width: 100%;
        }

        .form-section-header-actions {
            justify-content: stretch;
        }

        .form-section-header-action-slot > .d-flex {
            flex-wrap: wrap;
            width: 100%;
        }

        .form-section-header-action-slot .mud-button {
            flex: 1 1 100%;
            width: 100%;
        }
    }

    .form-section-body {
        padding: var(--section-padding);
        text-align: left;
    }

    .form-section-body.no-header {
        padding-top: var(--space-6);
    }

    .form-section-alert {
        margin-bottom: var(--space-4);
    }

    .filter-subheading {
        margin: var(--space-5) 0 var(--space-2);
        font-weight: var(--font-weight-bold);
        color: var(--text-primary);
    }

    .voter-filter-panel {
        display: grid;
        gap: 0;
    }

    .report-filter-subsection {
        container-type: inline-size;
        container-name: report-filter-subsection;
        display: grid;
        gap: var(--space-2);
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--border-divider);
    }

    .report-filter-subsection:first-child {
        padding-top: 0;
    }

    .report-filter-subsection:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .report-filter-subsection > .filter-subheading {
        margin: 0;
    }

    .report-filter-subsection > .mud-grid {
        margin-top: calc(-1 * var(--space-1));
    }

    .voter-history-panel {
        display: grid;
        gap: var(--space-4);
        width: min(100%, 72rem);
    }

    .voter-history-scope-control {
        display: grid;
        align-content: start;
        gap: var(--space-1);
        min-width: 0;
    }

    .voter-history-scope-control .nts-choice-helper {
        max-width: var(--field-width-long);
    }

    .voter-history-scope-control .nts-checkbox,
    .voter-history-scope-control .nts-checkbox > .mud-input-control-input-container,
    .voter-history-scope-control .nts-checkbox .mud-checkbox {
        width: fit-content;
        max-width: 100%;
    }

    .voter-history-panel > .mud-grid,
    .voter-history-date-row {
        align-items: start;
    }

    .voter-history-date-row {
        display: flex;
        min-width: 0;
        padding-inline: var(--space-1);
    }

    .voter-history-match-options .mud-input-control-input-container,
    .voter-history-match-options .nts-radio-group-options {
        width: 100%;
    }

    .voter-history-match-options .nts-radio-group-options {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: var(--space-1) var(--space-3);
    }

    .voter-history-match-options .nts-radio.mud-input-control {
        display: inline-flex;
        flex: 0 0 max-content;
        width: max-content;
        min-width: 0;
        max-width: 100%;
    }

    .voter-history-match-options .nts-radio.mud-input-control > .mud-input-control-input-container {
        width: max-content;
        max-width: 100%;
    }

    .voter-history-match-options .nts-radio .mud-radio {
        width: fit-content;
        max-width: 100%;
    }

    .voter-history-date-range .date-range-pair-fields {
        width: 100%;
    }

    .voter-report-tabs .mud-tabs-tabbar {
        width: min(100%, 72rem);
        margin-inline: auto;
    }

    .form-section-body > .filter-subheading:first-child,
    .voter-filter-panel > .filter-subheading:first-child,
    .voter-residence-address-panel > .filter-subheading:first-child,
    .voter-confidential-panel > .filter-subheading:first-child {
        margin-top: 0;
    }

    .standard-report-filter-page {
        padding-block: var(--space-3) var(--space-6);
    }

    .report-filter-command-area {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
        width: min(100%, 72rem);
        margin: 0 auto var(--section-gap);
        padding: 0;
        border: 0;
        background: transparent;
    }

    .report-filter-command-title {
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
    }

    .report-filter-command-bar {
        position: static;
        display: inline-flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: fit-content;
        max-width: 100%;
        gap: var(--space-2) var(--space-3);
        margin-bottom: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .report-filter-command-fields,
    .report-filter-command-options,
    .report-filter-pair {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        min-width: 0;
    }

    .report-filter-command-fields {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        align-items: end;
        width: fit-content;
        max-width: 100%;
    }

    .report-filter-command-options {
        width: fit-content;
        max-width: 100%;
    }

    .report-filter-command-status {
        display: inline-flex;
        align-items: center;
        align-self: flex-end;
        min-height: var(--density-input-height);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        background: var(--bg-muted);
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .standard-report-filter-sections {
        display: grid;
        gap: var(--space-3);
        width: min(100%, 72rem);
        margin-inline: auto;
    }

    .standard-report-filter-sections > .form-section {
        margin-bottom: 0;
    }

    @media (max-width: 600px) {
        .report-filter-command-bar {
            display: flex;
            align-items: flex-start;
            width: 100%;
        }

        .report-filter-command-fields,
        .report-filter-command-options,
        .report-filter-command-fields > .nts-field {
            width: 100%;
            max-width: 100%;
        }

        .report-filter-command-fields {
            display: flex;
            flex: 1 1 100%;
        }

        .report-filter-command-status {
            align-self: flex-start;
        }
    }

    .filter-date-range-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-3) var(--space-4);
    }

    .form-field-flow > .date-range-pair {
        flex: 0 1 calc(var(--date-range-field-width) + var(--date-range-field-width) + var(--space-2));
    }

    .form-field-flow > :is(div, span, .mud-tooltip-root):not(.form-field-flow):has(> .date-range-pair) {
        flex: 0 1 calc(var(--date-range-field-width) + var(--date-range-field-width) + var(--space-2));
        min-width: 0;
        max-width: 100%;
    }

    .filter-date-range-grid > .date-range-pair,
    .voter-history-date-row > .date-range-pair {
        flex: 0 1 calc(var(--date-range-field-width) + var(--date-range-field-width) + var(--space-2));
    }

    .voter-filter-panel .filter-date-range-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space-3) var(--space-4);
    }

    .voter-filter-panel .filter-date-range-grid > .date-range-pair {
        grid-column: span 4;
        width: 100%;
    }

    .voter-filter-panel .filter-date-range-grid .date-range-pair-fields {
        width: 100%;
    }

    @media (max-width: 1200px) {
        .voter-filter-panel .filter-date-range-grid > .date-range-pair {
            grid-column: span 6;
        }
    }

    @media (max-width: 600px) {
        .voter-filter-panel .filter-date-range-grid > .date-range-pair {
            grid-column: 1 / -1;
        }
    }

    .date-range-pair {
        container: date-range-pair / inline-size;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Contract: a date-range legend is a field caption and occupies exactly the same band as
       .nts-field-label. Without the shared line-height it inherits the body's, standing 3px taller,
       which drops the date pair's inputs below every plain field sharing its row; --field-label-band
       is the reserved-band opt-in a long-labels group publishes, and is absent everywhere else. */
    .date-range-pair-legend {
        margin: 0 0 var(--space-1);
        padding: 0;
        color: var(--text-primary);
        font-size: var(--label-font-size);
        font-weight: var(--label-font-weight);
        line-height: 1.3;
        min-height: var(--field-label-band, 0);
    }

    .date-range-pair-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
        width: min(100%, calc(var(--date-range-field-width) + var(--date-range-field-width) + var(--space-2)));
    }

    @container date-range-pair (max-width: 21.5rem) {
        .date-range-pair-fields {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .filter-value-pair {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .filter-value-pair-legend {
        margin: 0 0 var(--space-1);
        padding: 0;
        color: var(--text-primary);
        font-size: var(--label-font-size);
        font-weight: var(--label-font-weight);
    }

    .filter-pill-field .filter-flag-toggle.mud-toggle-group {
        display: flex;
        width: fit-content;
        max-width: 100%;
    }

    .filter-pill-field .filter-flag-toggle .mud-toggle-item {
        flex: 0 0 auto;
        min-width: max-content;
        justify-content: center;
        text-align: center;
        min-height: var(--density-input-height);
        white-space: nowrap;
        line-height: 1.2;
        padding-inline: var(--space-2);
    }

    /* Contract: disabled report filter choices stay fully readable and retain a clear selected state.
       The neutral action palette owns the text; selection is communicated by both surface and inset. */
    .filter-pill-field .filter-flag-toggle.mud-disabled,
    .filter-pill-field .filter-flag-toggle.mud-disabled .mud-toggle-item {
        opacity: 1;
    }

    .filter-pill-field .filter-flag-toggle.mud-disabled .mud-toggle-item {
        color: var(--mud-palette-action-disabled);
        background-color: var(--bg-surface);
        box-shadow: inset 0 0 0 1px var(--border-control);
    }

    .filter-pill-field .filter-flag-toggle.mud-disabled .mud-toggle-item-selected {
        background-color: var(--mud-palette-action-disabled-background);
        box-shadow: inset 0 0 0 2px var(--mud-palette-action-disabled);
    }

    .embedded-form-panel {
        padding: var(--space-4);
        margin-bottom: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--bg-muted);
    }

    .embedded-form-panel:last-child {
        margin-bottom: 0;
    }

    .checkbox-choice-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--space-2) var(--space-4);
    }

    .checkbox-choice-grid > .embedded-form-panel {
        margin-bottom: 0;
    }

    .bpr-party-review {
        display: grid;
        gap: var(--space-2);
    }

    .bpr-party-review + .bpr-party-review {
        margin-top: var(--space-4);
    }

    .bpr-party-review-title {
        margin: 0;
        color: var(--text-secondary);
        font-weight: var(--font-weight-semibold);
    }

    .form-section .collapse-toggle.mud-icon-button {
        color: var(--text-muted);
        transition: transform var(--transition-normal);
    }

    .form-section.collapsed .collapse-toggle.mud-icon-button {
        transform: rotate(-90deg);
    }
}


.stat-card {
    background: var(--bg-metric-surface);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-surface);
    transition: box-shadow var(--transition-normal);
    cursor: default;
    position: relative;
    overflow: hidden;
    display: flex;
    /* Contract: a stretched peer card may be taller than its own content. Keep the content at the shared
       top edge; .stat-card-inner still centers the icon against the value/label stack. */
    align-items: flex-start;
    gap: var(--space-4);
    /* Contract: every card in a row matches the tallest one. Without this a card whose label runs one line
       longer than its neighbours' stands taller than them, and a row of figures reads as broken
       rather than as a set. Keep card text short as well -- this only stops the damage. */
    height: 100%;
}

/* Contract: MudGrid owns proportional columns, while each direct StatCard cell owns equal-height
   peer geometry. Stretch only cells whose direct child is a StatCard, then let that card fill the
   cell; unrelated form/grid items retain their existing flex-start alignment. */
.mud-grid > .mud-grid-item:has(> .stat-card) {
    align-self: stretch;
    display: flex;
}

.mud-grid > .mud-grid-item:has(> .stat-card) > .stat-card {
    flex: 1 1 auto;
    min-width: 0;
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
}

.stat-card-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.stat-card-icon-container {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-normal);
}

.stat-card-content {
    flex: 1;
    min-width: 0;
}

.stat-card-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Contract: SelectedCountCard's count keeps its long-standing compact size (xl/semibold),
   deliberately distinct from the 3xl stat-card-value tile size. */
.selected-count-value {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.stat-card-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0;
}

.stat-card-sublabel {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.stat-card-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.stat-card-trend.positive {
    color: var(--color-success-dark);
    background: var(--color-success-light);
}

.stat-card-trend.negative {
    color: var(--color-error-dark);
    background: var(--color-error-light);
}

.stat-card-progress {
    margin-top: var(--space-4);
}

.stat-card-progress-bar {
    height: 6px;
    border-radius: var(--radius-full);
}

.stat-card-progress-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
    display: block;
}

.stat-card-default {
    border-left: 4px solid var(--border-surface);
}

.stat-card-primary {
    border-left: 4px solid var(--color-primary);
}

.stat-card-primary .stat-card-icon-container {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.stat-card-success {
    border-left: 4px solid var(--color-success);
}

.stat-card-success .stat-card-icon-container {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.stat-card-warning {
    border-left: 4px solid var(--color-warning);
}

.stat-card-warning .stat-card-icon-container {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.stat-card-error {
    border-left: 4px solid var(--color-error);
}

.stat-card-error .stat-card-icon-container {
    background: var(--color-error-light);
    color: var(--color-error);
}

.stat-card-info {
    border-left: 4px solid var(--color-info);
}

.stat-card-info .stat-card-icon-container {
    background: var(--color-info-light);
    color: var(--color-info);
}

.mud-grid > .mud-grid-item .mud-input-control {
    width: 100%;
}

.mud-input-label-inputcontrol {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
}


@media (max-width: 960px) {
    .page-header-title {
        font-size: var(--text-xl);
    }

    .form-section-header {
        padding: var(--space-4);
    }

    .form-section-body {
        padding: var(--space-4);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-card-value {
        font-size: var(--text-2xl);
    }

    .stat-card-icon-container {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 600px) {
    .page-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .page-header-left {
        align-items: flex-start;
    }

    .page-header-right,
    .page-header-actions {
        width: 100%;
    }

    .page-header-actions {
        justify-content: stretch;
    }

    .page-header-actions > .d-flex {
        flex-wrap: wrap;
        width: 100%;
    }

    .page-header-actions .mud-button {
        flex: 1 1 100%;
        width: 100%;
    }

    .form-section {
        border-radius: var(--radius-lg);
    }

    .stat-card-inner {
        flex-direction: column;
        text-align: center;
    }
}



::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-muted);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-muted);
    transition: background var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-control);
}

::-webkit-scrollbar-thumb:active {
    background: var(--color-primary);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--bg-muted);
}


.skeleton {
    width: var(--skeleton-width, 100%);
    height: var(--skeleton-height, auto);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text-sm {
    height: 0.875em;
    width: 60%;
}

.skeleton-title {
    height: 1.5em;
    width: 40%;
    margin-bottom: 0.75em;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}

.skeleton-table-row {
    height: 48px;
    margin-bottom: 4px;
}


.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.empty-state-title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state-message {
    font-size: var(--text-base);
    color: var(--text-muted);
    max-width: 400px;
    margin-bottom: var(--space-6);
}

.empty-state-action {
    margin-top: var(--space-4);
}

.empty-state--small {
    padding: var(--space-6) var(--space-4);
}

.empty-state--small .empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
}

.empty-state--small .empty-state-title {
    font-size: var(--text-base);
}

.empty-state--small .empty-state-message {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.empty-state--small .empty-state-action {
    margin-top: var(--space-2);
}

.mud-table-empty-row,
.mud-table-empty-row td {
    padding: var(--space-8);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .page-header-actions {
        gap: var(--space-2);
    }
}


.print-only {
    display: none !important;
}

@media print {
    :root,
    html.dark-mode,
    html[data-theme="dark"] {
        --color-primary: var(--nts-blue-700) !important;
        --color-primary-hover: var(--nts-blue-600) !important;
        --color-primary-active: var(--nts-blue-800) !important;
        --color-primary-light: var(--nts-blue-100) !important;
        --color-primary-rgb: 0, 33, 71 !important;
        --color-accent: var(--nts-red-700) !important;
        --color-accent-active: var(--nts-red-800) !important;
        --color-accent-light: var(--nts-red-100) !important;
        --color-accent-rgb: 187, 19, 62 !important;
        --color-tertiary: var(--nts-blue-500) !important;
        --color-tertiary-light: var(--nts-blue-100) !important;
        --color-tertiary-rgb: 26, 74, 122 !important;
        --color-success: var(--nts-green-800) !important;
        --color-success-dark: var(--nts-green-800) !important;
        --color-success-light: var(--nts-green-100) !important;
        --color-warning: var(--nts-red-900) !important;
        --color-warning-rgb: 122, 12, 40 !important;
        --color-warning-dark: var(--nts-red-950) !important;
        --color-warning-light: var(--nts-red-50) !important;
        --color-error: var(--nts-red-650) !important;
        --color-error-rgb: 196, 30, 58 !important;
        --color-error-dark: var(--nts-red-780) !important;
        --color-error-light: var(--nts-red-150) !important;
        --color-info: var(--nts-blue-450) !important;
        --color-info-dark: var(--nts-blue-550) !important;
        --color-info-light: var(--nts-blue-75) !important;
        --bg-page: var(--print-background) !important;
        --bg-app-canvas: var(--print-background) !important;
        --bg-surface: var(--print-background) !important;
        --bg-panel-surface: var(--print-background) !important;
        --bg-metric-surface: var(--print-background) !important;
        --bg-status-surface: var(--print-background) !important;
        --bg-section-header: var(--print-background) !important;
        --bg-operation-alternate: var(--print-background) !important;
        --bg-dialog-surface: var(--print-background) !important;
        --dialog-backdrop: transparent !important;
        --bg-muted: var(--print-background) !important;
        --bg-form: var(--print-background) !important;
        --border-surface: var(--print-border) !important;
        --border-divider: var(--print-border) !important;
        --text-primary: var(--print-text) !important;
        --text-secondary: var(--print-text) !important;
        --text-muted: var(--nts-gray-700) !important;
        --text-on-filled: var(--text-inverse) !important;
    }

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    html,
    body,
    .page,
    .content {
        background: var(--print-background) !important;
        background-image: none !important;
    }

    .top-bar,
    .sidebar,
    .sidebar-resizer,
    .sidebar-backdrop,
    .footer,
    .page-header-actions,
    .mud-snackbar,
    .mud-dialog-container,
    .mud-overlay,
    .no-print,
    [data-no-print] {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    table,
    .mud-table,
    .mud-simple-table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    th, td {
        border: 1px solid var(--nts-gray-400) !important;
        padding: 4px 8px !important;
        color: var(--print-text) !important;
        background: var(--print-background) !important;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .card,
    .nts-card,
    .mud-paper,
    .mud-card {
        background: var(--print-background) !important;
        border: 1px solid var(--nts-gray-400) !important;
        border-radius: 0 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .form-section {
        box-shadow: none !important;
        border: 1px solid var(--nts-gray-300) !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .mud-chip.nts-status-success,
    .mud-chip.nts-status-warning,
    .mud-chip.nts-status-error,
    .mud-chip.nts-status-info,
    .mud-chip.nts-status-primary,
    .mud-chip.nts-status-neutral,
    .mud-chip.nts-status-tertiary,
    .mud-chip.nts-status-success *,
    .mud-chip.nts-status-warning *,
    .mud-chip.nts-status-error *,
    .mud-chip.nts-status-info *,
    .mud-chip.nts-status-primary *,
    .mud-chip.nts-status-neutral *,
    .mud-chip.nts-status-tertiary *,
    .cell-training-expired {
        color: var(--print-text) !important;
        background: transparent !important;
        border-color: var(--print-text) !important;
    }

    .stat-card,
    .dashboard-card {
        box-shadow: none !important;
        background: var(--print-background) !important;
        border: 1px solid var(--print-dashboard-border) !important;
        opacity: 1 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .mud-table {
        page-break-inside: auto;
    }

    .mud-table-row {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body {
        color: var(--print-text) !important;
    }

    .stat-card-value {
        color: var(--print-text) !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--print-link);
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after,
    .mud-button::after {
        content: none;
    }

    @page {
        margin: 0.5in;
    }

    @page :first {
        margin-top: 2cm;
    }
}


.top-bar {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4);
    color: var(--text-inverse);
    font-size: var(--nav-font-size, 0.875rem);
    font-weight: var(--nav-font-weight, 500);
    background: var(--bg-header);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 100;
    --mud-palette-text-primary: var(--text-inverse);
    --mud-palette-text-secondary: var(--text-on-dark-subtle);
    --mud-palette-text-disabled: var(--text-on-dark-disabled);
    --mud-palette-action-default: var(--text-on-dark-subtle);
    --mud-palette-action-default-hover: var(--text-inverse);
    --mud-palette-lines-inputs: var(--border-on-dark);
}

.top-bar-search {
    flex: 0 1 420px;
    width: min(420px, 44vw);
    max-width: 100%;
    margin: 0 var(--space-4);
}

.search-input {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-inverse);
    font-size: var(--text-sm);
    transition: none;
}

.search-input input,
.search-input .mud-input-slot,
.search-input .mud-input-root {
    color: var(--text-inverse);
    -webkit-text-fill-color: var(--text-inverse);
    caret-color: var(--text-inverse);
}

.top-bar .search-input input::placeholder,
.search-input::placeholder,
.search-input input::placeholder {
    color: var(--topbar-search-placeholder);
    -webkit-text-fill-color: var(--topbar-search-placeholder);
    opacity: 1;
}

.search-input:focus {
    outline: none;
}

.top-bar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.top-bar-user .mud-menu .mud-button-root {
    color: var(--text-inverse);
}

.top-bar-user .mud-menu .mud-button-root:hover,
.top-bar-user .mud-menu .mud-button-root:focus,
.top-bar-user .mud-menu .mud-button-root:active,
.top-bar-user .mud-menu .mud-button-root.mud-ripple {
    background-color: var(--surface-on-dark-hover);
}

.top-bar-user .mud-menu .mud-icon-root {
    color: var(--text-inverse);
}

.user-account-menu .mud-button-root,
.user-account-menu .mud-button-root:hover,
.user-account-menu .mud-button-root:focus,
.user-account-menu .mud-button-root:active {
    background-color: transparent;
    color: var(--text-inverse);
}

.user-account-menu .mud-button-root:hover {
    background-color: var(--surface-on-dark-hover);
}

.top-bar .mud-input-root,
.top-bar .mud-input,
.top-bar .mud-input-slot,
.top-bar input {
    color: var(--text-inverse);
    -webkit-text-fill-color: var(--text-inverse);
}

.top-bar .mud-input-adornment,
.top-bar .mud-icon-root,
.top-bar svg {
    color: var(--text-on-dark-subtle);
    fill: currentColor;
}

.top-bar .mud-input-adornment:hover,
.top-bar .mud-icon-root:hover {
    color: var(--text-inverse);
}

.top-bar .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-on-dark);
    border-radius: var(--radius-md);
    border-width: 1px;
}

.top-bar .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--border-on-dark-hover);
}

.top-bar .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--text-on-dark-subtle);
    border-width: 1px;
}

.top-bar .mud-input-error .mud-input-outlined-border {
    border-color: var(--border-on-dark);
}

.top-bar .mud-input-control,
.top-bar .mud-input-control-input-container {
    background: var(--surface-on-dark-rest);
    border-radius: var(--radius-md);
    min-height: var(--top-bar-control-height);
    height: var(--top-bar-control-height);
}

.top-bar .mud-input-slot {
    background: transparent;
    min-height: var(--top-bar-control-height);
    height: var(--top-bar-control-height);
    padding-top: 0;
    padding-bottom: 0;
}

.top-bar .mud-input-label {
    color: var(--text-on-dark-subtle);
}


.login-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
    background: var(--color-primary);
    position: relative;
    overflow: hidden;
}

.login-container {
    width: 100%;
    max-width: 580px;
    margin: var(--space-4);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    animation: loginCardAppear 0.6s ease-out;
}

.login-page--signin {
    min-height: 100dvh;
    align-items: flex-start;
    padding: clamp(var(--space-4), 4vh, var(--space-8));
    overflow: auto;
}

.login-container--signin {
    container: login-signin / inline-size;
    max-width: 72rem;
    margin: auto;
    padding: var(--space-6);
}

.login-content {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.85fr);
    align-items: start;
    gap: var(--space-8);
}

.login-auth-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.login-container--signin .login-header {
    margin-bottom: var(--space-5);
}

.login-container--signin .login-logo {
    width: 11.25rem;
    margin-bottom: 0;
}

.login-container--signin .login-signin-card {
    max-width: none;
}

.login-container--signin .login-help {
    margin: var(--space-3) 0 0;
    color: var(--text-secondary);
}

.login-container--signin .login-footer {
    margin-top: var(--space-4);
    color: var(--text-muted);
}

@container login-signin (max-width: 52rem) {
    .login-content {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .login-auth-panel {
        order: -1;
    }

    .login-signin-card {
        max-width: 30rem;
    }

    .acceptable-use-banner {
        max-width: 40rem;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .login-page--signin {
        padding: var(--space-3);
    }

    .login-container--signin {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .login-container--signin .login-header {
        margin-bottom: var(--space-4);
    }

    .login-container--signin .login-logo {
        width: 10rem;
    }

    .login-content {
        gap: var(--space-5);
    }

    .login-container--signin .login-signin-card,
    .acceptable-use-banner {
        padding: var(--space-4);
    }
}

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

.auth-card-title {
    color: var(--text-primary);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    text-align: center;
}

.auth-inline-panel {
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.showcase-panel {
    height: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.loading-panel,
.inline-filter-panel,
.signature-preview-panel {
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.signature-preview-panel {
    overflow: auto;
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo {
    width: 200px;
    height: auto;
    margin-bottom: 0.75rem;
}

.login-help {
    text-align: center;
    color: var(--text-on-dark);
    font-size: 0.875rem;
    margin: 1.5rem 0 1rem 0;
}

.login-footer {
    text-align: center;
    color: var(--text-on-dark-muted);
    font-size: 0.75rem;
    margin: 0;
}

.login-btn {
    height: 48px;
    font-size: 1rem;
    font-weight: 600;
}


.mud-overlay-dialog {
    background: var(--overlay-bg);
}

.mud-tooltip {
    background-color: var(--color-primary);
    color: var(--text-on-filled);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: 4px 8px;
    box-shadow: var(--shadow-md);
}


@layer overrides {
.mud-snackbar {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: snackbarSlide 0.4s ease-out;
    font-weight: 500;
}

.mud-snackbar-location-bottom-right,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-center {
    bottom: var(--snackbar-footer-clearance);
}
}

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

@layer overrides {
html:not(.dark-mode) .mud-snackbar.mud-alert-filled-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
    border-left: 3px solid var(--color-success);
}

html:not(.dark-mode) .mud-snackbar.mud-alert-filled-error {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
    border-left: 3px solid var(--color-error);
}

html:not(.dark-mode) .mud-snackbar.mud-alert-filled-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
    border-left: 3px solid var(--color-warning);
}

html:not(.dark-mode) .mud-snackbar.mud-alert-filled-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
    border-left: 3px solid var(--color-info);
}

.mud-snackbar .mud-snackbar-content-message {
    font-weight: 500;
    /* Contract: Legacy-parity validation messages contain \n-separated bullets; preserve their line breaks. */
    white-space: pre-line;
}

.mud-snackbar .mud-icon-root,
.mud-snackbar .mud-button-root,
.mud-snackbar .mud-button-root .mud-button-label,
.mud-snackbar .mud-button-root .mud-icon-button-label {
    color: inherit;
}

.mud-snackbar .mud-button-root.mud-button-filled {
    background-color: transparent;
    box-shadow: none;
}
}


.footer {
    background: var(--bg-sidebar);
    color: var(--text-inverse);
    padding: var(--space-3) var(--space-6);
    border-top: 2px solid var(--footer-border);
    position: relative;
    margin-top: auto;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-1);
    min-width: 0;
}

.footer-brand span,
.footer-status-label,
.footer-status-sep {
    color: var(--text-on-dark);
}

.footer-content a {
    color: var(--text-on-dark-strong);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-content a:hover {
    color: var(--color-accent);
}

.footer-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 500;
}

.footer-status-services {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
}

.footer-status-label {
    white-space: nowrap;
    margin-right: 2px;
    color: var(--text-inverse);
    font-weight: 600;
}

.footer-status-sep {
    margin: 0 6px;
    color: var(--border-on-dark-hover);
}

.footer-status-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-status-services .mud-chip {
    height: 20px;
    font-size: 0.7rem;
    margin: 0 var(--space-1);
}

.footer-status-actions {
    flex: 0 0 auto;
    gap: 6px;
}

.footer-status-actions > .mud-tooltip-root {
    flex: 0 0 auto;
    min-width: max-content;
}

/* Contract: pin every layer MudBlazor wraps around the interval selector to one explicit
   width. MudBlazor's .mud-width-full is a percentage, and a percentage width contributes
   nothing to the flex row's intrinsic size -- so the row measured 103px while it laid out
   185px, and the trailing controls were drawn past the right edge of the window instead of
   wrapping. The tooltip root needs it too: its min-width:max-content above otherwise sizes
   it to the select's popover content rather than to the control. */
.footer-status-actions > .mud-tooltip-root:has(.footer-status-interval),
.footer-status-actions .mud-select.mud-width-full {
    flex: 0 0 var(--footer-status-interval-width, 72px);
    width: var(--footer-status-interval-width, 72px);
    min-width: var(--footer-status-interval-width, 72px);
    max-width: var(--footer-status-interval-width, 72px);
}

.footer-status-actions .mud-checkbox {
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    margin: 0;
    padding: 0;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
}

.footer-status-actions .mud-checkbox .mud-icon-button {
    padding: 2px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    color: var(--text-inverse);
}

.footer-status-actions .mud-checkbox .mud-svg-icon {
    width: 16px;
    height: 16px;
    color: var(--text-inverse);
}

.footer-status-actions .mud-checkbox .mud-typography {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-inverse);
    white-space: nowrap;
}

.footer-status-interval,
.footer-status-interval.mud-input-control,
.footer-status-interval .mud-input-control-input-container {
    width: var(--footer-status-interval-width);
    min-width: var(--footer-status-interval-width);
    max-width: var(--footer-status-interval-width);
    height: var(--footer-status-control-height);
    min-height: var(--footer-status-control-height);
    max-height: var(--footer-status-control-height);
    margin: 0;
}

.footer-status-interval .mud-input {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: var(--footer-status-control-height);
    max-height: var(--footer-status-control-height);
    padding: 0 22px 0 6px;
    background: transparent;
    border: 1px solid var(--border-on-dark-strong);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    box-sizing: border-box;
}

.footer-status-interval .mud-input-adornment-end {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    display: flex;
    align-items: center;
}

.footer-status-interval .mud-input:hover {
    border-color: var(--text-inverse);
}

.footer-status-interval .mud-input-slot {
    height: var(--footer-status-control-height);
    min-height: var(--footer-status-control-height);
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
}

.footer-status-interval .mud-input-slot > *,
.footer-status-interval .mud-input-slot input,
.footer-status-interval .mud-select-input {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    text-indent: 4px;
}

.footer-status-interval .mud-input > div.mud-input-slot.mud-select-input {
    display: flex;
    height: var(--footer-status-control-inner-height);
    min-height: var(--footer-status-control-inner-height);
    max-height: var(--footer-status-control-inner-height);
}

.footer-status-interval .mud-input-slot input,
.footer-status-interval .mud-select-input,
.footer-status-interval .mud-input-slot .mud-typography {
    font-size: 0.75rem;
    padding: 0;
    color: var(--text-inverse);
    -webkit-text-fill-color: var(--text-inverse);
}

.footer-status-interval .mud-input-adornment .mud-svg-icon {
    color: var(--text-inverse);
    width: 16px;
    height: 16px;
}

.footer-status-interval .mud-input-outlined-border,
.footer-status-interval .mud-input-underline::before,
.footer-status-interval .mud-input-underline::after {
    border: none;
}

.footer-status-interval-popover {
    min-width: 100px;
}

.footer-status-refresh-btn.mud-icon-button,
button.footer-status-refresh-btn {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0;
    margin: 0;
    color: var(--text-inverse);
    background: transparent;
    border: 1px solid var(--border-on-dark-strong);
    border-radius: 3px;
    line-height: 1;
}

.footer-status-refresh-btn.mud-icon-button:hover {
    background: transparent;
    border-color: var(--text-inverse);
}

.footer-status-refresh-btn .mud-svg-icon,
.footer-status-refresh-btn svg {
    width: 16px;
    height: 16px;
    color: var(--text-inverse);
}

@media (max-width: 600px) {
    :root {
        --app-footer-height: 64px;
    }

    .footer {
        width: 100%;
        max-width: 100%;
        min-height: var(--app-footer-height);
        padding: var(--space-1) var(--space-3);
        padding-bottom: max(var(--space-1), env(safe-area-inset-bottom));
        overflow: hidden;
    }

    .footer-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        align-items: center;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        font-size: 0.75rem;
    }

    .footer-brand {
        display: inline-flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.6875rem;
        line-height: 1.2;
    }

    .footer-brand > span {
        flex: 0 0 auto;
    }

    /* Contract: text-overflow only applies on the shrinkable child, not the
       flex container - the product name is the segment allowed to truncate. */
    .footer-brand > .footer-brand-product {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer-brand-divider,
    .footer-brand-product {
        display: inline;
    }

    .footer-status {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: var(--space-1);
        overflow: hidden;
        white-space: nowrap;
    }

    .footer-status-services {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scrollbar-width: thin;
    }

    .footer-status-actions-sep {
        display: none;
    }

    .footer-status-group,
    .footer-status-services .footer-status-sep {
        flex: 0 0 auto;
    }
}


@layer overrides {

.mud-popover.mud-popover-open {
    overflow-x: hidden;
}

.mud-popover .mud-list {
    overflow-x: hidden;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Contract: NtsSelect popovers delegate scrolling to the inner MudList; the popover must not add a second scrollbar. */
.nts-select-popover.mud-popover-open {
    overflow-y: hidden;
}

.mud-popover .mud-list-item {
    white-space: nowrap;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 32px;
}

    .mud-popover .mud-list-item .mud-list-item-text {
        padding-left: 4px;
        padding-right: 4px;
    }

    .mud-popover .mud-list-item:hover {
        background-color: var(--popover-item-hover-bg);
    }

    .mud-popover .mud-list-item.mud-selected-item {
        background-color: rgba(var(--mud-palette-primary-rgb, 0, 33, 71), 0.12);
    }

}

@layer components {
    .status-bar-container {
        min-width: 0;
    }

    /* Contract: five cells — the four readouts plus the compact auto-refresh. The control keeps
       its natural width instead of being squeezed into an equal fifth. */
    .status-bar-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        gap: var(--space-2);
        width: 100%;
        min-width: 0;
    }

    /* Contract: without the fifth control cell the four readouts stay equal quarters. */
    .status-bar-row:not(:has(.status-bar-item-control)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Contract: the control cell holds interactive widgets, so it centres them and never stretches. */
    .status-bar-item-control {
        justify-content: center;
        padding-block: 0;
    }

    /* Contract: the compact auto-refresh sits inline in the strip, dropping the prose, the button
       labels, the last-refreshed stamp and the progress bar. */
    .auto-refresh-compact {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        white-space: nowrap;
    }

    .auto-refresh-compact .mud-icon-button {
        padding: 2px;
    }

    .auto-refresh-compact-countdown {
        font-size: var(--text-xs);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
        min-width: 2.5em;
        text-align: right;
    }

    /* Contract: one compact line — icon, label, value side by side. These are ambient status, not
       metrics, so stacking label over value in a 3.5rem box gave them the weight of a KPI card. */
    .status-bar-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        column-gap: var(--space-2);
        min-width: 0;
        min-height: 0;
        padding: var(--space-1) var(--space-3);
        background: var(--bg-status-surface);
        border: 1px solid var(--border-surface);
        border-left: 3px solid var(--color-primary);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
    }

    /* Contract: the icon is a fixed-size marker, vertically centred against the baseline-aligned
       label and value. */
    .status-bar-item > .mud-icon-root {
        flex: 0 0 auto;
        align-self: center;
    }

    .status-bar-item .status-label {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .status-bar-item .status-value {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Contract: on one line each item needs about a quarter of the strip, so the old 70rem drop
       to two columns fired with room to spare and made a two-row block of near-empty boxes. */
    @container dashboard-shell (max-width: 44rem) {
        .status-bar-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @container dashboard-shell (max-width: 24rem) {
        .status-bar-row {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .status-label {
        font-size: var(--text-xs);
        color: var(--text-secondary);
    }

    .status-value {
        font-weight: var(--font-weight-medium);
        font-size: var(--text-sm);
    }

    .status-value.status-error,
    .status-error {
        color: var(--color-error);
        font-weight: var(--font-weight-bold);
    }

    .status-value.status-success,
    .status-success {
        color: var(--color-success);
        font-weight: var(--font-weight-medium);
    }

    .status-value.status-warning,
    .status-warning {
        color: var(--color-warning);
    }

    .status-chip {
        font-size: var(--text-xs);
        height: var(--space-5);
        margin: 0 var(--space-1);
    }

    .mud-chip.status-chip-normal,
    .mud-avatar.status-chip-normal {
        background-color: var(--status-tracker-normal-bg);
        color: var(--status-tracker-normal-text);
    }

    .mud-chip.status-chip-info,
    .mud-avatar.status-chip-info {
        background-color: var(--status-tracker-info-bg);
        color: var(--status-tracker-info-text);
    }

    .mud-chip.status-chip-warning,
    .mud-avatar.status-chip-warning {
        background-color: var(--status-tracker-warning-bg);
        color: var(--status-tracker-warning-text);
    }

    .mud-chip.status-chip-problem,
    .mud-avatar.status-chip-problem {
        background-color: var(--status-tracker-problem-bg);
        color: var(--status-tracker-problem-text);
    }

    .mud-chip.status-chip-error,
    .mud-avatar.status-chip-error {
        background-color: var(--status-tracker-error-bg);
        color: var(--status-tracker-error-text);
    }

    .mud-chip[class*="status-chip-"] .mud-chip-content,
    .mud-chip[class*="status-chip-"] .mud-chip-content * {
        background-color: transparent;
        color: inherit;
    }
}

.login-helper-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
}

.login-helper-row .mud-input-control {
    flex-shrink: 1;
    min-width: 0;
}

.login-helper-row .mud-link {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .login-helper-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

.nested-table-level-2 {
    margin-left: var(--space-12);
    background-color: var(--mud-palette-background-grey);
}

.nested-table-level-3 {
    margin-left: var(--space-12);
    background-color: var(--mud-palette-surface);
}

@media (max-width: 600px) {
    .nested-table-level-2,
    .nested-table-level-3 {
        margin-left: var(--space-4);
    }

    .form-container .mud-grid-item,
    .form-section .mud-grid-item {
        flex-basis: 100%;
        max-width: 100%;
    }

    .form-container .mud-grid-item[class*="xs-6"],
    .form-section .mud-grid-item[class*="xs-6"] {
        flex-basis: 50%;
        max-width: 50%;
    }
}

.mud-card {
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}


.mud-chart {
    transition: transform 0.3s ease;
}


.mud-chart-legend {
    font-size: 0.875rem;
    padding: var(--space-2);
}

.mud-chart-legend-item {
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.mud-chart-legend-item:hover {
    opacity: 0.8;
}

.mud-paper .mud-chart {
    margin: 0 auto;
}


.mud-input-error .mud-input-outlined-border {
    border-color: var(--color-error);
    border-width: 1px;
}

.mud-icon-button {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.mud-table-body tr.voter-confidential,
.mud-table-body tr.voter-confidential > .mud-table-cell,
.mud-table-body tr.voter-confidential td {
    color: var(--color-error);
    font-weight: 500;
}

.mud-table-row-expander {
    transition: transform 0.2s ease;
}


.mud-progress-linear {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-muted);
}

.mud-progress-linear .mud-progress-linear-bar {
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.mud-progress-circular {
    filter: none;
}

.mud-progress-circular circle {
    transition: stroke-dashoffset 0.3s ease;
}



*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-fab:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring-shadow);
}

.mud-input-control:focus-within,
.mud-input-control input:focus,
.mud-input-control input:focus-visible,
.mud-input-control textarea:focus,
.mud-input-control textarea:focus-visible,
.mud-input-control .mud-input-slot:focus-within,
.mud-select .mud-input-slot:focus-within,
.mud-picker .mud-input-slot:focus-within {
    outline: none;
}

.mud-checkbox:focus-within,
.mud-radio:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    background-color: var(--focus-subtle-bg);
    border-radius: 2px;
}

.mud-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: var(--focus-tab-bg);
}

.mud-list-item:focus-visible,
.mud-menu-item:focus-visible,
.mud-nav-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: var(--focus-tab-bg);
}

.mud-chip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.mud-day:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.mud-dialog .mud-dialog-content,
.mud-dialog .mud-tabs-panels {
    overflow: visible;
}


@media (prefers-contrast: more) {
    :root {
        --color-primary: var(--high-contrast-primary) !important;
        --color-primary-hover: var(--nts-blue-800) !important;
        --color-primary-active: var(--nts-blue-950) !important;
        --color-primary-light: var(--nts-blue-50) !important;
        --color-primary-rgb: 0, 10, 24 !important;
        --color-accent: var(--high-contrast-accent) !important;
        --color-accent-active: var(--nts-red-900) !important;
        --color-accent-light: var(--nts-red-50) !important;
        --color-accent-rgb: 122, 12, 40 !important;
        --color-tertiary: var(--nts-blue-800) !important;
        --color-tertiary-light: var(--nts-blue-50) !important;
        --color-tertiary-rgb: 0, 26, 58 !important;
        --color-success: var(--nts-green-800) !important;
        --color-success-dark: var(--nts-green-800) !important;
        --color-success-light: var(--nts-green-100) !important;
        --color-warning: var(--nts-red-950) !important;
        --color-warning-rgb: 74, 7, 24 !important;
        --color-warning-dark: var(--nts-red-950) !important;
        --color-warning-light: var(--nts-red-50) !important;
        --color-error: var(--nts-red-780) !important;
        --color-error-rgb: 154, 24, 48 !important;
        --color-error-dark: var(--nts-red-780) !important;
        --color-error-light: var(--nts-red-150) !important;
        --color-info: var(--nts-blue-550) !important;
        --color-info-dark: var(--nts-blue-550) !important;
        --color-info-light: var(--nts-blue-75) !important;
        --text-primary: var(--high-contrast-text) !important;
        --text-secondary: var(--high-contrast-text-secondary) !important;
        --text-muted: var(--nts-gray-700) !important;
        --text-on-filled: var(--high-contrast-background) !important;
        --border-default: var(--high-contrast-text) !important;
        --border-light: var(--nts-gray-500) !important;
        --border-surface: var(--high-contrast-text) !important;
        --border-divider: var(--nts-gray-500) !important;
        --border-strong: var(--high-contrast-text) !important;
        --border-control: var(--high-contrast-text) !important;
        --border-control-hover: var(--high-contrast-text) !important;
        --bg-page: var(--high-contrast-background) !important;
        --bg-app-canvas: var(--high-contrast-background) !important;
        --bg-surface: var(--high-contrast-background) !important;
        --bg-panel-surface: var(--high-contrast-background) !important;
        --bg-metric-surface: var(--high-contrast-background) !important;
        --bg-status-surface: var(--high-contrast-background) !important;
        --bg-section-header: var(--nts-gray-100) !important;
        --bg-operation-alternate: var(--nts-gray-100) !important;
        --bg-dialog-surface: var(--high-contrast-background) !important;
        --dialog-backdrop: rgba(var(--color-black-rgb), 0.6) !important;
        --bg-muted: var(--nts-gray-100) !important;
        --bg-form: var(--high-contrast-background) !important;
        --hover-bg: var(--nts-gray-200) !important;
        --surface-page: var(--high-contrast-background) !important;
        --surface-card: var(--high-contrast-background) !important;
        --surface-form: var(--high-contrast-background) !important;
        --mud-palette-background: var(--high-contrast-background) !important;
        --mud-palette-background-grey: var(--nts-gray-100) !important;
        --mud-palette-surface: var(--high-contrast-background) !important;
        --mud-palette-text-primary: var(--high-contrast-text) !important;
        --mud-palette-text-secondary: var(--high-contrast-text-secondary) !important;
        /* Contract: the errored-input border is remapped through the MudBlazor token, not fought
           with !important. For !important the layer order runs backwards - the MudBlazor layer is
           declared first, so its "border-color: var(--mud-palette-error) !important" beats any
           unlayered !important of ours. Change the value it reads instead. */
        --mud-palette-error: var(--high-contrast-accent) !important;
    }

    body,
    .content {
        color: var(--high-contrast-text);
        background: var(--high-contrast-background) !important;
        background-image: none !important;
    }

    .mud-paper,
    .mud-card,
    .mud-table {
        background-color: var(--high-contrast-background) !important;
        border: 2px solid var(--high-contrast-text) !important;
    }

    .mud-input-outlined-border {
        border: 2px solid var(--high-contrast-text) !important;
    }

    .mud-button-filled {
        background-color: var(--high-contrast-primary) !important;
        color: var(--high-contrast-background) !important;
        border: 2px solid var(--high-contrast-text) !important;
    }

    .mud-button-outlined {
        border: 2px solid var(--high-contrast-text) !important;
        color: var(--high-contrast-text) !important;
    }

    a {
        text-decoration: underline !important;
        color: var(--high-contrast-link) !important;
    }

    .top-bar a,
    .sidebar a,
    .footer a,
    .skip-link,
    .shortcuts-help-header a {
        color: var(--text-inverse) !important;
    }

    .top-bar .mud-button-outlined {
        color: var(--text-inverse) !important;
        border-color: var(--text-inverse) !important;
    }

    .sidebar .nav-link.active {
        box-shadow: inset 3px 0 0 var(--text-inverse) !important;
    }

    /* Contract: mud-input-slot is ON the input/textarea, not a wrapper around it - the old
       descendant form matched nothing, so high contrast never reached the fields. */
    input.mud-input-slot,
    textarea.mud-input-slot {
        color: var(--high-contrast-text) !important;
        background: var(--high-contrast-background) !important;
    }

    *:focus-visible {
        outline: 4px solid var(--high-contrast-text) !important;
        outline-offset: 3px !important;
    }

    .top-bar *:focus-visible,
    .sidebar *:focus-visible,
    .footer *:focus-visible,
    .shortcuts-help-header *:focus-visible,
    .connection-lost-overlay *:focus-visible,
    .skip-link:focus-visible {
        outline-color: var(--text-inverse) !important;
    }

    .mud-input-error .mud-input-outlined-border {
        /* Contract: border-color comes from the --mud-palette-error remap above; the MudBlazor
           !important on this exact selector would win over ours. Only the width is ours to set. */
        border-width: 3px !important;
    }

    .mud-table-head {
        background-color: var(--high-contrast-primary) !important;
        color: var(--high-contrast-background) !important;
    }

    .mud-table-head th {
        color: var(--high-contrast-background) !important;
        border: 1px solid var(--high-contrast-text) !important;
    }

    .mud-table-cell {
        border: 1px solid var(--high-contrast-text) !important;
    }

    .mud-chip {
        border: 2px solid var(--high-contrast-text) !important;
    }

    .mud-icon-root {
        color: var(--high-contrast-text) !important;
    }

    .mud-button-filled .mud-icon-root,
    .mud-table-head .mud-icon-root {
        color: var(--high-contrast-background) !important;
    }

    .top-bar .mud-icon-root,
    .sidebar .mud-icon-root,
    .footer .mud-icon-root,
    .connection-lost-overlay .mud-icon-root,
    .shortcuts-help-header .mud-icon-root {
        color: var(--text-inverse) !important;
    }

    .mud-progress-linear-bar {
        background-color: var(--high-contrast-primary) !important;
    }

    .mud-alert {
        border: 2px solid currentColor !important;
    }

    [disabled],
    .mud-disabled {
        opacity: 0.6 !important;
        background-color: var(--high-contrast-disabled-bg) !important;
        cursor: not-allowed !important;
    }
}


.connection-lost-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--connection-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: connection-fade-in 0.3s ease-out;
}

@keyframes connection-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.connection-lost-content {
    text-align: center;
    color: var(--text-inverse);
    padding: 48px;
    max-width: 400px;
}

.connection-lost-icon {
    font-size: 64px;
    margin-bottom: 24px;
    animation: connection-pulse 2s ease-in-out infinite;
}

@keyframes connection-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.connection-lost-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.connection-lost-message {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 24px;
    line-height: 1.5;
}

.connection-lost-retry {
    background: var(--bg-surface);
    color: var(--color-primary);
    border: none;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.connection-lost-retry:hover {
    box-shadow: var(--shadow-md);
}

.reconnecting-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

.reconnecting-spinner-hidden {
    display: none;
}

.print-iframe-hidden {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border: 0;
}


.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 48px 24px;
}

.not-found-code {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.not-found-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.not-found-message {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 480px;
    line-height: 1.6;
    margin-bottom: 32px;
}


.scroll-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-on-filled);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    box-shadow: var(--shadow-lg);
}

.scroll-to-top svg,
.scroll-to-top .mud-icon-root {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}


html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.content,
.mud-main-content,
article.content {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.mud-container {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}

.mud-container-maxwidth-xl,
.mud-container-maxwidth-lg,
.mud-container-maxwidth-md,
.mud-container-maxwidth-xxl {
    margin-left: 0;
    margin-right: auto;
}

.mud-container-maxwidth-xl {
    max-width: 100%;
}

.mud-container-maxwidth-lg {
    max-width: 100%;
}

.mud-container-maxwidth-md {
    max-width: 100%;
}

.mud-container-maxwidth-xxl {
    max-width: 100%;
}

.mud-typography,
.mud-card-content,
.mud-paper,
.mud-card,
.page-header-title,
.page-header-meta {
    overflow-wrap: anywhere;
}

.dashboard-card-content > * {
    min-width: 0;
}

/* Contract: metric tiles wrap between words, never inside one. The app-wide rule above gives every
   .mud-typography overflow-wrap: anywhere, which is right for long data strings but wrong here:
   `anywhere` also collapses a flex item's min-content to one character, and the min-width: 0 above
   lets it shrink that far — rendering "UNAUDITE / D" and "DE M" / "RE P" once four tiles shared a
   row. break-word keeps the last-resort break without affecting min-content sizing. */
.dashboard-card-label,
.dashboard-card-sublabel,
.dashboard-card-content .mud-typography {
    overflow-wrap: break-word;
}

/* Contract: label left, value right, always on one line; the label never shrinks below one whole
   word. No flex-wrap here — it drops the value beneath the label and doubles every tile's height. */
.dashboard-card-content > *:first-child {
    flex: 1 1 auto;
    min-width: min-content;
}

.dashboard-card-content > *:last-child {
    flex: 0 0 auto;
}

.mud-input-control,
.mud-select,
.mud-autocomplete,
.mud-picker {
    max-width: 100%;
    box-sizing: border-box;
}


.mud-table-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mud-table {
    min-width: 100%;
}

.mud-dialog {
    max-height: calc(100vh - var(--space-8));
    margin: var(--space-4);
    background: var(--bg-dialog-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

/* Contract: the structural dialog edge belongs to the less-white light palette only. */
html:not(.dark-mode):not([data-theme="dark"]) .mud-dialog {
    border: 1px solid var(--border-surface);
}

.mud-dialog-content {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .form-section .mud-grid > .mud-grid-item > .mud-typography {
        text-align: left;
    }

    .form-section .mud-grid {
        row-gap: var(--space-3);
        column-gap: var(--space-3);
    }
}

.mud-button-group-root,
.action-buttons {
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mud-table-cell[data-tooltip],
.mud-table-cell[aria-label] {
    position: relative;
}

.mud-table-cell[data-tooltip]:hover,
.mud-table-cell[aria-label]:hover,
.mud-table-cell[data-tooltip]:focus-within,
.mud-table-cell[aria-label]:focus-within {
    overflow: visible;
    z-index: 6;
}

.mud-table-cell:focus-within {
    outline: 2px solid rgba(var(--color-primary-rgb), 0.6);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.mud-table-cell[data-tooltip]:hover::after,
.mud-table-cell[data-tooltip]:focus-within::after {
    content: attr(data-tooltip);
}

.mud-table-cell[aria-label]:hover::after,
.mud-table-cell[aria-label]:focus-within::after {
    content: attr(aria-label);
}

.mud-table-cell[data-tooltip]:hover::after,
.mud-table-cell[aria-label]:hover::after,
.mud-table-cell[data-tooltip]:focus-within::after,
.mud-table-cell[aria-label]:focus-within::after {
    position: absolute;
    left: 0;
    top: calc(100% + var(--space-1));
    max-width: 360px;
    width: max-content;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    white-space: normal;
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
    z-index: 5;
    pointer-events: none;
}

img {
    max-width: 100%;
    height: auto;
}

.mud-tabs-panels:not(:has(.standard-data-grid)) {
    max-width: 100%;
    overflow-x: hidden;
}

.mud-expand-panel-content {
    max-width: 100%;
    overflow-x: hidden;
}


@media (max-width: 1200px) {
    .mud-container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .mud-dialog {
        max-width: calc(100vw - var(--space-6));
    }
}

@media (max-width: 992px) {
    .content {
        padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--content-footer-clearance));
    }
}

@media (max-width: 768px) {
    .mud-container {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .mud-grid-item {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }

    .mud-dialog {
        width: calc(100vw - var(--space-4));
        max-width: calc(100vw - var(--space-4));
        margin: var(--space-2);
    }

    .top-bar {
        padding: 0 8px;
    }

    .top-bar-search {
        display: none;
    }

    .scroll-to-top {
        width: 40px;
        height: 40px;
        bottom: 16px;
        right: 16px;
    }
}

@media (max-width: 480px) {
    .content {
        padding: var(--space-3) var(--space-3) calc(var(--space-3) + var(--content-footer-clearance));
    }

    .mud-typography-h4 {
        font-size: var(--text-xl);
    }

    .mud-typography-h5 {
        font-size: var(--text-lg);
    }

    .mud-typography-h6 {
        font-size: var(--text-base);
    }

    .mud-button {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-sm);
    }
}


@media print {
    .scroll-to-top {
        display: none !important;
    }
}

.field-truncated .mud-input-outlined-border,
.field-truncated .mud-input-underline:before,
.field-truncated .mud-input-underline:after,
.field-truncated input {
    border-color: var(--field-truncated-warning);
}

.field-truncated .mud-input-label {
    color: var(--field-truncated-warning);
}

.field-truncated .mud-input-helper-text {
    color: var(--field-truncated-warning);
    font-weight: 500;
}

.header-search-field {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}


.quick-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--quick-search-overlay-bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 99999;
    animation: overlay-fade-in 0.15s ease-out;
}

.quick-search-overlay.closing {
    animation: overlay-fade-out 0.15s ease-in forwards;
}

@keyframes overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes overlay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.quick-search-modal {
    width: 100%;
    max-width: 600px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-slide-in 0.2s ease-out;
}

.quick-search-overlay.closing .quick-search-modal {
    animation: modal-slide-out 0.15s ease-in forwards;
}

@keyframes modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modal-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

.quick-search-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}

.quick-search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.quick-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    color: var(--text-primary);
    outline: none;
}

.quick-search-input::placeholder {
    color: var(--text-muted);
}

.quick-search-kbd {
    padding: 4px 8px;
    background: var(--bg-muted);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.quick-search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
}

.quick-search-section {
    padding: 8px 16px;
}

.quick-search-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-muted);
    padding: 8px 12px 4px;
}

.quick-search-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    gap: 12px;
    transition: background-color 0.15s ease;
}

.quick-search-item:hover {
    background: var(--bg-muted);
}

.quick-search-item-icon {
    font-size: 1.25rem;
    width: 32px;
    text-align: center;
}

.quick-search-item-text {
    flex: 1;
    font-weight: 500;
}

.quick-search-item-kbd {
    padding: 2px 6px;
    background: var(--bg-page);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}


.shortcuts-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--shortcuts-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: overlay-fade-in 0.15s ease-out;
}

.shortcuts-help-overlay.closing {
    animation: overlay-fade-out 0.15s ease-in forwards;
}

.shortcuts-help-modal {
    width: 100%;
    max-width: 700px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shortcuts-modal-shadow);
    overflow: hidden;
    animation: modal-slide-in 0.2s ease-out;
}

.shortcuts-help-overlay.closing .shortcuts-help-modal {
    animation: modal-slide-out 0.15s ease-in forwards;
}

.shortcuts-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--color-primary);
    color: var(--text-on-filled);
}

.shortcuts-help-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.shortcuts-help-close {
    background: transparent;
    border: none;
    color: var(--text-on-filled);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.shortcuts-help-close:hover {
    opacity: 1;
}

.shortcuts-help-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 24px;
}

.shortcuts-help-column h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-primary);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 16px;
}

.shortcut-row kbd {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    box-shadow: var(--shortcut-key-shadow);
}

.shortcut-row span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.shortcuts-help-footer {
    padding: 16px 24px;
    background: var(--bg-muted);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.shortcuts-help-footer kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin: 0 4px;
}

@media (max-width: 600px) {
    .shortcuts-help-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 999999;
    pointer-events: none;
    overflow: hidden;
}

.top-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--color-primary);
    animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.top-progress-bar.hidden {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.top-progress-bar.determinate::before {
    animation: none;
    background: var(--color-primary);
    transition: width 0.3s ease;
}


html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

html.dark-mode,
html[data-theme="dark"] {
    --color-primary: var(--nts-blue-300);
    --color-primary-hover: var(--nts-blue-200);
    --color-primary-active: var(--nts-blue-400);
    --color-primary-light: var(--dark-color-primary-light);
    --color-primary-rgb: 90, 143, 196;
    --color-accent: var(--nts-red-400);
    --color-accent-active: var(--nts-red-600);
    --color-accent-light: var(--dark-color-accent-light);
    --color-accent-rgb: 232, 115, 144;
    --color-tertiary: var(--nts-blue-200);
    --color-tertiary-light: rgba(var(--color-tertiary-rgb), 0.18);
    --color-tertiary-rgb: 155, 189, 224;
    --color-success: var(--nts-green-100);
    --color-success-dark: var(--nts-green-100);
    --color-warning: var(--nts-red-200);
    --color-warning-rgb: 247, 199, 211;
    --color-warning-dark: var(--nts-red-100);
    --color-error: var(--nts-red-400);
    --color-error-rgb: 232, 115, 144;
    --color-error-dark: var(--nts-red-300);
    --color-info: var(--nts-blue-300);
    --color-info-dark: var(--nts-blue-200);
    --color-alert: var(--color-error);
    --color-alert-rgb: var(--color-error-rgb);
    --color-alert-dark: var(--color-error-dark);

    --bg-page: var(--dark-bg-page);
    --bg-app-canvas: var(--dark-bg-page);
    --bg-surface: var(--dark-bg-surface);
    --bg-panel-surface: var(--dark-bg-surface);
    --bg-metric-surface: var(--dark-bg-surface);
    --bg-status-surface: var(--dark-bg-surface);
    --bg-section-header: var(--dark-bg-muted);
    --bg-operation-alternate: rgba(var(--color-white-rgb), 0.03);
    --bg-dialog-surface: var(--dark-bg-surface);
    --bg-muted: var(--dark-bg-muted);
    --bg-form: var(--dark-bg-surface);
    --bg-header: var(--dark-bg-header);
    --bg-sidebar: var(--dark-bg-header);
    --hover-bg: var(--dark-bg-muted);
    --striped-row: rgba(var(--color-white-rgb), 0.03);
    --dialog-backdrop: rgba(var(--dark-bg-header-rgb), 0.7);
    --overlay-bg: rgba(var(--dark-bg-header-rgb), 0.7);

    --surface-page: var(--bg-page);
    --surface-card: var(--bg-surface);
    --surface-form: var(--bg-form);

    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --text-on-filled: var(--dark-bg-page);
    --text-link: var(--nts-blue-300);

    --border-default: var(--dark-border-default);
    --border-light: var(--dark-bg-muted);
    --border-surface: var(--dark-border-default);
    --border-divider: var(--dark-bg-muted);
    --border-strong: var(--dark-border-strong);
    --border-control: var(--nts-blue-300);
    --border-control-hover: var(--nts-blue-200);
    --footer-border: var(--dark-border-default);
    --popover-item-hover-bg: rgba(var(--color-white-rgb), 0.06);
    --pivot-recomputing-overlay: rgba(var(--dark-bg-header-rgb), 0.7);
    --table-header-bg: var(--dark-bg-muted);
    --table-lines: var(--dark-border-default);
    --table-striped: var(--striped-row);
    --table-hover: rgba(var(--color-white-rgb), 0.06);

    --color-success-light: var(--dark-success-light);
    --color-warning-light: var(--dark-warning-light);
    --color-error-light: var(--dark-error-light);
    --color-info-light: var(--dark-info-light);
    --color-alert-light: var(--dark-alert-light);
    /* Contract: lock tints ride dedicated -rgb primitives (never overridden by the print or
       prefers-contrast blocks, which DO force --color-tertiary-rgb/--color-accent-rgb),
       so locked-row cues stay stable across every mode combination. */
    --color-lock-current-doc: rgba(var(--nts-blue-200-rgb), 0.28);
    --color-lock-current-doc-hover: rgba(var(--nts-blue-200-rgb), 0.38);
    --color-lock-current-doc-text: var(--nts-blue-200);
    --color-lock-self-same: rgba(var(--color-white-rgb), 0.08);
    --color-lock-self-same-hover: rgba(var(--color-white-rgb), 0.14);
    --color-lock-self-same-text: var(--nts-gray-300);
    --color-lock-self-diff: rgba(var(--nts-red-200-rgb), 0.16);
    --color-lock-self-diff-hover: rgba(var(--nts-red-200-rgb), 0.26);
    --color-lock-self-diff-text: var(--nts-red-200);
    --color-lock-other: rgba(var(--nts-red-400-rgb), 0.24);
    --color-lock-other-hover: rgba(var(--nts-red-400-rgb), 0.34);
    --color-lock-other-text: var(--nts-red-400);
    --pivot-col-color: var(--color-tertiary);
    --pivot-col-color-rgb: var(--color-tertiary-rgb);
    --pivot-filter-color: var(--nts-gray-400);
    --pivot-filter-color-rgb: 154, 164, 179;
}

@layer overrides {
    html.dark-mode body,
    html.dark-mode .page,
    html.dark-mode .content,
    html[data-theme="dark"] body,
    html[data-theme="dark"] .page,
    html[data-theme="dark"] .content {
        background-color: var(--bg-page);
        background-image: none;
        color: var(--text-primary);
    }

    html.dark-mode .footer,
    html[data-theme="dark"] .footer {
        background: var(--bg-surface);
        color: var(--text-secondary);
        border-top-color: var(--border-default);
    }

    .dark-mode-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: var(--radius-md, 4px);
        background: transparent;
        color: var(--text-inverse);
        cursor: pointer;
        transition: background var(--transition-fast, 0.15s);
    }

    .dark-mode-toggle:hover {
        background: var(--surface-on-dark-rest);
    }

    .dark-mode-toggle svg {
        width: 20px;
        height: 20px;
    }
}


.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: var(--space-2);
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 4px);
    background: transparent;
    color: var(--text-inverse);
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s);
}

.sidebar-toggle:hover {
    background: var(--surface-on-dark-rest);
}

.sidebar-toggle svg {
    width: 22px;
    height: 22px;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 960px) {
    .sidebar-toggle {
        display: inline-flex;
        width: var(--density-touch-target);
        height: var(--density-touch-target);
    }

    .sidebar-resizer {
        display: none;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, 88vw);
        max-width: 88vw;
        z-index: 1200;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        box-shadow: 4px 0 24px var(--dark-sidebar-shadow);
    }

    .page.sidebar-open .sidebar {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: var(--dark-backdrop-bg);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .page.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .top-bar-search {
        margin: 0 var(--space-2);
    }
}

@layer overrides {
    .mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled),
    .mud-button-filled.mud-button-filled-info:not(:disabled):not(.mud-disabled),
    .mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled) .mud-button-label,
    .mud-button-filled.mud-button-filled-info:not(:disabled):not(.mud-disabled) .mud-button-label,
    .mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled) .mud-icon-root,
    .mud-button-filled.mud-button-filled-info:not(:disabled):not(.mud-disabled) .mud-icon-root,
    .mud-theme-primary,
    .mud-table-head .mud-theme-primary,
    .mud-table-row.mud-theme-primary,
    .mud-theme-primary th,
    .mud-theme-primary td,
    .mud-theme-primary .mud-table-cell,
    .mud-theme-primary .mud-typography,
    .mud-table-head.mud-theme-primary .mud-table-cell,
    .mud-table-head .mud-table-row.mud-theme-primary .mud-table-cell,
    .mud-theme-primary label,
    .mud-theme-primary .mud-input-label,
    .mud-table-head.mud-theme-primary *,
    .mud-table-row.mud-theme-primary * {
        color: var(--text-on-filled);
    }
}

.mud-grid-item .mud-input-control {
    width: 100%;
}

@layer overrides {
    .mud-input-control:not(.mud-input-control-boolean-input),
    .mud-select,
    .mud-picker,
    .mud-autocomplete {
        width: 100%;
        min-width: 0;
    }

    .mud-input-control-input-container {
        width: 100%;
    }

    .mud-grid-item .mud-input-control:not(.mud-input-control-boolean-input),
    .mud-grid-item .mud-select,
    .mud-grid-item .mud-picker {
        width: 100%;
    }

    .mud-grid[class*="mud-grid-spacing"] .mud-grid-item {
        min-width: 0;
    }

    /* Contract: a placeholder is a hint, never content. Muted grey at normal weight so it
       cannot be mistaken for an entered value or for the field's label. Matches
       .quick-search-input::placeholder. opacity:1 normalizes the Firefox default. */
    .mud-input input::placeholder,
    .mud-input textarea::placeholder,
    input.mud-input-slot::placeholder,
    textarea.mud-input-slot::placeholder {
        color: var(--text-muted);
        opacity: 1;
        font-weight: 400;
    }
}

@layer components {
    .tree-node {
        padding: var(--space-1) 0;
        color: var(--text-primary);
    }

    .tree-children {
        margin-left: var(--space-4);
        border-left: 1px solid var(--border-default);
        padding-left: var(--space-2);
    }

    .checkbox-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        max-height: var(--checkbox-list-max-height);
        overflow-y: auto;
        padding: var(--space-2);
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
    }

    .checkbox-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) 0;
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
    }

    .checkbox-item input[type="checkbox"] {
        width: var(--checkbox-size);
        height: var(--checkbox-size);
        cursor: pointer;
    }

    .checkbox-item span {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }
}

@layer overrides {
    .standard-tree,
    .standard-tree .mud-treeview,
    .standard-tree .mud-treeview-item,
    .standard-tree .mud-treeview-item-content,
    .standard-tree .mud-typography {
        color: var(--text-primary);
    }

    .standard-tree .mud-treeview-item {
        min-height: auto;
    }

    .standard-tree .mud-treeview-item-content {
        display: flex;
        min-height: var(--tree-row-min-height);
        max-height: var(--tree-row-max-height);
        padding: 0 var(--space-1);
        align-items: center;
        gap: var(--space-2);
        overflow: visible;
        flex: 1;
        min-width: 0;
    }

    .standard-tree .tree-checkbox {
        width: var(--tree-checkbox-size);
        height: var(--tree-checkbox-size);
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: var(--mud-palette-primary);
    }

    .standard-tree .perm-label {
        padding-left: var(--space-2);
        color: var(--text-primary);
        font-size: var(--text-base);
        line-height: var(--leading-tight);
        white-space: nowrap;
    }

    .standard-tree .permission-label-parent,
    .standard-tree .permission-label-added {
        font-weight: var(--font-weight-semibold);
    }

    .standard-tree .permission-label-added {
        color: var(--color-success);
    }

    .standard-tree .permission-label-removed {
        color: var(--color-error);
        text-decoration: line-through;
    }

    @media (hover: none), (pointer: coarse), (max-width: 600px) {
        .standard-tree .mud-treeview-item-content {
            min-height: var(--density-touch-target);
            max-height: none;
        }
    }
}

@layer layouts {
    .master-detail-container {
        container: master-detail / inline-size;
        width: 100%;
        min-width: 0;
    }

    .master-detail-layout {
        width: 100%;
        min-width: 0;
    }

    .master-detail-grid,
    .master-detail-column {
        min-width: 0;
    }

    .content:has(.master-detail-fill) {
        overflow: hidden;
    }

    .master-detail-fill {
        height: var(--apex-fill-height, auto);
        overflow: hidden;
    }

    .master-detail-fill .master-detail-grid {
        height: 100%;
        align-items: stretch;
    }

    .master-detail-fill .master-detail-column {
        height: 100%;
        overflow: hidden;
    }

    .master-detail-fill .master-detail-column:first-child {
        padding-right: var(--space-2);
    }

    .master-detail-fill .master-detail-column:last-child {
        padding-left: var(--space-2);
    }

    .master-detail-fill .form-section {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .master-detail-fill .form-section-body {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .master-detail-fill .form-section-body:has(.standard-tree) {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .master-detail-fill .form-section-body:has(.standard-tree) > *:not(.standard-tree) {
        flex-shrink: 0;
        flex-grow: 0;
    }

    .master-detail-fill .standard-tree {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    @container master-detail (max-width: 50rem) {
        .master-detail-grid > .master-detail-column {
            flex-basis: 100%;
            max-width: 100%;
        }

        .master-detail-fill {
            overflow-y: auto;
            scrollbar-gutter: stable;
        }

        .master-detail-fill .master-detail-grid,
        .master-detail-fill .master-detail-column,
        .master-detail-fill .form-section {
            height: auto;
        }

        .master-detail-fill .master-detail-column {
            overflow: visible;
            padding-inline: 0;
        }

        .master-detail-fill .master-detail-detail-column {
            margin-top: var(--section-gap);
        }

        .master-detail-fill .form-section-body,
        .master-detail-fill .form-section-body:has(.standard-tree),
        .master-detail-fill .standard-tree {
            overflow: visible;
        }
    }

    .workqueue-process-layout {
        container: workqueue-process / inline-size;
        min-width: 0;
    }

    .workqueue-process-panel {
        min-width: 0;
    }

    .workqueue-process-folders .folder-panel {
        display: flex;
        flex-direction: column;
    }

    .workqueue-process-folders .folder-panel > .form-section-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    @container workqueue-process (max-width: 64rem) {
        .workqueue-process-layout > .workqueue-process-folders {
            flex-basis: 100%;
            max-width: 100%;
        }

        .workqueue-process-layout > .workqueue-process-document,
        .workqueue-process-layout > .workqueue-process-details {
            flex-basis: 50%;
            max-width: 50%;
        }

        .workqueue-process-folders .folder-panel {
            height: auto;
            min-height: min(24rem, 45dvh);
            max-height: min(32rem, 60dvh);
        }

    }

    @container workqueue-process (max-width: 48rem) {
        .workqueue-process-layout > .workqueue-process-panel {
            flex-basis: 100%;
            max-width: 100%;
        }

        .workqueue-process-folders .folder-panel {
            min-height: min(18rem, 40dvh);
            max-height: min(26rem, 55dvh);
        }
    }
}

@layer overrides {
    .standard-data-grid {
        min-width: 0;
    }

    .standard-grid-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2) var(--space-3);
        margin-bottom: var(--space-3);
    }

    .standard-grid-toolbar-primary {
        display: flex;
        flex: 1 1 18rem;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
    }

    .standard-grid-search-field {
        flex: 1 1 16rem;
        min-width: min(16rem, 100%);
        max-width: min(22rem, 100%);
    }

    .standard-grid-search-field .nts-field,
    .standard-grid-search-field .mud-input-control {
        width: 100%;
    }

    .standard-grid-record-count {
        flex-shrink: 0;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;
    }

    .standard-grid-toolbar-actions {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-2);
    }

    .record-grid-action-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-1);
    }

    .record-grid-action-bar .mud-button-root {
        flex: 0 0 auto;
        min-height: var(--density-button-height);
        padding-inline: var(--space-2);
        white-space: nowrap;
    }

    .record-grid-action-bar .mud-button-text:disabled {
        background-color: transparent;
        box-shadow: none;
    }

    .standard-grid-footer {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2) var(--space-3);
        width: 100%;
        min-width: 0;
    }

    .standard-grid-footer-actions-only {
        border-top: 1px solid var(--table-lines);
        padding: var(--space-2);
        background: var(--table-header-bg);
    }

    .standard-grid-selected-actions {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
    }

    .standard-data-grid-search-results {
        display: flex;
        flex-direction: column;
        height: clamp(32rem, 65vh, 56rem);
        min-height: 0;
    }

    .standard-data-grid-search-results > .standard-grid-toolbar,
    .standard-data-grid-search-results > .standard-grid-footer {
        flex: 0 0 auto;
    }

    .standard-data-grid-search-results > .mud-data-grid {
        flex: 1 1 auto;
        min-height: 0;
    }

    .standard-data-grid .mud-data-grid {
        overflow-x: auto;
        overflow-y: hidden;
        color: var(--text-primary);
        font-size: var(--text-sm);
    }

    .standard-data-grid .mud-data-grid .mud-table-container {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .standard-data-grid .mud-data-grid table,
    .standard-data-grid .mud-data-grid .mud-table-root,
    .standard-data-grid .mud-data-grid .mud-table-head,
    .standard-data-grid .mud-data-grid .mud-table-body {
        min-width: max-content;
    }

    .standard-data-grid .mud-data-grid table,
    .standard-data-grid .mud-data-grid .mud-table-root {
        table-layout: auto;
    }

    .standard-data-grid .mud-data-grid .mud-table-head {
        overflow-x: hidden;
    }

    .standard-data-grid .mud-table-head .mud-table-cell {
        min-width: 6.25rem;
        padding: 0.625rem var(--density-cell-padding-x);
        border-bottom: 1px solid var(--table-lines);
        background-color: var(--table-header-bg);
        color: var(--text-secondary);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .standard-data-grid .mud-table-body .mud-table-cell {
        min-width: 6.25rem;
        padding: var(--density-cell-padding-y) var(--density-cell-padding-x);
        border-bottom: 1px solid var(--table-lines);
        background-color: inherit;
        color: inherit;
        font-size: var(--text-sm);
        text-align: left;
        white-space: nowrap;
        overflow: visible;
    }

    .standard-data-grid .mud-table-head .mud-table-cell.standard-grid-keyed-selection-header,
    .standard-data-grid .mud-table-body .mud-table-cell.standard-grid-keyed-selection-cell {
        width: 2.5rem;
        min-width: 2.5rem;
        max-width: 2.5rem;
        padding-inline: var(--space-1);
        text-align: center;
    }

    .standard-data-grid .standard-grid-keyed-selection-checkbox {
        display: inline-flex;
        width: auto;
        margin: 0;
    }

    .standard-data-grid .mud-table-head .mud-table-cell.standard-grid-record-action-header,
    .standard-data-grid .mud-table-body .mud-table-cell.standard-grid-record-action-cell {
        width: 2.5rem;
        min-width: 2.5rem;
        max-width: 2.5rem;
        padding-inline: var(--space-1);
        text-align: center;
    }

    .standard-data-grid .standard-grid-record-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
    }

    .standard-data-grid .standard-grid-record-action {
        display: inline-flex;
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding: var(--space-1);
        color: var(--text-link);
    }

    .standard-data-grid .standard-grid-edit-action {
        display: none;
    }

    .standard-data-grid .standard-grid-record-action:disabled {
        color: var(--text-muted);
    }

    .standard-data-grid .standard-grid-record-action:focus-visible {
        border-radius: var(--radius-sm);
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    .standard-data-grid .mud-table-body > .mud-table-row {
        background-color: var(--bg-panel-surface);
        color: var(--text-primary);
    }

    /* Contract: the stripe must stand down for a selected row. Both rules live in this layer, so
       specificity decides, and the stripe selectors outrank the selection rule below - a selected
       odd row kept the stripe and only got the left border. Same guard the hover rule uses. */
    .standard-data-grid .mud-table-body:not(.mud-table-body-virtualized) > .mud-table-row:nth-of-type(odd):not(:is(.selected-row, .selected-role, .mud-selected, .selected, .mud-theme-primary, [aria-selected="true"])),
    .standard-data-grid .mud-table-body.mud-table-body-virtualized > .mud-table-row.mud-table-row-stripe:not(:is(.selected-row, .selected-role, .mud-selected, .selected, .mud-theme-primary, [aria-selected="true"])) {
        background-color: var(--table-striped);
    }

    .standard-data-grid .mud-table-body > .mud-table-row:hover:not(:is(.selected-row, .selected-role, .mud-selected, .selected, .mud-theme-primary, [aria-selected="true"])) {
        background-color: var(--table-hover);
    }

    .standard-data-grid .mud-table-body tr.mud-selected,
    .standard-data-grid .mud-table-body tr.selected-row,
    .standard-data-grid.role-table .mud-table-body tr.selected-role,
    .standard-data-grid .mud-table-body tr.selected,
    .standard-data-grid .mud-table-body tr.mud-theme-primary,
    .standard-data-grid .mud-table-body tr[aria-selected="true"] {
        background-color: var(--color-primary-light);
        border-left: 3px solid var(--color-primary);
        color: var(--text-primary);
    }

    .standard-data-grid .mud-table-body tr.mud-theme-primary {
        --mud-palette-primary: var(--color-primary-light);
        --mud-palette-primary-text: var(--text-primary);
    }

    .standard-data-grid .mud-table-body tr.mud-theme-primary .mud-icon-root {
        color: inherit;
    }

    .standard-data-grid .mud-table-body > .mud-table-row:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .standard-data-grid .mud-table-cell .mud-typography {
        color: inherit;
    }

    .standard-data-grid .mud-table-cell a,
    .standard-data-grid .mud-table-cell a.mud-link,
    .standard-data-grid .mud-table-cell a.mud-primary-text,
    .standard-data-grid .mud-table-cell .mud-link,
    .standard-data-grid .mud-table-cell .mud-link.mud-primary-text {
        color: var(--text-link);
    }

    .standard-data-grid .mud-table-cell.cell-numeric,
    .standard-data-grid .cell-numeric {
        justify-content: flex-end;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* Contract: a numeric column's heading sits over its own figures. A header cell's content is a
       flex group (title, sort arrow, filter funnel), so text-align cannot move it and the heading
       would stay hard left while the number sits hard right. Pairing HeaderClass="text-right" with
       CellClass="cell-numeric" anchors both to the column's right edge; verify-standards.sh fails a
       numeric column that sets only one of the two. */
    .standard-data-grid .mud-table-cell.text-right .column-header,
    .standard-data-grid .mud-table-cell.cell-numeric .column-header {
        justify-content: flex-end;
    }


    .standard-data-grid .mud-data-grid .mud-table-cell .column-header {
        gap: var(--space-1);
    }

    .standard-data-grid .mud-data-grid .column-header .sort-direction-icon,
    .standard-data-grid .mud-data-grid .column-header .column-options .mud-menu .mud-icon-button-label,
    .standard-data-grid .mud-table-sort-label .mud-table-sort-label-icon {
        color: var(--text-secondary);
        opacity: 0.55;
        transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
    }

    .standard-data-grid .mud-data-grid .column-header:hover .sort-direction-icon,
    .standard-data-grid .mud-data-grid .column-header:hover .column-options .mud-menu .mud-icon-button-label,
    .standard-data-grid .mud-data-grid .column-header .sort-direction-icon.mud-direction-asc,
    .standard-data-grid .mud-data-grid .column-header .sort-direction-icon.mud-direction-desc,
    .standard-data-grid .mud-table-sort-label .mud-table-sort-label-icon.mud-direction-asc,
    .standard-data-grid .mud-table-sort-label .mud-table-sort-label-icon.mud-direction-desc {
        color: var(--color-primary);
        opacity: 1;
    }

    .standard-data-grid .mud-data-grid .column-header .sort-direction-icon.mud-direction-desc,
    .standard-data-grid .mud-table-sort-label .mud-table-sort-label-icon.mud-direction-desc {
        transform: rotate(180deg);
    }

    .standard-data-grid-compact .mud-data-grid .mud-table-cell {
        min-width: 5rem;
        padding: 0.375rem 0.625rem;
    }

    .standard-data-grid-compact .mud-data-grid .mud-table-head .mud-table-cell {
        padding: 0.4rem 0.625rem;
    }

    .standard-data-grid .mud-data-grid th:has([title*="Id"]),
    .standard-data-grid .mud-data-grid th:has([title*="ID"]) {
        min-width: 5rem;
    }

    .standard-data-grid .mud-data-grid th:has([title*="Name"]),
    .standard-data-grid .mud-data-grid th:has([title*="Address"]) {
        min-width: 9.375rem;
    }

    .standard-data-grid .mud-data-grid th:has([title*="Description"]),
    .standard-data-grid .mud-data-grid th:has([title*="Reason"]) {
        min-width: 11.25rem;
    }

    .standard-data-grid .mud-data-grid th:has([title*="Date"]) {
        min-width: 6.875rem;
    }

    .standard-data-grid .mud-data-grid .mud-table-container::-webkit-scrollbar {
        width: 0.75rem;
        height: 0.75rem;
    }

    .standard-data-grid .mud-data-grid .mud-table-container::-webkit-scrollbar-track {
        border-radius: 0.375rem;
        background: var(--bg-muted);
    }

    .standard-data-grid .mud-data-grid .mud-table-container::-webkit-scrollbar-thumb {
        border: 0.125rem solid var(--bg-muted);
        border-radius: 0.375rem;
        background: var(--border-strong);
    }

    .standard-data-grid .mud-data-grid .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: var(--border-control);
    }

    .standard-data-grid .mud-data-grid[style*="height"] .mud-table-container,
    .mud-tabs-panels:has(.standard-data-grid),
    .mud-paper:has(.standard-data-grid) {
        overflow-x: auto;
    }

    .mud-tabs-panels:has(.standard-data-grid),
    .mud-paper:has(.standard-data-grid) {
        overflow-y: visible;
    }

    .standard-data-grid .mud-table-pagination {
        border-top: 1px solid var(--table-lines);
        background: var(--table-header-bg);
    }

    .standard-data-grid .mud-table-pagination .mud-input-slot {
        min-height: var(--standard-grid-pagination-control-height);
        max-height: var(--standard-grid-pagination-control-height);
        height: var(--standard-grid-pagination-control-height);
        padding-top: 0;
        padding-bottom: 0;
    }

    .standard-data-grid .mud-table-pagination .mud-input-control,
    .standard-data-grid .mud-table-pagination .mud-select {
        flex: 0 0 auto;
        width: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .standard-data-grid .mud-table-pagination .mud-input-control-input-container {
        margin-top: 0;
    }

    .standard-data-grid .mud-table-pagination .mud-select-input {
        display: flex;
        align-items: center;
        height: var(--standard-grid-pagination-control-height);
        line-height: normal;
    }

    .standard-data-grid .mud-table-pagination-select {
        flex: 0 0 auto;
        width: auto;
        min-width: 52px;
        max-width: 90px;
    }

    .standard-data-grid .standard-grid-footer > .mud-table-pagination-toolbar {
        flex: 0 1 auto;
        justify-content: flex-end;
        margin-left: auto;
        margin-inline-start: auto;
    }

    .standard-data-grid .mud-table-pagination-spacer {
        flex: 0 0 0;
        width: 0;
        min-width: 0;
    }

    .standard-data-grid .mud-table-pagination-caption,
    .standard-data-grid .mud-table-pagination-display,
    .standard-data-grid .mud-table-pagination-information {
        margin-left: 0;
        margin-inline-start: 0;
    }

    .standard-data-grid .mud-table-pagination-actions {
        margin-left: 10px;
        margin-inline-start: 10px;
    }

    @media (max-width: 600px) {
        .standard-grid-toolbar {
            align-items: stretch;
        }

        .standard-grid-toolbar-primary,
        .standard-grid-toolbar-actions,
        .standard-grid-search-field {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            max-width: none;
        }

        .standard-grid-toolbar-actions > .mud-button-root {
            flex: 1 1 100%;
        }

        .record-grid-action-bar {
            flex: 1 1 100%;
            justify-content: flex-start;
        }

        .record-grid-action-bar .mud-button-root {
            flex: 1 1 auto;
        }

        .standard-data-grid .mud-table-body .mud-table-cell {
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .standard-grid-footer,
        .standard-grid-selected-actions,
        .standard-data-grid .standard-grid-footer > .mud-table-pagination-toolbar {
            flex: 1 1 100%;
            width: 100%;
        }

        .standard-data-grid .standard-grid-footer > .mud-table-pagination-toolbar {
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--space-1);
            min-height: auto;
            margin-left: 0;
            margin-inline-start: 0;
        }
    }

    @media (hover: none), (pointer: coarse), (max-width: 600px) {
        .record-grid-action-bar .mud-button-root {
            min-height: var(--density-touch-target);
        }

        .standard-data-grid .mud-table-head .mud-table-cell.standard-grid-record-action-header,
        .standard-data-grid .mud-table-body .mud-table-cell.standard-grid-record-action-cell {
            width: 3rem;
            min-width: 3rem;
            max-width: 3rem;
            padding-inline: 0.125rem;
        }

        .standard-data-grid .mud-table-head .mud-table-cell.standard-grid-record-action-header.standard-grid-record-actions-has-edit,
        .standard-data-grid .mud-table-body .mud-table-cell.standard-grid-record-action-cell.standard-grid-record-actions-has-edit {
            width: 5.875rem;
            min-width: 5.875rem;
            max-width: 5.875rem;
        }

        .standard-data-grid .standard-grid-record-action {
            width: 2.75rem;
            min-width: 2.75rem;
            height: 2.75rem;
            min-height: 2.75rem;
        }

        .standard-data-grid .standard-grid-edit-action {
            display: inline-flex;
        }
    }

    @media (max-width: 480px) {
        .standard-data-grid .mud-table-cell {
            padding: var(--space-1) var(--space-2);
            font-size: var(--text-xs);
        }
    }

html:not(.dark-mode) .mud-alert-text-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
    border-left: 3px solid var(--color-success);
}

html:not(.dark-mode) .mud-alert-text-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
    border-left: 3px solid var(--color-info);
}

html:not(.dark-mode) .mud-alert-text-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
    border-left: 3px solid var(--color-warning);
}

html:not(.dark-mode) .mud-alert-text-error {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
    border-left: 3px solid var(--color-error);
}

html:not(.dark-mode) .mud-alert-text-success .mud-alert-icon { color: var(--color-success-dark); }
html:not(.dark-mode) .mud-alert-text-info .mud-alert-icon { color: var(--color-info-dark); }
html:not(.dark-mode) .mud-alert-text-warning .mud-alert-icon { color: var(--color-warning-dark); }
html:not(.dark-mode) .mud-alert-text-error .mud-alert-icon { color: var(--color-error-dark); }
}

.nts-menu-danger,
.nts-menu-danger .mud-icon-root {
    color: var(--color-error);
}



.loading-fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--bg-surface);
}

.loading-fullscreen-content {
    text-align: center;
}

.loading-fullscreen-icon {
    width: 64px;
    height: auto;
    margin-bottom: 1rem;
}

.loading-fullscreen-message {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.error-boundary-page {
    background: var(--color-error-light);
}

.error-boundary-icon {
    color: var(--color-error);
}

.error-boundary-title {
    color: var(--color-error);
}

.error-details-container {
    margin: 1rem 0 2rem;
    text-align: left;
    max-width: 600px;
    width: 100%;
}

.error-details-summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 500;
}

.error-details-content {
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow: auto;
    max-height: 200px;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.warning-boundary-page {
    background: var(--color-warning-light);
}

.warning-boundary-icon {
    font-size: 4rem;
}

.warning-boundary-title {
    color: var(--color-warning);
}

.error-alert-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.skeleton-form.report-filter-initialization-skeleton {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .skeleton-form.report-filter-initialization-skeleton {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .skeleton-form.report-filter-initialization-skeleton {
        grid-template-columns: 1fr;
    }
}

.skeleton-form-field {
    display: flex;
    flex-direction: column;
}

.skeleton-form-label {
    width: 80px;
    margin-bottom: 8px;
}

.skeleton-form-input {
    height: 40px;
    width: 100%;
}

.skeleton-text-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.skeleton-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.skeleton-stats-card {
    height: 100px;
}

.loading-state-wrapper {
    min-height: 200px;
}

.loading-state-content,
.error-state-content,
.empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2rem;
}

.empty-state-content {
    text-align: center;
}

.loading-state-text {
    color: var(--text-secondary);
}

.error-alert-wrapper {
    max-width: 600px;
}

.metric-action-btn {
    font-size: var(--text-xs, 0.75rem);
    padding: 2px 8px;
    min-width: auto;
}


@layer components {
    .district-filter-loading {
        margin-bottom: var(--space-2);
    }

    .district-filter-layout {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .district-filter-tree {
        flex: 1 1 20rem;
        min-width: 20rem;
        max-width: 28rem;
    }

    .district-jurisdiction-grid {
        display: flex;
        flex: 2 1 20rem;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-3) var(--space-4);
        min-width: 20rem;
    }

    .district-jurisdiction-field {
        flex: 0 1 var(--field-width-medium);
        width: var(--field-width-medium);
        max-width: 100%;
        min-width: 0;
    }

    /* Contract: JurisdictionSearchField remains one medium-width flow item while its paired
       Missing toggle and select stack vertically inside the shared component. */
    .jurisdiction-search-field-layout {
        flex-direction: column;
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .jurisdiction-search-field-layout > .district-field-labelrow {
        width: 100%;
        max-width: 100%;
    }

    .district-tree-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
        min-height: var(--density-input-height);
        margin-bottom: var(--space-1);
    }
}

.election-district-tree-container {
    max-height: var(--election-district-tree-max-height, 200px);
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md);
    padding: 4px;
}


.document-viewer-centered {
    height: 100%;
}

.signature-display-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


.pivot-table-container {
    --pivot-toolbar-button-min-width: var(--density-row-height);
    --pivot-drop-zone-min-height: calc(var(--density-button-height) + var(--space-5));
    --pivot-drop-zone-padding: var(--space-3);
    --pivot-drop-zone-border-width: calc(var(--space-1) / 2);
    --pivot-drop-zone-gap: var(--space-2);
    --pivot-available-zone-min-height: 12.5rem;
    --pivot-config-zone-min-height: var(--space-12);
    --pivot-filter-indicator-offset: calc(var(--space-1) / 2);
    --pivot-filter-indicator-size: var(--space-2);
    --pivot-fade-offset: var(--space-1);
    --pivot-radio-indent: var(--space-6);
    --pivot-grid-max-height: 31.25rem;
    --pivot-grid-cell-padding-y: calc(var(--space-3) / 2);
    --pivot-grid-cell-padding-x: var(--density-control-padding-x);
    --pivot-grid-total-border-width: calc(var(--space-1) / 2);
    container: pivot-table / inline-size;
    display: flex;
    flex-direction: column;
}

.pivot-toolbar {
    background-color: var(--mud-palette-surface);
    border-radius: var(--radius-md);
}

.pivot-toolbar-title,
.pivot-toolbar-actions {
    display: flex;
    align-items: center;
}

.pivot-toolbar-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pivot-toolbar-spacer {
    flex: 1 1 auto;
}

.pivot-toolbar-actions {
    flex: 0 0 auto;
    min-width: 0;
}

.pivot-toolbar .mud-button {
    min-width: var(--pivot-toolbar-button-min-width);
}

.pivot-record-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

@container pivot-table (max-width: 50rem) {
    .pivot-toolbar {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--density-touch-target);
        gap: var(--space-2);
        padding-block: var(--space-2);
    }

    .pivot-toolbar-title {
        flex: 1 1 100%;
    }

    .pivot-toolbar-spacer {
        display: none;
    }

    .pivot-toolbar-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: var(--space-1);
    }

    .pivot-top-grid > .mud-grid-item {
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
    }
}

.pivot-drop-container {
    flex: 1;
}

.drop-zone {
    min-height: var(--pivot-drop-zone-min-height);
    padding: var(--pivot-drop-zone-padding);
    border: var(--pivot-drop-zone-border-width) dashed var(--mud-palette-lines-default);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pivot-drop-zone-gap);
    align-content: flex-start;
    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal);
    position: relative;
}

.drop-zone.mud-drop-zone-can-drop,
.drop-zone:has(.mud-drop-item-preview-start) {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--pivot-row-color-rgb), 0.05);
}

.drop-zone[data-zone="Rows"].mud-drop-zone-can-drop {
    border-color: var(--pivot-row-color);
    background-color: rgba(var(--pivot-row-color-rgb), 0.08);
}

.drop-zone[data-zone="Columns"].mud-drop-zone-can-drop {
    border-color: var(--pivot-col-color);
    background-color: rgba(var(--pivot-col-color-rgb), 0.08);
}

.drop-zone[data-zone="Values"].mud-drop-zone-can-drop {
    border-color: var(--pivot-value-color);
    background-color: rgba(var(--pivot-value-color-rgb), 0.08);
}

.drop-zone[data-zone="Filters"].mud-drop-zone-can-drop {
    border-color: var(--pivot-filter-color);
    background-color: rgba(var(--pivot-filter-color-rgb), 0.08);
}

.available-zone {
    min-height: var(--pivot-available-zone-min-height);
}

.config-zone {
    min-height: var(--pivot-config-zone-min-height);
}

.pivot-field-chip {
    margin: 0;
    cursor: grab;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.pivot-field-chip:active,
.pivot-field-chip.dragging {
    cursor: grabbing;
    box-shadow: var(--shadow-md);
}

.pivot-field-chip.has-filter::after {
    content: "";
    position: absolute;
    top: var(--pivot-filter-indicator-offset);
    right: var(--pivot-filter-indicator-offset);
    width: var(--pivot-filter-indicator-size);
    height: var(--pivot-filter-indicator-size);
    background-color: var(--pivot-filter-color);
    border-radius: 50%;
}

.pivot-recomputing {
    position: relative;
    pointer-events: none;
}

.pivot-recomputing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pivot-recomputing-overlay);
    border-radius: var(--radius-md);
    z-index: 10;
}

.pivot-tab-content {
    animation: pivot-fade-in var(--transition-normal);
}

@keyframes pivot-fade-in {
    from { opacity: 0; transform: translateY(var(--pivot-fade-offset)); }
    to { opacity: 1; transform: translateY(0); }
}

.pivot-totals-settings .mud-radio-group {
    margin-left: var(--pivot-radio-indent);
}

/* Contract: config-zone cards stay dense, and a drop target must never clip its field
   chips or drag previews, so the shared card's overflow control is relaxed here. */
.pivot-config-row.nts-card,
.pivot-config-row .nts-card {
    overflow: visible;
}

.pivot-config-row.nts-card > .nts-card-header,
.pivot-config-row .nts-card-header {
    padding: var(--space-2) var(--space-3);
}

.pivot-config-row.nts-card > .nts-card-body,
.pivot-config-row .nts-card-body {
    padding: var(--space-2);
}

.pivot-grid-wrapper {
    overflow: auto;
}

.pivot-grid {
    width: 100%;
}

@layer components {
    .pivot-grid tbody tr:nth-of-type(odd):not(.pivot-row-total) {
        background-color: var(--table-striped);
    }

    .pivot-grid tbody tr:nth-of-type(even):not(.pivot-row-total) {
        background-color: var(--bg-surface);
    }

    .pivot-grid tbody tr:hover:not(.pivot-row-total) {
        background-color: var(--table-hover);
    }
}

.pivot-grid-scroll {
    max-height: var(--pivot-grid-max-height);
}

.pivot-grid th, .pivot-grid td {
    text-align: center;
    padding: var(--pivot-grid-cell-padding-y) var(--pivot-grid-cell-padding-x);
    white-space: nowrap;
}

.pivot-grid .pivot-header-row {
    background-color: var(--color-primary-light);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0;
}

.pivot-grid .pivot-header-col {
    background-color: var(--bg-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0;
}

.pivot-grid .pivot-header-total {
    background-color: var(--color-info-light);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0;
}

.pivot-grid .pivot-row-label {
    background-color: var(--bg-muted);
    text-align: left;
    font-weight: 500;
}

.pivot-grid .pivot-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pivot-grid .pivot-cell-total {
    background-color: var(--bg-muted);
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pivot-row-total {
    background-color: var(--color-info-light);
    font-weight: 600;
}

.pivot-grid .pivot-cell-grand-total {
    background-color: var(--color-info-light);
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pivot-row-total td {
    border-top: var(--pivot-grid-total-border-width) solid var(--border-default);
}


.staffing-card {
    height: 100%;
}

.staffing-card-understaffed {
    border-left: 4px solid var(--color-alert);
    background-color: var(--color-alert-light);
    height: 100%;
}

.staffing-card-ok {
    border-left: 4px solid var(--color-primary);
    height: 100%;
}


.loading-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-secondary);
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.notice-type {
    font-weight: 600;
    color: var(--color-primary);
}

.status-history {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.status-history h5 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}


.document-annotation-viewer {
    background-color: var(--mud-palette-background-grey);
    min-width: 0;
}

.document-annotation-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--density-button-height);
    row-gap: var(--space-1);
}

.document-annotation-canvas-column {
    min-width: 0;
}

/* Contract: Fabric creates an internal wrapper around each interactive canvas. The application
   viewport uses a distinct shell so responsive geometry never mutates Fabric's logical coordinate
   surface; JS changes only the CSS display dimensions to fit this shell. */
.document-canvas-shell {
    width: 100%;
    max-width: var(--document-canvas-width, 100%);
    height: auto;
    aspect-ratio: var(--document-canvas-aspect-ratio, 1);
    background-color: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin-inline: auto;
}

.document-canvas-shell canvas,
.crop-preview-container canvas {
    background-color: var(--print-background);
}

.document-viewer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-white-rgb), 0.72);
}

.document-viewer-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.thumbnail-panel {
    height: var(--document-canvas-height, auto);
    overflow-y: auto;
    background-color: var(--mud-palette-surface);
}

.thumbnail-item {
    cursor: pointer;
    padding: 4px;
    margin-bottom: 4px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    position: relative;
    text-align: center;
}

.thumbnail-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.thumbnail-item.selected {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-lighten);
}

.thumbnail-item img {
    max-width: 100%;
    height: auto;
}

.thumbnail-item .page-number {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--annotation-page-number-bg);
    color: var(--text-inverse);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-size: 10px;
}

.signature-display, .signature-placeholder, .crop-preview-container {
    width: 100%;
    max-width: var(--signature-crop-preview-width, 100%);
    height: auto;
    aspect-ratio: var(--signature-crop-preview-aspect-ratio, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-inline: auto;
}

.signature-placeholder {
    color: var(--text-secondary);
}

.crop-preview-container {
    overflow: hidden;
    position: relative;
}



.nav-menu {
    height: 100%;
    background: var(--bg-sidebar);
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    min-height: 0;
    --nav-indent-item: 2.25rem;
    --nav-indent-group: 3rem;
    --nav-indent-child: 3.5rem;
    --nav-indent-grandchild: 4rem;
    --nav-indent-deep: 4.5rem;
    --nav-label-font-size: var(--text-sm);
}

.nav-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    padding: 0 var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-on-dark-subtle);
}

.sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--density-touch-target);
    height: var(--density-touch-target);
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md, 4px);
    background: transparent;
    color: var(--text-on-dark-strong);
    cursor: pointer;
}

.sidebar-close:hover {
    background: var(--surface-on-dark-rest);
}

.sidebar-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.brand-logo-img {
    height: 34px;
    width: auto;
    object-fit: contain;
    max-width: 172px;
}

.nav-list {
    list-style: none;
    padding: var(--space-2, 0.5rem);
    margin: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-on-dark-border) transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

.nav-list::-webkit-scrollbar {
    width: 6px;
}

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

.nav-list::-webkit-scrollbar-thumb {
    background: var(--surface-on-dark-border);
    border-radius: 3px;
}

.nav-list::-webkit-scrollbar-thumb:hover {
    background: var(--surface-on-dark-border-hover);
}

.nav-section {
    min-height: 40px;
    padding: 0;
    font-size: var(--nav-label-font-size);
    color: var(--text-on-dark-subtle);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    margin-top: var(--space-1, 0.25rem);
    border-radius: var(--radius-sm, 3px);
    position: relative;
    min-width: 0;
}

.nav-expander {
    appearance: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.nav-expander:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 3px);
}

.nav-section-expander {
    min-height: 40px;
    padding: 0 var(--space-2, 0.5rem);
    gap: var(--space-2, 0.5rem);
}

.nav-section::before {
    content: none;
}

.nav-section:hover {
    background: var(--surface-on-dark-faint);
    color: var(--text-on-dark-strong);
}

.nav-section.expanded {
    color: var(--text-on-dark-strong);
    background: var(--surface-on-dark-faint);
}

.nav-section.expanded .section-icon {
    color: var(--text-on-dark-strong);
    opacity: 1;
}

.section-toggle {
    order: 3;
    margin-left: auto;
    font-size: 0.625rem;
    opacity: 0.7;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
    display: inline-block;
}

.nav-section.expanded .section-toggle {
    opacity: 1;
}

.nav-section:hover .section-toggle {
    opacity: 1;
}

.section-icon {
    order: 1;
    opacity: 0.8;
    flex-shrink: 0;
    width: 20px;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.nav-section:hover .section-icon {
    opacity: 1;
}

.section-text {
    order: 2;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item {
    margin: 0;
}

.nav-item-icon {
    opacity: 0.8;
    flex-shrink: 0;
}

.nav-subsection {
    min-height: 32px;
    padding: 0;
    font-size: var(--nav-label-font-size);
    color: var(--text-on-dark-muted);
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    transition: background 0.15s ease, color 0.15s ease;
    border-radius: var(--radius-sm, 3px);
    min-width: 0;
    position: relative;
}

.nav-subsection-expander {
    min-height: 32px;
    padding: 0 var(--space-2, 0.5rem) 0 var(--nav-indent-group);
    gap: var(--space-2, 0.5rem);
}

.nav-subsection:hover {
    background: var(--surface-on-dark-faint);
    color: var(--text-on-dark);
}

.nav-subsection.expanded {
    color: var(--text-on-dark);
    background: var(--surface-on-dark-faint);
}

.subsection-toggle {
    order: 2;
    margin-left: auto;
    font-size: 0.625rem;
    opacity: 0.6;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.nav-subsection:hover .subsection-toggle,
.nav-subsection.expanded .subsection-toggle {
    opacity: 1;
}

.subsection-label {
    order: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-subsection.nav-subsection-nested {
    padding-left: 0;
}

.nav-subsection.nav-subsection-nested-deep {
    padding-left: 0;
}

.nav-subsection-nested .nav-subsection-expander {
    padding-left: var(--nav-indent-child);
}

.nav-subsection-nested-deep .nav-subsection-expander {
    padding-left: var(--nav-indent-grandchild);
}

.nav-separator {
    list-style: none;
    height: 0;
    margin: var(--space-2, 0.5rem) var(--space-4, 1rem) var(--space-1, 0.25rem) var(--nav-indent-group);
    border-top: 1px solid var(--border-on-dark-subtle);
}

.nav-link {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0 var(--space-2, 0.5rem);
    padding-left: var(--nav-indent-item);
    color: var(--text-on-dark-subtle);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    border-radius: var(--radius-sm, 3px);
    border-left: 3px solid transparent;
    font-size: var(--nav-label-font-size);
    position: relative;
    min-width: 0;
}

.nav-link::before {
    content: none;
}

.nav-link.nav-link-l2 {
    min-height: 32px;
    padding-left: var(--nav-indent-child);
}

.nav-link.nav-link-l3 {
    min-height: 32px;
    padding-left: var(--nav-indent-grandchild);
}

.nav-link.nav-link-l4 {
    min-height: 32px;
    padding-left: var(--nav-indent-deep);
}

.nav-link:hover {
    background: var(--surface-on-dark-faint);
    color: var(--text-on-dark-strong);
    border-left-color: transparent;
}

.nav-link.active {
    background: var(--surface-on-dark-rest);
    color: var(--text-on-dark-strong);
    font-weight: 600;
    border-left-color: transparent;
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.nav-link.active::before {
    content: none;
}

/* Contract: A section with a landing page uses two independent controls: the flexible
   label/icon link and the disclosure-only chevron. This keeps the familiar
   section-row geometry without combining navigation and expansion in one hit target. */
.nav-expander-split {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.nav-expander-split > .nav-expander-landing {
    min-width: 0;
    min-height: 40px;
    flex: 1 1 auto;
    padding: 0 var(--space-2, 0.5rem);
}

.nav-expander-split > .nav-expander-landing:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.nav-expander-split > .nav-expander-toggle-only {
    width: 40px;
    min-width: 40px;
    flex: 0 0 40px;
    justify-content: center;
    padding: 0;
    gap: 0;
}

.nav-expander-toggle-only .section-toggle,
.nav-expander-toggle-only .subsection-toggle {
    order: initial;
    width: 16px;
    margin-left: 0;
}

.nav-text {
    font-size: inherit;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .sidebar-close {
        display: inline-flex;
    }
}

@media (max-width: 960px), (pointer: coarse) {
    .nav-section,
    .nav-section-expander,
    .nav-subsection,
    .nav-subsection-expander,
    .nav-link,
    .nav-link.nav-link-l2,
    .nav-link.nav-link-l3,
    .nav-link.nav-link-l4 {
        min-height: var(--density-touch-target);
    }

    .nav-expander-split > .nav-expander-toggle-only {
        width: var(--density-touch-target);
        min-width: var(--density-touch-target);
        flex-basis: var(--density-touch-target);
    }
}

.enr-maintenance-page {
    --enr-columns-gap: var(--space-4);
    --enr-tree-indent: var(--space-5);
    --enr-tree-expander-width: var(--space-4);
    --enr-tree-row-padding-y: var(--space-1);
}

.fill-height-page.enr-maintenance-page {
    padding: 0;
}

.fill-height-page.enr-maintenance-page > .loading-state-wrapper {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fill-height-page.enr-maintenance-page > .loading-state-wrapper > .enr-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

.fill-height-page.enr-maintenance-page > .loading-state-wrapper > .mud-paper {
    flex: 0 0 auto;
}

.enr-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--enr-columns-gap);
    align-items: stretch;
    height: 100%;
    min-height: 0;
}

.enr-columns > .form-section {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.enr-columns > .form-section > .form-section-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
}

.enr-grid tr.added,
.enr-grid tr.added > .mud-table-cell,
.enr-grid tr.added td {
    background-color: var(--diff-added);
}

.enr-grid tr.removed,
.enr-grid tr.removed > .mud-table-cell,
.enr-grid tr.removed td {
    background-color: var(--diff-removed);
}

.jurisdiction-tree {
    font-size: var(--text-sm);
}

.tree-town, .tree-ward, .tree-district {
    padding: var(--enr-tree-row-padding-y) 0;
}

.tree-ward {
    margin-left: var(--enr-tree-indent);
}

.tree-district {
    margin-left: calc(var(--enr-tree-indent) + var(--enr-tree-indent));
}

.tree-expander {
    cursor: pointer;
    display: inline-block;
    width: var(--enr-tree-expander-width);
    user-select: none;
}

.tree-expander:hover {
    color: var(--mud-palette-primary);
}

@media (max-width: 1200px) {
    .fill-height-page.enr-maintenance-page > .loading-state-wrapper,
    .fill-height-page.enr-maintenance-page > .loading-state-wrapper > .enr-content {
        overflow: visible;
    }

    .enr-columns {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }
}

.mail-check-table .mud-table-cell {
    font-family: var(--font-sans);
    font-size: 10pt;
}

.logout-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sidebar);
    padding: 1rem;
}

.logout-container {
    width: 100%;
    max-width: 420px;
}

.logout-card {
    padding: 3rem 2rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-surface);
    text-align: center;
}

.logout-icon {
    margin-bottom: 1rem;
}

.logout-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.logout-message {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.removed-row td {
    color: var(--color-error);
}

.removed-row .mud-checkbox-true svg {
    fill: var(--color-error);
}


/* Send Queue Status page layout (APEXPLUS-86)
   article.content normally scrolls (MainLayout: flex:1 overflow-y:auto). Disable
   that for this page; the page itself fills the available height and the status
   grid scrolls internally. */
main:has(.send-queue-page),
.content:has(.send-queue-page) {
    overflow: hidden;
}

/* Contract: ApexPlusLayout.initFillHeight in app.js measures this page to the footer; short windows scroll inside that height. */
.send-queue-page {
    --queue-filter-narrow-width: 12rem;
    --queue-filter-medium-width: 15rem;
    --queue-header-action-width: 16rem;
    --queue-header-state-width: 12.5rem;
    --queue-status-grid-min-height: 22rem;
    --queue-detail-tabs-height: 30rem;

    height: var(--apex-fill-height, auto);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 var(--layout-padding);
}

@layer overrides {
    .clearable-grow-fix {
        --clearable-icon-button-size: var(--space-5);
        --clearable-icon-size: var(--space-4);
    }

    .clearable-grow-fix .mud-input-adornment,
    .clearable-grow-fix .mud-picker .mud-input-adornment {
        margin: 0;
        padding: 0;
        align-self: center;
    }

    .clearable-grow-fix .mud-input-adornment .mud-icon-button,
    .clearable-grow-fix .mud-picker .mud-input-adornment .mud-icon-button {
        width: var(--clearable-icon-button-size);
        height: var(--clearable-icon-button-size);
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .clearable-grow-fix .mud-input-adornment .mud-icon-root {
        font-size: var(--clearable-icon-size);
        width: var(--clearable-icon-size);
        height: var(--clearable-icon-size);
    }

}

.send-queue-page .entries-header .form-section-header {
    justify-content: flex-start;
}

.send-queue-page .entries-header .form-section-header-actions {
    margin-left: var(--space-6);
}

.send-queue-page .entries-header .entries-header-fields {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.queue-filter-narrow {
    flex: 0 1 var(--queue-filter-narrow-width);
    min-width: min(100%, var(--queue-filter-narrow-width));
    max-width: var(--queue-filter-narrow-width);
}

.queue-filter-medium {
    flex: 0 1 var(--queue-filter-medium-width);
    min-width: min(100%, var(--queue-filter-medium-width));
    max-width: var(--queue-filter-medium-width);
}

.queue-detail-item {
    max-width: var(--queue-filter-medium-width);
}

.queue-header-field {
    flex: 0 1 var(--queue-header-field-width);
    min-width: min(100%, var(--queue-header-field-width));
    max-width: var(--queue-header-field-width);
}

.queue-header-field-action {
    --queue-header-field-width: var(--queue-header-action-width);
}

.queue-header-field-state {
    --queue-header-field-width: var(--queue-header-state-width);
}

.queue-number-cell {
    text-align: right;
}

.send-queue-page .recovery-actions {
    gap: var(--space-2);
}

.send-queue-page .entries-grid .mud-table-container {
    max-height: 360px;
    overflow-y: auto;
}

.send-queue-page.page-detail {
    overflow-y: auto;
}

.send-queue-page.page-detail > .form-section:last-of-type {
    flex: 0 0 auto;
    overflow: visible;
}

.send-queue-page.page-detail > .form-section:last-of-type > .form-section-body {
    overflow: visible;
}

.send-queue-page.page-detail .send-queue-detail-tabs {
    height: var(--queue-detail-tabs-height);
    min-height: 0;
    flex: 0 0 auto;
}

.auto-refresh-card {
    --auto-refresh-paper-padding-y: var(--space-1);
    --auto-refresh-spinner-width: 5.625rem;
    --auto-refresh-spin-button-height: var(--text-sm);
    --auto-refresh-spin-button-width: var(--space-5);
    --auto-refresh-icon-size: var(--text-sm);

    margin-top: var(--space-1);
}

@media (any-pointer: coarse), (max-width: 600px) {
    .auto-refresh-card {
        --auto-refresh-spin-button-height: calc(var(--density-touch-target) / 2);
    }
}

.auto-refresh-card > .nts-card-body {
    padding: var(--auto-refresh-paper-padding-y) var(--space-3);
}

.auto-refresh-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.auto-refresh-main,
.auto-refresh-interval {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.auto-refresh-bar > *,
.auto-refresh-main > *,
.auto-refresh-interval > * {
    flex-shrink: 0;
    align-self: center;
}

.auto-refresh-bar .filter-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.auto-refresh-bar .auto-refresh-last-refreshed {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
}

.auto-refresh-bar .autorefresh-spinner {
    width: var(--auto-refresh-spinner-width);
}

.auto-refresh-bar .autorefresh-spinner .mud-input-numeric-spin button {
    height: var(--auto-refresh-spin-button-height);
    min-height: var(--auto-refresh-spin-button-height);
    width: var(--auto-refresh-spin-button-width);
    min-width: var(--auto-refresh-spin-button-width);
    padding: 0;
    margin: 0;
    line-height: 1;
}

.auto-refresh-bar .autorefresh-spinner .mud-input-numeric-spin button .mud-icon-root {
    font-size: var(--auto-refresh-icon-size);
    width: var(--auto-refresh-icon-size);
    height: var(--auto-refresh-icon-size);
}

.auto-refresh-bar .mud-button-root:not(.mud-icon-button) {
    line-height: 1;
}

@media (max-width: 1100px) {
    .auto-refresh-bar {
        flex-wrap: wrap;
        white-space: normal;
    }

    .auto-refresh-bar .auto-refresh-last-refreshed {
        flex-basis: 100%;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .auto-refresh-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        white-space: normal;
    }

    .auto-refresh-main,
    .auto-refresh-countdown,
    .auto-refresh-interval,
    .auto-refresh-last-refreshed {
        grid-column: 1 / -1;
    }

    .auto-refresh-main,
    .auto-refresh-interval {
        flex-wrap: wrap;
    }

    .auto-refresh-separator,
    .auto-refresh-bar .filter-spacer {
        display: none;
    }
}

.send-queue-page > * {
    flex: 0 0 auto;
}

.send-queue-page > .form-section:last-of-type {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.send-queue-page > .form-section:last-of-type > .form-section-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.send-queue-grid-container {
    flex: 1 1 0%;
    min-height: var(--queue-status-grid-min-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.send-queue-grid-container > .standard-data-grid,
.send-queue-grid-container > .standard-data-grid > .mud-data-grid {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.send-queue-grid-container > .standard-data-grid > .mud-data-grid {
    height: auto;
}

main:has(.fill-height-page),
.content:has(.fill-height-page) {
    overflow: hidden;
}

.fill-height-page {
    --fill-grid-min-height: 22rem;
    --fill-grid-sticky-offset: 4.5rem;
    --fill-edit-max-height: 50%;
    --fill-section-header-padding-y: var(--space-3);
    --fill-section-body-padding-y: var(--space-2);
    --fill-section-icon-size: var(--space-8);
    --fill-grid-toolbar-gap: var(--space-1);

    height: var(--apex-fill-height, auto);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.fill-height-page > * {
    flex: 0 0 auto;
}

.fill-height-page > .fill-section .form-section-header {
    padding-top: var(--fill-section-header-padding-y);
    padding-bottom: var(--fill-section-header-padding-y);
}

.fill-height-page > .fill-section .form-section-icon {
    width: var(--fill-section-icon-size);
    height: var(--fill-section-icon-size);
}

.fill-height-page > .fill-section {
    flex: 1 1 0%;
    min-height: var(--fill-grid-min-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fill-height-page > .fill-section > .form-section-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: var(--fill-section-body-padding-y);
    padding-bottom: var(--fill-section-body-padding-y);
}

.fill-height-page .fill-section .standard-grid-toolbar {
    margin-bottom: var(--fill-grid-toolbar-gap);
}

.fill-height-page .fill-section .loading-state-wrapper,
.fill-height-page .fill-section .standard-data-grid {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fill-height-page .fill-section .standard-data-grid > .mud-data-grid {
    flex: 1 1 0%;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

.fill-height-page .fill-section .mud-table-container {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
}

.fill-height-page .fill-section .fixed-header-grid .mud-table-container {
    scroll-padding-top: var(--fill-grid-sticky-offset);
}

.fill-height-page .fill-section .fixed-header-grid .mud-data-grid .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 3;
}

.fill-height-page .fill-section .fixed-header-grid .mud-data-grid .mud-table-head .mud-table-cell {
    position: static;
    top: auto;
}

.fill-height-page .fill-section .fixed-header-grid .mud-data-grid .mud-table-body .mud-table-cell,
.fill-height-page .fill-section .fixed-header-grid .mud-data-grid .mud-table-body .mud-table-row {
    scroll-margin-top: var(--fill-grid-sticky-offset);
}

.fill-height-page .fill-section .standard-data-grid + .mud-typography {
    flex: 0 0 auto;
}

.fill-height-page > .edit-section {
    flex: 0 0 auto;
    min-height: 0;
    max-height: var(--fill-edit-max-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fill-height-page > .edit-section > .form-section-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fill-height-page > .edit-section > .form-section-body > .form-standard {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Contract: MudGrid percentage columns plus .form-section column-gap exceed 100%; keep column-gap zero and rely on item padding. */
/* APEXPLUS-206: editor grids use MudGrid percentage columns (sm-6, sm-4, ...) for side-by-side
   fields. The .form-section column-gap is additive on top of the 50%/33% flex-basis, so
   50% + gap + 50% exceeds 100% and the second column wraps onto its own line (fields appear
   stacked). Drop the column-gap here so the columns fit; MudGrid's native item padding still
   spaces them. Vertical row-gap is left intact. */
.edit-section .mud-grid {
    column-gap: 0;
}

.send-queue-page .send-queue-detail-tabs {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.send-queue-page .send-queue-detail-tabs .mud-tabs-panels {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.send-queue-page .send-queue-detail-tabs .mud-tabs-panels > * {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
}

.send-queue-page .send-queue-detail-pre {
    height: 100%;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    padding: var(--space-3);
    background: var(--mud-palette-background-grey);
}

.queue-detail-pre-break-all {
    word-break: break-all;
}

.queue-detail-pre-break-word {
    word-break: break-word;
}

.petition-objection-filter-list {
    height: 150px;
    overflow-y: auto;
}

.pollbook-election-select {
    max-width: 400px;
}

.pollbook-signature-files {
    max-height: 200px;
    overflow-y: auto;
}

.image-processing-col-filters {
    width: 5rem;
}

.image-processing-col-modified,
.image-processing-col-actions {
    width: 7rem;
}

.image-processing-page-list {
    max-height: 14rem;
    overflow: auto;
}

.workqueue-document-toolbar {
    flex-wrap: wrap;
    gap: var(--space-xs);
    height: auto;
    min-height: 44px;
}

.workqueue-document-toolbar-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

.workqueue-document-toolbar-spacer {
    flex: 1 1 auto;
}

.workqueue-document-toolbar .mud-button-group-root {
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .workqueue-document-toolbar-spacer {
        display: none;
    }
}

.primary-district-empty-state {
    min-height: 200px;
}

.voter-vic-preview-panel {
    height: 100%;
    min-height: 500px;
}

.voter-vic-empty-preview {
    height: 300px;
}

.evr-voter-search-button {
    height: 40px;
}

.ballot-exceptions-list {
    max-height: 150px;
    overflow-y: auto;
}

.progress-full {
    width: 100%;
}

.progress-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.progress {
    flex: 1 1 auto;
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
}

.progress-bar {
    width: var(--apex-progress-value, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.progress-text {
    min-width: 12rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.ballot-portal-loading-panel {
    min-height: 200px;
}

.otc-signature-panel {
    min-height: 110px;
}

.otc-signature-empty {
    height: 100px;
}

.otc-success-icon {
    font-size: 48px;
}

.ballot-label-preview-scroll {
    max-height: 600px;
    overflow-y: auto;
}

.ballot-label-preview-card {
    border: 1px dashed var(--border-default);
    background: var(--bg-muted);
}

.ballot-label-barcode-card {
    background: var(--bg-surface);
}

.ballot-label-barcode {
    font-family: 'Libre Barcode 39', var(--font-mono);
    font-size: 24px;
}

.ballot-label-barcode-text {
    font-size: 8px;
}

.polling-place-report-checklist {
    --polling-place-report-checklist-max-height: calc(
        var(--density-row-height) + var(--density-row-height) + var(--density-row-height) + var(--density-row-height) +
        var(--density-row-height) + var(--density-row-height) + var(--density-row-height) + var(--density-row-height) +
        var(--space-3)
    );
    max-height: var(--polling-place-report-checklist-max-height);
    overflow-y: auto;
}


tr.row-state-error,
tr.row-state-error td,
tr.row-state-error td *,
tr.row-state-error .mud-table-cell,
tr.row-state-error .mud-table-cell * {
    color: var(--queue-state-error);
    font-weight: 600;
}

tr.row-state-queued,
tr.row-state-queued td,
tr.row-state-queued td *,
tr.row-state-queued .mud-table-cell,
tr.row-state-queued .mud-table-cell * {
    color: var(--queue-state-queued);
    font-weight: 600;
}

tr.row-state-atstate,
tr.row-state-atstate td,
tr.row-state-atstate td *,
tr.row-state-atstate .mud-table-cell,
tr.row-state-atstate .mud-table-cell * {
    color: var(--queue-state-at-state);
    font-weight: 600;
}

tr.row-state-processing,
tr.row-state-processing td,
tr.row-state-processing td *,
tr.row-state-processing .mud-table-cell,
tr.row-state-processing .mud-table-cell * {
    color: var(--queue-state-processing);
    font-weight: 600;
}



.dashboard-skeleton-tabs {
    overflow: hidden;
}

.dashboard-tab-content .mud-paper > .mud-simple-table,
.dashboard-tab-content .mud-paper > .mud-table {
    margin-bottom: 0;
}

.dashboard-tab-content .mud-paper {
    height: auto;
    min-height: auto;
}

article.content .dashboard-tab-content .mud-table-container {
    min-height: auto;
}

.content:has(.dashboard-shell) {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 0;
    scroll-padding-bottom: 0;
}

/* Contract: the shell already stretches to the footer, but as a block its children stacked from
   the top and left the slack as dead space. As a column the tab card takes the slack, so content
   grows into the window and the status strip docks at the bottom. */
.dashboard-shell {
    container: dashboard-shell / inline-size;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.dashboard-page-header {
    margin-bottom: var(--space-4);
}

.dashboard-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Contract: one docked strip holding refresh, support and status — not three stacked bands. */
.dashboard-operations {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.dashboard-operations .dashboard-contact-footer {
    margin-top: 0;
    padding: var(--space-1) var(--space-3);
}

.dashboard-operations .auto-refresh-card {
    margin-top: 0;
}

.dashboard-shell > .dashboard-tabs {
    flex: 1 1 auto;
    min-height: 0;
}

/* Contract: the stretch must reach the panel holding the tab content, or the card grows while its
   contents stay pinned to the top of a tall empty box. */
.dashboard-shell > .dashboard-tabs .mud-tabs-panels,
.dashboard-shell > .dashboard-tabs .mud-tabs-panel,
.dashboard-shell > .dashboard-tabs .dashboard-tab-content {
    height: 100%;
    min-height: 0;
}

.dashboard-tabs {
    min-width: 0;
    margin-bottom: var(--space-4);
    overflow: hidden;
    background: var(--bg-panel-surface);
    border: 1px solid var(--border-surface);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-tabs .mud-tabs-tabbar {
    min-width: 0;
    background: var(--bg-section-header);
    border-bottom: 1px solid var(--border-divider);
}

.dashboard-tabs .mud-tabs-tabbar-wrapper {
    min-width: 0;
}

.dashboard-tabs .mud-tab {
    min-width: 0;
    min-height: 2.75rem;
    padding-inline: var(--space-3);
    white-space: nowrap;
}

.dashboard-tabs .mud-tab .mud-icon-root {
    margin-right: var(--space-1);
}

.dashboard-tabs .mud-tab.mud-tab-active {
    background: var(--bg-panel-surface);
}

.dashboard-tabs .mud-tabs-panels {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.dashboard-tab-content {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    max-width: none;
    padding: var(--space-4);
    background: var(--bg-panel-surface);
}

.dashboard-tab-content .mud-simple-table {
    margin: 0;
}

.dashboard-tab-content .mud-simple-table tbody tr:last-child td {
    border-bottom: none;
}

.dashboard-tab-content > .mud-container > .mud-paper,
.dashboard-tab-content > .mud-container > .mud-grid {
    flex-shrink: 0;
    flex-grow: 0;
}

.dashboard-tab-content > .mud-container > .mud-paper:not(.dashboard-card) {
    padding-bottom: var(--space-2);
}

.dashboard-tab-content .form-section:last-child,
.dashboard-tab-content .mud-grid:last-child {
    margin-bottom: 0;
}

.dashboard-tabs .dashboard-card {
    height: 100%;
}

.dashboard-tabs .dashboard-card .mud-divider {
    margin-block: var(--space-1);
}

.dashboard-contact-footer {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-panel-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-surface);
    box-shadow: var(--shadow-sm);
}

.dashboard-contact-footer .mud-link {
    font-weight: 500;
}

@container dashboard-shell (max-width: 52rem) {
    .dashboard-tabs .mud-tab {
        padding-inline: var(--space-2);
    }

    .dashboard-tab-content {
        padding: var(--space-3);
    }

    .dashboard-operations .auto-refresh-bar {
        flex-wrap: wrap;
        white-space: normal;
    }

    .dashboard-operations .auto-refresh-last-refreshed {
        flex-basis: 100%;
        text-align: left;
    }
}

@container dashboard-shell (max-width: 34rem) {
    .dashboard-header-actions,
    .dashboard-header-actions .mud-button {
        width: 100%;
    }

    .dashboard-header-actions .mud-button {
        flex: 1 1 100%;
    }

    .dashboard-contact-footer {
        padding-inline: var(--space-3);
    }
}

.news-feed-title-link {
    display: inline-block;
    max-width: min(44rem, 100%);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: var(--leading-normal);
}

.stat-card[onclick],
.stat-card:has([onclick]) {
    cursor: pointer;
}

.vh-100 {
    height: 100vh;
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}



.loading-container-min-300 {
    min-height: 300px;
}


.document-scroll-70vh {
    max-height: 70vh;
}

.full-document-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.scan-empty-icon {
    font-size: 64px;
}

.validation-list {
    list-style: disc;
    margin: 0;
}

.acceptable-use-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-left: 1.2rem;
}

.folder-list-container {
    max-height: 250px;
}

.inactive-label {
    font-size: 0.8em;
    color: var(--text-muted);
}

.signature-thumbnail {
    max-width: 300px;
    max-height: 100px;
    object-fit: contain;
}

.signature-selection-intro {
    font-weight: var(--font-weight-bold);
}

.signature-selection-state-lg {
    min-height: 300px;
}

.signature-selection-state-md {
    min-height: 200px;
}

.signature-selection-table {
    max-height: 400px;
    overflow-y: auto;
}

.signature-selection-col-select,
.signature-selection-col-current {
    width: 120px;
}

.signature-selection-col-image {
    width: 350px;
}

.signature-selection-cell {
    height: 64px;
    vertical-align: middle;
}

.grid-toolbar-search-field {
    width: min(21.875rem, 100%);
    min-width: min(15.625rem, 100%);
}

.image-profile-filter-chain {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.image-profile-filter-row {
    display: grid;
    grid-template-columns: minmax(var(--space-8), auto) minmax(0, 1fr) minmax(var(--space-12), auto) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

.image-profile-filter-row:last-child {
    border-bottom: none;
}

.image-profile-filter-index {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.application-image-preview {
    max-width: 100%;
    height: auto;
    max-height: 150px;
}

.signature-container-bordered {
    border: 1px solid var(--border-default);
    min-height: 80px;
    background: var(--bg-surface);
}


.config-card {
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    height: 100%;
}

.config-card.nts-card:hover {
    box-shadow: var(--shadow-lg);
}

.config-card.nts-card .nts-card-body {
    padding: var(--space-5);
}


.scrollable-150 {
    max-height: 150px;
    overflow-y: auto;
}

.scrollable-200 {
    max-height: 200px;
    overflow-y: auto;
}

.scrollable-300 {
    max-height: 300px;
    overflow-y: auto;
}

.scrollable-400 {
    max-height: 400px;
    overflow-y: auto;
}

.flex-grow {
    flex-grow: 1;
}


.col-w-60 {
    width: 60px;
}

.col-w-100 {
    width: 100px;
}

.col-w-130 {
    width: 130px;
    min-width: 130px;
    flex: 0 0 130px;
}

.d-flex.flex-row.justify-space-between {
    flex-wrap: wrap;
}

.d-flex.flex-row > .mud-typography.mud-typography-subtitle1,
.d-flex.flex-row > .mud-typography.mud-typography-subtitle2,
.d-flex.flex-row > .mud-typography.mud-typography-caption {
    flex: 0 0 auto;
    min-width: max-content;
}

.mud-chip.nts-status-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.mud-chip.nts-status-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.mud-chip.nts-status-error {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.mud-chip.nts-status-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.mud-chip.nts-status-primary {
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
}

.mud-chip.nts-status-neutral {
    background-color: var(--bg-muted);
    color: var(--text-secondary);
}

.mud-chip.nts-status-tertiary {
    background-color: var(--color-tertiary-light);
    color: var(--color-tertiary);
}

/* Contract: MudBlazor textarea is .mud-input-slot; this scoped selector must outrank the single-line rule without affecting inputs. */
.form-standard :is(.mud-input-control, .mud-input-outlined) textarea.mud-input-slot {
    min-height: 64px;
    max-height: 96px;
    height: auto;
    overflow-y: auto;
    align-self: stretch;
    padding-top: 8px;
}

.form-standard input,
.form-standard textarea {
    font-size: 0.875rem;
}

.form-standard div.mud-input.mud-select-input {
    font-size: 0.875rem;
    line-height: normal;
    display: flex;
    align-items: center;
    height: var(--density-input-height);
    min-height: var(--density-input-height);
    max-height: var(--density-input-height);
}

.form-standard .mud-input-label,
.form-standard .mud-input-label-inputcontrol {
    font-size: 0.875rem;
}

.form-standard .mud-paper .mud-typography-subtitle2 {
    font-size: 0.875rem;
}

.form-standard .mud-input-helper-text {
    font-size: 0.75rem;
}

.form-standard .mud-checkbox .mud-button-root.mud-icon-button {
    padding: 4px;
}

/* Contract: Reserve two label lines only in StandardMaintenanceLayout's .edit-section .form-standard; broader scope regresses compact forms. */
.edit-section .form-standard .nts-field-label {
    min-height: calc(1.3em * 2);
}

.code-block {
    background-color: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    overflow-x: auto;
    margin: 0;
}

.monospace-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.error-stack-trace {
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
}

.error-stack-trace--outer {
    max-height: 400px;
}

.error-stack-trace--inner {
    max-height: 300px;
}

/* Contract: reparentToInputContainer in app.js moves the toggle into the input; trailing padding prevents text overlap. */
@layer overrides {
    .password-input-control .mud-input-control-input-container {
        position: relative;
    }

    .password-input-control .password-toggle-btn {
        position: absolute;
        right: var(--password-toggle-offset-x);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        color: var(--mud-palette-text-secondary, var(--text-secondary));
    }

    .password-input-field .mud-input-slot {
        padding-right: var(--password-toggle-width);
        padding-inline-end: var(--password-toggle-width);
    }
}

@layer components {

.signature-edit-placeholder {
    height: 350px;
}

.signature-edit-container {
    position: relative;
    display: inline-block;
    cursor: var(--signature-edit-cursor, default);
    background: var(--print-background);
}

.signature-canvas {
    border: 1px solid var(--border-default);
    background: var(--print-background);
}

.signature-edit-selection,
.signature-selection-overlay {
    position: absolute;
    left: var(--selection-left, 0);
    top: var(--selection-top, 0);
    width: var(--selection-width, 0);
    height: var(--selection-height, 0);
    pointer-events: none;
}

.signature-edit-selection {
    border: 2px dashed var(--selection-border-color, var(--color-info));
    background: var(--signature-selection-bg);
}

.signature-selection-overlay {
    border: 2px dashed var(--color-info);
    background: var(--color-info-light);
    opacity: 0.5;
}

.signature-eraser-preview {
    position: absolute;
    left: var(--eraser-left, 0);
    top: var(--eraser-top, 0);
    width: var(--eraser-size, 0);
    height: var(--eraser-size, 0);
    border: 2px solid var(--eraser-border-color, var(--color-error));
    border-radius: 50%;
    pointer-events: none;
}

.signature-crop-placeholder {
    height: 400px;
}

.signature-crop-container {
    position: relative;
    overflow: auto;
    max-height: 450px;
    cursor: crosshair;
}

.annotation-zoom-target {
    transform: scale(var(--annotation-zoom, 1));
    transform-origin: top left;
}

.signature-preview-img {
    max-width: 100%;
    max-height: 100px;
}

.annotation-canvas-paper {
    overflow: auto;
}

.annotation-stage {
    position: relative;
    display: inline-block;
    cursor: var(--annotation-cursor, default);
}

.annotation-color-swatch {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-default);
    background-color: var(--annotation-color, var(--text-primary));
}

.annotation-color-swatch.selected {
    border-color: var(--text-primary);
}

.annotation-overlay-canvas,
.annotation-path-preview,
.annotation-text-overlay,
.annotation-image-overlay {
    position: absolute;
    pointer-events: none;
}

.annotation-overlay-canvas,
.annotation-path-preview {
    top: 0;
    left: 0;
    transform: scale(var(--annotation-zoom, 1));
    transform-origin: top left;
}

.annotation-path-preview {
    width: 100%;
    height: 100%;
}

.annotation-text-overlay {
    left: var(--annotation-left, 0);
    top: var(--annotation-top, 0);
    color: var(--annotation-color, var(--text-primary));
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    background: transparent;
    padding: 0;
    border: none;
    transform: scale(var(--annotation-zoom, 1));
    transform-origin: top left;
}

.annotation-text-overlay-stamp {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    background: rgba(var(--color-white-rgb), 0.9);
    padding: 4px 8px;
    border: 2px solid var(--annotation-color, var(--text-primary));
}

.annotation-image-overlay {
    left: var(--annotation-left, 0);
    top: var(--annotation-top, 0);
    width: var(--annotation-width, auto);
    height: var(--annotation-height, auto);
}

.annotation-placeholder-area {
    height: 500px;
}

.annotation-text-input-paper {
    min-width: 300px;
}

.pivot-filter-popover {
    min-width: 280px;
    max-width: 350px;
}

.pivot-filter-value-list {
    max-height: 250px;
    overflow-y: auto;
}

.document-list-panel {
    height: 600px;
    overflow-y: auto;
}

.document-page-thumbnail {
    cursor: pointer;
}

.document-viewer-empty {
    height: 400px;
    background: var(--bg-muted);
}

.document-signature-img {
    max-width: 100%;
}

.document-empty-panel {
    height: 400px;
}

.document-modal-panel {
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.mfa-code-input {
    letter-spacing: 0;
    text-align: center;
}

/* Contract: the identity gate is a credential surface, so it is the same narrow centred column as
   the password cards rather than a page-width panel. Sized here instead of at the call site because
   UI_STANDARD forbids pixel/width utility classes on a section - this replaces a max-w-400 utility
   and a misapplied nested-form-section modifier (APEXPLUS-348). */
.account-verify-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

/* Contract: Keep this username off-screen but discoverable so password managers recognize the verification card as a login form. */
.account-hidden-username {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}

.account-password-meta {
    white-space: nowrap;
}

.reports-filter-panel {
    position: sticky;
    top: var(--space-4);
}

.mfa-verify-button {
    white-space: nowrap;
    flex-shrink: 0;
}

.text-pre-wrap {
    white-space: pre-wrap;
}

.text-pre-line {
    white-space: pre-line;
}

.workqueue-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.workqueue-folder-tree,
.workqueue-folder-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.workqueue-folder-node {
    min-width: 0;
}

.workqueue-folder-button {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    min-height: var(--density-button-height);
    margin: 0;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.workqueue-folder-button:hover:not(:disabled) {
    background: var(--bg-muted);
}

.workqueue-folder-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.workqueue-folder-button .mud-icon-root {
    flex: 0 0 auto;
}

.workqueue-folder-children {
    margin-inline-start: var(--space-3);
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--border-light);
}

.workqueue-folder-item-selected {
    background: var(--color-primary-light);
}

.workqueue-folder-item-selected .workqueue-folder-name {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.workqueue-folder-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.workqueue-folder-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--density-touch-target);
    padding: var(--space-2);
}

.workqueue-folder-alert .mud-alert-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
}

.workqueue-folder-helper {
    display: block;
    padding-block: var(--space-1);
}

.workqueue-document-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: var(--space-2);
}

.workqueue-operation-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--density-touch-target);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);
    background: var(--color-info-light);
    color: var(--text-primary);
}

/* WorkerStatusDashboardView.razor (APEXPLUS-210) — clickable Worker Processor cards.
   The selected card gets a primary-colored border so it's clear which process the
   Last Activity Detail panel is showing. */
.processor-card {
    border: 2px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.processor-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.4);
}

.processor-card-selected {
    border-color: var(--mud-palette-primary);
}

.card-activity-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-depth-scroll {
    max-height: 220px;
    overflow-y: auto;
}

.queue-depth-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/* Contract: Affidavits section (Ballot Request tab, inside the election picker). Renders the
   election-scoped affidavit caption and pie/table breakdown - or the unavailable/empty
   EmptyState - directly under the section header; .form-section-header already carries its
   own border-bottom, so this block adds no separator of its own. */
.affidavit-summary {
    padding: 0 0 var(--space-1);
}
} /* Contract: closes @layer components, opened above. Without it every rule to the end of the
     file lands in that layer at the wrong cascade priority. */

/* Contract: DistrictJurisdictionField reserves two label lines in overrides so wrapped jurisdiction names align their selects. */
@layer overrides {
    .district-field-labelrow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-2);
        min-height: var(--density-input-height);
        margin-bottom: var(--space-1);
    }

    .district-field-labelrow > .nts-field-label {
        flex: 1 1 auto;
        min-width: 0;
        align-self: center;
    }

    /* Contract: MudBlazor sets .mud-input-control width:100%; max-content flex-basis prevents the Active checkbox from starving its label. */
    .district-field-labelrow > .mud-input-control {
        flex: 0 0 max-content;
        max-width: max-content;
        min-width: 0;
        margin-bottom: 0;
    }
}

/* Contract: the changed-field highlight reuses the existing alert/warning tokens (matching the
   district-mismatch precedent above) rather than introducing a new color. SOURCE:
   NYSDMVoterCompare.cs:8016-8722 SetOrangeColorValidation + :2496-2530 DMVPrevJuriZipChange. */
.evr-compare-section {
    margin-bottom: var(--space-4);
}

.evr-compare-section-header {
    margin-bottom: var(--space-2);
}

.evr-compare-section-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-4);
}

.evr-compare-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 var(--space-1);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    min-width: 0;
}

/* §2.10 signal 1: orange pending-change border, DMV side only.
   SOURCE: SetOrangeColorValidation (NYSDMVoterCompare.cs:8031). */
.evr-compare-field--changed {
    border-color: var(--color-alert);
    background: var(--color-alert-light);
}

/* §2.10 signal 2: bold-italic labels on BOTH sides for a cross-side mismatch - a distinct signal
   from the orange border above; the two are never merged.
   SOURCE: FormatChangeForMisMatch (NYSDMVoterCompare.cs:2683, fonts _fontDifferent/_fontNormal). */
.evr-compare-field--mismatch .nts-field-label,
.evr-compare-field--mismatch .mud-input-label,
.evr-compare-field--mismatch .form-label,
.evr-compare-field--mismatch .mud-checkbox .mud-typography {
    font-weight: var(--font-weight-bold);
    font-style: italic;
}

/* SOURCE: docs/migration/specs/EVR_REBUILD_SPEC.md Section C, W7-EXCEPTION-ARTIFACT-DELIVERY -
   the report-only leg's rendered exception-report image. */
.evr-exception-artifact-image {
    max-width: 100%;
}

/* SOURCE: docs/migration/specs/EVR_REBUILD_SPEC.md Section D, R4-13 - the raw-DMV-value note, shown
   only when the worker edited a field away from what was transmitted, co-located beside the
   proposed-value input rather than a separate report. */
.evr-compare-field-original-note {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--text-secondary);
    word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════════
   EVR Manager - legacy layout frame (docs/migration/specs/EVR_SCREEN_LAYOUT_SPEC.md).
   SOURCE: NYSDMVVoterRegistrationManagement / NYSDMVoterCompare / NYSDMVVoterRegistrationLookup
   (all at pin 843a5d7a).
   ════════════════════════════════════════════════════════════════════════════ */

/* §1.1 hard req 0.1: fixed 230px queue column on the left, records fill the right.
   SOURCE: NYSDMVVoterRegistrationManagement.Designer.cs tableLayoutPanelMain ColumnStyles 230F/100%. */
.evr-manager-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

.evr-manager-layout .tree-panel {
    min-width: 0;
}

.evr-manager-layout .records-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.evr-manager-layout .records-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.records-empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* §1.1 row 2: legacy's Select is right-aligned under the grid; Process mirrors it.
   SOURCE: NYSDMVVoterRegistrationManagement.Designer.cs radButtonSelect (right-anchored, 110x24). */
.grid-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-3);
}

/* §1.2 queue tree. SOURCE: NYSDMVVoterRegistrationManagement radTreeViewQueue (parent status
   nodes with counts, batch children, single selection). */
.status-tree {
    margin-top: var(--space-2);
    overflow-y: auto;
    max-height: calc(100vh - 320px);
}

.tree-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.tree-header:hover,
.tree-header.selected {
    background: var(--bg-muted);
}

.tree-header .status-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tree-child {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.tree-child:hover {
    background: var(--bg-muted);
}

.tree-child.selected {
    background: var(--color-primary);
    color: var(--text-inverse);
}

/* §1.3 locked-row highlight - locked by me vs locked by another user.
   SOURCE: NYSDMVVoterRegistrationManagement CellFormatting (DarkSalmon/Gold = mine, Red = other). */
.standard-data-grid .mud-table-container tbody tr.locked > .mud-table-cell {
    background: var(--color-warning-light);
}

.standard-data-grid .mud-table-container tbody tr.locked-other > .mud-table-cell {
    background: var(--color-error-light);
}

/* ── §2 compare frame. SOURCE: NYSDMVoterCompare.Designer.cs pnlMain/grpSpliter/grpBottom. ── */

/* §1.3/§2: the compare is a POP-UP over the manager (legacy NYSDMVoterCompare is its own modal
   window) - near-full width via DialogOptions, and the compare content scrolls INSIDE the dialog
   rather than the page scrolling down to an inline region.
   SOURCE: NYSDMVoterCompare.Designer.cs pnlMain (1182x660 modal form). The root dialog bounds
   follow at the end of this EVR block and coexist with the canonical global dialog geometry. */
.evr-compare-dialog .mud-dialog-content.evr-compare-region {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: var(--space-2) var(--space-4) var(--space-3);
}

/* Contract: compact-dense compare (Sam, 2026-08-03) - per-field vertical margins are stripped
   inside this dialog only, so a whole tab fits without scrolling at 1440px; fonts keep the
   design-token sizes. */
.evr-compare-dialog .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* §2.1 hard req 0.2: 50/50 split, incoming record left, county voter right; the center rule marks
   the legacy splitter. Each .evr-pair is one shared grid row, so a field pair always aligns.
   SOURCE: NYSDMVoterCompare.Designer.cs splitMain / splitPanelPageLeft / splitPanelPageRight. */
.evr-compare-split {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Sam (2026-08-03): "The fields are way too far apart - you can't see all the tings" -
       compact-dense row rhythm; the space wins come from gaps/margins/padding, never font sizes.
       SOURCE: NYSDMVoterCompare.Designer.cs packs ~25 field rows into a 380px page. */
    gap: var(--space-1);
}

.evr-compare-split::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border-default);
}

.evr-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
}

.evr-side {
    min-width: 0;
}

/* §2.2/§2.3 banner labels ("NYS DMV Voter" / "{ApplicationTitle} Voter").
   SOURCE: NYSDMVoterCompare.cs:5019-5039 lblDMVVoter + Designer lblMMSVoter. */
.evr-banner {
    text-align: center;
    font-weight: var(--font-weight-bold);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    white-space: pre-line;
}

/* Contract: a header/tab row that seats a field beside a checkbox or button (Suffix + ballot app,
   Status/Reason + poll worker, Voter ID + Voter Lookup, DOB + citizen, ...); the field flexes,
   the control keeps its natural width. */
.evr-inline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.evr-inline-row > .evr-compare-field,
.evr-inline-row > .form-field {
    /* Contract: mixed field/choice rows wrap before a checkbox can collapse a semantic field.
       Medium is the common compare-field basis; Micro is the smallest usable field floor, while
       min(100%, ...) still lets the two fixed compare columns fit narrow containers. */
    flex: 1 1 min(var(--field-width-medium), 100%);
    min-width: min(100%, var(--field-width-micro));
}

/* §2.1 synced tab strips - same five tabs both sides, one shared index.
   SOURCE: radPageViewDMVMain_SelectedPageChanged (NYSDMVoterCompare.cs:5994-5996). */
.evr-tabstrip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 2px solid var(--border-default);
}

.evr-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
}

.evr-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* §2.1 tab mismatch emphasis - bold-italic header when the page holds any cross-side difference.
   SOURCE: FormatChangeForMisMatch _tabPage0..4 flags (NYSDMVoterCompare.cs:2683). */
.evr-tab--mismatch {
    font-weight: var(--font-weight-bold);
    font-style: italic;
}

/* §2.4 row 5: area-code box (38w) + number box (68w).
   SOURCE: NYSDMVoterCompare.Designer.cs phone pair widths. */
.evr-phone-row {
    display: flex;
    gap: var(--space-2);
}

.evr-phone-row > .evr-compare-field:first-child {
    flex: 0 0 6rem;
}

.evr-phone-row > .evr-compare-field:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* §2.4 signature groups, docked at the bottom of the Voter Info tab.
   SOURCE: NYSDMVoterCompare.Designer.cs grpDMVSignature (112h, bottom dock). */
.evr-signature-group {
    border-top: 1px solid var(--border-default);
    margin-top: var(--space-2);
    padding-top: var(--space-1);
}

.evr-signature-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.evr-signature-date {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.no-signature {
    padding: var(--space-4);
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* §2.5 row 7: the election-district panel, DMV side only.
   SOURCE: NYSDMVoterCompare.Designer.cs radPanelElectionDistrict (475x77). */
.jurisdiction-display {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}

/* Ranked candidate band + its dismiss action (FD-A-7).
   SOURCE: NYSDMVVoterRegistrationLookup.cs:56,85-124. */
.evr-candidates {
    margin-top: var(--space-4);
}

.lookup-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* §2.9 bottom bar: two rows; left/right clusters mirror legacy's x-order.
   SOURCE: NYSDMVoterCompare.Designer.cs grpBottom button locations. */
.evr-bottom-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--border-default);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.evr-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

/* Contract: .compare-actions rides the second row purely as a stable selector hook (e2e page
   objects target it); it adds wrapping only, never layout of its own. */
.evr-actions-row.compare-actions {
    flex-wrap: wrap;
}

.evr-actions-left,
.evr-actions-right {
    display: flex;
    gap: var(--space-2);
}

/* Reject-reason capture panel (shown for Reject-queue records / after Reject).
   SOURCE: NYSDMVoterCompare radButtonRejectionReason mode (Designer grpBottom, Reject mode). */
.reject-options {
    margin-top: var(--space-4);
}

.reject-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Contract: accept-notice incomplete reasons and other inline checkbox groups on this screen
   wrap horizontally with even spacing; no vertical stacking. */
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

/* §3: the manual refinement box sits BELOW the auto-run results.
   SOURCE: NYSDMVVoterRegistrationLookup.cs:56 DMVVoterSearch (auto-run, no typed criteria). */
.evr-lookup-refine {
    margin-top: var(--space-4);
}

/* Contract: below 900px the fixed 230px sidebar cannot share the row - it stacks above the
   records instead of clipping them. */
@media (max-width: 900px) {
    .evr-manager-layout {
        grid-template-columns: 1fr;
    }
}

/* Contract: the global dialog keeps its canonical max-height and margin. This page uses orthogonal
   flex-item properties so the comparison occupies the shell-safe height without fighting that
   unlayered rule: the existing space-4 margin plus this semantic inset places the bottom edge one
   space-2 above the status footer. */
.mud-dialog.evr-compare-dialog {
    width: 100%;
    height: calc(100dvh - var(--header-height) - var(--app-footer-height) - var(--space-4));
    align-self: flex-start;
    position: relative;
    inset-block-start: calc(var(--header-height) - var(--space-2));
}

/* Contract: layout for screens whose markup shipped without any layout CSS. Every rule
   below is scoped to its page container on purpose - .main-content, .left-panel,
   .center-panel, .right-panel, .detail-content and .district-tree are generic enough
   that an unscoped rule would style unrelated pages later. */

/* Ballot Received work queue: folders + document queue on the left, the document image in
   the middle, the processing form on the right. The 320px left column mirrors the legacy
   319px-of-1052 split.
   SOURCE: /APEX/Nts.Suite/WinForms/WorkQueue/WorkQueueForm.Designer.cs:203,232 */
.work-queue-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
}

.work-queue-container .main-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-height: 0;
}

.work-queue-container .left-panel {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    min-height: 0;
}

.work-queue-container .center-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.work-queue-container .right-panel {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.work-queue-container .queue-grid {
    min-height: 0;
    overflow: auto;
}

.work-queue-container .processing-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
}

/* Contract: three columns need roughly 1400px. Below that they stack in reading order -
   queue, then document, then the form being filled in. */
@media (max-width: 1400px) {
    .work-queue-container .main-content {
        flex-direction: column;
    }

    .work-queue-container .left-panel,
    .work-queue-container .right-panel {
        flex: 0 0 auto;
    }
}

/* Contract: voter signature maintenance puts the selected signature beside its metadata.
   The image box matches the DocumentAnnotationViewer canvas the page passes (400 x 200).
   SOURCE: /APEX/Nts.Suite/WinForms/Voter/SignatureMaintenance.cs */
.signature-maintenance-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
}

.signature-detail-panel {
    background: var(--bg-panel-surface);
    border: 1px solid var(--border-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.signature-detail-panel .detail-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.signature-detail-panel .signature-large {
    flex: 0 0 400px;
    max-width: 100%;
    min-width: 0;
}

.signature-detail-panel .signature-meta {
    flex: 1 1 260px;
    min-width: 0;
}

.signature-detail-panel .no-image-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    max-width: 100%;
    height: 200px;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.signature-maintenance-container .no-signatures,
.signature-maintenance-container .search-prompt {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

/* Contract: the NCOA election-district picker needs a bounded scroll so a county with many
   towns does not push the page controls off screen - same contract as the shared
   .election-district-tree-container used by ElectionDistrictTree.razor.
   SOURCE: /APEX/Nts.Suite/Deprecated/ProcessNCOAUpdate.Designer.cs radTreeViewElectionDistrict */
.district-tree {
    max-height: var(--election-district-tree-max-height, 320px);
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-1);
}