.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}
 
.mud-chip {
    font-size: var(--mud-typography-default-size);
}
.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body1-size);
}

/* Fix for MudBlazor wrapping tabs in hidden tooltip containers - REQUIRED FOR TABS TO DISPLAY */
.mud-tabs .mud-tooltip-root.mud-tooltip-inline {
    display: inline-block !important;
    visibility: visible !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-subtitle1-size);
}
.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font-size: var(--mud-typography-default-size) !important;
}
.mud-input > textarea.mud-input-root {
    font-size: var(--mud-typography-default-size) !important;
}    .mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
    
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
    
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}


.mud-typography-subtitle2 {
    font-size: var(--mud-typography-subtitle2-size);
    color: var(--mud-palette-text-secondary);
}
.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom:2px;
}

.mud-nav-link {
    white-space: normal !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

.small-font {
    font-size: xx-small; /* Adjust as needed */
}

@font-face {
    font-family: 'MyLogoFont';
    src: url('../fonts/UbuntuSansMono-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

.accucite-font {
    font-family: 'MyLogoFont', sans-serif !important;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
}

/* Product wordmark logos in the nav brand headers (inline outlined SVG, recolored via currentColor).
   Heights are tuned per logo so the three wordmarks render at a consistent visual size despite
   slightly different viewBox heights (accucite 15.4 vs lienlynx 17.6 vs corpmate 17.9). */
.brand-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--mud-palette-primary);
}
.brand-logo svg { width: auto; display: block; }
.brand-logo--accucite svg { height: 17px; }
.brand-logo--lienlynx svg { height: 20px; }
.brand-logo--corpmate svg { height: 20px; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* DueData Brand Theme Enhancements */
/* Additional styling to complement the MudBlazor theme */

/* Primary button with brand color only (no gradients or effects) */
.mud-button-filled-primary {
    background-color: var(--mud-palette-primary) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--mud-palette-primary) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Enhanced chip colors */
.mud-chip-filled-primary {
    background-color: var(--mud-palette-primary) !important;
}

/* Focus states with brand color */
.mud-input-underline:after {
    border-bottom-color: var(--mud-palette-primary) !important;
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

/* Selected items in lists/menus */
.mud-selected-item {
    background-color: rgba(30, 58, 138, 0.08) !important;
}

.mud-list-item-clickable:hover {
    background-color: rgba(30, 58, 138, 0.04) !important;
}

/* Navigation drawer active states */
.mud-nav-link-active {
    background-color: rgba(30, 58, 138, 0.12) !important;
    color: var(--mud-palette-primary) !important;
}

/* Progress indicators */
.mud-progress-circular-primary .mud-progress-circular-svg .mud-progress-circular-circle {
    stroke: var(--mud-palette-primary) !important;
}

.mud-progress-linear-primary .mud-progress-linear-bars .mud-progress-linear-bar {
    background-color: var(--mud-palette-primary) !important;
}

/* Enhanced table hover */
.mud-table-hover tbody tr:hover {
    background-color: rgba(30, 58, 138, 0.04) !important;
}

/* Checkbox and radio button theming */
.mud-checkbox-primary.mud-checked .mud-checkbox-input {
    color: var(--mud-palette-primary) !important;
}

.mud-radio-primary.mud-checked .mud-radio-button {
    color: var(--mud-palette-primary) !important;
}

/* Switch theming */
.mud-switch-primary.mud-checked .mud-switch-track {
    background-color: var(--mud-palette-primary) !important;
}

/* Fab button with brand color */
.mud-fab-primary {
    background-color: var(--mud-palette-primary) !important;
}

.mud-fab-primary:hover {
    background-color: var(--mud-palette-primary) !important;
}

/* Breadcrumb active item */
.mud-breadcrumb-item.mud-breadcrumb-item-active {
    color: var(--mud-palette-primary) !important;
}

/* Alert primary styling */
.mud-alert-filled-primary {
    background-color: var(--mud-palette-primary) !important;
}

/* Badge primary */
.mud-badge-primary .mud-badge-badge {
    background-color: var(--mud-palette-primary) !important;
}

/* Filled Icons Theme Color */
/* Navigation menu filled icons */
.mud-nav-group-header .mud-icon-root,
.mud-nav-link .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* User menu filled icons */
.mud-menu-item .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Specific filled material icons */
.mud-icon-root[class*="Material.Filled"] {
    color: var(--mud-palette-primary) !important;
}

/* Icons in buttons and other components */
.mud-button .mud-icon-root,
.mud-icon-button .mud-icon-root {
    color: inherit;
}

/* Override for primary buttons to keep white icons */
.mud-button-filled-primary .mud-icon-root {
    color: white !important;
}

/* Icons in the app bar */
.mud-appbar .mud-icon-root {
    color: inherit;
}

/* Remove all gradients from buttons */
.mud-button {
    background-image: none !important;
}

.mud-button-outlined-primary {
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
    background: transparent !important;
    background-image: none !important;
}

.mud-button-outlined-primary:hover {
    background-color: rgba(30, 58, 138, 0.04) !important;
    background-image: none !important;
}

.mud-button-text-primary {
    color: var(--mud-palette-primary) !important;
    background: transparent !important;
    background-image: none !important;
}

.mud-button-text-primary:hover {
    background-color: rgba(30, 58, 138, 0.04) !important;
    background-image: none !important;
}

/* Ensure all primary colored elements use solid color */
.mud-theme-primary {
    background-color: var(--mud-palette-primary) !important;
    background-image: none !important;
}

/* Icon buttons */
.mud-icon-button-color-primary {
    color: var(--mud-palette-primary) !important;
}

.mud-icon-button-color-primary:hover {
    background-color: rgba(30, 58, 138, 0.04) !important;
}

/* MudDataGrid Filter Dialog Fix */
/* Ensure filter dialogs work properly without interfering with MudBlazor functionality */

/* High z-index for filter popovers to ensure they appear on top */
.mud-popover-provider {
    z-index: 10000 !important;
}

/* Ensure MudDataGrid filter menu items are clickable and have proper hover states */
/* Use attribute selectors to target filter-specific elements without being too broad */
.mud-popover[data-mudpopover-origin*="datagrid"] .mud-list-item,
.mud-popover-open .mud-list-item[role="option"] {
    cursor: pointer !important;
    position: relative !important;
}

/* Ensure proper hover feedback for filter menu items */
.mud-popover[data-mudpopover-origin*="datagrid"] .mud-list-item:hover,
.mud-popover-open .mud-list-item[role="option"]:hover {
    background-color: rgba(30, 58, 138, 0.08) !important;
}

/* Selected state for filter items */
.mud-popover[data-mudpopover-origin*="datagrid"] .mud-list-item.mud-selected-item,
.mud-popover-open .mud-list-item[role="option"].mud-selected-item {
    background-color: rgba(30, 58, 138, 0.12) !important;
    color: var(--mud-palette-primary) !important;
}

/* Ensure filter dialog content is not blocked by other elements */
.mud-data-grid .mud-popover {
    z-index: 9999 !important;
}

/* Make sure filter popover content is interactive */
.mud-popover-content {
    pointer-events: auto !important;
}

/* Force all MudBlazor list items in popovers to be interactive */
.mud-popover .mud-list-item,
.mud-popover-content .mud-list-item {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure text inside list items doesn't block clicks */
.mud-popover .mud-list-item *,
.mud-popover-content .mud-list-item * {
    pointer-events: none !important;
}

/* But keep inputs, buttons, and checkboxes clickable */
.mud-popover .mud-list-item input,
.mud-popover .mud-list-item button,
.mud-popover .mud-list-item .mud-checkbox,
.mud-popover .mud-list-item .mud-checkbox *,
.mud-popover-content .mud-list-item input,
.mud-popover-content .mud-list-item button,
.mud-popover-content .mud-list-item .mud-checkbox,
.mud-popover-content .mud-list-item .mud-checkbox * {
    pointer-events: auto !important;
}

/* Styling for filter inputs and buttons */
.mud-data-grid-filter-container .mud-input-slot,
.mud-data-grid-filter-container .mud-input-root {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

.mud-data-grid-filter-container .mud-input-slot:focus-within,
.mud-data-grid-filter-container .mud-input-root:focus {
    border-color: var(--mud-palette-primary);
    outline: 2px solid rgba(30, 58, 138, 0.2);
}

/* Filter apply/clear buttons styling */
.mud-data-grid-filter-container .mud-button {
    margin: 4px 2px;
}

/* ============================================
   MudDataGrid Filter Dialog Border
   ============================================
   Targets the filter dialog popup that appears when clicking
   filter icons in MudDataGrid columns. MudBlazor adds the
   'filters-panel' class to these specific popovers.

   The filter dialog contains:
   - Column selector dropdown
   - Operator dropdown
   - Value input field
   - Add Filter, Apply, and Clear buttons
*/

/* PRIMARY: Target the filter panel by its specific class */
.filters-panel {
    border: 3px solid var(--mud-palette-primary) !important;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background-color: var(--mud-palette-surface) !important;
}

/* ALTERNATIVE: Target mud-popover-open with filters-panel */
.mud-popover.mud-popover-open.filters-panel {
    border: 3px solid var(--mud-palette-primary) !important;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background-color: var(--mud-palette-surface) !important;
}

/* IMPORTANT: Target mud-popover with mud-paper (the actual working selector) */
.mud-popover.mud-paper {
    border: 3px solid var(--mud-palette-primary) !important;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background-color: var(--mud-palette-surface) !important;
}

/* MOST SPECIFIC: Target by the exact classes from the HTML */
.mud-popover.mud-popover-open.mud-paper.filters-panel {
    border: 3px solid var(--mud-palette-primary) !important;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background-color: var(--mud-palette-surface) !important;
}

/* Allow popovers to escape overflow:hidden constraints from tab containers */
.mud-table-row-group-expandable .mud-tabs-panels-wrapper {
    overflow: visible !important;
}

/* Ensure tab panel content doesn't clip filter popovers */
.jurisdiction-tabs .mud-tab-panel {
    overflow: visible !important;
}

/* Responsive MudDataGrid Enhancements */
/* Prevent early horizontal scrollbar */
.responsive-grid {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.responsive-grid .mud-table-container {
    min-width: 0;
    overflow-x: auto;
}

/* Dynamic column widths with text truncation */
.responsive-grid .mud-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 8px !important;
}

/* Allow child row content (like MudTabs) to display properly */
.responsive-grid .mud-table-row-child-content-cell,
.responsive-grid td[colspan] {
    overflow: visible !important;
    white-space: normal !important;
}

/* Let columns naturally size based on content */
.responsive-grid th,
.responsive-grid td {
    min-width: 0 !important;
    max-width: none !important;
}

/* Select checkbox column - minimal width */
.responsive-grid th:first-child,
.responsive-grid td:first-child {
    min-width: 50px !important;
    max-width: 60px !important;
    width: auto !important;
}

/* Name/Search Term column - controlled width with wrapping (20% reduced) */
.responsive-grid th:nth-child(2),
.responsive-grid td:nth-child(2) {
    min-width: 160px !important;
    max-width: 280px !important;
    flex: 1 1 auto;

    /* Enable word wrapping */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;

    /* Line clamping for consistent height */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Hover state for Name column - show full content on desktop */
@media (min-width: 1024px) {
    .responsive-grid td:nth-child(2):hover {
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
        position: relative;
        z-index: 10;
        background-color: var(--mud-palette-surface);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        border-radius: 4px;
        padding: 8px;
        max-width: 400px !important;
    }
}

/* Status, Ref, Date columns - compact but readable */
.responsive-grid th:nth-child(3),
.responsive-grid td:nth-child(3),
.responsive-grid th:nth-child(4),
.responsive-grid td:nth-child(4),
.responsive-grid th:nth-child(5),
.responsive-grid td:nth-child(5) {
    min-width: 70px !important;
    max-width: 120px !important;
    flex: 0 1 auto;
}

/* Mobile-specific adjustments (phones) */
@media (max-width: 768px) {
    /* Reduce font size and padding on mobile */
    .responsive-grid .mud-table-cell {
        padding: 2px 4px !important;
        font-size: 0.75rem !important;
    }

    /* Adjust Name column for mobile - already has wrapping from base rules */
    .responsive-grid td:nth-child(2) {
        min-width: 120px !important;
        max-width: 160px !important;
        -webkit-line-clamp: 3;  /* Allow 3 lines on mobile */
        font-size: 0.75rem !important;
    }

    /* Further reduce column min-widths on mobile */
    .responsive-grid th:nth-child(3),
    .responsive-grid td:nth-child(3),
    .responsive-grid th:nth-child(4),
    .responsive-grid td:nth-child(4),
    .responsive-grid th:nth-child(5),
    .responsive-grid td:nth-child(5) {
        min-width: 60px !important;
        max-width: 90px !important;
    }

    /* Abbreviate column headers on mobile */
    .responsive-grid th[data-field="ReferenceNumber"] .mud-table-cell-content::before {
        content: "Ref #";
        font-size: 0.7rem;
    }
    .responsive-grid th[data-field="ReferenceNumber"] .mud-table-cell-content {
        font-size: 0 !important;
    }

    .responsive-grid th[data-field="CreationDate"] .mud-table-cell-content::before {
        content: "Date";
        font-size: 0.7rem;
    }
    .responsive-grid th[data-field="CreationDate"] .mud-table-cell-content {
        font-size: 0 !important;
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .responsive-grid .mud-table-cell {
        padding: 3px 6px !important;
        font-size: 0.85rem !important;
    }

    /* Adjust Name column for tablets */
    .responsive-grid td:nth-child(2) {
        min-width: 144px !important;
        max-width: 224px !important;
        -webkit-line-clamp: 3;  /* Allow 3 lines on tablets */
    }

    /* Slightly reduce column widths on tablets */
    .responsive-grid th:nth-child(3),
    .responsive-grid td:nth-child(3),
    .responsive-grid th:nth-child(4),
    .responsive-grid td:nth-child(4),
    .responsive-grid th:nth-child(5),
    .responsive-grid td:nth-child(5) {
        min-width: 65px !important;
        max-width: 100px !important;
    }
}

/* Prevent horizontal scroll until absolutely necessary */
.responsive-grid .mud-table {
    table-layout: auto !important;
    width: 100% !important;
}

/* Compact search terms grid specific adjustments */
.compact-search-terms.responsive-grid .mud-table-cell {
    padding: 2px 4px !important;
}

.compact-search-terms.responsive-grid th:first-child,
.compact-search-terms.responsive-grid td:first-child {
    min-width: 40px !important;
    max-width: 50px !important;
}

.compact-search-terms.responsive-grid th:nth-child(2),
.compact-search-terms.responsive-grid td:nth-child(2) {
    min-width: 40px !important;
    max-width: 50px !important;
}

.compact-search-terms.responsive-grid th:nth-child(3),
.compact-search-terms.responsive-grid td:nth-child(3) {
    min-width: 100px !important;
    flex: 1 1 auto;
}

/* COMMENTED OUT - Interferes with MudBlazor tab scrolling and badge positioning
/* Jurisdiction tab badge fix - prevent badge cutoff */
/*.jurisdiction-tabs.small-badge .mud-tab {
    padding-right: 40px !important; /* Ensures badge has space */
/*    padding-left: 12px;
}

.jurisdiction-tabs.small-badge .mud-badge-root {
    right: 6px !important; /* Position badge away from edge */
/*}

.jurisdiction-tabs.small-badge .mud-badge-content {
    min-width: 16px;
    height: 16px;
    padding: 2px 4px;
    font-size: 0.65rem;
    line-height: 1.1;
    font-weight: 500;
}
*/

/* Fix MudTabs scroll detection in MudDataGrid ChildRowContent */
.mud-table-row-group-expandable > td {
    width: 100%;
}

.mud-table-row-group-expandable .mud-tabs {
    width: 100%;
    min-width: 0; /* Prevent flex container from expanding beyond parent */
}

.mud-table-row-group-expandable .mud-tabs-tabbar-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Force tabs container to recognize scrollable content */
.jurisdiction-tabs .mud-tabs-tabbar-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important; /* Ensure content width is properly calculated */
}

/* Ensure scroll buttons are visible and clickable */
.jurisdiction-tabs .mud-tabs-scroll-button {
    z-index: 1;
    position: relative;
}

/* Force MudTabs to recalculate on visibility change */
.mud-table-row-group-expandable[style*="display: table-row"] .mud-tabs {
    visibility: visible !important;
}

/* ============================================
   FAB bottom safe-area (global)
   ============================================
   The Help Assistant chat FAB is fixed at bottom-right and occupies an ~80px band at the bottom
   of the viewport. This padding on the shared page container (AppLayout's MudContainer) keeps
   normal-flow page content — grid pagers, action rows, form footers — out of that band on EVERY
   page, so the FAB never overlaps content. There are no sticky bottom bars in use, so this single
   rule covers the whole app. Verified via headed-browser measurement: on the Users grid scrolled to
   the bottom, the pager overlapped the FAB without this (pager bottom 1026 vs FAB top 1000) and
   cleared it with the padding (pager bottom 938). */
.page-content-safe-area {
    padding-bottom: 88px !important;
}

/* ============================================
   FAB clearance for grid pagers
   ============================================
   MudDataGrid/MudTable pagers sit at the bottom-right of the grid. On grids that fill the viewport
   (fixed-height, or many rows) the pager's nav buttons land under the fixed chat FAB — INCLUDING at
   the initial, unscrolled view, which the bottom safe-area padding does NOT fix (the pager is pinned
   at the grid's bottom, not the page's). The pager (.mud-table-pagination) is display:inline with
   right-aligned content, so padding it does nothing; instead we make it a right-justified flex row
   and pad the right, shifting the whole "Rows per page / range / nav" cluster left so it clears the
   FAB at ANY scroll position. Verified live @1920px on a MudDataGrid: last-page button 1880 -> ~1790
   (FAB left edge 1830) — no overlap, no crowding. Desktop-only: on phones the FAB is smaller and a
   wide shift would waste width. */
@media (min-width: 600px) {
    .mud-table-pagination {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding-right: 90px !important;
    }
}

/* ============================================
   Fix MudSelect Double Scrollbar Issue
   ============================================
   Prevents double scrollbars in MudSelect dropdowns.

   MudBlazor's popover structure for MudSelect:
   - .mud-popover (outer container with max-height from MaxHeight parameter)
   - .mud-popover-cascading-value (z-index context wrapper)
   - .mud-list (inner list with overflow-y: auto by default)

   The double scrollbar occurs when both the popover AND the .mud-list
   have scrolling enabled. This fix ensures only the .mud-list scrolls.
*/

/* Option 1: Hide overflow on the popover-cascading-value wrapper */
.mud-popover .mud-popover-cascading-value {
    overflow: hidden !important;
    max-height: inherit !important;
}

/* Option 2: Target the popover container itself when used with select */
.mud-select + .mud-popover,
.mud-popover.mud-popover-open {
    overflow: hidden !important;
}

/* Option 3: Ensure .mud-list inside popover is the only scrolling element */
.mud-popover .mud-list {
    overflow-y: auto !important;
    max-height: 300px !important; /* Default max-height for select lists */
}

/* When MaxHeight is specified on MudSelect, respect it */
.mud-popover[style*="max-height"] .mud-list {
    max-height: inherit !important;
}

/* Option 4: Target the internal paper wrapper if present */
.mud-popover.mud-paper > .mud-popover-cascading-value {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    max-height: inherit !important;
}

/* Ensure popover content doesn't create additional scroll context */
.mud-popover-cascading-value > .mud-list {
    flex: 1 1 auto;
    min-height: 0;
}

/* Hide scrollbar on the outer popover container - keep only on inner list */
.mud-popover::-webkit-scrollbar,
.mud-popover-cascading-value::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

.mud-popover,
.mud-popover-cascading-value {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ============================================
   Dropdown Text Color Consistency
   ============================================
   Ensures all dropdown items use dark text color.
   MudBlazor uses .mud-typography-body2 which defaults to TextSecondary (lighter).
   Excludes checkbox/icon elements to preserve their styling.
*/

/* Override body2 typography color in dropdowns/popovers */
.mud-popover .mud-typography-body2,
.mud-popover .mud-list-item .mud-typography-body2 {
    color: var(--mud-palette-text-primary) !important;
}

/* Target text inside dropdown list items, excluding checkboxes and icons */
.mud-popover .mud-list-item,
.mud-popover .mud-list-item-text {
    color: var(--mud-palette-text-primary) !important;
}

/* Target span and p elements for text, but not SVG or checkbox elements */
.mud-popover .mud-list-item > span:not(.mud-checkbox):not(.mud-button-root),
.mud-popover .mud-list-item-text > span,
.mud-popover .mud-list-item-text > p,
.mud-popover .mud-list-item > p {
    color: var(--mud-palette-text-primary) !important;
}

/* ============================================
   Menu (MudMenu) dropdown items — MudBlazor v9 class names.
   Completes the migration begun at ".mud-menu-item .mud-icon-root" (~line 216):
   the text block above targets legacy .mud-list-item(-text), which v9 MudMenuItem
   does not emit (it renders .mud-menu-item / .mud-menu-item-text). MudSelect options
   are still .mud-list-item, so the legacy block above is kept as-is.
   ============================================ */

/* Readable dark text for all menu items */
.mud-popover .mud-menu-item,
.mud-popover .mud-menu-item .mud-menu-item-text {
    color: var(--mud-palette-text-primary) !important;
}

/* Visible hover (0.08 matches the selection convention at ~line 142) */
.mud-popover .mud-menu-item.mud-list-item-clickable:hover {
    background-color: rgba(30, 58, 138, 0.08) !important;
}

/* Active/current language: subtle tint + bold brand-blue text.
   4 classes > the 3-class generic rule, so it wins; also placed later for safety.
   Text color via var(--mud-palette-primary) so dark mode (#3b82f6) stays readable —
   never hardcode var(--mud-palette-primary) here. Background hardcoded rgba per app-wide convention. */
.mud-popover .mud-menu-item.mud-menu-item-current-lang {
    background-color: rgba(30, 58, 138, 0.08) !important;
    cursor: default !important;            /* active item is non-clickable */
}
.mud-popover .mud-menu-item.mud-menu-item-current-lang .mud-menu-item-text {
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}
.mud-popover .mud-menu-item.mud-menu-item-current-lang:hover {
    background-color: rgba(30, 58, 138, 0.08) !important;  /* keep tint; beat generic hover */
}

/* Hidden file input for MudFileUpload drag-and-drop */
.file-input-hidden {
    opacity: 0;
}

/* PDF dropzone file input — covers the entire drop area */
.pdf-dropzone-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
}