html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

tr.selected-row,
tr.selected-row > td,
.mud-table-row.selected-row,
.mud-table-row.selected-row > td {
    background-color: rgba(33, 150, 243, 0.20) !important;
}

/* Breakpoint-aware visibility helpers (Mud breakpoints: xs<600, sm<960, md<1280). */
@media (max-width: 599.98px) {
    .hide-xs { display: none !important; }
}
@media (max-width: 959.98px) {
    .hide-sm-down { display: none !important; }
}
@media (max-width: 1279.98px) {
    .hide-md-down { display: none !important; }
}

/*
 * Drawer + AppBar positioning.
 *
 * AppShell renders inside an SSR interactive boundary, which breaks MudBlazor's
 * own ClipMode/persistent CSS (it relies on classes set through MudLayout
 * context that doesn't traverse the boundary). These rules re-establish the
 * expected behavior using only the drawer's own classes plus :has().
 */
.mud-drawer.mud-drawer-pos-left {
    top: var(--mud-appbar-height, 64px) !important;
    height: calc(100vh - var(--mud-appbar-height, 64px)) !important;
}

@media (max-width: 599.98px) {
    .mud-drawer.mud-drawer-pos-left {
        top: var(--mud-appbar-height-dense, 56px) !important;
        height: calc(100vh - var(--mud-appbar-height-dense, 56px)) !important;
    }
}

@media (min-width: 960px) {
    .mud-layout:has(.mud-drawer.mud-drawer-pos-left.mud-drawer--open) .mud-main-content {
        padding-left: var(--mud-drawer-width-left, 240px);
        transition: padding-left 225ms cubic-bezier(0.0, 0, 0.2, 1);
    }
}