/* Zen Voter Registration System - Custom Styles */

:root {
    /* Base purple palette */
    --primary-color: #534AB7; /* active chevron, headers, buttons */
    --primary-dark: #3C3489; /* completed chevron */
    --primary-light: #d8d6f0; /* default chevron / backgrounds */
    /* Secondary palette shifted from green to blue to match primary button style */
    --secondary-color: #5a5ec0;
    --secondary-dark: #3d418f;
    --secondary-light: #c5cff5;
    --brand-green: #76B043; /* INEXL green header bars */
    --error-color: #d32f2f;
    --warning-color: #f57c00;
    --success-color: #388e3c;
    --info-color: #1976d2;
    --text-primary: #212121;
    --text-secondary: #757575;
    --background: #fafafa;
    --surface: #ffffff;
    --border-color: #e0e0e0;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.loading-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

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

.scanner-select-narrow {
    max-width: 30%;
}

.loading-content p {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#blazor-error-ui {
    background: #d32f2f;
    color: white;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: none;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.page-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--primary-color);
}

    .page-header h1 {
        color: var(--primary-color);
        margin: 0 0 8px 0;
        font-size: 28px;
    }

.action-bar {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .page-header h1 {
        font-size: 24px;
    }

    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .metric-card .metric-value {
        font-size: 24px;
    }
}

/* ----------------------------------------------------------------------*/
/*   MudBlazor overrides                                                 */
/* ----------------------------------------------------------------------*/
.mud-appbar {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Global tab bar background color for all MudBlazor tabs */
.mud-tabs-tabbar {
    /* Soft blue tint behind generic tab bars */
    background-color: #44459a12 !important;
}

.mud-drawer {
    background-color: #f5f5f5 !important;
}

.mud-nav-link-active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.mud-nav-link:hover {
    background-color: rgba(68, 69, 154, 0.1) !important;
}

/* Global divider color to match primary dark-blue bar used in Voting History */
.mud-divider {
    border-color: var(--primary-color) !important;
}

/* ── Global switch styling ─────────────────────────────────────────────────
   Applied to every MudSwitch across the site.

   ON  (checked)  : #22c55e track at full opacity, white thumb + green ripple.
   OFF (unchecked): white thumb regardless of the switch's Color/UncheckedColor
                    (MudBlazor colours the thumb to match UncheckedColor by
                    default, which produces red/gray thumbs — overridden here).
   Error track    : #fca5a5 at full opacity (e.g. Citizenship Verified OFF).

   MudBlazor applies opacity:0.5 to .mud-switch-track globally; the
   opacity:1 overrides here restore full-strength colour.
   ─────────────────────────────────────────────────────────────────────────*/

/* OFF state: neutral gray track for all switches */
.mud-switch-track {
    background-color: rgba(0, 0, 0, 0.26) !important;
}

/* ON state: bright green track, full opacity */
.mud-switch-base.mud-checked + .mud-switch-track {
    background-color: #22c55e !important;
    opacity: 1 !important;
}

/* White thumb for BOTH on and off states */
.mud-switch-thumb,
.mud-switch-thumb-medium,
.mud-switch-thumb-large {
    background-color: #ffffff !important;
}

/* Green ripple when ON */
.mud-switch-base.mud-checked .mud-switch-thumb::before,
.mud-switch-base.mud-checked .mud-switch-thumb-medium::before,
.mud-switch-base.mud-checked .mud-switch-thumb-large::before {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25) !important;
}

/* Error-coloured track (Citizenship Verified OFF / any UncheckedColor.Error switch) */
.mud-switch-track.mud-error {
    background-color: #fca5a5 !important;
    opacity: 1 !important;
}

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

.mud-button-filled.mud-button-filled-secondary {
    background-color: var(--secondary-color) !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.mud-button-outlined:disabled {
    border: 1px solid var(--mud-palette-action-disabled-background) !important;
}

/* Tighten spacing between chevrons */
.mud-tabs .mud-tab.voter-step-tab {
    margin-right: 0 !important;
}

/* Make the tab wrappers share available width so there is no blank space */
.voter-tabs-paper .mud-tabs-tabbar-wrapper {
    display: flex !important;
    width: 100% !important;
}

    .voter-tabs-paper .mud-tabs-tabbar-wrapper > .mud-tooltip-root {
        flex: 1 1 0;
    }

.mud-tooltip {
    max-width: 420px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left;
    line-height: 1.35;
    font-weight: bold;
    background-color: #E3F2FD !important; /* Light blue background */
    color: var(--primary-dark) !important; /* Darker blue text for contrast */
    border: 2px solid var(--primary-dark) !important; /* Blue outline */
}

/* Ensure the tab bar itself does not clip chevron shapes */
.mud-tabs-toolbar {
    overflow: visible !important;
}

 
/* ----------------------------------------------------------------------*/

.vr-history-table .vr-history-col-filename {
    white-space: nowrap;
}

.vr-history-table .vr-history-col-filetype {
    white-space: nowrap;
    width: 90px;
}

.vr-history-table .vr-history-col-importdate {
    white-space: nowrap;
    width: 180px;
}

.vr-history-table .vr-history-col-total {
    width: 60px;
}

.vr-history-table .vr-history-col-imported,
.vr-history-table .vr-history-col-skipped,
.vr-history-table .vr-history-col-errors {
    width: 60px;
    text-align: center;
}

.vr-history-table .vr-history-col-status {
    width: 150px;
}


/* ---------------------------------------------------------------------
    TODO: Convert these to be used globally
-----------------------------------------------------------------------*/
/* Voter tabs container background to match INEXL green scheme */
.voter-tabs-paper {
    /* default chevron background */
    background-color: #d8d6f0 !important;
    display: flex;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
}

    /* Ensure the MudTabs toolbar inside the voter tabs uses the same background */
    .voter-tabs-paper .mud-tabs-toolbar {
        background-color: #d8d6f0 !important;
        display: flex;
        align-items: center; /* vertically center tabs within the toolbar */
    }

    /* Match scroll buttons background and height to the tabs bar so ends are not white and not taller than tabs */
    .voter-tabs-paper .mud-tabs-scroll-button {
        background-color: #d8d6f0 !important;
        display: flex !important;
        align-items: center !important; /* vertically center arrow icons */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Ensure all tab bar containers share the same light green background */
    .voter-tabs-paper .mud-tabs,
    .voter-tabs-paper .mud-tabs-tabbar,
    .voter-tabs-paper .mud-tabs-tabbar-inner,
    .voter-tabs-paper .mud-tabs-tabbar-content,
    .voter-tabs-paper .mud-tabs-tabbar-wrapper {
        background-color: #e3e7fb !important;
        width: 100% !important;
    }

    /* Remove the default MudTabs active indicator line under the tabs */
    .voter-tabs-paper .mud-tab-slider {
        background-color: transparent !important;
        height: 0 !important;
    }

/* Voter detail step tabs - chevron flow styling using background shape */
.voter-step-tab {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    min-width: 195px !important; /* ensure all tabs are at least as wide as the longest label */
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    /* Tab content itself is centered; width is controlled by its wrapper */
    overflow: visible !important;
    /* Chevron-shaped background: flat left edge, pointed right edge */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

/* Make the voter step tab bar fill its container and center tabs vertically */
.voter-tabs-paper .mud-tabs-tabbar {
    display: flex !important;
    align-items: center !important;
}

/* Collapse the panels area for the voter step tabs - content is handled by expansion panels below */
.voter-step-tabs .mud-tabs-panels {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Popover that lists validation errors for a voter step tab */
.step-error-popover {
    /* Inherit the surrounding tooltip's color scheme so the inner div
       does not visually stand out with its own 3D chrome. */
    background-color: transparent;
    color: var(--primary-dark);
    border-radius: 0;
    box-shadow: none;
    border: none;
    text-align: left;
}

    .step-error-popover .step-error-list {
        margin: 0;
        padding-left: 1.25rem;
        text-align: left;
    }

        .step-error-popover .step-error-list li {
            list-style-type: disc;
            font-size: 0.75rem;
        }

/* Ensure the MudTooltip chrome for step error badges matches the standard tooltip style */
.step-error-tooltip-root .mud-tooltip {
    background-color: #E3F2FD !important;
    color: var(--primary-dark) !important;
    border: 2px solid var(--primary-dark) !important;
}

.step-error-tooltip-root .mud-tooltip-arrow {
    color: #E3F2FD !important;
}

/* Container for the custom step error tooltip anchored to the header badges */
.step-error-tooltip {
    position: fixed;
    display: none;
    z-index: 1300;
    pointer-events: none;
}

    .step-error-tooltip.visible {
        display: block;
    }

/* Completed and incomplete steps share the same non-active styling */
.mud-tab.voter-step-tab-completed,
.mud-tab.voter-step-tab-incomplete {
    background-color: #e3e7fb !important; /* non-active light blue */
    color: #303056 !important;
}

/* Active tab background stands out (chevron purple scheme) */
.mud-tab.voter-step-tab-active {
    background-color: #534AB7 !important;
    color: #ffffff !important;
}

/* Ensure any tabs rendered inside voter-step-tabs (including Advanced Search)
   get the same base and active styling even if they don't use the
   voter-step-tab-* helper classes. */
.voter-step-tabs .mud-tab {
    background-color: #d8d6f0 !important;
    color: #303056 !important;
}

    .voter-step-tabs .mud-tab.mud-tab-active {
        background-color: #534AB7 !important;
        color: #ffffff !important;
    }

/* Tab bar background and slider for voter-step-tabs not inside voter-tabs-paper */
.voter-step-tabs .mud-tabs-tabbar,
.voter-step-tabs .mud-tabs-tabbar-inner,
.voter-step-tabs .mud-tabs-tabbar-content,
.voter-step-tabs .mud-tabs-tabbar-wrapper {
    background-color: #d8d6f0 !important;
}

.voter-step-tabs .mud-tab-slider {
    background-color: transparent !important;
    height: 0 !important;
}

/* Ensure the icon within the active voter step tab is clearly visible on
   the dark blue background by forcing it to white, overriding IconColor and
   any SVG fill that MudBlazor applies. */
.mud-tab.voter-step-tab-active .mud-tab-icon,
.mud-tab.voter-step-tab-active .mud-tab-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Remove chevron point from the last step so it ends cleanly */
/* .mud-tabs .mud-tab:last-child.voter-step-tab {
    clip-path: unset;
} */

/* Reset address-tabs back to MudBlazor defaults (override site-wide .mud-tabs-tabbar tint) */
.address-tabs .mud-tabs-tabbar {
    background-color: transparent !important;
}

/* Prevent inputs from shifting vertically when validation messages appear.
   MudBlazor always renders .mud-input-control-helper-container with reserved
   height; zeroing its margin-top removes the only piece that grows the field. */
.address-tabs .mud-input-control-helper-container {
    margin-top: 0;
}

/* Shared label for inline group headers (Security Flags, Citizenship Verified, etc.).
   Kept small so it does not compete with the adjacent input labels. */
.vr-frame-label {
    font-size: 0.7rem;
    text-transform: none;
    white-space: nowrap;
}

/* Yes / No status text shown beside the citizenship toggle */
.eligibility-status-text {
    font-weight: 600;
}

/* Thin vertical separators between each toggle in the AEVL/UOCAVA/Poll Worker/
   Publicity Pamphlet Opt-In row. Each cell after the first gets a left border. */
.registration-switch-cell + .registration-switch-cell {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* Voter Detail two-column layout: left form + right image viewer */
.voter-detail-layout {
    min-height: 0;
}

.voter-detail-main {
    min-width: 0;
}

/* Small gap between the chevron tabs and the first voter detail panel */
.voter-detail-root .voter-detail-main {
    padding-top: 4px;
}

/* Keep the image viewer column aligned vertically with the left panels */
.voter-detail-root .voter-detail-image-panel {
    padding-top: 2px;
}

/* Scoped typography and density adjustments for the Voter Detail page */
.voter-detail-root {
    font-size: 0.85rem;
}

    /* Remove default MudContainer horizontal padding for this page so content can be flush */
    .voter-detail-root.mud-container-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .voter-detail-root label,
    .voter-detail-root .mud-input-label,
    .voter-detail-root .mud-typography,
    .voter-detail-root .mud-checkbox,
    .voter-detail-root .mud-radio,
    .voter-detail-root .mud-switch {
        font-size: 0.78rem !important;
    }

    .voter-detail-root .mud-helper-text,
    .voter-detail-root .mud-input-error,
    .voter-detail-root .mud-form-helper-text {
        font-size: 0.7rem !important;
    }

    /* Buttons inside the Voter Detail form (e.g., RUN DUPLICATE CHECKS, MAP RESIDENTIAL ADDRESS) */
    .voter-detail-root .mud-button-label {
        font-size: 0.8rem !important;
    }

    /* Make all MudGrid rows a bit shorter vertically within Voter Detail */
    .voter-detail-root .mud-grid-item {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    /* Flatten the main voter detail wrapper card (no frame/shadow, minimal chrome)
   but keep a solid white background so there is no grey strip above the panels. */
    .voter-detail-root .voter-detail-main.mud-card {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
    }

    /* Provide a very small gutter on the left of the vr-card stack only */
    .voter-detail-root .voter-detail-main .vr-card {
        margin-left: 0;
    }

    /* Allow Voter Setup chevron tabs to scroll horizontally when there are many steps */
    .voter-detail-root .vr-step-tabs.mud-tabs {
        width: 100%;
    }

    .voter-detail-root .vr-step-tabs .mud-tabs-tabbar,
    .voter-detail-root .vr-step-tabs .mud-tabs-tabbar-inner,
    .voter-detail-root .vr-step-tabs .mud-tabs-tabbar-wrapper {
        width: 100%;
    }

    .voter-detail-root .vr-step-tabs .mud-tabs-tabbar {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
    }

        .voter-detail-root .vr-step-tabs .mud-tabs-tabbar::-webkit-scrollbar {
            display: none; /* Chrome, Edge, Safari */
        }

    /* Pull inner tab label content (icon + text + badge) 15px to the LEFT within the chevron tab
   so the badge clears the right scroll chevron without shifting the chevron background itself. */
    .voter-detail-root .voter-step-tabs .voter-step-tab .mud-tab-text {
        transform: translateX(-15px);
    }

.voter-detail-image-panel {
    width: 100%;
    max-width: 1330px;
    /* No separating border line between left panels and image viewer */
    border-left: none;
    /* Match main surface background so the viewer column is not grey */
    background-color: #ffffff;
    position: sticky;
    top: 80px; /* align just below the sticky tabs bar */
    align-self: flex-start;
}

.voter-detail-image-content {
    overflow: auto;
}

@media (max-width: 1200px) {
    .voter-detail-image-panel {
        display: none;
    }
}

.voter-detail-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Remove MudCard inner padding for the Voter Detail left column so panels sit flush */
.voter-detail-root .mud-card-content {
    padding: 0 !important;
}

.voter-detail-root .mud-card-actions {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* -----------------------------------------
   Reusable Voter Reg component styles
 ----------------------------------------- */

.vr-section-card {
    border-radius: 16px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #d0d4e8;
}

.vr-section-header {
    gap: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.vr-section-step {
    color: #ffffff;
    letter-spacing: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    text-align: center;
}

.vr-section-title {
    letter-spacing: 0.16em;
    color: var(--primary-color);
    font-weight: 700;
}

/* Inner body of VHE step cards (shared with Deceased-style vr-card header) */
.vr-section-card .vr-section-body {
    padding: 12px 24px 16px 24px;
}

.vr-field-label {
    color: var(--primary-color);
    letter-spacing: 0.16em;
    display: block;
    margin-bottom: 1px;
    font-weight: 700;
}

.vr-pill-input .mud-input-root,
.vr-pill-input .mud-input {
    background-color: #e8e9ff; /* match inactive Import tab background */
    color: #303056;
    border-radius: 8px;
    box-shadow: none;
    border-bottom: none;
}

    /* Restore disabled appearance that the explicit background-color above would otherwise mask. */
    .vr-pill-input .mud-input-root.mud-disabled,
    .vr-pill-input .mud-input.mud-disabled {
        background-color: #d0d1e8 !important;
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

.vr-pill-input .mud-input-slot {
    min-height: 20px; /* normalize height across TextField/Select/DatePicker */
    display: flex;
    align-items: center;
    padding-top: 8px !important; /* slightly tighter vertically */
    padding-bottom: 8px !important;
    padding-left: 8px !important; /* give inline label/text more breathing room */
    padding-right: 8px !important;
}

/* Consistent margins for the field area inside a tab panel */
.vr-tab-content {
    margin: 0 20px 16px 20px;
}

/* Shared helper: render a red asterisk after labels for required vr-pill inputs */
.vr-required-asterisk .mud-input-label::after,
.vr-required-asterisk .mud-input-label-text::after {
    content: "*";
    color: var(--error-color);
    margin-left: 2px;
}

/* Deceased Records - search button loading state */
.vr-searching-label {
    color: #ffffff;
    font-weight: 600;
}

/* Info icon FAB for section tooltips */
.vr-info-fab {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 1px solid white !important;
    border-radius: 50% !important;
    margin-left: auto;
    padding: 0 !important;
}

    .vr-info-fab .mud-fab-label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .vr-info-fab .fa-circle-info {
        font-size: 16px;
        color: var(--primary-color);
    }

/* Keep floating labels the same smaller size whether inline or above the field */
.vr-pill-input .mud-input-label,
.vr-pill-input .mud-input-label-text {
    font-size: 0.88rem !important; /* ~10% larger base size */
    padding-left: 3px; /* base nudge */
}

/* Extra nudge specifically for input-control labels, which are absolutely positioned */
.vr-pill-input .mud-input-label-inputcontrol {
    margin-left: 10px !important; /* move inline label further off the left edge */
}

/* When label floats above the field, make it a bit larger for readability */
.vr-pill-input .mud-input-label.mud-shrink,
.vr-pill-input .mud-input-label-text.mud-shrink {
    font-size: 1.05rem !important; /* ~10% larger floated label */
}


/* Remove default MudBlazor underline for pill inputs (all states) */
.vr-pill-input .mud-input.mud-input-underline {
    box-shadow: none !important;
    border-bottom: none !important;
}

    .vr-pill-input .mud-input.mud-input-underline::before,
    .vr-pill-input .mud-input.mud-input-underline::after {
        border-bottom: none !important;
    }

/* Chip / pill styles for status & reason code selectors */
.vr-chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .vr-chip-set .mud-chip {
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.82rem;
        text-transform: none;
        letter-spacing: normal;
        padding: 4px 16px;
        height: 34px;
        color: var(--primary-color) !important;
    }

        .vr-chip-set .mud-chip.mud-chip-outlined {
            border: 2px solid var(--primary-color) !important;
            color: var(--primary-color) !important;
            background-color: transparent !important;
        }

        .vr-chip-set .mud-chip.mud-chip-filled,
        .vr-chip-set .mud-chip.mud-chip-filled.mud-chip-selected,
        .vr-chip-set .mud-chip.mud-chip-selected,
        .vr-chip-set .mud-chip.mud-chip-color-default.mud-chip-selected,
        .vr-chip-set .mud-chip.mud-chip-color-primary.mud-chip-selected {
            background-color: var(--primary-color) !important;
            color: #ffffff !important;
            border: 2px solid var(--primary-color) !important;
        }

            .vr-chip-set .mud-chip .mud-chip-content,
            .vr-chip-set .mud-chip.mud-chip-filled .mud-chip-content,
            .vr-chip-set .mud-chip.mud-chip-selected .mud-chip-content {
                color: inherit !important;
            }

/* Keep typography consistent with VR workflow pages */
.vr-workflow .mud-typography,
.vr-workflow .mud-radio,
.vr-workflow .mud-checkbox {
    font-size: 0.78rem !important;
}

/* Header title (workflow pages) */
.vr-workflow .vr-title,
.vr-workflow .vr-page-title {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Header card */
.vr-workflow .vr-header-card {
    border-radius: 16px;
    background-color: #ffffff;
}

.vr-workflow .vr-label {
    color: rgba(0, 0, 0, 0.54);
    letter-spacing: 0.16em;
}

.vr-workflow .vr-search-by-row {
    display: flex;
    align-items: center;
}

.vr-workflow .vr-search-by-group {
    margin-top: 0;
    gap: 24px;
}

.vr-workflow .vr-county-inline-label {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}

/* "All items checked" pill - use primary dark so it stands out */
.vr-workflow .vr-selected-summary {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    border-radius: 12px;
    padding: 5px 16px;
}

.vr-workflow .vr-include-checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

/* Tabs area sits just under header card */
.vr-workflow .vr-tabs-container {
    overflow: visible;
    margin-top: -4px;
    background-color: #d8d6f0;
}

/* Chevron-style tabs — nuke every border/shadow inside the tab bar for workflow pages */
.vr-workflow .vr-step-tabs .mud-tabs-tabbar,
.vr-workflow .vr-step-tabs .mud-tabs-tabbar *,
.vr-workflow .vr-step-tabs .mud-tabs-tabbar *::before,
.vr-workflow .vr-step-tabs .mud-tabs-tabbar *::after {
    border: 0 none transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.vr-workflow .vr-step-tabs .mud-tabs-tabbar {
    min-height: 0;
    background-color: #e3e7fb !important;
}

.vr-workflow .vr-step-tabs .mud-tabs-tabbar-inner {
    padding: 0;
    display: flex !important;
    width: 100%;
    background-color: #e3e7fb !important;
}

.vr-workflow .vr-step-tabs .mud-tabs-tabbar-wrapper {
    display: flex !important;
    gap: 0 !important;
}

    .vr-workflow .vr-step-tabs .mud-tabs-tabbar-wrapper > .d-inline-block {
        flex: 1 1 0% !important;
        display: flex !important;
        width: auto !important;
    }

        .vr-workflow .vr-step-tabs .mud-tabs-tabbar-wrapper > .d-inline-block > .mud-tab {
            width: 100% !important;
        }

/* Base tab: lavender, no arrow */
.vr-workflow .vr-step-tab {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    min-width: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    background-color: #e3e7fb !important;
    color: #303056 !important;
    border: none !important;
    box-shadow: none !important;
}

.vr-workflow .vr-step-tab-inner {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 38px;
}

.vr-workflow .vr-step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.vr-workflow .vr-step-label {
    white-space: nowrap;
    text-transform: uppercase;
}

/* Completed before another completed tab: solid primary-dark chevron */
.vr-workflow .vr-step-tab.completed.next-completed {
    margin-left: 1px !important;
    background: linear-gradient(to right, #3C3489, #3C3489) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #3C3489 52%) right top / 18px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #3C3489 52%) right bottom / 18px 50.5% no-repeat, #3C3489 !important;
    color: #ffffff !important;
}

/* Disabled tab: grayed out */
.vr-workflow .vr-step-tab.disabled {
    background-color: #e3e7fb !important;
    color: #9ca3af !important;
    opacity: 0.5;
    pointer-events: none;
}

    .vr-workflow .vr-step-tab.disabled .vr-step-number {
        background-color: rgba(156, 163, 175, 0.3);
    }

/* Completed before the active tab: solid primary-dark chevron */
.vr-workflow .vr-step-tab.completed.next-active {
    margin-left: 1px !important;
    background: linear-gradient(to right, #3C3489, #3C3489) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #3C3489 52%) right top / 18px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #3C3489 52%) right bottom / 18px 50.5% no-repeat, #3C3489 !important;
    color: #ffffff !important;
}

/* Completed before a future tab (fallback): corners = lavender */
.vr-workflow .vr-step-tab.completed.next-future {
    background: linear-gradient(to right, #e3e7fb, #e3e7fb) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #e3e7fb 52%) right top / 18px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #e3e7fb 52%) right bottom / 18px 50.5% no-repeat, var(--primary-color) !important;
    color: #ffffff !important;
}

/* Active tab: use primary purple, corners always = default lavender (next is always future) */
.vr-workflow .vr-step-tab.active {
    background: #534AB7 !important;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    margin-left: -1px;
    color: #ffffff !important;
}

/* Ensure the MudTabs root itself has no bottom border on workflow pages */
.vr-workflow .vr-step-tabs.mud-tabs {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Hide default MudTabs underline/slider for workflow tab sets */
.vr-workflow .vr-step-tabs .mud-tab-slider {
    background-color: transparent !important;
    height: 0 !important;
    display: none !important;
}

/* Sub-chevron tabs - green color scheme, smaller size for nested workflows */
.vr-workflow .vr-sub-step-tab {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 0.7rem !important;
    min-width: 0 !important;
    height: 32px !important;
    max-height: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: none !important;
    box-shadow: none !important;
    /* Ensure no inherited purple/blue colors */
    background-image: none !important;
    line-height: 32px !important;
}

/* Sub-chevron tab bar container - force smaller height and remove blue backgrounds */
.vr-workflow .vr-import-tabs .mud-tabs-tabbar,
.vr-workflow .vr-import-tabs .mud-tabs-tabbar-inner,
.vr-workflow .vr-import-tabs .mud-tabs-tabbar-content,
.vr-workflow .vr-import-tabs .mud-tabs-tabbar-wrapper {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    background-color: #e8f5e9 !important;
    background-image: none !important;
    border: none !important;
}

    .vr-workflow .vr-import-tabs .mud-tabs-tabbar-wrapper > .d-inline-block {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

.vr-workflow .vr-sub-step-tab-inner {
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 28px;
    height: 32px !important;
    line-height: 32px !important;
}

.vr-workflow .vr-sub-step-number {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(46, 125, 50, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Active tab number badge - white background for better contrast */
.vr-workflow .vr-sub-step-tab.active .vr-sub-step-number {
    background-color: rgba(255, 255, 255, 0.9);
    color: #388e3c;
}

/* Completed tab number badge - white background for better contrast */
.vr-workflow .vr-sub-step-tab.completed .vr-sub-step-number {
    background-color: rgba(255, 255, 255, 0.9);
    color: #2e7d32;
}

.vr-workflow .vr-sub-step-label {
    white-space: nowrap;
    text-transform: uppercase;
}

/* Sub-chevron - completed before another completed: dark green chevron */
.vr-workflow .vr-sub-step-tab.completed.next-completed {
    margin-left: 0 !important;
    margin-right: -1px !important;
    background: linear-gradient(to right, #2e7d32, #2e7d32) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #2e7d32 52%) right top / 14px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #2e7d32 52%) right bottom / 14px 50.5% no-repeat, #2e7d32 !important;
    color: #ffffff !important;
    /* Ensure no inherited purple/blue colors */
    background-image: linear-gradient(to right, #2e7d32, #2e7d32) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #2e7d32 52%) right top / 14px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #2e7d32 52%) right bottom / 14px 50.5% no-repeat !important;
}

/* Sub-chevron - completed before active: dark green chevron */
.vr-workflow .vr-sub-step-tab.completed.next-active {
    margin-left: 0 !important;
    margin-right: -1px !important;
    background: linear-gradient(to right, #2e7d32, #2e7d32) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #2e7d32 52%) right top / 14px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #2e7d32 52%) right bottom / 14px 50.5% no-repeat, #2e7d32 !important;
    color: #ffffff !important;
    /* Ensure no inherited purple/blue colors */
    background-image: linear-gradient(to right, #2e7d32, #2e7d32) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #2e7d32 52%) right top / 14px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #2e7d32 52%) right bottom / 14px 50.5% no-repeat !important;
}

/* Sub-chevron - completed before future: dark green base, light green corners */
.vr-workflow .vr-sub-step-tab.completed.next-future {
    background: linear-gradient(to right, #e8f5e9, #e8f5e9) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #e8f5e9 52%) right top / 14px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #e8f5e9 52%) right bottom / 14px 50.5% no-repeat, #2e7d32 !important;
    color: #ffffff !important;
    /* Ensure no inherited purple/blue colors */
    background-image: linear-gradient(to right, #e8f5e9, #e8f5e9) right center / 2px 100% no-repeat, linear-gradient(to top right, transparent 48%, #e8f5e9 52%) right top / 14px 50.5% no-repeat, linear-gradient(to bottom right, transparent 48%, #e8f5e9 52%) right bottom / 14px 50.5% no-repeat !important;
}

/* Sub-chevron - active: medium green with chevron shape */
.vr-workflow .vr-sub-step-tab.active {
    background: #388e3c !important;
    background-image: none !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    margin-left: 0 !important;
    margin-right: -1px !important;
    color: #ffffff !important;
}

/* Sub-chevron - disabled: grayed out */
.vr-workflow .vr-sub-step-tab.disabled {
    background-color: #e8f5e9 !important;
    color: #9ca3af !important;
    opacity: 0.5;
    pointer-events: none;
}

    .vr-workflow .vr-sub-step-tab.disabled .vr-sub-step-number {
        background-color: rgba(156, 163, 175, 0.3);
    }


/* Reusable small uppercase section label used above tab bars and status strips.
   Used for "INFORMATION FLOW" (TabHeaderComponent) and
   "ELIGIBILITY & VERIFICATION CHECKS" (VoterStatusBar). */
.vr-bar-label {
    font-size: 9px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.vr-check-tabs.mud-tabs {
    border: none !important;
    border-bottom: none !important;
    border-radius: 5px;
    overflow: hidden;
}

.vr-check-tabs .mud-tab-slider {
    display: none !important;
    height: 0 !important;
    background-color: transparent !important;
}

.vr-check-tabs .mud-tabs-panels {
    display: none !important;
}

.vr-check-tabs .mud-tabs-scroll-button {
    display: none !important;
}

.vr-check-tabs .mud-tabs-tabbar,
.vr-check-tabs .mud-tabs-tabbar-inner,
.vr-check-tabs .mud-tabs-tabbar-content,
.vr-check-tabs .mud-tabs-tabbar-wrapper {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    background-color: #f4f4f8 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.vr-check-tabs .mud-tabs-tabbar-wrapper {
    display: flex !important;
    gap: 0 !important;
    width: 100%;
    /* MudTabs scrolls its active tab into view by setting an inline
       `transform: translateX(-Npx)` on this wrapper (it does NOT use scrollLeft).
       Forcing transform:none with !important overrides that inline style, so the
       status chevrons never slide when a tab is clicked. */
    transform: none !important;
}

    .vr-check-tabs .mud-tabs-tabbar-wrapper > .d-inline-block {
        flex: 1 1 0% !important;
        display: flex !important;
        width: auto !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin-right: -10px !important;
    }

        .vr-check-tabs .mud-tabs-tabbar-wrapper > .d-inline-block > .mud-tab {
            width: 100% !important;
        }

.vr-check-tab {
    position: relative;
    padding: 0 12px !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}

    .vr-check-tab.vr-tab-first {
        padding-left: 14px !important;
        border-radius: 5px 0 0 5px;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    }

    .vr-check-tab.vr-tab-last {
        margin-right: 0 !important;
        border-radius: 0 5px 5px 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
    }

.vr-check-tab-inner {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.vr-check-tab-icon.mud-icon-root {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
}

.vr-check-tab-label {
    white-space: nowrap;
    line-height: 1;
}

.vr-tab-pending {
    background-color: #EFF7DC !important;
    color: #4A7018 !important;
}

.vr-tab-in-progress {
    background-color: #8DC63F !important;
    color: #2B4A0A !important;
}

.vr-tab-pass {
    background-color: #6B9E2A !important;
    color: #EFF7DC !important;
}

.vr-tab-fail {
    background-color: #A32D2D !important;
    color: #FCEBEB !important;
}

.vr-workflow .vr-voter-inclusion-group .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vr-workflow .vr-voter-inclusion-group .mud-radio {
    margin-bottom: 1px;
}

/* Compact radio and checkbox touch targets throughout VHE */
.vr-workflow .mud-radio .mud-icon-button,
.vr-workflow .mud-checkbox .mud-icon-button {
    padding: 4px;
}

/* Reduce vertical row gap in all VHE section grids */
.vr-section-card .mud-grid {
    row-gap: 4px !important;
}

/* Dual-list layout and card styling used across workflows (Elections, Districts, etc.) */
.vr-dual-list-grid {
    align-items: stretch;
}

.vr-dual-list-card {
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 10px 10px 6px 10px;
    background-color: #fdfdff;
}

.vr-dual-list-title {
    letter-spacing: 0.12em;
    color: #303056;
    background-color: #e3e7fb;
    display: block;
    text-align: center;
    padding: 6px 8px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

.vr-dual-list-box {
    max-height: 260px;
    overflow-y: auto;
    border-radius: 8px;
}

.vr-dual-list-item {
    font-size: 0.78rem;
}

    .vr-dual-list-item.selected {
        background-color: #44459a !important;
        color: #ffffff !important;
    }

.vr-transfer-button {
    min-width: 48px;
}

.vr-card {
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #d0d4e8;
}

.vr-card-header {
    background-color: var(--primary-color);
    /* Match horizontal padding to vr-card-body so header and content edges align */
    padding: 2px 18px;
    color: #ffffff;
}

.vr-card-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}

.dashboard-container {
    width: min(100%, 720px);
    margin-left: 0 !important;
    margin-right: auto !important;
}

@media (max-width: 959px) {
    .dashboard-container {
        width: 100%;
    }
}

/* Existing Deceased Records card hooks (now usable anywhere via vr-* classes) */


.vr-card-header-alt {
    background-color: var(--primary-color);
    padding: 10px 20px;
    color: #ffffff;
}

.vr-card-title-alt,
.vr-header-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}

.vr-header-actions .mud-button {
    background-color: #7c5cf4 !important;
    color: #ffffff !important;
}

.vr-results-table .mud-table-head {
    background-color: #e3e7fb;
}

    .vr-results-table .mud-table-head th {
        color: #303056;
        font-weight: 700;
        font-size: 0.78rem;
        text-transform: uppercase;
    }

/* Shared footer actions for Deceased Records / VHE-style workflows */
.vr-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.vr-footer-button {
    min-width: 180px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

    .vr-footer-button.vr-insert-button {
        background-color: var(--primary-color) !important;
        color: #ffffff !important;
    }

.vr-preview-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d0d4e8;
}

.vr-preview-subtitle {
    color: #4b3fb2;
    font-weight: 500;
}

.vr-preview-duplicate-cell {
    background-color: #ffe0b2;
}

.vr-preview-table .mud-table-head {
    background-color: #e3e7fb;
}

    .vr-preview-table .mud-table-head th {
        color: #303056;
        font-weight: 700;
        font-size: 0.78rem;
        text-transform: uppercase;
    }

.vr-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    min-width: 70px;
    justify-content: center;
    font-weight: 600;
}

.vr-tooltip-default-cursor {
    cursor: default !important;
}

    .vr-tooltip-default-cursor .vr-status-pill {
        cursor: default !important;
    }

.vr-status-new {
    background-color: #e5f7e9;
    color: #1b7a2a;
}

.vr-status-complete {
    background-color: #e5f7e9;
    color: #1b7a2a;
}

.vr-status-progress {
    background-color: #eeedfe;
    color: #4b3fb2;
}

.vr-status-pending {
    background-color: #faeeda;
    color: #854f0b;
}

.vr-status-duplicate {
    background-color: #fff2e0;
    color: #b25c00;
}

.vr-status-duplicate-selected {
    background-color: #e8f4fd;
    color: #0d6efd;
}

.vr-keep-checkbox {
    margin-left: 8px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.vr-duplicate-row {
    background-color: #fff5f5 !important;
}

.vr-status-error {
    background-color: #ffe5e8;
    color: #b00020;
}

.vr-status-inactive {
    background-color: #f0f0f0;
    color: #888;
}

.vr-upload-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d0d4e8;
    background-color: #ffffff;
}

.vr-upload-header {
    background-color: var(--primary-color);
    padding: 10px 24px;
}

.vr-upload-title {
    color: #ffffff;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}

.vr-upload-body {
    padding: 24px 24px 20px 24px;
}

/* Make MudFileUpload selected file chip use green pill styling */
.mud-file-upload .mud-chip.mud-chip-color-secondary {
    background-color: #e5f7e9 !important;
    color: #1b7a2a !important;
    border-radius: 999px;
    border: 1px solid #b6e2c0;
}

.vr-upload-selected-file-chip {
    background-color: #e5f7e9 !important;
    color: #1b7a2a !important;
    border-radius: 999px !important;
    border: 1px solid #b6e2c0 !important;
}

    .vr-upload-selected-file-chip .mud-chip-content,
    .vr-upload-selected-file-chip .mud-chip-close-button {
        color: #1b7a2a !important;
    }

.vr-upload-processing-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    border: 1px dashed var(--primary-color);
    background-color: #f4f2ff;
}

.vr-upload-processing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.vr-upload-body {
    position: relative;
}

.vr-upload-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.vr-upload-option-group {
    flex: 1 1 0;
}

.vr-imported-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    min-height: 72px;
}

.vr-imported-summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
}

.vr-imported-summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vr-imported-success {
    background-color: #e5f7e9;
    color: #1b7a2a;
}

.vr-imported-duplicate {
    background-color: #fff5e5;
    color: #b25c00;
}

.vr-imported-error {
    background-color: #ffe5e8;
    color: #b00020;
}

.vr-imported-total {
    background-color: #e3e7fb;
    color: #303056;
}

.vr-imported-table .mud-table-head,
.vr-history-table .mud-table-head {
    background-color: #e3e7fb;
}

    .vr-imported-table .mud-table-head th,
    .vr-history-table .mud-table-head th {
        color: #303056;
        font-weight: 700;
        font-size: 0.78rem;
        text-transform: uppercase;
    }

 
.vr-card-body {
    /* Slightly roomier on the right to align with image panel; modest left padding */
    padding: 16px 20px 16px 24px;
}

/* Small vertical spacing between stacked voter panels */
.voter-detail-main .vr-card {
    margin-bottom: 4px;
}

.vr-import-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    justify-content: center;
}

.vr-import-status-complete {
    background-color: #e5f7e9;
    color: #1b7a2a;
}

.vr-import-status-processing {
    background-color: #fff2e0;
    color: #b25c00;
}

.vr-import-status-error {
    background-color: #ffe5e8 !important;
    color: #b00020 !important;
}

/* Hide menu icon in search results table */
.vr-results-table .mud-table-cell .column-header .column-options .mud-menu {
    display: none;
}

/* Chevron tabs full width */
.vr-chevron-full-width .vr-step-tabs .mud-tabs-tabbar-wrapper {
    width: 100%;
}

/* Center text in chevron tabs */
.vr-chevron-full-width .vr-step-tab {
    justify-content: center !important;
}

.vr-card-disabled {
    opacity: 0.65;
    border-color: #bbb !important;
}

.vr-card-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

    .vr-card-header-row .mud-card-header-content {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

.vr-card-flush-sections .mud-card-header.vr-card-header-row,
.vr-card-flush-sections .mud-card-content,
.vr-card-flush-sections .mud-card-actions.vr-card-footer {
    padding: 0;
}

.vr-card-flush-sections .mud-card-header.vr-card-header-row {
    padding: 10px 24px;
    margin-bottom: 0;
}

.vr-card-flush-sections .mud-card-content {
    margin: 0;
}

.vr-card-flush-sections .mud-card-actions.vr-card-footer {
    padding: 10px 14px;
}

.vr-card-header-row.vr-card-header-disabled {
    background-color: #888 !important;
}

.vr-row-number-cell {
    font-weight: 700;
    color: var(--primary-color);
    background-color: #f2f2fb !important;
    width: 40px;
    text-align: center;
}

.vr-table-row-disabled {
    background-color: #f5f5f5 !important;
    color: #aaa;
}

.vr-toggle-cell {
    cursor: pointer;
    user-select: none;
    text-align: center;
}

    .vr-toggle-cell.vr-toggle-disabled {
        cursor: not-allowed;
        opacity: 0.4;
        pointer-events: none;
    }

.vr-row-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 26px;
    border-radius: 13px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    border: 2px solid;
}

.vr-row-status-on {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.vr-row-status-off {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.vr-delete-row {
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    border: 1.5px solid !important;
    padding: 2px !important;
}

    .vr-delete-row.vr-delete-enabled {
        background-color: #fff0f0 !important;
        border-color: #e8bbbb !important;
        color: #A32D2D !important;
    }

    .vr-delete-row.vr-delete-disabled {
        background-color: #f5f5f5 !important;
        border-color: #ddd !important;
        color: #bbb !important;
    }

.vr-card-footer {
    padding: 10px 14px;
    background-color: #f9f9fd;
    border-top: 1px solid #e8e9f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.vr-status-bar {
    min-height: 36px;
    gap: 8px;
}



.all-caps {
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------
   Reusable checklist / dropzone helpers (used by Advanced Search, reusable elsewhere)
----------------------------------------------------------------------- */

/* Scrollable checklist column used in Districts tab and similar multi-select panels */
.as-checklist-box {
    max-height: 300px;
    overflow-y: auto;
}

/* Scrollable drop-zone panel for drag-and-drop field pickers */
.as-dropzone-box {
    height: 300px;
    overflow: auto;
}

/* Inner flex row for a draggable item (icon + label) */
.as-drag-item-inner {
    gap: 8px;
}



/* -----------------------------------------------------------------------
   Reusable card / input / link helpers (introduced with Quick Search)
----------------------------------------------------------------------- */

/* Green header variant for vr-card (pairs with vr-card-title) */
.vr-card-header-green {
    background-color: var(--brand-green);
    padding: 8px 16px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Outlined pill input: white background, rounded lavender border,
   large muted placeholder (no floating label) */
.vr-outline-input .mud-input-outlined {
    background-color: #ffffff;
    border-radius: 10px;
}

.vr-outline-input fieldset.mud-input-outlined-border {
    border-color: var(--primary-light);
    border-radius: 10px;
}

.vr-outline-input .mud-input-outlined:hover fieldset.mud-input-outlined-border,
.vr-outline-input .mud-input-outlined.mud-focused fieldset.mud-input-outlined-border {
    border-color: var(--primary-color);
}

.vr-outline-input input {
    font-size: 1.05rem;
}

    .vr-outline-input input::placeholder {
        color: #b6b0d8;
        opacity: 1;
    }

/* Inline text link (e.g. "Advanced Search →") */
.vr-text-link {
    color: var(--primary-color) !important;
    font-weight: 700;
    text-decoration: underline !important;
}