/* Final, deliberately narrow overrides for MudBlazor and theme transitions. */

/* A theme change must land atomically. Every layer declares its own color transitions at its
   own duration - MudBlazor uses 250ms on drawers and a bare `.3s` shorthand on nav expand
   icons, which animates every property including color - and text carrying its own
   .mud-text-* class does not inherit an animating color at all. The result was a switch that
   visibly resolved in stages. Enumerating every such declaration is open-ended, so instead
   theme.js adds this class, flips the palette, and removes it on the next frame.
   The !important is load-bearing for the same reason the reduced-motion block below needs it:
   it has to beat transition declarations in vendor and scoped stylesheets. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

.mud-paper,
[class*="mud-elevation-"] {
    box-shadow: none;
}

.mud-paper {
    border: 0;
}

.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-dialog):not(.mud-popover) {
    border-radius: var(--rg-shape-card);
    box-shadow: var(--rg-shadow-workspace-panel);
}

.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-dialog):not(.mud-popover)
    .mud-paper:not(.mud-dialog):not(.mud-popover) {
    box-shadow: none;
}

.mud-dialog {
    border: var(--rg-border-floating);
    border-radius: var(--rg-shape-dialog);
    background: var(--rg-surface-floating);
    box-shadow: var(--rg-shadow-floating);
    overflow: hidden;
}

.mud-popover {
    border: var(--rg-border-floating);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-floating);
    box-shadow: var(--rg-shadow-floating);
    overflow: hidden;
}

.mud-popover .mud-list,
.mud-popover .mud-paper {
    background: var(--rg-surface-floating);
}

.mud-dialog .mud-paper {
    background: var(--rg-surface-container-nested);
}

.mud-button-filled,
.mud-button-filled:hover {
    box-shadow: none;
}

.mud-button-filled-default:not(:disabled):not(.mud-disabled) {
    border: 0;
    background-color: var(--rg-surface-control);
}

.mud-button-filled-default:not(:disabled):not(.mud-disabled):hover,
.mud-button-filled-default:not(:disabled):not(.mud-disabled):focus-visible {
    background-color: var(--rg-surface-control-hover);
}

.mud-button-filled-default:not(:disabled):not(.mud-disabled):active {
    background-color: var(--rg-surface-control-pressed);
}

/* A compact field is the default everywhere. MudBlazor's Dense geometry is 40px for outlined
   fields and 48px for filled fields with an in-field label, so normalize non-dense instances
   to those same accessible sizes instead of making each page opt in independently. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-input-control .mud-input-root {
    font-size: var(--rg-type-body-medium-size);
    line-height: var(--rg-type-body-medium-line-height);
}

.mud-input-control.mud-input-control {
    margin-block: var(--rg-space-1);
}

.mud-input > input.mud-input-root-outlined:not(.mud-input-root-margin-dense),
.mud-input > div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-margin-dense) {
    padding-block: 10.5px;
}

.mud-input-label-outlined:not(.mud-input-label-margin-dense) {
    transform: translate(14px, 12px) scale(1);
}

.mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    font-size: var(--rg-type-input-label-size);
}

.mud-input > input.mud-input-root-filled:not(.mud-input-root-margin-dense),
.mud-input > div.mud-input-slot.mud-input-root-filled:not(.mud-input-root-margin-dense) {
    padding-block: 23px 6px;
}

.mud-input > input.mud-input-root-filled.mud-input-root-hidden-label:not(.mud-input-root-margin-dense),
.mud-input > div.mud-input-slot.mud-input-root-filled.mud-input-root-hidden-label:not(.mud-input-root-margin-dense) {
    padding-block: 10px 11px;
}

.mud-input-label-filled:not(.mud-input-label-margin-dense) {
    transform: translate(12px, 17px) scale(1);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled:not(.mud-input-label-margin-dense),
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled:not(.mud-input-label-margin-dense) {
    transform: translate(12px, 7px) scale(0.75);
}

.mud-application-layout-rtl .mud-input-label-outlined:not(.mud-input-label-margin-dense) {
    transform: translate(-14px, 12px) scale(1);
}

.mud-application-layout-rtl .mud-input-label-filled:not(.mud-input-label-margin-dense) {
    transform: translate(-12px, 17px) scale(1);
}

.mud-application-layout-rtl .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled:not(.mud-input-label-margin-dense),
.mud-application-layout-rtl .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled:not(.mud-input-label-margin-dense) {
    transform: translate(-12px, 7px) scale(0.75);
}

@media (max-width: 599.98px) {
    .mud-input > input.mud-input-root-outlined:not(.mud-input-root-margin-dense),
    .mud-input > div.mud-input-slot.mud-input-root-outlined:not(.mud-input-root-margin-dense) {
        padding-block: 14.5px;
    }

    .mud-input-label-outlined:not(.mud-input-label-margin-dense) {
        transform: translate(14px, 16px) scale(1);
    }

    .mud-application-layout-rtl .mud-input-label-outlined:not(.mud-input-label-margin-dense) {
        transform: translate(-14px, 16px) scale(1);
    }
}

/* Standalone links are identifiable from their UI context and underline on interaction.
   Links inside prose keep the underline at rest so meaning never depends on color alone. */
.mud-link:not(.mud-link-underline-none) {
    color: var(--rg-link-color) !important;
    text-decoration: none;
    text-underline-offset: var(--rg-link-underline-offset);
}

.mud-link:not(.mud-link-underline-none):is(:hover, :focus-visible),
p .mud-link:not(.mud-link-underline-none) {
    text-decoration: underline;
}

.mud-tooltip {
    max-width: min(16rem, calc(100vw - 2rem));
    border: var(--rg-border-floating);
    border-radius: var(--rg-shape-control);
    background: var(--rg-surface-floating);
    box-shadow: var(--rg-shadow-floating);
    color: var(--mud-palette-text-primary);
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.mud-tabs {
    background-color: transparent;
}

.mud-tabs-tabbar {
    min-height: var(--rg-control-height-md);
    border-bottom: 0;
    border-radius: var(--m3-shape-none);
    background-color: transparent;
    overflow: visible;
}

.mud-tabs-tabbar-content,
.mud-tabs-tabbar-wrapper {
    background-color: transparent;
}

.mud-tabs .mud-tabs-tabbar-wrapper {
    height: 100%;
    min-height: 100%;
}

.mud-tabs .mud-tab {
    width: auto;
    min-width: auto !important;
    height: 100%;
    min-height: 100%;
    padding-inline: var(--rg-space-3);
    border-radius: var(--m3-shape-none);
    color: var(--mud-palette-text-secondary);
    font-size: var(--rg-type-label-large-size);
    font-weight: var(--rg-font-weight-medium);
    line-height: var(--rg-type-label-large-line-height);
    letter-spacing: var(--rg-type-label-letter-spacing);
    text-transform: none;
}

.mud-tabs .mud-tab:is(:hover, :active, :focus-visible) {
    background: transparent;
}

.mud-tabs .mud-tab .mud-ripple-effect {
    display: none;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.mud-tabs .mud-tab-slider {
    height: 3px;
    border-radius: var(--m3-shape-xs) var(--m3-shape-xs) 0 0;
    background: var(--mud-palette-primary);
    transition: none !important;
}

.mud-tabs-panels {
    padding-top: var(--rg-space-4);
}

/* MudBlazor derives text and outlined alert colors from its computed -darken value, which is
   only a few percent away from the base role. That lands between 3.2:1 and 4.2:1 in half of
   the theme/severity combinations. Text alerts carry the message in text-primary on the shared
   status container; outlined alerts have no tint, so the -text token is enough. MudBlazor
   still colors .mud-alert-icon with the role in both cases. */
.mud-alert-text-success {
    background-color: var(--rg-status-success-container);
    color: var(--mud-palette-text-primary);
}

.mud-alert-text-warning {
    background-color: var(--rg-status-warning-container);
    color: var(--mud-palette-text-primary);
}

.mud-alert-text-error {
    background-color: var(--rg-status-error-container);
    color: var(--mud-palette-text-primary);
}

.mud-alert-text-info {
    background-color: var(--rg-status-info-container);
    color: var(--mud-palette-text-primary);
}

/* The icon is the only thing carrying severity in a text alert, so it is a graphical object
   that needs 3:1. MudBlazor colors it with the raw role and dims it to .9 opacity, which drops
   light-mode warning to 2.13:1. Use the foreground-safe role and keep it at full opacity. */
.mud-alert-text-success .mud-alert-icon,
.mud-alert-text-warning .mud-alert-icon,
.mud-alert-text-error .mud-alert-icon,
.mud-alert-text-info .mud-alert-icon {
    opacity: 1;
}

.mud-alert-text-success .mud-alert-icon {
    color: var(--rg-status-success-text);
}

.mud-alert-text-warning .mud-alert-icon {
    color: var(--rg-status-warning-text);
}

.mud-alert-text-error .mud-alert-icon {
    color: var(--rg-status-error-text);
}

.mud-alert-text-info .mud-alert-icon {
    color: var(--rg-status-info-text);
}

.mud-alert-outlined-success {
    color: var(--rg-status-success-text);
}

.mud-alert-outlined-warning {
    color: var(--rg-status-warning-text);
}

.mud-alert-outlined-error {
    color: var(--rg-status-error-text);
}

.mud-alert-outlined-info {
    color: var(--rg-status-info-text);
}

.mud-drawer-overlay {
    z-index: 1100;
}

.mud-button-root.mud-button-root {
    border-radius: var(--m3-shape-full);
}

@media (max-width: 599.98px) {
    .mud-button-root:not(.mud-icon-button) {
        min-height: var(--rg-control-height-lg);
    }

    .mud-icon-button.mud-icon-button:not(.app-header-utility-button) {
        width: var(--rg-control-height-lg);
        min-width: var(--rg-control-height-lg);
        height: var(--rg-control-height-lg);
        min-height: var(--rg-control-height-lg);
    }
}

.mud-switch-base.mud-switch-base {
    margin: 0;
    border-radius: 50%;
}

.mud-ripple {
    border-radius: inherit;
}

.mud-chip {
    border: 0;
    border-radius: var(--m3-shape-s);
}

.mud-card {
    border-radius: var(--rg-shape-card);
}

.mud-table-container {
    border-radius: var(--m3-shape-xs);
}

.mud-table-cell,
.mud-table-row {
    border-radius: var(--m3-shape-none);
}

/* The theme switch is now instant for everyone, so it needs no reduced-motion counterpart.
   The global reduced-motion policy lives in motion.css. */