html, body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #F0F2F5;
    color: #1A1A2E;
}

h1:focus {
    outline: none;
}

a {
    color: #1B4F8A;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #00897B;
}

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

.validation-message {
    color: #D32F2F;
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Blazor error bar */
#blazor-error-ui {
    background: #FFF3E0;
    border-top: 2px solid #FF9800;
    bottom: 0;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.9rem;
    color: #4A4A4A;
}

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

.blazor-error-boundary {
    background: #FFEBEE;
    border-left: 4px solid #D32F2F;
    padding: 1rem 1rem 1rem 1.5rem;
    color: #B71C1C;
    border-radius: 4px;
    margin: 1rem 0;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
    font-weight: 600;
}

/* Master-detail "currently viewed" row indicator for MudTable grids.

   - Background tint is a static light blue-grey. We avoided
     `var(--mud-palette-primary-lighten)` (renders too dark for deep-navy
     primaries like #1B4F8A) and color-mix() (not supported on Chrome <111
     or iOS Safari <16.2 per IDE diagnostics).
   - The 4px left accent still uses `var(--mud-palette-primary)` so it
     adapts to the tenant theme.
   - Background goes on every <td> in the row. Setting it on <tr> alone is
     unreliable because MudTable applies its own per-cell styling that wins
     specificity battles in some MudBlazor versions.
   - Left accent is an inset box-shadow on the first <td> only — box-shadow
     on a <tr> (display: table-row) doesn't render in most browsers. */
tr.row-selected td,
tr.row-selected:hover td {
    background-color: #E8EDF3 !important;
}

tr.row-selected td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

/* Navy-bar form section header — used to group fields inside an admin
   edit form (Clients edit form, Attendants profile, etc.). Pair with a
   MudDivider underneath for the thin accent line. Originally lived inline
   in ClaimantApplicantEditForm.razor; promoted to global so every admin
   edit surface can share it without duplicating the style block. */
.section-header {
    background-color: var(--mud-palette-primary);
    color: #fff;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 4px 12px;
    border-radius: 4px;
}

/* Selected (active) nav item in the dark side drawer. MudBlazor colours the
   active link with the primary colour, which is nearly the same navy as the
   drawer background, so the selected item reads as almost invisible (e.g.
   "Timesheets"). Force a high-contrast light treatment with a subtle
   highlight instead. */
.mud-drawer .mud-nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.14);
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: #fff !important;
}

/* Hover has the same problem — the default hover tint washes the text out
   against the dark drawer. Keep text/icon light with a subtle highlight. */
.mud-drawer .mud-nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.mud-drawer .mud-nav-link:hover .mud-nav-link-icon {
    color: #fff !important;
}

/* Admin master/detail pages (Care Types, Clients, Attendants, Insurance):
   the detail panel sits sticky beside the list on wide screens, but on a
   narrow/stacked layout (phones, a folded foldable's cover screen) it becomes
   a full-screen overlay while a row is open — so the editor is front-and-centre
   and the list stays mounted underneath, preserving its scroll position. Add
   "admin-detail" to the detail column and toggle "admin-detail-open" when a row
   is selected; pair with a `d-md-none` "Back to list" button to close. */
@media (min-width: 960px) {
    .admin-detail {
        position: sticky;
        top: 16px;
        align-self: flex-start;
    }
}

@media (max-width: 959.98px) {
    .admin-detail {
        display: none;
    }
    .admin-detail.admin-detail-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1300;
        overflow-y: auto;
        background: var(--mud-palette-background, #F0F2F5);
        padding: 12px;
    }
}