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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    display: none;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #43A047;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    font-family: 'Inter', sans-serif;
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

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

.tab-header-only .mud-tabs-panels {
    display: none;
}

/* The theme body weight is 400, which leaves an expansion-panel heading at the
   same weight as the field values inside it. Keep the section heading distinct. */
.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
    font-weight: 600;
}

/* Primary carries two jobs: a foreground colour (links, the active nav item)
   and the filled-button surface. They pull opposite ways — the green light
   enough to read on the dark surfaces is too light for white button text
   (3.3). Primary stays tuned for the foreground, and the filled button takes
   the darker PrimaryDarken tone, where white reads at 5.1. */
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background-color: var(--mud-palette-primary-darken);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-root.mud-button-filled.mud-button-filled-primary:focus-visible,
.mud-button-root.mud-button-filled.mud-button-filled-primary:active {
    background-color: var(--mud-palette-primary-darken);
    filter: brightness(0.88);
}

/* MudBlazor hard-codes text-transform: uppercase on tabs — the one place it
   capitalises for us rather than following the theme's typography tokens. We
   write our own labels in Capital Case and want them shown as written. The
   extra element selector outweighs MudBlazor's rule, which loads after this
   file. The doubled class outweighs it without depending on the element, which
   MudBlazor renders as a div, not a button. */
.mud-tab.mud-tab {
    text-transform: none;
}

/* The tab bar paints --mud-palette-surface, while PageLayout's sticky header
   around it paints --mud-palette-appbar-background. Those are the same colour
   in light mode and different in dark, so the strip showed as a band. Let it
   take the header's colour instead. */
.tab-header-only .mud-tabs-tabbar {
    background-color: transparent;
}

/* Tab icons default to the full 1.5rem icon size, which overpowers the label. */
.tab-header-only .mud-tab .mud-icon-root {
    font-size: 1.125rem;
}

/* An outlined button with Color.Inherit draws its border from currentColor,
   which lands on whatever text colour it happens to sit on — a near-white rule
   on a dark container. Neutral outlined buttons should match the outline on a
   text field instead. Theme-wide, so no screen has to correct it locally.
   Outlined buttons that carry a semantic colour keep their own border. */
.mud-button-root.mud-button-outlined.mud-button-outlined-inherit {
    border-color: var(--mud-palette-lines-inputs);
}

/* An outlined button with no colour set (Color.Default) falls back to a faded
   text colour. The picker buttons — employee, lookup entry, shift — read as
   fields, so they take the input outline too. A button that carries a semantic
   colour sets the full border shorthand and keeps its own. */
.mud-button-root.mud-button-outlined {
    border-color: var(--mud-palette-lines-inputs);
}

/* Menu item icons default to the full 1.5rem icon size, which overpowers the
   label next to it. */
.mud-menu-item > .mud-icon-root {
    font-size: 1.125rem;
}

/* A grid cell with no value renders as a genuinely empty <td>. Show a dash so a
   blank field reads as "not set" rather than as a rendering gap. Body cells
   only — a header or footer with no content is meant to be blank. */
.mud-table-body .mud-table-cell:empty::after {
    content: "-";
    color: var(--mud-palette-text-secondary);
}

/* Expansion-panel sections: MudBlazor's 24px gutters read as too much inset next
   to the 16px page padding. app.css loads before MudBlazor.min.css, so each rule
   carries one class more than the MudBlazor rule it replaces. */
.mud-expand-panels .mud-expand-panel .mud-expand-panel-header.mud-expand-panel-header-gutters {
    padding-left: 16px;
    padding-right: 16px;
}

.mud-expand-panels .mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-left: 16px;
    padding-right: 16px;
}

/* Grids inside a panel pull their first row up by their own negative margin, so
   the content box needs a little top padding of its own to clear the header. */
.mud-expand-panels .mud-expand-panel .mud-expand-panel-content {
    padding-top: 8px;
    padding-bottom: 16px;
}

/* Chips carry a status, a kind or a count — a word or two that has to read at a glance
   against the rows around it. MudBlazor sets no weight of its own, so a chip inherited the
   450 body text and sank into the cell. 600 matches the dashboard's own metric pills.

   Theme-wide rather than per-chip: MudBlazor's Typography has no chip token, so this is
   the one place the rule can live. Two classes, because app.css is linked before
   MudBlazor.min.css. */
.mud-chip.mud-chip {
    font-weight: 600;
}