/*
 * mudcompat.css — the base look for the compatibility adapters.
 *
 * This file replaces MudBlazor.min.css (594 KB, render-blocking, and the first thing a phone on a cold
 * visit had to finish downloading before it was allowed to paint). It is a fraction of that size because
 * it covers only the components this platform actually uses, and because everything that can be expressed
 * as a custom property already is: colour, type scale, elevation and shell metrics all arrive from
 * MudThemeProvider, which serialises the same TmaTheme.Value as before.
 *
 * It is deliberately written against the SAME class names the package used. ~400 first-party rules across
 * tokens.css, base.css, shell.css, admin.css, app.css and the scoped .razor.css files extend those names
 * rather than replacing them, and a large part of the test suite asserts through them. Those rules load
 * after this file and continue to win, which is what makes the swap invisible.
 *
 * Ordering note: every rule here is a single class selector (specificity 0,1,0) so that any existing
 * first-party override, however it is written, still takes precedence.
 */

/* ---------- element reset ---------------------------------------------------------------------
 *
 * The package sheet carried an element reset as well as its components, and dropping it put the
 * BROWSER'S default button back under every first-party `<button>` that states only its own colour and
 * layout. MEASURED on staging 2026-09-09: the account menu's two Appearance rows (`button.menu-item`)
 * painted a grey ButtonFace fill with an `outset` border inside a popover whose other rows are flat,
 * because `.tma-menu-pop .menu-item` never had to state a background — MudBlazor.min.css already did.
 *
 * Restated VERBATIM from that sheet rather than reinvented: every button on this platform was authored
 * on top of these exact declarations, so a softer reset would move buttons that are correct today. It is
 * an element selector (0,0,1) stated before every component rule below, which is the same position and
 * the same losing specificity it had in the package — every existing `.mud-*` and first-party class rule
 * still outranks it.
 */

button {
    color: inherit;
    border: 0;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    outline: 0;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- typography ------------------------------------------------------------------------ */

.mud-typography { margin: 0; }

.mud-typography-h1 { font-family: var(--mud-typography-h1-family); font-size: var(--mud-typography-h1-size); font-weight: var(--mud-typography-h1-weight); line-height: var(--mud-typography-h1-lineheight); letter-spacing: var(--mud-typography-h1-letterspacing); text-transform: var(--mud-typography-h1-text-transform); }
.mud-typography-h2 { font-family: var(--mud-typography-h2-family); font-size: var(--mud-typography-h2-size); font-weight: var(--mud-typography-h2-weight); line-height: var(--mud-typography-h2-lineheight); letter-spacing: var(--mud-typography-h2-letterspacing); text-transform: var(--mud-typography-h2-text-transform); }
.mud-typography-h3 { font-family: var(--mud-typography-h3-family); font-size: var(--mud-typography-h3-size); font-weight: var(--mud-typography-h3-weight); line-height: var(--mud-typography-h3-lineheight); letter-spacing: var(--mud-typography-h3-letterspacing); text-transform: var(--mud-typography-h3-text-transform); }
.mud-typography-h4 { font-family: var(--mud-typography-h4-family); font-size: var(--mud-typography-h4-size); font-weight: var(--mud-typography-h4-weight); line-height: var(--mud-typography-h4-lineheight); letter-spacing: var(--mud-typography-h4-letterspacing); text-transform: var(--mud-typography-h4-text-transform); }
.mud-typography-h5 { font-family: var(--mud-typography-h5-family); font-size: var(--mud-typography-h5-size); font-weight: var(--mud-typography-h5-weight); line-height: var(--mud-typography-h5-lineheight); letter-spacing: var(--mud-typography-h5-letterspacing); text-transform: var(--mud-typography-h5-text-transform); }
.mud-typography-h6 { font-family: var(--mud-typography-h6-family); font-size: var(--mud-typography-h6-size); font-weight: var(--mud-typography-h6-weight); line-height: var(--mud-typography-h6-lineheight); letter-spacing: var(--mud-typography-h6-letterspacing); text-transform: var(--mud-typography-h6-text-transform); }
.mud-typography-subtitle1 { font-family: var(--mud-typography-subtitle1-family); font-size: var(--mud-typography-subtitle1-size); font-weight: var(--mud-typography-subtitle1-weight); line-height: var(--mud-typography-subtitle1-lineheight); letter-spacing: var(--mud-typography-subtitle1-letterspacing); text-transform: var(--mud-typography-subtitle1-text-transform); }
.mud-typography-subtitle2 { font-family: var(--mud-typography-subtitle2-family); font-size: var(--mud-typography-subtitle2-size); font-weight: var(--mud-typography-subtitle2-weight); line-height: var(--mud-typography-subtitle2-lineheight); letter-spacing: var(--mud-typography-subtitle2-letterspacing); text-transform: var(--mud-typography-subtitle2-text-transform); }
.mud-typography-body1 { font-family: var(--mud-typography-body1-family); font-size: var(--mud-typography-body1-size); font-weight: var(--mud-typography-body1-weight); line-height: var(--mud-typography-body1-lineheight); letter-spacing: var(--mud-typography-body1-letterspacing); text-transform: var(--mud-typography-body1-text-transform); }
.mud-typography-body2 { font-family: var(--mud-typography-body2-family); font-size: var(--mud-typography-body2-size); font-weight: var(--mud-typography-body2-weight); line-height: var(--mud-typography-body2-lineheight); letter-spacing: var(--mud-typography-body2-letterspacing); text-transform: var(--mud-typography-body2-text-transform); }
.mud-typography-caption { font-family: var(--mud-typography-caption-family); font-size: var(--mud-typography-caption-size); font-weight: var(--mud-typography-caption-weight); line-height: var(--mud-typography-caption-lineheight); letter-spacing: var(--mud-typography-caption-letterspacing); text-transform: var(--mud-typography-caption-text-transform); }
.mud-typography-overline { font-family: var(--mud-typography-overline-family); font-size: var(--mud-typography-overline-size); font-weight: var(--mud-typography-overline-weight); line-height: var(--mud-typography-overline-lineheight); letter-spacing: var(--mud-typography-overline-letterspacing); text-transform: var(--mud-typography-overline-text-transform); }

.mud-typography-gutterbottom { margin-bottom: 0.35em; }
.mud-typography-align-left { text-align: left; }
.mud-typography-align-center { text-align: center; }
.mud-typography-align-right { text-align: right; }
.mud-typography-align-justify { text-align: justify; }
.mud-typography-align-start { text-align: start; }
.mud-typography-align-end { text-align: end; }

/* ---------- palette utility classes ----------------------------------------------------------- */

.mud-primary-text { color: var(--mud-palette-primary); }
.mud-secondary-text { color: var(--mud-palette-secondary); }
.mud-tertiary-text { color: var(--mud-palette-tertiary); }
.mud-info-text { color: var(--mud-palette-info); }
.mud-success-text { color: var(--mud-palette-success); }
.mud-warning-text { color: var(--mud-palette-warning); }
.mud-error-text { color: var(--mud-palette-error); }
.mud-dark-text { color: var(--mud-palette-dark); }
.mud-surface-text { color: var(--mud-palette-text-primary); }
.mud-transparent-text { color: transparent; }

.mud-theme-primary { color: var(--mud-palette-primary-text); background-color: var(--mud-palette-primary); }
.mud-theme-secondary { color: var(--mud-palette-secondary-text); background-color: var(--mud-palette-secondary); }
.mud-theme-tertiary { color: var(--mud-palette-tertiary-text); background-color: var(--mud-palette-tertiary); }
.mud-theme-info { color: var(--mud-palette-info-text); background-color: var(--mud-palette-info); }
.mud-theme-success { color: var(--mud-palette-success-text); background-color: var(--mud-palette-success); }
.mud-theme-warning { color: var(--mud-palette-warning-text); background-color: var(--mud-palette-warning); }
.mud-theme-error { color: var(--mud-palette-error-text); background-color: var(--mud-palette-error); }
.mud-theme-dark { color: var(--mud-palette-dark-text); background-color: var(--mud-palette-dark); }
.mud-theme-surface { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); }

.mud-disabled { opacity: 0.6; pointer-events: none; }
.mud-width-full { width: 100%; }

/* ---------- surfaces and elevation ------------------------------------------------------------ */

.mud-paper { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); border-radius: var(--mud-default-borderradius); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.mud-paper-outlined { border: 1px solid var(--mud-palette-lines-default); box-shadow: none; }
.mud-paper-square { border-radius: 0; }

.mud-elevation-0 { box-shadow: var(--mud-elevation-0); }
.mud-elevation-1 { box-shadow: var(--mud-elevation-1); }
.mud-elevation-2 { box-shadow: var(--mud-elevation-2); }
.mud-elevation-3 { box-shadow: var(--mud-elevation-3); }
.mud-elevation-4 { box-shadow: var(--mud-elevation-4); }
.mud-elevation-5 { box-shadow: var(--mud-elevation-5); }
.mud-elevation-6 { box-shadow: var(--mud-elevation-6); }
.mud-elevation-8 { box-shadow: var(--mud-elevation-8); }
.mud-elevation-10 { box-shadow: var(--mud-elevation-10); }
.mud-elevation-12 { box-shadow: var(--mud-elevation-12); }
.mud-elevation-16 { box-shadow: var(--mud-elevation-16); }
.mud-elevation-24 { box-shadow: var(--mud-elevation-24); }
.mud-elevation-25 { box-shadow: var(--mud-elevation-25); }

/* ---------- buttons --------------------------------------------------------------------------- */

.mud-button-root {
    color: inherit; border: 0; margin: 0; padding: 0; outline: 0; position: relative;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    cursor: pointer; user-select: none; appearance: none; text-decoration: none;
    background-color: transparent; -webkit-tap-highlight-color: transparent;
}

.mud-button-root:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mud-button-root:disabled, .mud-button-root[aria-disabled="true"] { cursor: default; opacity: 0.55; pointer-events: none; }

.mud-button {
    box-sizing: border-box; min-width: 64px; padding: 6px 16px;
    font-family: var(--mud-typography-button-family); font-size: var(--mud-typography-button-size);
    font-weight: var(--mud-typography-button-weight); line-height: var(--mud-typography-button-lineheight);
    letter-spacing: var(--mud-typography-button-letterspacing); text-transform: var(--mud-typography-button-text-transform);
    border-radius: var(--mud-default-borderradius); color: var(--mud-palette-text-primary);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-button-label { width: 100%; display: inherit; gap: 8px; align-items: inherit; justify-content: inherit; }

.mud-button-text { padding: 6px 8px; }
.mud-button-outlined { padding: 5px 15px; border: 1px solid var(--mud-palette-lines-default); }
.mud-button-filled { box-shadow: var(--mud-elevation-2); background-color: var(--mud-palette-action-default-hover); }

.mud-button-text-primary { color: var(--mud-palette-primary); }
.mud-button-text-secondary { color: var(--mud-palette-secondary); }
.mud-button-text-tertiary { color: var(--mud-palette-tertiary); }
.mud-button-text-info { color: var(--mud-palette-info); }
.mud-button-text-success { color: var(--mud-palette-success); }
.mud-button-text-warning { color: var(--mud-palette-warning); }
.mud-button-text-error { color: var(--mud-palette-error); }
.mud-button-text-dark { color: var(--mud-palette-dark); }

.mud-button-outlined-primary { color: var(--mud-palette-primary); border-color: rgba(var(--mud-palette-primary-rgb), 0.5); }
.mud-button-outlined-secondary { color: var(--mud-palette-secondary); border-color: rgba(var(--mud-palette-secondary-rgb), 0.5); }
.mud-button-outlined-tertiary { color: var(--mud-palette-tertiary); border-color: rgba(var(--mud-palette-tertiary-rgb), 0.5); }
.mud-button-outlined-info { color: var(--mud-palette-info); border-color: rgba(var(--mud-palette-info-rgb), 0.5); }
.mud-button-outlined-success { color: var(--mud-palette-success); border-color: rgba(var(--mud-palette-success-rgb), 0.5); }
.mud-button-outlined-warning { color: var(--mud-palette-warning); border-color: rgba(var(--mud-palette-warning-rgb), 0.5); }
.mud-button-outlined-error { color: var(--mud-palette-error); border-color: rgba(var(--mud-palette-error-rgb), 0.5); }
.mud-button-outlined-dark { color: var(--mud-palette-dark); border-color: rgba(var(--mud-palette-dark-rgb), 0.5); }

.mud-button-filled-primary { color: var(--mud-palette-primary-text); background-color: var(--mud-palette-primary); }
.mud-button-filled-secondary { color: var(--mud-palette-secondary-text); background-color: var(--mud-palette-secondary); }
.mud-button-filled-tertiary { color: var(--mud-palette-tertiary-text); background-color: var(--mud-palette-tertiary); }
.mud-button-filled-info { color: var(--mud-palette-info-text); background-color: var(--mud-palette-info); }
.mud-button-filled-success { color: var(--mud-palette-success-text); background-color: var(--mud-palette-success); }
.mud-button-filled-warning { color: var(--mud-palette-warning-text); background-color: var(--mud-palette-warning); }
.mud-button-filled-error { color: var(--mud-palette-error-text); background-color: var(--mud-palette-error); }
.mud-button-filled-dark { color: var(--mud-palette-dark-text); background-color: var(--mud-palette-dark); }

.mud-button-text-size-small, .mud-button-outlined-size-small, .mud-button-filled-size-small { padding: 4px 10px; font-size: 0.8125rem; }
.mud-button-text-size-large, .mud-button-outlined-size-large, .mud-button-filled-size-large { padding: 8px 22px; font-size: 0.9375rem; }

.mud-button-icon-start { display: inline-flex; margin-inline-end: 2px; }
.mud-button-icon-end { display: inline-flex; margin-inline-start: 2px; }

.mud-icon-button { flex: 0 0 auto; padding: 12px; overflow: visible; text-align: center; border-radius: 50%; color: var(--mud-palette-action-default); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.mud-icon-button-size-small { padding: 5px; }
.mud-icon-button-size-large { padding: 16px; }
.mud-icon-button-edge-start { margin-inline-start: -12px; }
.mud-icon-button-edge-end { margin-inline-end: -12px; }
.mud-icon-button-outlined { border: 1px solid var(--mud-palette-lines-default); }

@media (hover: hover) and (pointer: fine) {
    .mud-button:hover { background-color: var(--mud-palette-action-default-hover); }
    .mud-button-filled:hover { filter: brightness(0.94); }
    .mud-icon-button:hover { background-color: var(--mud-palette-action-default-hover); }
    .mud-link:hover { text-decoration: underline; }
}

/* ---------- icons ----------------------------------------------------------------------------- */

/*
 * An SVG with a viewBox and no width/height would otherwise lay out at the SVG default of 300x150. The
 * host head inlines this same rule ahead of every stylesheet so an icon can never flash at that size
 * while sheets are still in flight; this is the standing copy.
 */
.mud-icon-root { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; fill: currentColor; user-select: none; }
.mud-icon-size-small { font-size: 1.25rem; }
.mud-icon-size-medium { font-size: 1.5rem; }
.mud-icon-size-large { font-size: 2.1875rem; }

/* ---------- grid ------------------------------------------------------------------------------ */

.mud-grid { width: 100%; display: flex; flex-wrap: wrap; box-sizing: border-box; }
.mud-grid-item { margin: 0; box-sizing: border-box; }

.mud-grid-spacing-xs-0 { margin: 0; width: 100%; }
.mud-grid-spacing-xs-1 { margin: -4px 0 0 -4px; width: calc(100% + 4px); }
.mud-grid-spacing-xs-1 > .mud-grid-item { padding: 4px 0 0 4px; }
.mud-grid-spacing-xs-2 { margin: -8px 0 0 -8px; width: calc(100% + 8px); }
.mud-grid-spacing-xs-2 > .mud-grid-item { padding: 8px 0 0 8px; }
.mud-grid-spacing-xs-3 { margin: -12px 0 0 -12px; width: calc(100% + 12px); }
.mud-grid-spacing-xs-3 > .mud-grid-item { padding: 12px 0 0 12px; }
.mud-grid-spacing-xs-4 { margin: -16px 0 0 -16px; width: calc(100% + 16px); }
.mud-grid-spacing-xs-4 > .mud-grid-item { padding: 16px 0 0 16px; }
.mud-grid-spacing-xs-5 { margin: -20px 0 0 -20px; width: calc(100% + 20px); }
.mud-grid-spacing-xs-5 > .mud-grid-item { padding: 20px 0 0 20px; }
.mud-grid-spacing-xs-6 { margin: -24px 0 0 -24px; width: calc(100% + 24px); }
.mud-grid-spacing-xs-6 > .mud-grid-item { padding: 24px 0 0 24px; }
.mud-grid-spacing-xs-8 { margin: -32px 0 0 -32px; width: calc(100% + 32px); }
.mud-grid-spacing-xs-8 > .mud-grid-item { padding: 32px 0 0 32px; }
.mud-grid-spacing-xs-10 { margin: -40px 0 0 -40px; width: calc(100% + 40px); }
.mud-grid-spacing-xs-10 > .mud-grid-item { padding: 40px 0 0 40px; }

.mud-grid-item-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.mud-grid-item-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.mud-grid-item-xs-3 { flex: 0 0 25%; max-width: 25%; }
.mud-grid-item-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.mud-grid-item-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.mud-grid-item-xs-6 { flex: 0 0 50%; max-width: 50%; }
.mud-grid-item-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.mud-grid-item-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.mud-grid-item-xs-9 { flex: 0 0 75%; max-width: 75%; }
.mud-grid-item-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.mud-grid-item-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.mud-grid-item-xs-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 600px) {
    .mud-grid-item-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .mud-grid-item-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .mud-grid-item-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .mud-grid-item-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .mud-grid-item-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .mud-grid-item-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .mud-grid-item-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .mud-grid-item-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mud-grid-item-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .mud-grid-item-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .mud-grid-item-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .mud-grid-item-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 960px) {
    .mud-grid-item-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .mud-grid-item-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .mud-grid-item-md-3 { flex: 0 0 25%; max-width: 25%; }
    .mud-grid-item-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .mud-grid-item-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .mud-grid-item-md-6 { flex: 0 0 50%; max-width: 50%; }
    .mud-grid-item-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .mud-grid-item-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mud-grid-item-md-9 { flex: 0 0 75%; max-width: 75%; }
    .mud-grid-item-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .mud-grid-item-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .mud-grid-item-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1280px) {
    .mud-grid-item-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .mud-grid-item-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .mud-grid-item-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .mud-grid-item-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .mud-grid-item-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mud-grid-item-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .mud-grid-item-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- layout helpers -------------------------------------------------------------------- */

.mud-stack { display: flex; }
.mud-stack-column { flex-direction: column; }
.mud-stack-row { flex-direction: row; align-items: center; }
.mud-stack-reverse.mud-stack-column { flex-direction: column-reverse; }
.mud-stack-reverse.mud-stack-row { flex-direction: row-reverse; }
.mud-stack-wrap { flex-wrap: wrap; }

.mud-spacer { flex-grow: 1; }

.mud-divider { margin: 0; border: none; border-top: 1px solid var(--mud-palette-divider); flex-shrink: 0; }
.mud-divider-vertical { border-top: none; border-left: 1px solid var(--mud-palette-divider); height: auto; align-self: stretch; }
.mud-divider-light { border-color: var(--mud-palette-divider-light); }
.mud-divider-flexitem { align-self: stretch; }

.mud-container { width: 100%; margin-inline: auto; box-sizing: border-box; }
.mud-container-gutters { padding-inline: 16px; }
.mud-container-maxwidth-extrasmall { max-width: 444px; }
.mud-container-maxwidth-small { max-width: 600px; }
.mud-container-maxwidth-medium { max-width: 960px; }
.mud-container-maxwidth-large { max-width: 1280px; }
.mud-container-maxwidth-extralarge { max-width: 1920px; }
.mud-container-maxwidth-false { max-width: none; }

.mud-layout { display: flex; flex-direction: column; min-height: 100%; }
.mud-main-content { display: block; flex: 1 1 auto; }

.mud-appbar { display: flex; width: 100%; box-sizing: border-box; z-index: var(--mud-zindex-appbar); background-color: var(--mud-palette-appbar-background); color: var(--mud-palette-appbar-text); }
.mud-appbar-fixed-top { position: sticky; top: 0; }
.mud-toolbar { display: flex; align-items: center; width: 100%; min-height: var(--mud-appbar-height); padding-inline: 16px; box-sizing: border-box; }

/* ---------- chips ----------------------------------------------------------------------------- */

.mud-chip {
    border: none; outline: 0; margin: 4px; padding: 0 12px; position: relative; max-width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; white-space: nowrap; vertical-align: middle; text-decoration: none;
    line-height: normal; height: 32px; border-radius: 16px; font-size: 0.8125rem;
    color: var(--mud-palette-text-primary); background-color: var(--mud-palette-action-default-hover);
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-chip-size-small { height: 24px; padding: 0 8px; font-size: 0.75rem; border-radius: 12px; }
.mud-chip-size-large { height: 40px; padding: 0 16px; font-size: 0.875rem; border-radius: 20px; }

.mud-chip-text { background-color: transparent; }
.mud-chip-outlined { background-color: transparent; border: 1px solid var(--mud-palette-lines-default); }

.mud-chip-filled-primary { color: var(--mud-palette-primary-text); background-color: var(--mud-palette-primary); }
.mud-chip-filled-secondary { color: var(--mud-palette-secondary-text); background-color: var(--mud-palette-secondary); }
.mud-chip-filled-tertiary { color: var(--mud-palette-tertiary-text); background-color: var(--mud-palette-tertiary); }
.mud-chip-filled-info { color: var(--mud-palette-info-text); background-color: var(--mud-palette-info); }
.mud-chip-filled-success { color: var(--mud-palette-success-text); background-color: var(--mud-palette-success); }
.mud-chip-filled-warning { color: var(--mud-palette-warning-text); background-color: var(--mud-palette-warning); }
.mud-chip-filled-error { color: var(--mud-palette-error-text); background-color: var(--mud-palette-error); }
.mud-chip-filled-dark { color: var(--mud-palette-dark-text); background-color: var(--mud-palette-dark); }

.mud-chip-outlined-primary { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.mud-chip-outlined-secondary { color: var(--mud-palette-secondary); border-color: var(--mud-palette-secondary); }
.mud-chip-outlined-tertiary { color: var(--mud-palette-tertiary); border-color: var(--mud-palette-tertiary); }
.mud-chip-outlined-info { color: var(--mud-palette-info); border-color: var(--mud-palette-info); }
.mud-chip-outlined-success { color: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.mud-chip-outlined-warning { color: var(--mud-palette-warning); border-color: var(--mud-palette-warning); }
.mud-chip-outlined-error { color: var(--mud-palette-error); border-color: var(--mud-palette-error); }
.mud-chip-outlined-dark { color: var(--mud-palette-dark); border-color: var(--mud-palette-dark); }

.mud-chip-text-primary { color: var(--mud-palette-primary); background-color: rgba(var(--mud-palette-primary-rgb), 0.1); }
.mud-chip-text-secondary { color: var(--mud-palette-secondary); background-color: rgba(var(--mud-palette-secondary-rgb), 0.1); }
.mud-chip-text-tertiary { color: var(--mud-palette-tertiary); background-color: rgba(var(--mud-palette-tertiary-rgb), 0.1); }
.mud-chip-text-info { color: var(--mud-palette-info); background-color: rgba(var(--mud-palette-info-rgb), 0.1); }
.mud-chip-text-success { color: var(--mud-palette-success); background-color: rgba(var(--mud-palette-success-rgb), 0.1); }
.mud-chip-text-warning { color: var(--mud-palette-warning); background-color: rgba(var(--mud-palette-warning-rgb), 0.1); }
.mud-chip-text-error { color: var(--mud-palette-error); background-color: rgba(var(--mud-palette-error-rgb), 0.1); }
.mud-chip-text-dark { color: var(--mud-palette-dark); background-color: rgba(var(--mud-palette-dark-rgb), 0.1); }

.mud-chipset { display: flex; flex-wrap: wrap; align-items: center; }

/* ---------- alerts ---------------------------------------------------------------------------- */

.mud-alert { display: flex; padding: 6px 16px; border-radius: var(--mud-default-borderradius); background-color: transparent; }
.mud-alert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; margin-inline-end: 12px; }
.mud-alert-message { padding: 9px 0; flex: 1 1 auto; }
.mud-alert-close { display: flex; align-items: center; margin-inline-start: 8px; }
.mud-alert-dense { padding: 0 12px; }
.mud-alert-dense .mud-alert-message { padding: 4px 0; }
.mud-alert-dense .mud-alert-icon { padding: 4px 0; }
.mud-alert-square { border-radius: 0; }

.mud-alert-text-normal { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-background-gray); }
.mud-alert-text-info { color: var(--mud-palette-info-darken); background-color: var(--mud-palette-info-hover); }
.mud-alert-text-success { color: var(--mud-palette-success-darken); background-color: var(--mud-palette-success-hover); }
.mud-alert-text-warning { color: var(--mud-palette-warning-darken); background-color: var(--mud-palette-warning-hover); }
.mud-alert-text-error { color: var(--mud-palette-error-darken); background-color: var(--mud-palette-error-hover); }

.mud-alert-outlined-normal { color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); }
.mud-alert-outlined-info { color: var(--mud-palette-info-darken); border: 1px solid rgba(var(--mud-palette-info-rgb), var(--mud-palette-border-opacity)); }
.mud-alert-outlined-success { color: var(--mud-palette-success-darken); border: 1px solid rgba(var(--mud-palette-success-rgb), var(--mud-palette-border-opacity)); }
.mud-alert-outlined-warning { color: var(--mud-palette-warning-darken); border: 1px solid rgba(var(--mud-palette-warning-rgb), var(--mud-palette-border-opacity)); }
.mud-alert-outlined-error { color: var(--mud-palette-error-darken); border: 1px solid rgba(var(--mud-palette-error-rgb), var(--mud-palette-border-opacity)); }

.mud-alert-filled-normal { color: var(--mud-palette-text-primary); font-weight: 500; background-color: var(--mud-palette-background-gray); }
.mud-alert-filled-info { color: var(--mud-palette-info-text); font-weight: 500; background-color: var(--mud-palette-info); }
.mud-alert-filled-success { color: var(--mud-palette-success-text); font-weight: 500; background-color: var(--mud-palette-success); }
.mud-alert-filled-warning { color: var(--mud-palette-warning-text); font-weight: 500; background-color: var(--mud-palette-warning); }
.mud-alert-filled-error { color: var(--mud-palette-error-text); font-weight: 500; background-color: var(--mud-palette-error); }

/* ---------- placeholders and progress --------------------------------------------------------- */

.mud-skeleton { display: block; height: 1.2em; background-color: var(--mud-palette-skeleton); border-radius: 4px; }
.mud-skeleton-text { margin-block: 0.2em; transform: scale(1, 0.7); }
.mud-skeleton-circle { border-radius: 50%; }
.mud-skeleton-rectangle { border-radius: var(--mud-default-borderradius); }

.mud-skeleton-wave { position: relative; overflow: hidden; }
.mud-skeleton-wave::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(var(--mud-palette-surface-rgb), 0.45), transparent);
    animation: mud-skeleton-wave 1.6s linear 0.5s infinite;
}

@keyframes mud-skeleton-wave { 100% { transform: translateX(100%); } }

.mud-progress-linear { position: relative; display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 0; background-color: var(--mud-palette-action-default-hover); }
.mud-progress-linear-medium { height: 8px; }
.mud-progress-linear-large { height: 12px; }
.mud-progress-linear-rounded { border-radius: 999px; }
.mud-progress-linear-rounded .mud-progress-linear-bar { border-radius: 999px; }
.mud-progress-linear-bar { height: 100%; background-color: currentColor; transition: width 200ms linear; }
.mud-progress-linear-color-primary { color: var(--mud-palette-primary); }
.mud-progress-linear-color-secondary { color: var(--mud-palette-secondary); }
.mud-progress-linear-color-info { color: var(--mud-palette-info); }
.mud-progress-linear-color-success { color: var(--mud-palette-success); }
.mud-progress-linear-color-warning { color: var(--mud-palette-warning); }
.mud-progress-linear-color-error { color: var(--mud-palette-error); }
.mud-progress-linear-indeterminate .mud-progress-linear-bar { width: 40%; animation: mud-progress-linear-indeterminate 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }

@keyframes mud-progress-linear-indeterminate { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }

.mud-progress-circular { display: inline-block; width: 2.5rem; height: 2.5rem; color: var(--mud-palette-primary); }
.mud-progress-small { width: 1.5rem; height: 1.5rem; }
.mud-progress-large { width: 4rem; height: 4rem; }
.mud-progress-circular-circle { width: 100%; height: 100%; stroke: currentColor; }
.mud-progress-indeterminate .mud-progress-circular-circle { animation: mud-progress-circular-spin 1.4s linear infinite; transform-origin: 50% 50%; }

@keyframes mud-progress-circular-spin { 100% { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .mud-skeleton-wave::after,
    .mud-progress-linear-indeterminate .mud-progress-linear-bar,
    .mud-progress-indeterminate .mud-progress-circular-circle { animation: none; }
}

/* ---------- form controls --------------------------------------------------------------------- */

.mud-input-control { border: 0; margin: 0; padding: 0; display: flex; flex: 1 1 auto; max-width: 100%; position: relative; flex-direction: column; vertical-align: top; }
.mud-input-control-margin-dense { margin-top: 4px; margin-bottom: 4px; }
.mud-input-control-margin-normal { margin-top: 8px; margin-bottom: 8px; }
.mud-input-control-input-container { position: relative; display: flex; flex-direction: column; }

.mud-input { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; cursor: text; line-height: 1.1876em; color: var(--mud-palette-text-primary); color-scheme: var(--mud-native-html-color-scheme); }

.mud-input-slot {
    width: 100%; border: 0; margin: 0; padding: 8px 0; outline: 0; display: block; min-width: 0;
    background: none; box-sizing: content-box; font: inherit; color: currentColor;
    -webkit-tap-highlight-color: transparent;
}

.mud-input-slot::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }
.mud-input-slot:disabled { color: var(--mud-palette-text-disabled); cursor: default; }

/*
 * The outlined field's border is a sibling element rather than a border on the input, so the floating
 * label can sit on top of it without the box shifting. Underneath the label, the border simply keeps its
 * own colour; the label paints its own background over it.
 */
.mud-input-outlined { padding: 0 14px; border-radius: var(--radius-sm, var(--mud-default-borderradius)); background-color: var(--surface, transparent); }
.mud-input-outlined .mud-input-slot { padding: 16.5px 0; }
.mud-input-outlined-border { position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs)); border-radius: inherit; transition: border-color var(--dur-fast, 140ms) var(--ease, ease), box-shadow var(--dur-fast, 140ms) var(--ease, ease); }
/* A ring rather than a thicker border: the platform's focus affordance everywhere else, and it cannot
   shift the text inside the box the way a 1px-to-2px border can. */
.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--accent-fg, var(--mud-palette-primary)); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }
.mud-input-outlined.mud-input-error .mud-input-outlined-border { border-color: var(--error, var(--mud-palette-error)); }

.mud-input-text, .mud-input-filled { border-bottom: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs)); }
.mud-input-text:focus-within, .mud-input-filled:focus-within { border-bottom-color: var(--accent-fg, var(--mud-palette-primary)); }
.mud-input-text.mud-input-error, .mud-input-filled.mud-input-error { border-bottom-color: var(--error, var(--mud-palette-error)); }
.mud-input-filled { padding: 0 12px; border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0; background-color: var(--mud-palette-action-default-hover); }

.mud-input-label { color: var(--mud-palette-text-secondary); display: block; font-size: 1rem; line-height: 1; transform-origin: top left; pointer-events: none; }
.mud-input-label-inputcontrol { position: absolute; left: 0; top: 0; }
.mud-input-label-outlined { transform: translate(14px, 18px) scale(1); background-color: var(--mud-palette-surface); padding-inline: 4px; }
.mud-input-label-animated { transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1), color 200ms cubic-bezier(0.0, 0, 0.2, 1); }
.mud-input-label-outlined.mud-input-label-shrink { transform: translate(14px, -7px) scale(0.75); }
.mud-input-control:focus-within .mud-input-label-outlined { transform: translate(14px, -7px) scale(0.75); color: var(--mud-palette-primary); }
.mud-input-label-text, .mud-input-label-filled { transform: translate(0, 20px) scale(1); }
.mud-input-label-text.mud-input-label-shrink, .mud-input-label-filled.mud-input-label-shrink { transform: translate(0, 2px) scale(0.75); }
.mud-input-control:focus-within .mud-input-label-text { transform: translate(0, 2px) scale(0.75); color: var(--mud-palette-primary); }
.mud-input-label.mud-input-error { color: var(--mud-palette-error); }
.mud-input-required-marker { margin-inline-start: 2px; color: var(--mud-palette-error); }

.mud-input-helper-text { margin: 3px 0 0; font-size: 0.75rem; font-weight: 400; line-height: 1.66; letter-spacing: 0.03333em; text-align: start; color: var(--mud-palette-text-secondary); }
.mud-input-helper-text.mud-input-error { color: var(--mud-palette-error); }

.mud-input-adornment { display: inline-flex; align-items: center; color: var(--mud-palette-action-default); }
.mud-input-adornment-start { margin-inline-end: 8px; }
.mud-input-adornment-end { margin-inline-start: 8px; }
.mud-input-clear-button { margin-inline-start: 4px; }

/*
 * The select is a native control: the browser draws the option list, so nothing here positions or paints
 * one. What the closed state has to do is read as the platform's OWN control rather than as browser
 * chrome, which is the same contract TmaSelect states for the kit — one themed chevron, the platform
 * radius and hairline, a 44px touch target and a focus ring rather than a border that thickens.
 *
 * Every token is read WITH a fallback. The standalone business host loads this sheet without tokens.css,
 * where a bare var() computes to nothing and would strip the control's chevron and border entirely; the
 * fallback is MudBlazor's own value, so that host keeps exactly the look it has today.
 */
.mud-select-input {
    appearance: none; cursor: pointer; box-sizing: border-box;
    min-height: var(--touch, 44px);
    padding-inline-end: 40px;
    background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343566A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}
.mud-select-input:disabled { cursor: default; opacity: 0.6; }
.mud-select-dense .mud-input-slot { padding-block: 6px; }
.mud-select-dense .mud-select-input { min-height: 36px; }

/* The chevron is a background image, so it does not mirror itself; RTL moves it to the other end. */
[dir="rtl"] .mud-select-input { background-position: left 12px center; }

.mud-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; vertical-align: middle; }
.mud-switch-base { position: relative; display: inline-flex; align-items: center; width: 38px; height: 20px; flex: 0 0 auto; }
.mud-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.mud-switch-track { position: absolute; inset: 0; border-radius: 999px; background-color: var(--mud-palette-action-disabled); transition: background-color 150ms ease; }
.mud-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--mud-palette-surface); box-shadow: var(--mud-elevation-1); transition: transform 150ms ease; }
.mud-switch-checked .mud-switch-thumb { transform: translateX(18px); }
.mud-switch-checked .mud-switch-track { background-color: var(--mud-palette-action-default); }
.mud-switch-checked.mud-switch-primary .mud-switch-track { background-color: var(--mud-palette-primary); }
.mud-switch-checked.mud-switch-secondary .mud-switch-track { background-color: var(--mud-palette-secondary); }
.mud-switch-checked.mud-switch-success .mud-switch-track { background-color: var(--mud-palette-success); }
.mud-switch-checked.mud-switch-warning .mud-switch-track { background-color: var(--mud-palette-warning); }
.mud-switch-checked.mud-switch-error .mud-switch-track { background-color: var(--mud-palette-error); }
.mud-switch-checked.mud-switch-info .mud-switch-track { background-color: var(--mud-palette-info); }
.mud-switch-input:focus-visible + .mud-switch-track { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mud-switch-label-start { flex-direction: row-reverse; }

.mud-checkbox, .mud-radio, .mud-toggle-item { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; vertical-align: middle; }
.mud-checkbox-input, .mud-radio-input, .mud-toggle-item-input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--mud-palette-primary); cursor: inherit; }
.mud-checkbox-primary .mud-checkbox-input, .mud-radio-primary .mud-radio-input { accent-color: var(--mud-palette-primary); }
.mud-checkbox-secondary .mud-checkbox-input { accent-color: var(--mud-palette-secondary); }
.mud-checkbox-success .mud-checkbox-input { accent-color: var(--mud-palette-success); }
.mud-checkbox-error .mud-checkbox-input { accent-color: var(--mud-palette-error); }
.mud-checkbox-box, .mud-radio-button { display: none; }
.mud-checkbox-dense { gap: 4px; }
.mud-radio-group { display: inline-flex; flex-direction: column; gap: 4px; }

/*
 * The segmented control. The radio input itself is visually removed but stays in the accessibility tree
 * and keeps focus, which is what makes arrow-key selection work; the label carries the visible segment.
 */
.mud-toggle-group { display: inline-flex; align-items: stretch; border-radius: var(--mud-default-borderradius); overflow: hidden; }
.mud-toggle-group-outlined { border: 1px solid var(--mud-palette-lines-default); }
.mud-toggle-item { position: relative; padding: 6px 14px; gap: 6px; justify-content: center; font-size: 0.875rem; color: var(--mud-palette-text-primary); background-color: transparent; transition: background-color 150ms ease, color 150ms ease; }
.mud-toggle-group-dense .mud-toggle-item { padding: 3px 10px; }
.mud-toggle-item + .mud-toggle-item { border-inline-start: 1px solid var(--mud-palette-lines-default); }
.mud-toggle-item-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mud-toggle-item-content { display: inline-flex; align-items: center; gap: 6px; }
.mud-toggle-item-selected { color: var(--mud-palette-primary-text); background-color: var(--mud-palette-primary); }
.mud-toggle-group-secondary .mud-toggle-item-selected { background-color: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }
.mud-toggle-item-input:focus-visible + .mud-toggle-item-content { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.mud-slider { display: flex; flex-direction: column; gap: 4px; }
.mud-slider-input { width: 100%; accent-color: var(--mud-palette-primary); }
.mud-slider-primary .mud-slider-input { accent-color: var(--mud-palette-primary); }

/*
 * The date and time fields are native inputs. Chromium paints its own calendar/clock glyph inside them,
 * which is the one piece of browser chrome left in the form vocabulary; tinting it with currentColor puts
 * it on the platform's ink in both themes instead of leaving a black glyph on a dark field.
 */
.mud-picker-input { cursor: pointer; box-sizing: border-box; min-height: var(--touch, 44px); }
.mud-picker-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; filter: var(--mud-picker-indicator-filter, none); }
.mud-picker-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.mud-autocomplete-input { width: 100%; }

/*
 * The typeahead's suggestion list. An inline sibling of the input rather than an overlay, so it needs a
 * containing block on the field and a stacking order over whatever follows it in the form - but no script
 * to place it, and no shared outlet to contend over.
 */
.mud-autocomplete { position: relative; }
.mud-autocomplete-suggestions {
    /* The same layer the menu panel uses. At a low z-index the list paints UNDER the app bar and the
       drawer, which on an operator page is a suggestion list the operator cannot see. */
    position: absolute; inset-inline: 0; top: 100%; z-index: var(--mud-zindex-popover, 1200);
    margin-top: 4px; max-height: 280px; overflow-y: auto;
    display: flex; flex-direction: column;
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-default));
    border-radius: var(--radius-sm, var(--mud-default-borderradius));
    background: var(--surface, var(--mud-palette-surface));
    box-shadow: var(--mud-elevation-8);
}
.mud-autocomplete-suggestion {
    appearance: none; border: 0; background: none; font: inherit; text-align: start; cursor: pointer;
    min-height: var(--touch, 44px);
    padding: 8px var(--sp-4, 16px);
    color: var(--ink-1, var(--mud-palette-text-primary));
}
.mud-autocomplete-suggestion:hover,
.mud-autocomplete-suggestion:focus-visible,
.mud-autocomplete-suggestion.mud-selected { background: var(--accent-soft, var(--mud-palette-action-default-hover)); }
.mud-autocomplete-no-items { padding: 8px var(--sp-4, 16px); color: var(--ink-2, var(--mud-palette-text-secondary)); }
.mud-form { display: block; }

/* ---------- tables ---------------------------------------------------------------------------- */

.mud-table { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); border-radius: var(--mud-default-borderradius); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.mud-table-container { width: 100%; overflow-x: auto; }
.mud-table-root { width: 100%; border-collapse: collapse; border-spacing: 0; }
.mud-table-cell { display: table-cell; padding: 16px; text-align: start; vertical-align: inherit; border-bottom: 1px solid var(--mud-palette-table-lines); }
.mud-table-head-cell { font-weight: 500; line-height: 1.5rem; color: var(--mud-palette-text-primary); }
.mud-table-dense .mud-table-cell { padding: 6px 16px; }
.mud-table-bordered .mud-table-cell { border: 1px solid var(--mud-palette-table-lines); }
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) { background-color: var(--mud-palette-table-striped); }
.mud-table-row-clickable { cursor: pointer; }
.mud-table-sticky-header .mud-table-head { position: sticky; top: 0; z-index: 1; background-color: var(--mud-palette-surface); }
.mud-table-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.mud-table-pagination { display: flex; justify-content: flex-end; padding: 8px 16px; }
.mud-table-pagination-toolbar { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--mud-palette-text-secondary); }
.mud-table-sort-label { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.mud-table-sort-label-icon { opacity: 0; transition: opacity 150ms ease; }
.mud-direction-ascending .mud-table-sort-label-icon, .mud-direction-descending .mud-table-sort-label-icon { opacity: 1; }

/*
 * A sortable header carries a marker only once it is the column being sorted, so the header row does not
 * read as a row of arrows. The grid's own headers say so through aria-sort, which is also the hook here -
 * one source for what the screen reader is told and what the eye is shown.
 */
.mud-table-head-cell .mud-table-sort-label { width: 100%; justify-content: space-between; }
.mud-table-head-cell[aria-sort] .mud-table-sort-label-icon { opacity: 1; }
.mud-table-head-cell .mud-table-sort-label:hover .mud-table-sort-label-icon,
.mud-table-head-cell .mud-table-sort-label:focus-visible .mud-table-sort-label-icon { opacity: 0.5; }

/* The per-column filter. A search input rather than a text one, so a phone offers the clear affordance. */
.mud-table-filter-input {
    display: block; box-sizing: border-box; width: 100%; margin-top: 6px;
    padding: 4px 8px; font: inherit; font-size: 0.8125rem; font-weight: 400;
    color: var(--ink-1, var(--mud-palette-text-primary));
    background: var(--surface, var(--mud-palette-surface));
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs));
    border-radius: var(--radius-sm, var(--mud-default-borderradius));
}
.mud-table-filter-input:focus { outline: none; border-color: var(--accent-fg, var(--mud-palette-primary)); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }

/*
 * The pager. It wraps rather than overflows, because at 375px the rows-per-page control, the range and the
 * two buttons do not fit on one line and a toolbar that scrolls sideways is a toolbar an operator loses.
 */
.mud-table-pagination-toolbar { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.mud-table-pagination-rows { display: inline-flex; align-items: center; gap: 8px; }
.mud-table-pagination-select {
    box-sizing: border-box; min-height: 36px; padding-block: 4px; padding-inline: 8px 32px;
    font: inherit; font-size: 0.875rem;
    color: var(--ink-1, var(--mud-palette-text-primary));
    background-color: var(--surface, var(--mud-palette-surface));
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs));
    border-radius: var(--radius-sm, var(--mud-default-borderradius));
    background-position: right 8px center;
}
.mud-table-pagination-select:focus { outline: none; border-color: var(--accent-fg, var(--mud-palette-primary)); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }
.mud-table-pagination-actions { display: inline-flex; align-items: center; gap: 4px; }

/*
 * Finger-sized where there are fingers. A sort label and a filter box are 24px and 34px of text-height
 * chrome, which is fine under a pointer and below the platform's 44px target under a thumb; growing them
 * only under a coarse pointer keeps a desktop table's header from gaining a row of dead space.
 */
@media (pointer: coarse) {
    .mud-table-sort-label,
    .mud-table-filter-input,
    .mud-table-pagination-select,
    .mud-menu-activator { min-height: var(--touch, 44px); }
}

@media (hover: hover) and (pointer: fine) {
    .mud-table-hover .mud-table-body .mud-table-row:hover { background-color: var(--mud-palette-table-hover); }
}

/* ---------- lists and navigation -------------------------------------------------------------- */

.mud-list { margin: 0; padding: 8px 0; list-style: none; }
.mud-list-dense { padding: 4px 0; }
.mud-list-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.mud-list-item-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.mud-list-item.mud-selected { background-color: var(--mud-palette-action-default-hover); }
.mud-list-item-text { flex: 1 1 auto; }

.mud-navmenu { display: flex; flex-direction: column; }
.mud-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: inherit; text-decoration: none; cursor: pointer; }
.mud-nav-link.mud-selected { background-color: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }
.mud-nav-group > summary { list-style: none; }
.mud-nav-group > summary::-webkit-details-marker { display: none; }
.mud-nav-group-content { padding-inline-start: 16px; }

/* ---------- disclosure ------------------------------------------------------------------------ */

.mud-expansion-panels { display: flex; flex-direction: column; }
.mud-expand-panel { background-color: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-expand-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; }
.mud-expand-panel-header::-webkit-details-marker { display: none; }
.mud-expand-panel-text { flex: 1 1 auto; }
.mud-expand-panel-icon { transition: transform 200ms ease; margin-inline-start: auto; }
.mud-expand-panel[open] > .mud-expand-panel-header .mud-expand-panel-icon { transform: rotate(180deg); }
.mud-expand-panel-content { padding: 0 16px 16px; }

.mud-menu { position: relative; display: inline-block; }
.mud-menu-activator { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.mud-menu-activator::-webkit-details-marker { display: none; }
.mud-menu-list { position: absolute; inset-inline-start: 0; top: 100%; z-index: var(--mud-zindex-popover); min-width: 180px; padding: 8px 0; border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-surface); box-shadow: var(--mud-elevation-8); }
.mud-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }

/* ---------- overlays -------------------------------------------------------------------------- */

.mud-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: var(--mud-zindex-dialog); }
.mud-overlay-scrim { position: absolute; inset: 0; background-color: var(--mud-palette-overlay-dark); }
.mud-dialog { position: relative; z-index: 1; max-width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-shadow: var(--mud-elevation-24); }
.mud-dialog-width-extrasmall { max-width: min(444px, calc(100vw - 32px)); }
.mud-dialog-width-small { max-width: min(600px, calc(100vw - 32px)); }
.mud-dialog-width-medium { max-width: min(960px, calc(100vw - 32px)); }
.mud-dialog-width-large { max-width: min(1280px, calc(100vw - 32px)); }
.mud-dialog-width-full { width: calc(100vw - 32px); }
.mud-dialog-fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }
.mud-dialog-title { padding: 16px 24px 8px; }
.mud-dialog-content { padding: 8px 24px; }
.mud-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; }

/*
 * The drawer root is always present. A closed drawer is translated off-screen rather than unmounted, so a
 * part-filled form survives a close-and-reopen; the shell that wraps it marks its own content inert, which
 * keeps the hidden fields out of the tab order.
 */
.mud-drawer { position: fixed; top: 0; bottom: 0; z-index: var(--mud-zindex-drawer); display: flex; flex-direction: column; width: var(--mud-drawer-width, var(--mud-drawer-width-left)); max-width: 100vw; overflow-y: auto; background-color: var(--mud-palette-drawer-background); color: var(--mud-palette-drawer-text); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1); }
.mud-drawer-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mud-drawer-pos-start, .mud-drawer-pos-left { inset-inline-start: 0; }
.mud-drawer-pos-end, .mud-drawer-pos-right { inset-inline-end: 0; width: var(--mud-drawer-width, var(--mud-drawer-width-right)); }
.mud-drawer-pos-top { inset: 0 0 auto 0; width: 100%; height: auto; }
.mud-drawer-pos-bottom { inset: auto 0 0 0; width: 100%; height: auto; }
.mud-drawer--closed.mud-drawer-pos-start, .mud-drawer--closed.mud-drawer-pos-left { transform: translateX(-100%); }
.mud-drawer--closed.mud-drawer-pos-end, .mud-drawer--closed.mud-drawer-pos-right { transform: translateX(100%); }
.mud-drawer--closed.mud-drawer-pos-top { transform: translateY(-100%); }
.mud-drawer--closed.mud-drawer-pos-bottom { transform: translateY(100%); }
/* No entry animation on the very first paint: the panel was never anywhere else to slide from. */
.mud-drawer--initial { transition: none; }
.mud-drawer-scrim { position: fixed; inset: 0; z-index: -1; background-color: var(--mud-palette-overlay-dark); }

.mud-snackbar-provider { position: fixed; z-index: var(--mud-zindex-snackbar); display: flex; flex-direction: column; gap: 8px; pointer-events: none; padding: 16px; }
.mud-snackbar-provider > * { display: contents; }
.mud-snackbar-location-top-center { top: 0; left: 50%; transform: translateX(-50%); }
.mud-snackbar-location-top-left { top: 0; left: 0; }
.mud-snackbar-location-top-right { top: 0; right: 0; }
.mud-snackbar-location-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.mud-snackbar-location-bottom-left { bottom: 0; left: 0; }
.mud-snackbar-location-bottom-right { bottom: 0; right: 0; }
.mud-snackbar { display: flex; align-items: center; gap: 12px; min-width: 288px; max-width: min(560px, calc(100vw - 32px)); margin-bottom: 8px; padding: 10px 16px; border-radius: var(--mud-default-borderradius); box-shadow: var(--mud-elevation-6); pointer-events: auto; }
.mud-snackbar-content-message { flex: 1 1 auto; }

.mud-tooltip-root { position: relative; display: inline-flex; }
.mud-tooltip { position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--mud-zindex-tooltip); margin-top: 6px; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; color: var(--mud-palette-surface); background-color: var(--mud-palette-text-primary); opacity: 0; visibility: hidden; transition: opacity 150ms ease; }
.mud-tooltip-root:hover .mud-tooltip, .mud-tooltip-root:focus-within .mud-tooltip { opacity: 0.95; visibility: visible; }

/* ---------- tabs, timeline, stepper, badge ----------------------------------------------------- */

.mud-tabs { display: flex; flex-direction: column; }
.mud-tabs-tabbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-tabs-tabbar-inner { display: flex; gap: 4px; overflow-x: auto; }
.mud-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; color: var(--mud-palette-text-secondary); cursor: pointer; white-space: nowrap; }
.mud-tab.mud-selected { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.mud-tabs-panels { padding-top: 16px; }
.mud-tabs-centered .mud-tabs-tabbar-inner { justify-content: center; }

.mud-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.mud-timeline-item { display: flex; gap: 12px; }
.mud-timeline-item-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background-color: var(--mud-palette-action-default-hover); }
.mud-timeline-item-content { flex: 1 1 auto; }

/*
 * The stepper's rail. A numbered list where the number IS the counter - one source for the step's position,
 * so a step cannot be labelled 3 while sitting second. The rail wraps on a phone rather than scrolling
 * sideways, and stacks under 640px where five labels in a row have nowhere to go.
 */
.mud-stepper-nav {
    margin: 0 0 var(--sp-4, 16px); padding: 0; list-style: none; counter-reset: mud-step;
    display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.mud-stepper-vertical .mud-stepper-nav { flex-direction: column; }
.mud-step { counter-increment: mud-step; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mud-step::before {
    content: counter(mud-step); flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; font-size: 0.75rem; font-weight: 600;
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-default));
    color: var(--ink-2, var(--mud-palette-text-secondary));
}
.mud-step-active::before {
    border-color: var(--accent-fg, var(--mud-palette-primary));
    background-color: var(--accent-fg, var(--mud-palette-primary));
    color: var(--mud-palette-primary-text);
}
.mud-step-completed::before {
    content: "\2713";
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}
.mud-stepper .mud-step-label {
    display: flex; flex-direction: column; min-width: 0; text-align: start;
    border: 0; background: none; font: inherit; color: inherit; padding: 0;
}
.mud-stepper button.mud-step-label { cursor: pointer; }
.mud-stepper button.mud-step-label:hover .mud-step-label-title { text-decoration: underline; }
.mud-step-label-title { font-weight: 500; }
.mud-step-label-secondary { font-size: 0.75rem; color: var(--ink-2, var(--mud-palette-text-secondary)); }
.mud-step-disabled { opacity: 0.5; }
.mud-stepper-content { min-width: 0; }
/* Next sits at the trailing end so the pair reads as back-then-forward in either writing direction. */
.mud-stepper-actions { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4, 16px); }
.mud-stepper-next { margin-inline-start: auto; }

.mud-badge-root { position: relative; display: inline-flex; }
.mud-badge { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 0.75rem; line-height: 1; }
.mud-badge-topright { top: 0; inset-inline-end: 0; transform: translate(50%, -50%); }
.mud-badge-topleft { top: 0; inset-inline-start: 0; transform: translate(-50%, -50%); }
.mud-badge-bottomright { bottom: 0; inset-inline-end: 0; transform: translate(50%, 50%); }
.mud-badge-centerright { top: 50%; inset-inline-end: 0; transform: translate(50%, -50%); }
.mud-badge-dot { min-width: 8px; height: 8px; padding: 0; }
.mud-badge-bordered { box-shadow: 0 0 0 2px var(--mud-palette-surface); }
.mud-stack-wrap-reverse { flex-wrap: wrap-reverse; }
.mud-menu-activator { border: 0; background: none; font: inherit; color: inherit; padding: 0; }
.mud-collapse-collapsed { display: none; }
.mud-tab-panel-hidden { display: none; }
