/* Zen Voter Registration System - Custom Styles */

:root {
    --primary-color: #44459a;
    --primary-dark: #2f3075;
    --primary-light: #6366b8;
    /* Secondary palette shifted from green to blue to match primary button style */
    --secondary-color: #5a5ec0;
    --secondary-dark: #3d418f;
    --secondary-light: #c5cff5;
    --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;
}

.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: 24px;
    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;
}

.mud-chip-text {
    color: white !important;
}

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

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

.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) !important;
    color: var(--primary-color) !important;
}

/* Voter tabs container background to match INEXL green scheme */
.voter-tabs-paper {
    /* very light blue background */
    background-color: #e3e7fb !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: #e3e7fb !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: #e3e7fb !important;
    height: 44px !important; /* same as .voter-step-tab height */
    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%);
}

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

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

/* 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 {
    background-color: #f44336; /* match MudBlazor error/badge red */
    color: #ffffff;
    border-radius: 4px;
}

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

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

/* 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 (blue scheme) */
.mud-tab.voter-step-tab-active {
    background-color: #44459a !important; /* primary blue */
    color: #ffffff !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;
} */

/* Secondary tabs (e.g., Residential / Mailing / Seasonal) - natural tab style */
.address-tabs .mud-tabs-tabbar {
    background-color: #ffffff !important;
    border-bottom: 2px solid #44459a; /* blue underline across tab bar */
}

.address-tabs .mud-tab {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    min-width: 160px !important;
    color: #666666 !important;
}

.address-tabs .mud-tab.mud-tab-active {
    color: #22224a !important;
    background-color: #e3e7fb !important; /* light blue */
    border-top: 3px solid #44459a;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 0;
    box-shadow: 0 -1px 0 #f5f9e6; /* visually connect to content card */
}

.address-tabs .mud-tab-slider {
    background-color: #44459a !important; /* blue underline */
    height: 3px !important;
}

.address-tabs .mud-tabs-tabbar-wrapper {
    align-items: flex-end;
}

/* Security grouping within Registration Detail */
.registration-security-frame {
    border: 2px solid #9e9e9e;
    border-radius: 4px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Citizenship grouping within Eligibility section */
.eligibility-citizenship-frame {
    border: 2px solid #9e9e9e;
    border-radius: 4px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #f5f5f5;
}

.eligibility-citizenship-frame .eligibility-dpoc-select {
    margin-top: -6px;
}

/* Tighten vertical spacing for all rows in the Eligibility section */
.eligibility-grid .mud-grid-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

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

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

.voter-detail-image-panel {
    width: 100%;
    min-width: 605px;
    max-width: 1330px;
    border-left: 1px solid var(--border-color);
    background-color: #f5f5f5;
    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;
}

/* Notes grid column widths: Note = 60%, User = 20%, Created = 20% */
.notes-grid .mud-table-root {
    table-layout: fixed;
    width: 100%;
}

.notes-grid .mud-table-head th:nth-child(1),
.notes-grid .mud-table-body td:nth-child(1) {
    width: 60% !important;
}

.notes-grid .mud-table-head th:nth-child(2),
.notes-grid .mud-table-body td:nth-child(2),
.notes-grid .mud-table-head th:nth-child(3),
.notes-grid .mud-table-body td:nth-child(3) {
    width: 20% !important;
}