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

    .mud-picker-calendar .mud-picker-calendar-day.mud-selected .mud-typography.mud-inherit-text,
    .mud-picker-calendar .mud-picker-calendar-day.mud-selected {
        color: var(--mud-palette-primary-text) !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);
}

.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);
}

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