/* Canonical toast chrome -- shared by the LwSnackbar atom (static SSR pages)
   and AlertComponent (interactive pages), so it lives in a GLOBAL sheet
   (promoted from LwSnackbar.razor.css when AlertComponent became the second
   consumer, 2026-07-13). Source: ledgerwise-app src/components/atoms/
   snackbar.tsx -- z-80, px-4 py-3, rounded-md, 14px/500 white, shadow-lg,
   gap-2; close white/60 -> white.
   Placement diverges from the reference's top-right: toasts anchor bottom
   center (24px from the bottom edge) and slide up (Cody, 2026-07-29).
   Severity reads through the toast SURFACE, not just the icon (Cody,
   2026-07-29): success = --lw-toast-success-bg green, error =
   --lw-toast-error-bg red, everything else = brand navy. All three carry
   white text/icons. */

.lw-snackbar .lw-snackbar__toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    /* Reference uses z-80, but MudBlazor's appbar sits at ~1100 and dialogs
       at ~1400 -- park toasts on Mud's snackbar tier so they clear both. */
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--lw-radius-control);
    background: var(--lw-primary-dark);
    color: var(--lw-white);
    font-family: var(--lw-font-family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    animation: lw-snackbar-in 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

/* The -50% X translate is baked into every keyframe/state so it survives the
   slide animation (transform is a single property -- it cannot be split). */
@keyframes lw-snackbar-in {
    from { opacity: 0; transform: translate(-50%, 24px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.lw-snackbar .lw-snackbar__toast.is-hiding {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translate(-50%, 24px);
}

/* Severity surfaces. Neutral/info toasts keep the navy base above. */
.lw-snackbar .lw-snackbar__toast--success {
    background: var(--lw-toast-success-bg);
}

.lw-snackbar .lw-snackbar__toast--error {
    background: var(--lw-toast-error-bg);
}

.lw-snackbar .lw-snackbar__icon {
    flex-shrink: 0;
    color: currentColor; /* white -- the surface carries severity */
}

/* Neutral navy toasts still tint the icon, since their surface is severity-less. */
.lw-snackbar .lw-snackbar__toast:not(.lw-snackbar__toast--success):not(.lw-snackbar__toast--error) .lw-snackbar__icon--success {
    color: #5CC49A; /* --content-status-online (dark surface) */
}

.lw-snackbar .lw-snackbar__toast:not(.lw-snackbar__toast--success):not(.lw-snackbar__toast--error) .lw-snackbar__icon--error {
    color: var(--lw-primary-gold); /* warm alert reads on navy */
}

.lw-snackbar .lw-snackbar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--lw-white) 60%, transparent);
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 0;
}

.lw-snackbar .lw-snackbar__close:hover {
    color: var(--lw-white);
}

/* ---- MudBlazor ISnackbar (Snackbar.Add) onto the same canonical toast ----
   Interactive pages fire Mud snackbars all over the project surfaces; until
   every call site moves to AlertComponent, restyle the Mud toast itself so
   all three channels (LwSnackbar, AlertComponent, ISnackbar) render the one
   canonical toast, including the green/red severity surfaces. */

.mud-snackbar {
    background: var(--lw-primary-dark) !important;
    color: var(--lw-white) !important;
    border-radius: var(--lw-radius-control) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    font-family: var(--lw-font-family) !important;
    padding: 4px 8px;
}

.mud-snackbar .mud-snackbar-content-message {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--lw-white);
}

/* Severity surfaces: success green, error red, everything else navy. */
.mud-snackbar.mud-alert-filled-success {
    background: var(--lw-toast-success-bg) !important;
}

.mud-snackbar.mud-alert-filled-error {
    background: var(--lw-toast-error-bg) !important;
}

.mud-snackbar .mud-snackbar-icon { margin-right: 8px; }
.mud-snackbar .mud-snackbar-icon .mud-icon-root { width: 20px; height: 20px; }
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon { color: var(--lw-white); }
/* Navy (severity-less) surfaces still tint the icon so the intent reads. */
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-normal .mud-snackbar-icon { color: var(--lw-primary-gold); }

/* Close affordance: white/60 -> white, like the canonical toast. */
.mud-snackbar .mud-snackbar-close-button,
.mud-snackbar .mud-snackbar-close-button .mud-icon-root {
    color: color-mix(in srgb, var(--lw-white) 60%, transparent) !important;
}

.mud-snackbar .mud-snackbar-close-button:hover,
.mud-snackbar .mud-snackbar-close-button:hover .mud-icon-root {
    color: var(--lw-white) !important;
}