/* ---------------------------------------------------------------------
   MudBlazor skin. MudBlazor stays as the behaviour layer (dialogs,
   selects/popovers, snackbars, alerts, fields) but must look like the
   rest of the app. Palette, radius and typography come from
   MailWarrenTheme; this file covers what the theme can't express.
   Loaded after MudBlazor.min.css so equal-specificity rules win.
   --------------------------------------------------------------------- */

/* Buttons: flat, 500 weight, no uppercase. */
.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:active {
    box-shadow: none;
}

.mud-button-outlined-default {
    border-color: var(--mw-border-strong);
    color: var(--mw-text);
}

.mud-button-outlined-default:hover {
    background-color: var(--mw-hover-soft);
}

.mud-button-root.mud-button-size-small {
    font-size: 12.5px;
}

/* Fields */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined {
    font-size: 14px;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mw-border-strong);
}

.mud-input-outlined:hover:not(.mud-disabled):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--mw-text-2);
}

.mud-input-outlined.mud-focused:not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--mw-primary);
    box-shadow: 0 0 0 3px var(--mw-primary-ring);
}

/* Alerts: soft fill + hairline border, same four tones as .alert */
.mud-alert {
    border-radius: var(--mw-radius-sm);
    font-size: 13.5px;
    border: 1px solid transparent;
}

.mud-alert-text-info { background-color: var(--mw-primary-soft); border-color: var(--mw-info-border); color: var(--mw-info-ink); }
.mud-alert-text-success { background-color: var(--mw-success-soft); border-color: var(--mw-ok-border); color: var(--mw-ok-ink); }
.mud-alert-text-warning { background-color: var(--mw-warning-soft); border-color: var(--mw-warn-border); color: var(--mw-warn-ink); }
.mud-alert-text-error { background-color: var(--mw-danger-soft); border-color: var(--mw-bad-border); color: var(--mw-bad-ink); }

.mud-alert-text-info .mud-alert-icon { color: var(--mw-primary-text); }
.mud-alert-text-success .mud-alert-icon { color: var(--mw-success); }
.mud-alert-text-warning .mud-alert-icon { color: var(--mw-warning); }
.mud-alert-text-error .mud-alert-icon { color: var(--mw-danger); }

.mud-alert-message {
    padding: 2px 0;
}

.mud-alert a {
    color: inherit;
    text-decoration: underline;
}

/* Dialogs */
.mud-dialog {
    border-radius: 14px;
    box-shadow: var(--mw-shadow-pop);
}

.mud-dialog .mud-dialog-title {
    padding: 18px 24px 4px;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 24px;
}

.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 20px;
    gap: 8px;
}

.mud-overlay-dialog .mud-overlay-scrim {
    background-color: var(--mw-overlay);
}

/* Snackbars read as small dark toasts */
.mud-snackbar {
    border-radius: 8px;
    box-shadow: var(--mw-shadow-pop);
}

/* Select / menu popovers */
.mud-popover .mud-list-item {
    font-size: 14px;
}

/* Links */
.mud-link {
    color: var(--mw-primary-text);
}

/* Charts (deliverability) */
.mud-chart .mud-chart-legend-item {
    font-size: 12.5px;
}

/* Primary as a FILL stays the brand blue in both themes; primary as TEXT (text and outlined buttons) uses the
   theme's readable variant (lighter on dark). */
.mud-button-filled-primary {
    background-color: var(--mw-primary);
}

.mud-button-filled-primary:hover {
    background-color: var(--mw-primary-hover);
}

.mud-button-text-primary,
.mud-button-outlined-primary {
    color: var(--mw-primary-text);
}
