/* MudBlazor Component Overrides */

/* ==========================================================================
   Light mode muted text - WCAG AA on the grey panel fills
   MudBlazor's default text-secondary, rgba(0,0,0,.5373), measures 4.88:1 on a
   white surface but only 4.45:1 on --mud-palette-background-gray (#f5f5f5),
   which is what every facet panel, tag label and permission key sits on.
   Darkening to .6 gives 5.74:1 on white and 5.59:1 on the grey fill.
   Higher specificity than the :root block MudThemeProvider emits at runtime.
   ========================================================================== */
html[data-dark-mode="false"] {
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   AnvPersona - generated (SVG) avatar
   The class is passed to a <MudAvatar> component, so the rendered element never
   carries the RCL component's CSS-isolation attribute, and AnvPersona emits no
   plain HTML for a ::deep selector to anchor to. These rules therefore cannot
   live in AnvPersona.razor.css at all. See platform ADR-0019.
   ========================================================================== */
.generated-avatar {
    background: transparent !important;
    overflow: hidden;
}

.generated-avatar svg {
    border-radius: inherit;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   AnvWorkState - Prevent select popover from clipping status option text
   ========================================================================== */
.anv-work-state-popover .mud-list-item-text,
.anv-work-state-popover .mud-select-item {
    white-space: nowrap;
}

.anv-work-state-popover {
    min-width: fit-content !important;
}

/* ==========================================================================
   Sticky page headers - the offset that clears the fixed app bar
   MudMainContent is the scroll container (see below) and its box starts at the
   very top of the viewport, behind the fixed MudAppBar — so a page header with
   `position: sticky; top: 0` parks *under* the bar and its top edge is clipped.
   Any page-level sticky header must use `top: var(--anv-sticky-top)`.

   --anv-appbar-height mirrors MudBlazor's own `.mud-main-content` padding-top
   rules (the `.mud-appbar-dense ~` one wins at every breakpoint when the bar
   is dense, which is the default in both apps' MainLayout).

   --anv-sticky-top then subtracts the scroll container's own top padding
   (`pa-4` = 16px, from MainLayout's ContentCssClass): a sticky offset inside a
   scroll container is resolved against its CONTENT box, so that padding is
   already part of the distance. Without the subtraction the header parks 16px
   low and scrolling content shows through the gap under the app bar.
   ========================================================================== */
:root {
    --anv-appbar-height: var(--mud-appbar-height, 64px);
}

body:has(.mud-appbar-dense) {
    --anv-appbar-height: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4);
}

body {
    --anv-sticky-top: calc(var(--anv-appbar-height) - 16px);
}

/* ==========================================================================
   MudLayout + MudMainContent - Constrain layout to viewport so overflow-y: auto
   actually clips and produces scrollbars. Without height: 100vh on mud-layout,
   all height: 100% descendants resolve to auto and nothing scrolls.
   ========================================================================== */
.mud-layout {
    height: 100vh;
}

.mud-main-content {
    overflow-y: auto !important;
    min-height: 0 !important;
    height: 100%;
}

/* Dark Mode Only */

/* ==========================================================================
   Theme Color Support - Ensure white text on colored avatars
   ========================================================================== */

.mud-avatar.mud-color-primary,
.mud-avatar.mud-color-secondary,
.mud-avatar.mud-color-tertiary,
.mud-avatar.mud-color-info,
.mud-avatar.mud-color-success,
.mud-avatar.mud-color-warning,
.mud-avatar.mud-color-error {
    color: white !important;
}

/* ============================================================================
   Split-panel selection parity for custom fields list (theme aware)
   ============================================================================ */

body .custom-fields-list .custom-fields-list__item.custom-fields-list__item--selected {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.25) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-left: 4px solid var(--mud-palette-secondary) !important;
    padding-left: calc(1rem - 4px) !important;
    color: inherit !important;
}

body .custom-fields-list .custom-fields-list__item.custom-fields-list__item--selected:hover {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.32) !important;
}

/* ==========================================================================
   Dark Mode Background Harmonization - Reduce Section Contrast
   ========================================================================== */

/* Darken all container backgrounds to match main background (#1f1f1f) */
html[data-dark-mode="true"] {
    /* MudPaper - base container background */
    .mud-paper {
        background-color: #262626 !important;
    }

    /* MudCard backgrounds */
    .mud-card {
        background-color: #262626 !important;
    }

    /* MudDataGrid and table backgrounds */
    .mud-table-container {
        background-color: #1f1f1f !important;
    }

    .mud-table {
        background-color: transparent !important;
    }

    .mud-table-head {
        background-color: #2a2a2a !important;
    }

    /* MudList backgrounds */
    .mud-list {
        background-color: #1f1f1f !important;
    }

    /* MudNavMenu backgrounds */
    .mud-navmenu {
        background-color: #1a1a1a !important;
    }

    .mud-navmenu-item {
        background-color: transparent !important;

        &:hover {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }
    }

    /* MudDrawer backgrounds */
    .mud-drawer {
        background-color: #1a1a1a !important;
    }

    /* MudAppBar background */
    .mud-appbar {
        background-color: #262626 !important;
    }

    /* MudDialog backgrounds */
    .mud-dialog {
        background-color: #262626 !important;
    }

    .mud-dialog-content {
        background-color: #1f1f1f !important;
    }

    /* MudPopover backgrounds - DARKENED for menus */
    .mud-popover {
        .mud-paper {
            background-color: #2a2a2a !important;
        }
    }

    /* MudMenu backgrounds - DARKENED for dropdown menus */
    .mud-menu {
        .mud-paper {
            background-color: #252525 !important;
        }
    }

    /* MudSelect dropdown backgrounds - DARKENED */
    .mud-select-popover {
        .mud-paper {
            background-color: #252525 !important;
        }
    }

    /* Table row alternating - very subtle */
    .mud-table-body {
        .mud-table-row {
            background-color: transparent !important;

            &:nth-child(even) {
                background-color: rgba(255, 255, 255, 0.02) !important;
            }

            &:hover {
                background-color: rgba(255, 255, 255, 0.05) !important;
            }
        }
    }

    /* List item hover state - very subtle */
    .mud-list-item {
        background-color: transparent !important;

        &:hover {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        &.mud-selected {
            background-color: rgba(91, 126, 255, 0.1) !important;
        }
    }
}

/* ==========================================================================
   Dark Mode Text Color Adjustments - Reduced Contrast Only
   ========================================================================== */

/* Reduce contrast on text in dark mode - make it more muted */
html[data-dark-mode="true"] {
    /* MudDataGrid and Table text - softer muted gray */
    .mud-table-container,
    .mud-table,
    .mud-table-head,
    .mud-table-body {
        .mud-table-cell {
            color: #8a8a8a !important;
        }

        .mud-table-row {
            &:hover {
                .mud-table-cell {
                    color: #a0a0a0 !important;
                }
            }
        }
    }

    /* MudDataGrid header text */
    .mud-table-head {
        .mud-table-cell {
            color: #7a7a7a !important;
            font-weight: 500;
        }
    }

    /* List items text - only direct text, not nested icons */
    .mud-list {
        .mud-list-item {
            /* Apply color only to text content, preserve icon colors */
            font-size: inherit;

            /* Color only text nodes, not icons */
            &:not(.mud-icon):not(.mud-icon-root):not(svg):not(i) {
                color: #8a8a8a !important;
            }

            &:hover {
                color: #a0a0a0 !important;
            }

            /* Explicitly preserve icon colors */
            .mud-icon,
            .mud-icon-root,
            svg,
            i {
                color: inherit;
            }
        }

        /* Direct text in list items */
        .mud-list-item-text {
            color: #8a8a8a !important;
        }
    }

    /* Form labels - softer appearance, but still AA on the grey panel fills
       (#949494 is 5.4:1 on #1f1f1f and 4.9:1 on #27272f; #7a7a7a was 3.8/3.5). */
    label,
    .mud-input-label {
        color: #949494 !important;
    }

    /* Helper text - dimmer than labels (hierarchy: label > value > helper).
       Errors keep MudBlazor's error color — never gray them out. */
    .mud-input-helper-text:not(.mud-input-error) {
        color: #6a6a6a !important;
    }

    /* Fieldset legends - kept in step with the form labels above */
    fieldset {
        legend {
            color: #949494 !important;
        }
    }

    /* General text in dark mode - only text, not nested elements */
    p {
        color: #8a8a8a !important;
    }

    /* Keep muted typography only inside card content/header, not globally */
    .mud-card-content .mud-typography,
    .mud-card-header .mud-typography,
    .mud-card-content,
    .mud-card-header {
        color: #8a8a8a !important;
    }
}

/* Keep button label text aligned with button color (Primary/Error/etc.) */
html[data-dark-mode="true"] .mud-button .mud-typography {
    color: inherit !important;
}

/* Keep MudDatePicker calendar header text/icons readable in dark mode */
html[data-dark-mode="true"] {
    .mud-picker-calendar-header {
        color: var(--mud-palette-white) !important;

        .mud-typography,
        .mud-button,
        .mud-button .mud-typography,
        .mud-icon-root {
            color: inherit !important;
        }
    }

    .mud-picker-datepicker-toolbar .mud-button.mud-button-text-inherit,
    .mud-picker-datepicker-toolbar .mud-button.mud-button-text-inherit .mud-button-label {
        color: var(--mud-palette-primary-text) !important;
    }

    /* :not(:disabled) is load-bearing. MudBlazor dims an out-of-range day (MaxDate/MinDate) via
       .mud-button-root:disabled, which colors the BUTTON; this rule colors the inner span with
       !important, so without the guard it repaints disabled days full-brightness and they read as
       selectable. */
    .mud-picker-calendar .mud-picker-calendar-day:not(.mud-selected):not(.mud-hidden):not(:disabled) .mud-typography.mud-inherit-text {
        color: var(--mud-palette-text-primary) !important;
    }

    .mud-picker-calendar .mud-picker-calendar-day:disabled .mud-typography.mud-inherit-text {
        color: var(--mud-palette-action-disabled) !important;
    }

    /* The selected day is 14px text on the vivid primary disc: white measures
       2.7:1 there. Same call as the clock's selected number below - the disc has
       to stay vivid to read against the surface, so the digit goes dark (6.2:1). */
    .mud-picker-calendar .mud-picker-calendar-day.mud-selected .mud-typography.mud-inherit-text,
    .mud-picker-calendar .mud-picker-calendar-day.mud-selected {
        color: color-mix(in srgb, var(--mud-palette-primary) 20%, #000) !important;
    }

    .mud-picker-calendar .mud-picker-calendar-day.mud-current .mud-typography.mud-inherit-text {
        color: var(--mud-palette-primary) !important;
    }

    .mud-picker-calendar .mud-picker-calendar-month {
        color: #b0b0b0 !important;
    }
}

/* ==========================================================================
   MudDataGrid Filter Icon Enhancement
   ========================================================================== */

/* Target filter icon buttons in MudDataGrid column headers */
.mud-table-container .mud-table .mud-table-head .mud-table-row .mud-table-cell {
    /* Filter icon button with transition for smooth animation */
    .mud-button-root.mud-icon-button {
        transition: all 0.2s ease;
        
        .mud-icon-root {
            transition: color 0.2s ease, transform 0.2s ease;
        }
    }
}

/* When a column filter is ACTIVELY filtering (MudBlazor adds 'filtered' class to button) */
.mud-table-container .mud-table .mud-table-head .mud-table-row .mud-table-cell {
    /* Target the filter button with 'filtered' class */
    .mud-button-root.mud-icon-button.filtered {
        background-color: var(--mud-palette-primary) !important;
        border-radius: 50%;
        padding: 6px;
        
        .mud-icon-root {
            color: var(--mud-palette-white) !important;
            transform: scale(1.15);
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
        }

        &:hover {
            background-color: var(--mud-palette-primary-darken) !important;
            
            .mud-icon-root {
                transform: scale(1.2);
            }
        }
    }
}

/* Add subtle underline indicator to column header when filter is active */
.mud-table-container .mud-table .mud-table-head .mud-table-row .mud-table-cell:has(.mud-icon-button.filtered) {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(to right, 
            var(--mud-palette-primary), 
            var(--mud-palette-primary-lighten));
        opacity: 0.8;
        animation: pulse-filter 2s ease-in-out infinite;
        z-index: 1;
    }
}

/* Shorter selector version for better performance */
.mud-table-head .mud-icon-button.filtered {
    background-color: var(--mud-palette-primary) !important;
    border-radius: 50%;
    
    .mud-icon-root {
        color: var(--mud-palette-white) !important;
        transform: scale(1.15);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }

    &:hover {
        background-color: var(--mud-palette-primary-darken) !important;
        
        .mud-icon-root {
            transform: scale(1.2);
        }
    }
}

/* Pulse animation for filtered column indicator */
@keyframes pulse-filter {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   MudDataGrid Filter Popover Enhancement
   ========================================================================== */

/* Enhance the filter popover appearance when it opens */
.mud-popover.mud-popover-open {
    .mud-list {
        /* Style for filter options list */
        .mud-list-item {
            &:hover {
                background-color: var(--mud-palette-action-default-hover);
            }
        }
    }
}

/* Style the filter input fields in the popover */
.mud-popover {
    .mud-input-slot {
        .mud-input {
            border-color: var(--mud-palette-primary);
        }
    }
}

/* Dark mode popover styling */
html[data-dark-mode="true"] {
    .mud-popover.mud-popover-open {
        .mud-list {
            .mud-list-item {
                color: #8a8a8a !important;

                &:hover {
                    background-color: rgba(80, 80, 80, 0.2) !important;
                    color: #a0a0a0 !important;
                }

                /* Preserve icon colors in popovers */
                .mud-icon,
                .mud-icon-root,
                svg,
                i {
                    color: inherit;
                }
            }
        }
    }

    .mud-popover {
        .mud-input-slot {
            .mud-input {
                border-color: #5a5a5a !important;
            }
        }
    }
}

/* ==========================================================================
   MudInput Component Spacing Overrides - Tight Form Density
   ========================================================================== */

/* Global input control spacing - tighter margins for compact forms.
   The bottom margin lives on the OUTER control only. The helper text sits
   between the inner input container and the control's bottom edge, so a
   margin on the inner container would push the helper away from its own
   input — the helper must hug the field it describes. */
.mud-input-control {
    margin-bottom: 0.5rem !important;
}

.mud-input-control > .mud-input-control-input-container {
    margin-bottom: 0 !important;
}

/* MudBlazor adds margin-top to outlined-with-label controls to make room
   for the floating label — but the raised label sits ON the border notch,
   not above it, so the extra space only made text fields sit farther from
   the previous field than selects do. Zero it for a uniform rhythm.
   (The margin-dense/normal variants are listed for specificity parity.) */
.mud-input-control.mud-input-outlined-with-label,
.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label,
.mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label {
    margin-top: 0 !important;
}

/* Select/autocomplete CONTROLS also carry the .mud-select class, so the
   ".mud-select { margin: 0 }" wrapper reset below strips their bottom
   margin and makes select pairs sit closer than text-field pairs.
   Restore the shared bottom margin (higher specificity wins). */
.mud-input-control.mud-select {
    margin-bottom: 0.5rem !important;
}

/* Counterpart to the margin-top reset above: an expansion panel's collapse
   wrapper clips at its top edge (overflow: hidden) and MudBlazor's own content
   box has no top padding, so MudGrid's negative row margin pulls the first row
   flush against the header — cutting the top ~6px off the floating label of any
   outlined field in that row. Reserve the space the label needs. */
.mud-expand-panel .mud-expand-panel-content {
    padding-top: 0.75rem;
}

/* Consistent compact input typography app-wide: inputs and labels share one
   scale (0.875rem, matching body text) instead of MudBlazor's larger
   subtitle1 default. The shrunk floating label and the fieldset legend both
   derive from this size, so the outline notch stays in sync. */
.mud-input,
.mud-input-label {
    font-size: 0.875rem;
}

/* Ensure all form fields have consistent width */
.mud-text-field,
.mud-select,
.mud-numeric-field,
.mud-date-picker,
.mud-checkbox-wrapper,
.mud-switch {
    width: 100%;
}

/* MudTextField - Remove default margins for tight layout */
.mud-text-field {
    margin: 0 !important;

    .mud-input-slot {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mud-input {
        margin: 0 !important;
    }

    .mud-input-control {
        margin: 0 !important;
        margin-top: 0 !important;
    }

    .mud-input-control-input-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* MudSelect - Remove default margins */
.mud-select {
    margin: 0 !important;

    .mud-input-slot {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mud-input-control-input-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* MudNumericField - Remove default margins */
.mud-numeric-field {
    margin: 0 !important;

    .mud-input-slot {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mud-input-control-input-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* MudDatePicker - Remove default margins */
.mud-date-picker {
    margin: 0 !important;

    .mud-input-slot {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mud-input-control-input-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   Helper Text - Global Field Hierarchy
   Helper captions must read as quiet annotations of the field ABOVE them,
   never as the label of the field below: smaller and dimmer than labels,
   italic, and tight under their own input (the larger gap is to the NEXT
   field). NEVER pull helpers up with a negative margin — their container
   (.mud-input-control-helper-container) has overflow:hidden, so a negative
   top margin clips the top of the text.
   ========================================================================== */
.mud-input-helper-text {
    font-size: 0.7rem;
    line-height: 1.4;
    font-style: italic;
    letter-spacing: 0.01em;
    margin-top: 2px;
    margin-bottom: 0 !important;
}

/* Error messages are actionable, not decorative: upright and in error color. */
.mud-input-helper-text.mud-input-error {
    font-style: normal;
}

/* ==========================================================================
   MudCheckbox and MudSwitch Spacing
   ========================================================================== */

/* Checkbox - tighter vertical spacing */
.mud-checkbox {
    margin: 0.25rem 0 !important;
    padding: 0 !important;
    height: auto;

    .mud-checkbox-label {
        margin: 0 !important;
    }
}

/* Switch - tighter vertical spacing */
.mud-switch {
    margin: 0.25rem 0 !important;
    padding: 0 !important;
    height: auto;

    .mud-switch-label {
        margin: 0 !important;
    }
}

/* ==========================================================================
   MudInput Background Styling - Input Field UX Clarity
   ========================================================================== */

/* Input fields with outlined variant - slightly lighter surface for UX clarity.
   The surface belongs to the field container only. Adornment icons sit inside that
   container but outside the inner input, so filling both double-paints the translucent
   grey over the text and not over the icons — the seam reads as a border boxing the
   icons in. Keep one fill on the container and leave the inner slots transparent. */
html[data-dark-mode="true"] {
    .mud-input.mud-input-outlined,
    .mud-text-field.mud-filled,
    .mud-select.mud-filled,
    .mud-numeric-field.mud-filled,
    .mud-date-picker.mud-filled {
        background-color: rgba(50, 50, 50, 0.4) !important;
        border-color: #4a4a4a !important;
        color: #b0b0b0 !important;

        &:hover {
            background-color: rgba(60, 60, 60, 0.5) !important;
            border-color: #5a5a5a !important;
        }

        &:focus,
        &:focus-within {
            background-color: rgba(70, 70, 70, 0.6) !important;
            border-color: #6a6a6a !important;
            color: #c0c0c0 !important;
        }
    }

    /* Inner slots (input, textarea, the select's display slot) stay transparent so the
       field is one uninterrupted surface from the start adornment to the end one. */
    .mud-input > input.mud-input-root-outlined,
    .mud-input > textarea.mud-input-root-outlined,
    .mud-input > div.mud-input-slot.mud-input-root-outlined {
        background-color: transparent !important;
    }

    .mud-input.mud-input-outlined:focus-within > input.mud-input-root-outlined {
        color: #c0c0c0 !important;
    }

    /* Input text color for better readability */
    input,
    textarea,
    select {
        color: #b0b0b0 !important;

        &::placeholder {
            color: #6a6a6a !important;
            opacity: 0.8;
        }
    }
}

/* Underline and filled inputs - subtle background */
html[data-dark-mode="true"] {
    .mud-input-text.mud-input-underline,
    .mud-input-filled,
    .mud-input-filled-with-label.mud-input-adorned-end {
        background-color: rgba(40, 40, 40, 0.3) !important;
        border-bottom-color: #4a4a4a !important;
    }
}

/* ==========================================================================
   MudButton and MudIconButton Styling
   ========================================================================== */

html[data-dark-mode="true"] {
    /* Button text in dark mode - muted appearance. #9a9a9a keeps AA wherever a
       text button sits on a grey panel fill (5.3:1 on #27272f, 5.9:1 on #1f1f1f);
       #888888 dropped to 4.2:1 on the fill. */
    .mud-button {
        &.mud-button-text {
            color: #9a9a9a !important;

            &:hover {
                color: #b5b5b5 !important;
            }
        }
    }

    /* Outlined buttons - soften only default outlined button color */
    .mud-button-outlined.mud-button-outlined-default {
        border-color: #555555 !important;
        color: #9a9a9a !important;

        &:hover {
            border-color: #666666 !important;
            color: #b5b5b5 !important;
        }
    }
}

/* Icon buttons - consistent padding */
.mud-icon-button {
    padding: 0.5rem;
}

/* Vertically center Bootstrap icons in MudButton */
.mud-button .bi {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
}

/* ==========================================================================
   MudTabs Styling
   ========================================================================== */

/* Dark mode tab styling */
html[data-dark-mode="true"] {
    .mud-tabs-tabbar {
        .mud-tab {
            color: #7a7a7a !important;

            &:hover {
                color: #8a8a8a !important;
            }

            &.mud-tab-active {
                color: #b0b0b0 !important;
            }
        }
    }
}

/* Tabs bar - transparent background */
.mud-tabs-tabbar {
    background-color: transparent !important;

    .bi {
        margin-top: -1rem;
    }
}

/* Compact icon-only tab strip (WorkView) */
.work-panel__tabs--compact {
    .mud-tabs-toolbar {
        min-height: 36px;
        padding: 0;
    }

    .mud-tab {
        min-height: 36px;
        min-width: 44px;
        padding: 6px 10px;

        .mud-icon-root {
            font-size: 1.2rem;
        }
    }
}

/* ==========================================================================
   MudInput Adornment Spacing
   ========================================================================== */

/* Input adornments - tighter gap */
.mud-input-adornment {
    gap: 0.25rem;
}

/* ==========================================================================
   MudSelect Dropdown and Menu Items
   ========================================================================== */

html[data-dark-mode="true"] {
    /* MudSelect dropdown menu */
    .mud-menu,
    .mud-popover {
        .mud-paper {
            background-color: #3a3a3a !important;
        }
    }

    /* MudSelect list items in dropdown */
    .mud-option {
        color: #8a8a8a !important;

        &:hover {
            background-color: rgba(80, 80, 80, 0.2) !important;
            color: #a0a0a0 !important;
        }

        &.mud-option-selected {
            background-color: rgba(80, 80, 80, 0.3) !important;
            color: #b0b0b0 !important;
        }
    }

    /* MudSelect item text */
    .mud-select-item {
        color: #8a8a8a !important;

        &:hover {
            color: #a0a0a0 !important;
        }
    }

    /* Menu items styling */
    .mud-menu-item {
        color: #8a8a8a !important;

        &:hover {
            background-color: rgba(80, 80, 80, 0.2) !important;
            color: #a0a0a0 !important;
        }
    }

    /* Checkbox styling in dark mode - preserve icon color */
    .mud-checkbox {
        .mud-checkbox-label {
            color: #8a8a8a !important;
        }
    }

    /* Switch styling in dark mode - preserve icon color */
    .mud-switch {
        .mud-switch-label {
            color: #8a8a8a !important;
        }
    }
}

/* ==========================================================================
   MudDataGrid Table Row Selection - Selected Row Styling
   ========================================================================== */

/* Selected table row - EXTREMELY HIGH SPECIFICITY to ensure override */
html[data-dark-mode="true"] .mud-table-container .mud-table-body .mud-table-row.grid-row-selected,
html[data-dark-mode="false"] .mud-table-container .mud-table-body .mud-table-row.grid-row-selected,
.mud-table-container .mud-table-body .mud-table-row.grid-row-selected {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.1) !important;
    border-left: 4px solid var(--mud-palette-secondary) !important;
    padding-left: calc(0.5rem - 4px) !important;
    transition: background-color 0.2s ease !important;
}

.mud-table-container .mud-table-body .mud-table-row.grid-row-selected:hover {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.1) !important;
}

/* Theme-aware selected-row text: dark on the light tint in light mode,
   light in dark mode. The old hardcoded #d0d0d0 was near-invisible on the
   light-tinted selected row in light mode (fails WCAG contrast). */
.mud-table-container .mud-table-body .mud-table-row.grid-row-selected .mud-table-cell {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600 !important;
}

/* Light mode override */
html[data-dark-mode="false"] .mud-table-container .mud-table-body .mud-table-row.grid-row-selected {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.1) !important;
    border-left-color: var(--mud-palette-secondary) !important;
}

html[data-dark-mode="false"] .mud-table-container .mud-table-body .mud-table-row.grid-row-selected:hover {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.1) !important;
}

/* ==========================================================================
   Left Panel Grid Row Hover - Cursor Pointer
   ========================================================================== */

/* Make table rows clickable indicator in left panel */
.left-panel .mud-table-row.grid-row:hover {
    cursor: pointer;
}

/* ==========================================================================
   MudDialog - Border, Radius, and Title Styling
   ========================================================================== */
.mud-dialog {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.3) !important;
    border-radius: 12px !important;

    .mud-dialog-title {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
        border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }
}

html[data-dark-mode="true"] .mud-dialog {
    .mud-dialog-title {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
        border-bottom-color: rgba(var(--mud-palette-primary-rgb), 0.25) !important;
    }
}

/* ==========================================================================
   Filled severity surfaces - WCAG AA with the white-on-color look intact
   White on a saturated fill is the look we want (and the Material convention),
   but MudBlazor pairs it with the RAW severity color, which measures 2.0-3.7:1
   across the four severities in both palettes - AA needs 4.5:1. Dark text on
   the untouched fill scores far higher but reads as a highlighter banner rather
   than a Material surface, so instead the text stays white (MudBlazor's own
   --mud-palette-*-text, left alone) and each fill is darkened by exactly as
   much as AA demands and no more. Per-severity percentages, not one shared
   value: red only needs 16% off, amber needs 37% because a bright orange simply
   cannot carry white text. Each is the tighter of the two themes' requirements,
   so one value is correct in both.
   The percentages are tuned against THIS APP's palette defaults (MainLayout:
   Cyan/Green/Orange/Red .Default and .Lighten1), not MudBlazor's stock ones -
   that distinction bit info, which sat at 78% (correct for MudBlazor's #2196F3
   blue) and so measured only 3.67/3.36:1 against our cyan.
   Measured white-text result: 4.85-5.62:1 everywhere.
   Darkening is monotonic for white text, so a user-customized severity color
   also ends up darker than it started - it just isn't guaranteed to clear 4.5
   if that custom color starts far lighter than the default.
   Filled "normal" toasts (dark fill, white text, ~10:1) already pass.
   ========================================================================== */
:root {
    --anv-fill-info: color-mix(in srgb, var(--mud-palette-info) 62%, #000);
    --anv-fill-success: color-mix(in srgb, var(--mud-palette-success) 67%, #000);
    --anv-fill-warning: color-mix(in srgb, var(--mud-palette-warning) 63%, #000);
    --anv-fill-error: color-mix(in srgb, var(--mud-palette-error) 84%, #000);
    /* Primary is the same story with the same fix: white on the raw primary measures
       3.1:1 in light and 2.4:1 in dark. 70% toward black carries white text at ~5:1 in
       both themes. Consumed by the picker toolbars and the guided-tour next button. */
    --anv-fill-primary: color-mix(in srgb, var(--mud-palette-primary) 70%, #000);
}

.mud-snackbar.mud-alert-filled-info {
    background-color: var(--anv-fill-info);
}

.mud-snackbar.mud-alert-filled-success {
    background-color: var(--anv-fill-success);
}

.mud-snackbar.mud-alert-filled-warning {
    background-color: var(--anv-fill-warning);
}

.mud-snackbar.mud-alert-filled-error {
    background-color: var(--anv-fill-error);
}

/* Filled chips carry the same white-on-severity pairing as the toasts and fail
   the same way - and they hold SMALL text, so 4.5:1 is the bar with no
   large-text exemption. Same table, applied to the chip fill. */
.mud-chip.mud-chip-filled.mud-chip-color-info {
    background-color: var(--anv-fill-info);
}

.mud-chip.mud-chip-filled.mud-chip-color-success {
    background-color: var(--anv-fill-success);
}

.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background-color: var(--anv-fill-warning);
}

.mud-chip.mud-chip-filled.mud-chip-color-error {
    background-color: var(--anv-fill-error);
}

/* ==========================================================================
   Picker toolbars + time-picker clock - WCAG AA in both themes
   MudBlazor fills the date/time picker toolbar with the RAW primary. White on
   it is 3.1:1 (light) / 2.7:1 (dark); worse, in dark the muted ".mud-button-text"
   rule above wins on the hour/minute buttons and paints them #9a9a9a, which
   measures 1.1:1 on that blue - the reported "time picker is unreadable".
   On the clock, the number under the pointer is white on the vivid primary
   thumb (2.7:1 dark / 3.1:1 light, both under the 4.5:1 bar at 16px) and every
   other number is a <MudText> the dark-mode "p" rule drags down to 3.5:1.
   Toolbar: the --anv-fill-* move - darken the fill, keep the white text.
   Clock (dark): the thumb CANNOT be darkened - the pointer would sink into the
   face it has to stand out from (5.9:1 today) - so the selected number takes
   the dark side of the pair instead.
   Clock (light): the reverse - the raw primary pointer only manages 2.7:1 on
   the near-white face, so there the pointer darkens and the number stays white.
   Measured on the shipped palette (Blue.Default / Blue.Lighten1); a customized
   primary moves the numbers but the darkening is monotonic, as with --anv-fill-*.
   Identical block in both mudblazor-overrides.css copies - keep in sync.
   ========================================================================== */
.mud-picker-toolbar.mud-theme-primary {
    background-color: var(--anv-fill-primary) !important;
    color: var(--mud-palette-white) !important;
}

/* The hour/minute values are Color.Inherit text buttons, so in dark they take
   #9a9a9a from ".mud-button-text" (1.1:1 on the raw fill) instead of the toolbar
   ink; the ":" is an <h2> MudText that escapes the blanket "p" rule but still
   only reaches 2.7:1 in white. That button rule carries !important at (0,3,1)
   (and (0,4,1) on hover), so these selectors are deliberately class-heavy to
   outrank it - the toolbar owns its own text color. */
.mud-picker-toolbar.mud-theme-primary .mud-button-root.mud-button.mud-button-text,
.mud-picker-toolbar.mud-theme-primary .mud-button-root.mud-button.mud-button-text:hover,
.mud-picker-toolbar.mud-theme-primary .mud-typography,
.mud-picker-toolbar.mud-theme-primary .mud-button-label {
    color: inherit !important;
}

/* MudBlazor dims the unit you are NOT editing to 54% white - 1.6:1 on the raw
   primary, still only 2.4:1 on the darkened fill. 80% clears the 3:1 large-text
   bar (these digits are 3.75rem) and still reads as the inactive one. Last, and
   heavier than the rule above, so it survives both. */
.mud-picker-toolbar.mud-theme-primary .mud-button-root.mud-button.mud-button-text.mud-timepicker-toolbar-text,
.mud-picker-toolbar.mud-theme-primary .mud-button-root.mud-button.mud-button-text.mud-timepicker-toolbar-text:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Clock numbers are <MudText> = <p>: exempt them from the blanket dark-mode
   paragraph color so they keep the palette's own text ink (~8:1). */
html[data-dark-mode="true"] .mud-picker-time-clock .mud-clock-number:not(.mud-theme-primary) {
    color: var(--mud-palette-text-primary) !important;
}

/* The selected number sits on the primary-filled pointer thumb: a dark tint of
   the primary itself reads 6.2:1 there, and follows a user-customized primary
   instead of hardcoding black. */
.mud-picker-time-clock .mud-clock-number.mud-theme-primary {
    color: color-mix(in srgb, var(--mud-palette-primary) 20%, #000) !important;
}

/* Light mode inverts it: the pointer, pin and thumb are the raw primary on a
   near-white face and only reach 2.7:1, under the 3:1 a non-text control needs.
   Darkening them clears it (5.8:1) and puts the selected number back in white. */
html[data-dark-mode="false"] .mud-picker-time-clock .mud-picker-time-clock-pin.mud-primary,
html[data-dark-mode="false"] .mud-picker-time-clock .mud-picker-time-clock-pointer.mud-primary,
html[data-dark-mode="false"] .mud-picker-time-clock .mud-picker-time-clock-pointer-thumb.mud-primary {
    background-color: var(--anv-fill-primary) !important;
}

html[data-dark-mode="false"] .mud-picker-time-clock .mud-picker-time-clock-pointer-thumb.mud-primary-text {
    color: var(--anv-fill-primary) !important;
}

html[data-dark-mode="false"] .mud-picker-time-clock .mud-clock-number.mud-theme-primary {
    color: var(--mud-palette-white) !important;
}

/* The calendar's selected day is the same pairing on a light face (3.1:1), and
   takes the same light-mode answer as the clock pointer: darken the disc, keep
   the white digit. */
html[data-dark-mode="false"] .mud-picker-calendar .mud-picker-calendar-day.mud-selected {
    background-color: var(--anv-fill-primary) !important;
}

html[data-dark-mode="false"] .mud-picker-calendar .mud-picker-calendar-day.mud-selected,
html[data-dark-mode="false"] .mud-picker-calendar .mud-picker-calendar-day.mud-selected .mud-typography {
    color: var(--mud-palette-white) !important;
}

/* ==========================================================================
   Scrollbars - recede at rest, come forward on hover (both themes)
   Nothing styled scrollbars before, so every scroll area used the browser's
   native ones. Those always render in the LIGHT color scheme regardless of the
   app theme: a light-grey thumb that DARKENS on hover. Correct on a white
   surface, backwards on a dark one — the thumb was the brightest thing on the
   panel at rest and then dimmed when grabbed.
   What was actually painting them: MudThemeProvider injects its own <style>
   hardcoding the thumb to #c4c4c4, darkening to #a6a6a6 on hover, in BOTH
   themes. Its companion "html, body * { scrollbar-color: ...; scrollbar-width:
   thin }" rule outranks anything here AND makes Blink ignore every
   ::-webkit-scrollbar rule below (Blink drops the legacy pseudo-elements for
   any element that sets scrollbar-color/width). So none of this section could
   take effect until DefaultScrollbar="true" was set on MudThemeProvider in both
   MainLayout.razor files — that switch is load-bearing, not cosmetic.
   With it off, two mechanisms line up: color-scheme tells the browser the
   surface is dark (Firefox and native controls follow it), and the
   ::-webkit-scrollbar block gives Blink/WebKit an explicit low-alpha ink of the
   theme's own text color, stepping up on hover/active. Because the ink is black
   in light mode and white in dark mode, "stronger" resolves to darker on light
   and brighter on dark.
   Components that deliberately hide their scrollbar (e.g. AnvSplitPanel's
   .left-panel) keep doing so — scoped CSS outranks these * selectors.
   ========================================================================== */
/* color-scheme is the ONLY lever that still works, and it is what actually
   fixes this. It must track the app theme, NOT the OS/browser theme — this is
   a property we set from our own data-dark-mode attribute, never a
   prefers-color-scheme media query.
   The var()s below are only consumed by the legacy ::-webkit-scrollbar block;
   they are kept because that block still applies in Safari and older Blink.
   Light values live on :root rather than [data-dark-mode="false"]: the
   attribute is absent until a theme preference is applied and is removed again
   on logout. */
:root {
    color-scheme: light;
    --anv-scrollbar-thumb: rgba(0, 0, 0, 0.22);
    --anv-scrollbar-thumb-hover: rgba(0, 0, 0, 0.40);
    --anv-scrollbar-thumb-active: rgba(0, 0, 0, 0.58);
}

html[data-dark-mode="true"] {
    color-scheme: dark;
    --anv-scrollbar-thumb: rgba(255, 255, 255, 0.22);
    --anv-scrollbar-thumb-hover: rgba(255, 255, 255, 0.40);
    --anv-scrollbar-thumb-active: rgba(255, 255, 255, 0.58);
}

/* Do NOT add a global scrollbar-width/scrollbar-color rule here. Those pin the
   thumb to one flat color, and the standard scrollbar has no hover or active
   state to restyle — setting them would re-freeze the thumb and undo the whole
   point of this section. Leave sizing and hover to the browser. */

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* 3px transparent border + padding-box clip = a 6px pill inside a 12px hit area. */
*::-webkit-scrollbar-thumb {
    background-color: var(--anv-scrollbar-thumb);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--anv-scrollbar-thumb-hover);
}

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

/* MudBlazor styles textarea scrollbars itself, at a higher specificity than the
   * rules above: a flat --mud-palette-lines-inputs thumb with NO hover or active
   state, so multiline fields would keep an inert scrollbar. Same selector (this
   file loads after MudBlazor.min.css) with the same ink recipe. */
.mud-input > textarea.mud-input-root::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    cursor: default;
}

.mud-input > textarea.mud-input-root::-webkit-scrollbar-thumb {
    background-color: var(--anv-scrollbar-thumb);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 6px;
}

.mud-input > textarea.mud-input-root::-webkit-scrollbar-thumb:hover {
    background-color: var(--anv-scrollbar-thumb-hover);
}

.mud-input > textarea.mud-input-root::-webkit-scrollbar-thumb:active {
    background-color: var(--anv-scrollbar-thumb-active);
}

/* ==========================================================================
   Guided tours - Driver.js popover + overlay restyled on the MudBlazor palette
   (platform ADR-0015). Driver.js ships hardcoded light colors (#fff / #2d2d2d)
   that fail AA against the app's dark surfaces, and its own stylesheet is loaded
   lazily by lib/anvil-tour/guided-tour.js. These rules key off the palette
   variables so they follow the app theme, never prefers-color-scheme (ADR-0019).
   Identical block in both mudblazor-overrides.css copies - keep in sync.
   ========================================================================== */
/* White text on the raw primary measures 3.1:1 (light) / 2.7:1 (dark) - the same failure the
   --anv-fill-* tokens solve; the next button uses the shared --anv-fill-primary. */
.driver-popover.anv-tour {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-8);
    max-width: 340px;
    padding: 16px 18px 14px;
}

.driver-popover.anv-tour .driver-popover-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    margin-bottom: 6px;
}

.driver-popover.anv-tour .driver-popover-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.driver-popover.anv-tour .driver-popover-progress-text {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.driver-popover.anv-tour .driver-popover-close-btn {
    color: var(--mud-palette-text-secondary);
}

.driver-popover.anv-tour .driver-popover-close-btn:hover,
.driver-popover.anv-tour .driver-popover-close-btn:focus-visible {
    color: var(--mud-palette-text-primary);
}

/* Footer buttons: outlined secondary (Back) and filled primary (Next / Done), matching MudButton.
   Driver.js paints a white text-shadow on every button - remove it or dark mode shows halos. */
.driver-popover.anv-tour .driver-popover-footer button {
    text-shadow: none;
    font: 500 0.8125rem/1.75 var(--mud-typography-default-family);
    letter-spacing: 0.02857em;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: var(--mud-default-borderradius);
    background-color: transparent;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
}

.driver-popover.anv-tour .driver-popover-footer button:hover,
.driver-popover.anv-tour .driver-popover-footer button:focus-visible {
    background-color: var(--mud-palette-primary-hover);
}

.driver-popover.anv-tour .driver-popover-footer button.driver-popover-next-btn {
    background-color: var(--anv-fill-primary);
    border-color: var(--anv-fill-primary);
    color: #fff;
}

.driver-popover.anv-tour .driver-popover-footer button.driver-popover-next-btn:hover,
.driver-popover.anv-tour .driver-popover-footer button.driver-popover-next-btn:focus-visible {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 60%, #000);
}

.driver-popover.anv-tour .driver-popover-footer button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The arrow is drawn with border colors; it must match the popover surface in both themes. */
.driver-popover.anv-tour .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--mud-palette-surface); }
.driver-popover.anv-tour .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--mud-palette-surface); }
.driver-popover.anv-tour .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--mud-palette-surface); }
.driver-popover.anv-tour .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--mud-palette-surface); }

/* Highlighted element: a primary ring so the stage reads as "this one" against both themes. */
.driver-active .driver-active-element {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
    border-radius: 4px;
}

/* ==========================================================================
   Editor "…" menu - Delete row
   Menu items render in the root popover, outside the component's CSS scope, so
   the hover state has to live here. AnvEditorActionButtons only emits this class
   while Delete is enabled, so no disabled guard is needed. The resting color is
   an inline style on the item; hover/keyboard focus lifts the icon to full error
   red (>= 3:1 on the menu hover surface in both themes).
   ========================================================================== */
.anv-editor-actions__delete-item:hover .mud-icon-root,
.anv-editor-actions__delete-item:focus-visible .mud-icon-root {
    color: var(--mud-palette-error);
}

/* ==========================================================================
   In-app help dialog (platform ADR-0058). The body is the help generator's
   plain Markdown output fetched from /help/; help.css is the SITE's stylesheet
   and is never loaded by the app, so the body is styled here on the MudBlazor
   palette (ADR-0019). Identical block in both mudblazor-overrides.css copies -
   keep in sync.
   ========================================================================== */
.anv-help-dialog__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.anv-help-dialog__heading { min-width: 0; }
.anv-help-dialog__heading .mud-typography { overflow-wrap: anywhere; }
.anv-help-dialog__heading .mud-typography-caption { color: var(--mud-palette-text-secondary); }

.anv-help-dialog__content { min-height: 10rem; }

.anv-help-topic {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.anv-help-topic > :first-child { margin-top: 0; }
.anv-help-topic h2 {
    font-size: 1.2rem;
    margin: 1.5rem 0 0.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.anv-help-topic h3 { font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }
.anv-help-topic p,
.anv-help-topic ul,
.anv-help-topic ol { margin: 0 0 0.9rem; }
.anv-help-topic li { margin: 0.2rem 0; }
.anv-help-topic a { color: var(--mud-palette-primary); }

.anv-help-topic code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: var(--mud-palette-background-gray);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.anv-help-topic pre {
    background: var(--mud-palette-background-gray);
    padding: 0.8rem 1rem;
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
}
.anv-help-topic pre code { background: none; padding: 0; }

.anv-help-topic table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.anv-help-topic th,
.anv-help-topic td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
}
.anv-help-topic th { background: var(--mud-palette-background-gray); }

.anv-help-topic blockquote {
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
}
.anv-help-topic blockquote p:last-child { margin: 0; }

.anv-help-topic img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.anv-help-topic kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8em;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 0.35em;
    background: var(--mud-palette-background-gray);
}

/* "Not translated yet" notice the generator prepends when a culture fell back to English. */
.anv-help-topic .notice {
    border: 1px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    padding: 0.6rem 0.9rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

/* Phones: the dialog is the screen. */
@media (max-width: 600px) {
    .mud-dialog.anv-help-dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0 !important; /* MudBlazor sets the radius with higher specificity */
    }
}

/* ==========================================================================
   NavMenu drawer - keep it scrollable (mouse wheel / touch) without the
   scrollbar track. MudBlazor's own .mud-drawer rule sets overflow-y:auto,
   which is what draws the awkward bar on tall menus.
   ========================================================================== */
#main-nav-menu.mud-drawer {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
}

    #main-nav-menu.mud-drawer::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Chromium Edge */
    }

    /* The drawer ends flush with the viewport, so the last item sits under the
       browser's link-status bubble. Room below it lets it scroll clear. Child
       combinators: each nav group nests its own .mud-navmenu. */
    #main-nav-menu.mud-drawer > .mud-drawer-content > .mud-navmenu {
        padding-bottom: 3rem;
    }