:root {
    --mud-palette-primary-hover: rgba(66,173,42,0.2) !important;
    --mud-palette-secondary-hover: rgba(0,0,0,0.15) !important;
    --mud-palette-tertiary-hover: rgba(20,168,154,0.15) !important;
    --mud-palette-info-hover: rgba(33,150,243,0.15) !important;
    --mud-palette-success-hover: rgba(0,200,83,0.15) !important;
    --mud-palette-warning-hover: rgba(255,152,0,0.15) !important;
    --mud-palette-error-hover: rgba(244,67,54,0.15) !important;
    --mud-palette-dark-hover: rgba(66,66,66,0.15) !important;
    --mud-palette-action-default-hover: rgba(0,0,0,0.15) !important;
    --mud-palette-table-hover: rgba(0,0,0,0.15) !important;
    --mud-palette-table-striped: rgba(0,0,0,0.03) !important;
    --mud-palette-drawer-background-lighter: #262626;
    --mud-typography-subtitle2-weight: 600 !important;
    --filter-drawer-colour: white !important;
    --green-trend-colour: #C8E6C9;
    --red-trend-colour: #FFCDD2;
    --amber-trend-colour: #FFECB3;
    --offline-bar-height: 24px;
    --version-number-height: 32px;
    /* Nav links disabled offline sit on two differently-coloured bars: the black top bar and
       the white bottom bar. One shared grey cannot stay legible on both - #9E9E9E is 7.84:1 on
       black but only 2.68:1 on white. Deliberate literals: every --mud-palette-grey-* spelling
       is undefined (MudBlazor emits -gray-), which is the defect this pair replaces. */
    --nav-link-disabled-on-dark: #9E9E9E;
    --nav-link-disabled-on-light: #757575;
}

* {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    -webkit-print-color-adjust: exact;
}

.overflow-chip {
    font-weight: 400;
    font-size: 10px;
    color: #9E9E9E;
    cursor: default;
}

*::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

    *::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-primary-lighten) !important;
    }

body {
    font-family: var(--mud-typography-default-family) !important;
}

.mud-table-row .mud-typography-subtitle1 {
    font-weight: var(--mud-typography-subtitle2-weight);
}

.mud-table-no-data-cell {
    background: white !important;
}

.mud-nav-link {
    display: unset !important;
}

.mud-nav-item {
    width: unset !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: transparent !important;
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: unset !important;
}

.mud-nav-link:not(.mud-nav-link-disabled):not(.active) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--mud-palette-white) !important;
}

/* The darker grey is the default so that a disabled nav link appearing on any future light
   surface stays legible; only the black top bar opts into the lighter one. Scoped to the bars
   rather than to a width because the bar, not the viewport, decides the background behind a link.
   .mud-navmenu lifts these above MudBlazor's own !important disabled colour, which has the same
   specificity and loads after app.css. */
.mud-navmenu .mud-nav-link.mud-nav-link-disabled, .mud-navmenu .mud-nav-link.mud-nav-link-disabled:hover {
    pointer-events: unset !important;
    color: var(--nav-link-disabled-on-light) !important;
}

    .mud-nav-link.mud-nav-link-disabled:hover {
        cursor: not-allowed !important;
    }

    .mud-nav-link.mud-nav-link-disabled i, .mud-nav-link.mud-nav-link-disabled span {
        color: var(--nav-link-disabled-on-light) !important;
    }

.mud-appbar-fixed-top .mud-navmenu .mud-nav-link.mud-nav-link-disabled,
.mud-appbar-fixed-top .mud-navmenu .mud-nav-link.mud-nav-link-disabled:hover {
    color: var(--nav-link-disabled-on-dark) !important;
}

    .mud-appbar-fixed-top .mud-nav-link.mud-nav-link-disabled i,
    .mud-appbar-fixed-top .mud-nav-link.mud-nav-link-disabled span {
        color: var(--nav-link-disabled-on-dark) !important;
    }

.mud-table-root .mud-table-row:not(.group-header-row) .mud-table-cell {
    text-align: center !important;
}

.mud-table-head tr .mud-table-sort-label-icon {
    display: none !important;
}

    .mud-table-head tr .mud-table-sort-label-icon.mud-direction-asc, .mud-table-head tr .mud-table-sort-label-icon.mud-direction-desc {
        display: inline-block !important;
    }

/* Reveal the icon on hover, so a sortable column can be told apart from one that is not.
   my-audit and my-stock both carry this alongside the rule above; without it every unsorted column
   looks identical to a non-sortable one and sorting is only found by clicking. The :focus-visible
   half cannot match yet -- MudTableSortLabel renders a non-focusable span, so Tab never reaches it
   -- and is here ready for the GVS.Components fix that makes it a button. */
.mud-table-head tr .mud-table-sort-label:hover .mud-table-sort-label-icon,
.mud-table-head tr .mud-table-sort-label:focus-visible .mud-table-sort-label-icon {
    display: inline-block !important;
}

.wrap-text {
    width: 100%;
    overflow-wrap: break-word;
}

.mud-text-dense {
    margin: 0px !important;
}

    .mud-text-dense .mud-input-control-input-container > div.mud-input.mud-input-text, .mud-text-dense .mud-input-control {
        margin: 0px !important;
    }

.hide-clearable.mud-select .mud-icon-button-edge-end {
    display: none;
}

.gvs-fade-opacity {
    --fa-fade-opacity: 0.1;
}

.total-table-cell, .total-table-row {
    background-color: var(--mud-palette-grey-lighter) !important;
}

.mud-icon-button {
    padding: 8px !important;
}

.mud-table-pagination-toolbar {
    height: unset !important;
}

.mud-table-toolbar {
    height: unset !important;
    padding: 4px !important;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 4px !important;
    padding-inline-start: 4px !important;
    padding-inline-end: 4px !important;
}

.group-header-row {
    background-color: var(--mud-palette-background-gray);
}

.mud-table-dense * .group-header-row .mud-table-cell .mud-table-row-expander {
    padding: 4px !important;
}

.mud-table-dense * .group-header-row .mud-table-cell {
    padding: 6px 24px 6px 16px !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 24px !important;
}

/* The brand primary (#42ad2a) only reaches 2.90:1 against white, below the
   WCAG 2.2 AA 4.5:1 minimum for the title text. Dialog headers use a darker
   shade of the same green (5.16:1) — the brand primary is unchanged
   everywhere else. See MYC-1626. */
.mud-dialog-title {
    background-color: #2e7d22 !important;
    color: var(--mud-palette-white) !important;
}

/* The scheduled overview's progress figures highlight at 75% and up. They used
   mud-success-text (#00c853), which reaches only 2.24:1 against the white paper. This
   is the same darker green as the dialog header (5.16:1). Its own class rather
   than the success palette, which is shared with controls on dark surfaces, and
   global rather than scoped because the figures are rendered by a child
   component. The selector matches nothing outside the overview. See MYC-1671. */
.live-progress-good {
    color: #2e7d22;
}

/* The ring's own green and red measure 3.32:1 and 4.24:1 — short of the 4.5:1 SC 1.4.3 asks
   of a caption. These are the app's darker shades for the same two meanings. */
.live-area-key-completed {
    color: #2e7d22;
}

.live-area-key-cancelled {
    color: #D32F2F;
}

/* #D32F2F rather than the error token, which measures 3.68:1 against the white paper where this
   measures 4.98:1 -- a non-text graphic needs 3:1, and the headroom keeps it over that on the
   striped rows too. Global rather than scoped because a child component renders the icon. */
.completed-scheduled-breach-icon {
    color: #D32F2F;
}

.sidebar-chevron {
    transition: left 225ms cubic-bezier(0,0,.2,1) !important;
    left: 0;
    position: fixed;
    bottom: 0;
    background-color: var(--mud-palette-drawer-background);
    z-index: -1;
    border-top-right-radius: var(--mud-default-borderradius);
    cursor: pointer;
    color: var(--mud-palette-white);
}

    .sidebar-chevron.open {
        left: calc(var(--mud-drawer-width-left) - 2.25rem);
    }

.sidebar-hover-container {
    height: calc(100% - var(--mud-appbar-height));
}

    .sidebar-hover-container:hover .sidebar-chevron.open {
        left: var(--mud-drawer-width-left);
    }

.overflow-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-text {
    font-size: 0.75rem;
    color: var(--mud-palette-grey-default);
}

.width-100 {
    width: 100% !important;
}

.height-100 {
    height: 100% !important;
}

.hoverable {
    color: inherit;
    border: 0;
    cursor: pointer;
    margin: 0;
    outline: 0;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms, box-shadow 600ms ease-out;
}

    .hoverable:hover {
        background-color: var(--mud-palette-primary-hover);
    }

/* A one-off halo. Held by component state rather than by a keyframe animation: an animation is
   tied to the element that started it, and a re-render or a re-sort that moves the tile kills it
   part-way through. A plain shadow is simply re-applied on every render for as long as the state
   says so, and the transition on .hoverable fades it out when the state clears. */
.suggested-glow {
    /* !important because app.css is the first stylesheet in index.html: the card's own elevation
       shadow is declared later and wins on order at equal specificity, which is why a plain rule
       here painted nothing at all. */
    box-shadow: 0 0 14px 4px var(--mud-palette-warning) !important;
}

.custom-mud-list-item {
    --mud-palette-action-default-hover: var(--mud-palette-primary-hover);
    margin-bottom: 4px;
}

    .custom-mud-list-item > .mud-icon-root {
        color: var(--mud-palette-white);
    }

.gvs-main-content {
    padding-top: calc(var(--mud-appbar-height) + var(--offline-bar-height)) !important;
}

.offline-bar {
    text-align: center;
    background-color: var(--mud-palette-error) !important;
    top: var(--mud-appbar-height);
    position: fixed !important;
}

.sm-child-content-wrapper {
    display: flex;
    flex-direction: column;
}

.drawer-background-lighter {
    background-color: var(--mud-palette-drawer-background-lighter) !important;
}

.background-colour-white {
    background-color: var(--mud-palette-white) !important;
}

.background-colour-primary {
    background-color: var(--mud-palette-primary);
}

.colour-white {
    color: var(--mud-palette-white);
}

.mud-dialog-title > button {
    color: var(--mud-palette-white);
}

.select-text-box > div > div > div.mud-input-adornment.mud-input-adornment-end {
    cursor: pointer !important;
}

.select-text-box > div > div {
    cursor: pointer !important;
}

    .select-text-box > div > div > input {
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        cursor: pointer !important;
    }

    .select-text-box > div > div > div.mud-input-adornment.mud-input-adornment-end > button {
        pointer-events: none !important;
    }

.colour-white {
    color: var(--mud-palette-primary-text) !important;
}

.colour-black {
    color: var(--mud-palette-text-secondary) !important;
}

.mud-table-head > tr > th, .mud-card-header {
    background-color: var(--mud-palette-primary) !important;
}

    .mud-table-head .mud-table-row .mud-table-cell, .mud-card-header .mud-typography {
        color: var(--mud-palette-primary-text) !important;
    }

.mud-table-container {
    border-radius: var(--mud-default-borderradius) !important;
}

.border-left-white {
    border-left: thin solid white;
}

.custom-nav-button {
    font-size: x-large;
    transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
    color: var(--mud-palette-white) !important;
    cursor: pointer !important;
}

    .custom-nav-button:hover {
        color: var(--mud-palette-primary) !important;
    }

/* New Task sits on the black top bar, so offline it takes the same grey as the nav links disabled
   beside it. An inset ring rather than a border keeps its shape visible without resizing it. */
.new-task-button-container.disabled {
    color: var(--nav-link-disabled-on-dark) !important;
    box-shadow: inset 0 0 0 1px var(--nav-link-disabled-on-dark) !important;
    background-color: transparent !important;
    cursor: default !important;
    pointer-events: none !important;
}

.offline, .offline:hover {
    cursor: not-allowed !important;
    color: var(--mud-palette-grey-light) !important
}

    .offline:active {
        pointer-events: none !important;
    }

    .offline i, .offline span {
        color: var(--mud-palette-grey-light) !important
    }

.user-settings .mud-popover {
    left: -200px !important;
    margin-top: 2px;
}

.nav-button {
    text-align: center;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-link {
    border: 1px solid #7c7c7c;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 150px;
    margin: 0px 5px 5px;
    justify-content: center;
    color: #767676;
    transition-duration: 0.3s;
    padding: 5px;
    font-weight: bold;
    align-items: center;
    border-radius: var(--mud-default-borderradius);
}

    .nav-link:hover {
        background-color: var(--mud-palette-primary);
        border: 1px solid var(--mud-palette-primary);
        color: var(--mud-palette-white);
    }

.nav-link-disabled {
    border: 1px solid #7c7c7c;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 150px;
    margin: 0px 5px 5px;
    justify-content: center;
    color: #767676;
    transition-duration: 0.3s;
    padding: 5px;
    font-weight: bold;
    align-items: center;
}

.nav-icon {
    font-size: 3.5rem !important;
}

.no-item-text {
    color: #616161 !important;
}

/* A sequence name has no length limit, and this report already carries seventeen other columns,
   so a long name is clamped rather than left to squeeze them. */
.completed-scheduled-sequence-cell {
    max-width: clamp(6rem, 12vw, 12rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scheduled task table Notes column: pin the column to a fluid width (scales with
   the viewport, since the table fills the page) and truncate the note to one line.
   Set on both the header and the cell so the column is a definite width; the note
   text is the cell's own content, so it fills the column and ellipsizes at its edge
   rather than leaving a gap. Global (not component-scoped) so it lands on the cell. */
.scheduled-notes-col {
    width: clamp(160px, 20vw, 360px);
    max-width: clamp(160px, 20vw, 360px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#title-text {
    color: #fff;
    align-self: center;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 100%;
    user-select: none;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#time {
    color: #fff;
    align-self: center;
    font-size: 22px;
    padding-right: 10px;
    font-weight: bold;
    width: 85px;
    user-drag: none;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

.text-align-center {
    text-align: center !important;
}

.text-align-end {
    text-align: end !important;
}

.padding-unset {
    padding: unset !important;
}

.loading-box {
    flex-direction: column;
    display: flex;
    align-items: center;
}

.version-number {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: right;
    color: var(--mud-palette-white);
}

.signature-pad {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 16px 16px 8px 16px;
}

    .signature-pad::before,
    .signature-pad::after {
        position: absolute;
        z-index: -1;
        content: "";
        width: 40%;
        height: 10px;
        bottom: 10px;
        background: transparent;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
    }

    .signature-pad::before {
        left: 20px;
        transform: skew(-3deg) rotate(-3deg);
    }

    .signature-pad::after {
        right: 20px;
        transform: skew(3deg) rotate(3deg);
    }

.signature-pad--body {
    position: relative;
    flex: 1;
    border: 1px solid #e6e6e6;
}

    .signature-pad--body canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
    }

.no-error .mud-input-control-helper-container {
    display: none;
}

.text-transform-none {
    text-transform: none !important;
}

.break-word-with-hyphens {
    word-break: break-word;
    hyphens: auto;
}

.timeline-status {
    color: var(--mud-palette-grey-lighter);
    font-size: 1.75rem;
}

.dropzone-drag-in-progress:not(.disable-drop) {
    min-height: 50px;
    border: dashed;
    border-width: 2px;
    border-color: var(--mud-palette-primary);
}

.dropzone-drag-in-progress-assign:not(.disable-drop) {
    border: dashed;
    border-width: 2px;
    border-color: var(--mud-palette-primary);
}

.team-dropzone > .plk-dd-draggable {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

#snackbar {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: var(--mud-default-borderradius);
    padding: 16px;
    position: fixed;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
}

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

    #snackbar:hover {
        cursor: pointer;
    }

.color-white {
    color: white !important;
}

@media (min-width: 960px) {
    .task-details-panel .mud-collapse-wrapper {
        max-height: calc(70vh - 120px);
        overflow-y: auto;
    }
}

.task-expansion-panel .mud-expand-panel-header,
.task-details-panel .mud-expand-panel-header {
    border-radius: var(--mud-default-borderradius);
}

.mud-drawer .mud-expand-panel-content {
    overflow: hidden;
}



@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadeinout {
    0%,100% {
        opacity: 0
    }

    15%, 85% {
        opacity: 1
    }
}

@media (max-width: 960px) {
    .mud-nav-link:not(.mud-nav-link-disabled):not(.active) .mud-nav-link-icon.mud-nav-link-icon-default {
        color: var(--mud-palette-black) !important;
    }

    #snackbar {
        bottom: calc(var(--mud-appbar-height) + 8px);
    }

    .mud-main-content {
        padding-bottom: calc(var(--mud-appbar-height) + 8px);
    }
}

@media (max-width: 600px) {
    #snackbar {
        bottom: var(--mud-appbar-height);
    }

    .mud-main-content {
        padding-bottom: var(--mud-appbar-height);
    }

    /* Bottom nav bar: trim the icon links' side padding so the whole row fits the phone width
       with breathing room at the screen edges. The default 16px padding made the row wider than
       the bar, pushing the outer icons hard against (and past) the edges. 10px keeps a ~44px
       tap target while leaving comfortable left/right padding. */
    .mud-appbar-fixed-bottom .mud-nav-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .xs-child-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .sm-child-content-wrapper {
        display: unset;
        flex-direction: unset;
    }

    .xs-column-reverse {
        flex-direction: column-reverse;
    }

    .offline-bar {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8) !important;
    }

    .gvs-main-content {
        padding-top: calc((var(--mud-appbar-height) + var(--offline-bar-height)) - (var(--mud-appbar-height) + var(--offline-bar-height))/11) !important;
    }
}

.report-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons and links render no focus indicator of their own, leaving keyboard users with no
   idea where they are (WCAG 2.4.7). Keyed off :focus-visible so pointer users see nothing. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--mud-palette-text-primary) !important;
    outline-offset: 2px !important;
}

/* A switch's real input is opacity:0, so the outline above never paints and the rule opposite does
   not reach it — the base is a span. Keyboard users get no indication of where they are (WCAG 2.4.7).
   Drawn inside the ripple circle so it is not clipped by the track. */
label.mud-switch:has(input.mud-switch-input:focus-visible) .mud-switch-base {
    outline: 2px solid var(--mud-palette-text-primary) !important;
    outline-offset: -2px !important;
    border-radius: 50%;
}

/* The top app bar is black, so the ring above is invisible against it. The brand green reads
   7.24:1 there. Scoped to the top bar only - the bottom bar is white, where green would be worse.
   The bar carries links and a role="button" div as well as buttons, and they need it just as much. */
.top-app-bar button:focus-visible,
.top-app-bar a:focus-visible,
.top-app-bar [role="button"]:focus-visible {
    outline-color: var(--mud-palette-primary) !important;
}

/* On a break the avatar goes white, the same signal the domestics sidebar gives. White reads 21:1
   against the black app bar. The initial has to flip to dark with it, or it would be white on white
   - which is also why this is not left to a palette colour. */
.mud-avatar.avatar-on-break {
    background-color: #ffffff !important;
    color: var(--mud-palette-text-primary) !important;
}


/* The brand primary #42ad2a carries white text at 2.90:1, under the WCAG 2.2 AA 4.5:1 minimum and
   under the 3:1 large-text allowance, so it fails at every size. #2e7d22 measures 5.16:1 and is the
   shade MYC-1626 and MYC-1670 already settled on. Opt-in per control rather than a palette change:
   the table header band keeps the brand green, and MYC-1674 owns the palette-wide fix. Each selector
   pairs the opt-in class with MudBlazor's own colour class so a control is only re-coloured while it
   is actually painting the primary green — an unselected outlined chip is left alone.

   MudBlazor's own filled-chip and filled-button rules carry equal or higher specificity and load
   after this sheet, so these need !important to land — the same way MYC-1670's calendar overrides
   do. The FAB rule would win on specificity alone; it is written the same way for consistency.

   :not(:disabled) matters. A disabled MudBlazor button paints a light grey surface under faint
   text; forcing the green onto it took the disabled Reset on the completed page from 1.85:1 to
   1.55:1 and made a dead control look live. Disabled controls keep MudBlazor's own styling.

   The chip selector carries two extra guards, because mud-chip-color-primary is emitted for the
   outlined and text variants too — where the primary colour is the label, not the surface — and a
   disabled chip is marked with the class mud-disabled rather than the :disabled pseudo-class, so
   :not(:disabled) would never match one. */
.a11y-primary-surface.mud-fab-primary:not(:disabled),
.a11y-primary-surface.mud-button-filled-primary:not(:disabled),
.a11y-primary-surface.mud-chip-filled.mud-chip-color-primary:not(.mud-disabled) {
    background-color: #2e7d22 !important;
}

.a11y-primary-surface.mud-fab-primary:not(:disabled):hover,
.a11y-primary-surface.mud-button-filled-primary:not(:disabled):hover,
.a11y-primary-surface.mud-chip-filled.mud-chip-color-primary:not(.mud-disabled):hover {
    background-color: #276d1d !important;
}

/* MudBlazor's text-error alert paints its message at 3.48:1 on its own tint, below the 4.5:1
   minimum. Scoped here rather than in the shared theme, which is tracked separately as MYFM-258. */
.mud-alert.report-load-error,
.mud-alert.report-load-error .mud-alert-message {
    color: #B71C1C;
}

/* The filled error snackbar paints white on #F44336 = 3.68:1, below the 4.5:1 minimum. Darkened
   to match the alert correction above; the shared theme fix is tracked separately as MYFM-258. */
.mud-snackbar.mud-alert-filled-error {
    background-color: #B71C1C;
}

/* The scheduled handset list pins four bands to the top of the screen: the fixed app bar, the
   green header, the area heading and the room heading. Their sizes live here rather than in the
   component because scroll-padding-top has to be set on the scrolling element, and a component's
   scoped CSS cannot reach html. MobileScheduledTasksView.razor.css consumes the same three. */
:root {
    /* MudBlazor's toolbar at Xs. --mud-appbar-height is the 64px sm-and-up figure and is wrong here. */
    --sched-bar-h: 56px;
    --sched-header-h: 4.25rem;
    --sched-area-h: 2.25rem;
}

@media (orientation: landscape) {
    :root {
        --sched-bar-h: 48px;
    }
}

/* Without this, tabbing to a row that is technically inside the viewport but underneath the
   pinned bands does not scroll at all, and the focused control stays hidden (2.4.11).
   scroll-padding-top shrinks the scrollport the browser measures against, so those rows count as
   out of view and get scrolled clear. The offline bar's height is always included: it costs a
   little slack when online and is correct when not. */
html:has(.mobile-scheduled) {
    scroll-padding-top: calc(var(--sched-bar-h) + var(--offline-bar-height, 24px)
        + var(--sched-header-h) + var(--sched-area-h) + 2.5rem);
    /* The bottom navigation bar is fixed too. Tabbing down the list aligns each new row to the
       bottom edge of the scrollport, which put it straight underneath that bar -- the same 2.4.11
       failure as the pinned bands, at the other end of the screen. */
    scroll-padding-bottom: calc(var(--sched-bar-h) + 1rem);
}

/* Blazor's unhandled-error banner. MudBlazor ships its own #blazor-error-ui rule and loads after
   this file, so these selectors are prefixed with body to out-specify it -- without that they are
   dead declarations and the banner keeps MudBlazor's white-on-red, which is 3.68:1. z-index is
   left to MudBlazor so the banner stays above everything else. */
body #blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background-color: #FDECEA;
    border-top: 2px solid #B71C1C;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
    color: #7F1D1D;
    font-size: 0.875rem;
    line-height: 1.4;
}

    body #blazor-error-ui .reload {
        color: #7F1D1D;
        font-weight: 600;
        text-decoration: underline;
    }

    body #blazor-error-ui .dismiss {
        background: none;
        border: 0;
        color: #7F1D1D;
        cursor: pointer;
        font-size: 1rem;
        padding: 0.25rem 0.5rem;
    }

    body #blazor-error-ui .reload:focus-visible,
    body #blazor-error-ui .dismiss:focus-visible {
        outline: 2px solid #7F1D1D;
        outline-offset: 2px;
    }

/* Lifted clear of the bottom app bar, which is fixed at the same edge -- a control focused behind
   the banner is focused where it cannot be seen. The offsets match #snackbar above. */
@media (max-width: 960px) {
    body #blazor-error-ui {
        bottom: calc(var(--mud-appbar-height) + 8px);
    }
}

@media (max-width: 600px) {
    body #blazor-error-ui {
        bottom: var(--mud-appbar-height);
    }
}

/* The in-app equivalent, shown by MainLayout's error boundary in place of the routed page. Only
   the measure lives here; spacing and the button row come from the shared scale. */
.page-error {
    margin-inline: auto;
    max-width: 40rem;
    text-align: center;
}

/* Same correction as .report-load-error: MudBlazor's error alert text is below 4.5:1 on its tint. */
.mud-alert.page-error-alert,
.mud-alert.page-error-alert .mud-alert-message {
    color: #B71C1C;
}

/* Brand green is 2.90:1 against both white text and a white ground, so the recovery buttons carry
   a darkened green. The theme-level correction is tracked separately; this surface is the last
   thing a user sees when everything else has failed and cannot ship below AA. */
body .page-error-actions .mud-button-filled-primary {
    background-color: #2F7D1E;
}

body .page-error-actions .mud-button-outlined-primary {
    border-color: #2F7D1E;
    color: #2F7D1E;
}

/* The avatar menu's popover is rendered by MudPopover outside the component, so its width cannot
   come from TopAppBar's scoped stylesheet. */
.avatar-menu-popover {
    min-width: 250px;
}