/* ============================================================================
   ClashWise Cinematic — MudBlazor overrides
   See Client/DESIGN_SYSTEM.md.

   Loaded AFTER MudBlazor.min.css in index.html so the cascade is on our side.
   MudBlazor 8 renders snackbars with classes:
       .mud-snackbar .mud-snackbar-surface .mud-alert .mud-alert-filled-{sev}
       .mud-snackbar-icon                — leading icon wrapper
       .mud-alert-icon                   — actual icon root
       .mud-alert-message                — message text
       .mud-snackbar-content-action      — actions slot
       .mud-snackbar-location-{position} — placement
   None of these sit under the .cw3 scope (the provider mounts at the body root),
   so we override them globally here.
============================================================================ */

/* ──────────────────────── stacking ──────────────────────── */
.mud-snackbar-wrapper { z-index: 10000 !important; }
.mud-snackbar         { z-index: 10000 !important; }

/* ──────────────────────── surface ────────────────────────
   One dark panel for every severity. Severity is signalled by a 3px
   discipline-color rail on the left edge + a recoloured icon, NOT by a
   fully-tinted background (MudBlazor's default — too loud, fights the design). */

.mud-snackbar.mud-snackbar-surface,
.mud-snackbar.mud-alert,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-alert-text-info,
.mud-snackbar.mud-alert-text-success,
.mud-snackbar.mud-alert-text-warning,
.mud-snackbar.mud-alert-text-error,
.mud-snackbar.mud-alert-text-normal,
.mud-snackbar.mud-alert-outlined-info,
.mud-snackbar.mud-alert-outlined-success,
.mud-snackbar.mud-alert-outlined-warning,
.mud-snackbar.mud-alert-outlined-error,
.mud-snackbar.mud-alert-outlined-normal {
    background: #16181D;
    background-color: #16181D;
    color: #EDEFF3;
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    border: 1px solid #23262E;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 30px 80px -20px rgba(0, 0, 0, 0.6);
    padding: 14px 14px 14px 22px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-width: 320px;
    max-width: 440px;
    backdrop-filter: blur(8px);
}

/* Discipline rail (left edge) — default = mech cyan, severity overrides below */
.mud-snackbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #22D3EE;
    border-radius: 10px 0 0 10px;
    z-index: 1;
}

/* Faint inner glow — sits behind content, tinted by severity */
.mud-snackbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(34, 211, 238, 0.06), transparent 60%);
}

.mud-snackbar > * { position: relative; z-index: 2; }

/* ──────────────────────── per-severity rail + glow ──────────────────────── */
.mud-snackbar.mud-alert-filled-info::before,
.mud-snackbar.mud-alert-text-info::before,
.mud-snackbar.mud-alert-outlined-info::before { background: #22D3EE; }
.mud-snackbar.mud-alert-filled-info::after,
.mud-snackbar.mud-alert-text-info::after,
.mud-snackbar.mud-alert-outlined-info::after {
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(34, 211, 238, 0.08), transparent 60%);
}

.mud-snackbar.mud-alert-filled-success::before,
.mud-snackbar.mud-alert-text-success::before,
.mud-snackbar.mud-alert-outlined-success::before { background: #4ADE80; }
.mud-snackbar.mud-alert-filled-success::after,
.mud-snackbar.mud-alert-text-success::after,
.mud-snackbar.mud-alert-outlined-success::after {
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(74, 222, 128, 0.08), transparent 60%);
}

.mud-snackbar.mud-alert-filled-warning::before,
.mud-snackbar.mud-alert-text-warning::before,
.mud-snackbar.mud-alert-outlined-warning::before { background: #FACC15; }
.mud-snackbar.mud-alert-filled-warning::after,
.mud-snackbar.mud-alert-text-warning::after,
.mud-snackbar.mud-alert-outlined-warning::after {
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(250, 204, 21, 0.08), transparent 60%);
}

.mud-snackbar.mud-alert-filled-error::before,
.mud-snackbar.mud-alert-text-error::before,
.mud-snackbar.mud-alert-outlined-error::before { background: #F43F5E; }
.mud-snackbar.mud-alert-filled-error::after,
.mud-snackbar.mud-alert-text-error::after,
.mud-snackbar.mud-alert-outlined-error::after {
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(244, 63, 94, 0.10), transparent 60%);
}

.mud-snackbar.mud-alert-filled-normal::before,
.mud-snackbar.mud-alert-text-normal::before,
.mud-snackbar.mud-alert-outlined-normal::before { background: #6A707B; }
.mud-snackbar.mud-alert-filled-normal::after,
.mud-snackbar.mud-alert-text-normal::after,
.mud-snackbar.mud-alert-outlined-normal::after {
    background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(168, 174, 183, 0.04), transparent 60%);
}

/* ──────────────────────── content ──────────────────────── */
.mud-snackbar .mud-snackbar-content-message,
.mud-snackbar .mud-alert-message {
    color: #EDEFF3;
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

/* Leading severity icon — recolour to match the rail. MudBlazor wraps it in
   .mud-snackbar-icon (the layout slot) and the actual SVG carries .mud-alert-icon. */
.mud-snackbar .mud-snackbar-icon {
    display: flex;
    align-items: center;
    opacity: 1;
    padding: 0;
    margin-right: 12px;
    margin-inline-end: 12px;
    margin-inline-start: 0;
    font-size: 18px;
    color: #A8AEB7;
}

.mud-snackbar .mud-snackbar-icon .mud-alert-icon,
.mud-snackbar .mud-snackbar-icon .mud-icon-root,
.mud-snackbar .mud-snackbar-icon svg {
    width: 18px;
    height: 18px;
    color: inherit;
}

/* Per-severity icon colour — outranks MudBlazor's `.mud-alert-{variant}-{sev} .mud-alert-icon`
   because we add the .mud-snackbar root + load later. */
.mud-snackbar.mud-alert-filled-info    .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-info      .mud-snackbar-icon,
.mud-snackbar.mud-alert-outlined-info  .mud-snackbar-icon { color: #22D3EE; }

.mud-snackbar.mud-alert-filled-success    .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-success      .mud-snackbar-icon,
.mud-snackbar.mud-alert-outlined-success  .mud-snackbar-icon { color: #4ADE80; }

.mud-snackbar.mud-alert-filled-warning    .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-warning      .mud-snackbar-icon,
.mud-snackbar.mud-alert-outlined-warning  .mud-snackbar-icon { color: #FACC15; }

.mud-snackbar.mud-alert-filled-error    .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-error      .mud-snackbar-icon,
.mud-snackbar.mud-alert-outlined-error  .mud-snackbar-icon { color: #F43F5E; }

.mud-snackbar.mud-alert-filled-normal    .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-normal      .mud-snackbar-icon,
.mud-snackbar.mud-alert-outlined-normal  .mud-snackbar-icon { color: #A8AEB7; }

/* ──────────────────────── actions / close ──────────────────────── */
.mud-snackbar .mud-snackbar-content-action {
    margin-left: 12px;
    margin-inline-start: 12px;
    margin-right: 0;
    margin-inline-end: 0;
    padding-left: 12px;
    padding-inline-start: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Inline text action (Snackbar.Add(..., onClick, text: "Undo")) → cw3 ghost pill */
.mud-snackbar .mud-snackbar-content-action > button:not(.mud-icon-button),
.mud-snackbar .mud-snackbar-content-action .mud-button:not(.mud-icon-button) {
    color: #EDEFF3;
    background: transparent;
    border: 1px solid #2C3038;
    border-radius: 100px;
    padding: 6px 14px;
    font-family: 'Geist', ui-sans-serif, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mud-snackbar .mud-snackbar-content-action > button:not(.mud-icon-button):hover,
.mud-snackbar .mud-snackbar-content-action .mud-button:not(.mud-icon-button):hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #3A3F49;
}

/* Close icon button (the × when ShowCloseIcon = true) */
.mud-snackbar .mud-snackbar-content-action .mud-icon-button,
.mud-snackbar .mud-alert-close {
    color: #6A707B;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mud-snackbar .mud-snackbar-content-action .mud-icon-button:hover,
.mud-snackbar .mud-alert-close:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #EDEFF3;
    border-color: #23262E;
}

.mud-snackbar .mud-snackbar-content-action .mud-icon-button .mud-icon-root,
.mud-snackbar .mud-snackbar-content-action .mud-icon-button svg,
.mud-snackbar .mud-alert-close .mud-icon-root,
.mud-snackbar .mud-alert-close svg {
    width: 14px;
    height: 14px;
    color: inherit;
}

/* ──────────────────────── motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mud-snackbar { transition: none !important; }
}