/* ============================================================
   Onesown Blazor Components – Toaster
   ============================================================ */

/* Der Container liegt in der rechten oberen Ecke; sein Innenabstand ist der sichtbare Abstand zum Fensterrand
   und lässt Platz für den Schatten. Er ist nie höher als das Fenster – bei vielen Toasts scrollt der Stapel. */
.oo-toaster {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--oo-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-3);
    box-sizing: border-box;
    width: min(100%, calc(24rem + 2 * var(--oo-space-4)));
    max-height: 100vh;
    max-height: 100dvh;
    padding: var(--oo-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    pointer-events: none;
}

.oo-toast {
    flex-shrink: 0;
    pointer-events: all;
    /* Dunkle Karte auf hellem Grund; im Dunkel-Theme setzt dark.css die Variablen (umgedrehtes Grau wäre hell) */
    background: var(--oo-toast-bg, var(--oo-gray-850));
    color: var(--oo-toast-text, var(--oo-gray-150));
    border-radius: var(--oo-radius-lg);
    box-shadow: var(--oo-shadow-lg);
    overflow: hidden;
    animation: oo-toast-in 0.22s ease-out;
    border-left: var(--oo-space-1) solid transparent;
    font-size: var(--oo-font-size-md);
}

@keyframes oo-toast-in {
    from { opacity: 0; transform: translateY(1rem) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .oo-toast {
        animation: none;
    }
}

/* ── Typen ──────────────────────────────────────────────── */
.oo-toast--info    { border-left-color: var(--oo-primary); }
.oo-toast--success { border-left-color: var(--oo-success); }
.oo-toast--warning { border-left-color: var(--oo-warning); }
.oo-toast--error   { border-left-color: var(--oo-danger); }

.oo-toast--info    .oo-toast-icon { color: var(--oo-primary); }
.oo-toast--success .oo-toast-icon { color: var(--oo-success); }
.oo-toast--warning .oo-toast-icon { color: var(--oo-warning); }
.oo-toast--error   .oo-toast-icon { color: var(--oo-danger); }

/* ── Header ─────────────────────────────────────────────── */
.oo-toast-header {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    padding: var(--oo-space-1) var(--oo-space-1) 0 var(--oo-space-3);
}

/* Toast nur mit Überschrift: unten denselben Abstand wie sonst der Text */
.oo-toast-header:last-child {
    padding-bottom: var(--oo-space-1);
}

.oo-toast-icon {
    font-style: normal;
    font-weight: 700;
    font-size: var(--oo-font-size-lg);
    line-height: 1;
    flex-shrink: 0;
}

.oo-toast-title {
    flex: 1;
    min-width: 0;
    font-size: var(--oo-font-size-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Trefferfläche 2rem (Touch), das Symbol bleibt 16px */
.oo-toast-close {
    background: none;
    border: none;
    border-radius: var(--oo-radius-sm);
    color: var(--oo-toast-muted, var(--oo-gray-350));
    cursor: pointer;
    padding: 0;
    width: var(--oo-space-8);
    height: var(--oo-space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color var(--oo-transition-fast);
    flex-shrink: 0;
}

.oo-toast-close:hover,
.oo-toast-close:focus-visible {
    color: var(--oo-toast-text, var(--oo-gray-150));
}

.oo-toast-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* ── Body ───────────────────────────────────────────────── */
/* pre-line: Zeilenumbrüche der Meldung (z. B. Fehlerliste) anzeigen; lange Wörter/URLs umbrechen */
.oo-toast-body {
    padding: 0 var(--oo-space-3) var(--oo-space-3);
    line-height: 1.45;
    color: var(--oo-toast-text, var(--oo-gray-150));
    white-space: pre-line;
    overflow-wrap: anywhere;
}