/* The modern ECM look (Phase 1.6; colours 7.3c, ModernPalette.Ecm): the page ground and a visible keyboard focus ring in
   the primary colour (6.35:1 on white, 5.49:1 on the menu; 1.6's teal ring was 2.81:1, under WCAG 2.2's 3:1). */
html, body {
    background: var(--mud-palette-background);
}

/* A named region with tabindex: a table that scrolls sideways in its own box, reached with Tab (the dashboard, 7D.5). */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, [role="region"][tabindex]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The menu (7.3c): the logo on a white chip, section labels in the menu's own grey, and the selected item filled with the
   primary colour and marked, so where you are is clear at a glance. Same selectors as MudBlazor's, later, so they win. */
.nav-logo {
    display: flex;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.nav-section {
    color: var(--eq-drawer-label);
}

.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    position: relative;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    font-weight: 600;
}

    .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
        color: var(--mud-palette-primary-text);
    }

    .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 50%;
        width: 4px;
        height: 20px;
        margin-top: -10px;
        border-radius: 2px;
        background: currentColor;
    }

@media (hover: hover) and (pointer: fine) {
    .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-primary-darken);
    }
}

.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-primary-darken);
}

/* Cards and grids (7.3c): a light shadow, so they stand off the grey page. */
.mud-paper-outlined,
.mud-table-outlined {
    box-shadow: 0 1px 3px rgba(var(--mud-palette-text-primary-rgb), 0.08);
}

/* Grid header rows (7.3c): a grey tint, so the header separates from the rows; also when the header is fixed (MudBlazor
   gives those the surface colour, in a rule of the same weight). */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-table-sticky-header .mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--eq-table-head);
}

h1:focus {
    outline: none;
}

/* A focused control is never scrolled under the fixed app bar (64 px; 56 px on phones): WCAG 2.2 2.4.11 (6.10). */
html {
    scroll-padding-top: 72px;
}

/* Phones and touch screens (6.10): touch targets of at least 44 px, as the plan asks (WCAG 2.2 AA's minimum is 24 px).
   MudBlazor's medium buttons are 36.5 px, its clickable chips 32 px and its dense outlined inputs 40 px; the provider
   pages' and the dashboard's links in grid cards are one line of text. */
@media (max-width: 600px), (pointer: coarse) {
    .mud-button-root.mud-button,
    button.mud-chip {
        min-height: 44px;
    }

    /* A grid's column header buttons (sort): 26 px in MudBlazor; shown on tablets, where the rows aren't cards. */
    .mud-table-head .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* More specific than MudBlazor's own rule for these (.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense). */
    .mud-input-control-margin-dense .mud-input.mud-input-outlined > input.mud-input-root-margin-dense,
    .mud-input-control-margin-dense .mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-margin-dense {
        padding-top: 12.5px;
        padding-bottom: 12.5px;
    }

    a.provider-open,
    a.provider-link,
    a.dash-open {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The menu's links (41 px in MudBlazor), and the dashboard's button that opens a contract's job costs and allowances
       (a small icon button, 26 px) (7D.5). */
    .mud-navmenu .mud-nav-link {
        min-height: 44px;
    }

    .mud-icon-button.dash-expand {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Tabs keep their captions' case, as buttons do in the theme (MudBlazor's CSS capitalises them; Phase 2.1). 7.3c: the
   others in the secondary text colour, the selected one bold in the text colour over a 3 px underline in the accent
   (each MudTabs has SliderColor="Color.Tertiary"). */
.mud-tabs .mud-tab {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

    .mud-tabs .mud-tab:not(.mud-disabled) {
        color: var(--mud-palette-text-secondary);
    }

    .mud-tabs .mud-tab.mud-tab-active:not(.mud-disabled) {
        color: var(--mud-palette-text-primary);
        font-weight: 700;
    }

.mud-tab-slider.mud-tab-slider-horizontal {
    height: 3px;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}