/* ====================================================================
   Zentrale Hinweis-Meldungen (Toasts) – ein Erscheinungsbild für alle Seiten.
   Design-System "Confident Product Showcase": Nunito, ruhige weiße Karte,
   semantische Zustandsfarben nur im Icon, keine Verläufe.
   ==================================================================== */

.mc-toasts {
    --toast-ink: #111113;
    --toast-ink-2: #6e6e73;
    --toast-line: rgba(0, 0, 0, .09);

    position: fixed;
    top: var(--toast-top, calc(var(--topbar-h, 0px) + var(--navbar-h, 68px) + 16px));
    right: 20px;
    z-index: 2000;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    font-family: 'Nunito Sans', 'Nunito', system-ui, sans-serif;
}

.mc-toast {
    --toast-accent: #0072c2;
    --toast-tint: rgba(0, 150, 255, .1);

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px 12px 14px 14px;
    background: #fff;
    color: var(--toast-ink);
    border: 1px solid var(--toast-line);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(17, 17, 19, .14);
    overflow: hidden;
    pointer-events: auto;

    /* Ohne JavaScript bleibt die Meldung einfach sichtbar */
    animation: mc-toast-in .3s cubic-bezier(.22, 1, .36, 1);
    transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mc-toast.is-leaving { opacity: 0; transform: translateX(16px); }
@keyframes mc-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mc-toast--success { --toast-accent: #15803d; --toast-tint: rgba(34, 197, 94, .12); }
.mc-toast--error   { --toast-accent: #b91c1c; --toast-tint: rgba(239, 68, 68, .1); }
.mc-toast--warning { --toast-accent: #b45309; --toast-tint: rgba(245, 158, 11, .14); }
.mc-toast--info    { --toast-accent: #0072c2; --toast-tint: rgba(0, 150, 255, .1); }

.mc-toast__icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--toast-tint); color: var(--toast-accent); font-size: .95rem;
}

.mc-toast__text {
    margin: 4px 0 0;
    font-size: .94rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--toast-ink);
    overflow-wrap: anywhere;
}

.mc-toast__close {
    width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: transparent; color: var(--toast-ink-2); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
    transition: background-color .15s, color .15s;
}
.mc-toast__close:hover { background: rgba(0, 0, 0, .06); color: var(--toast-ink); }
.mc-toast__close:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 1px; }

/* Restlaufzeit als dünne Linie (nur transform → günstig) */
.mc-toast__bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--toast-accent); opacity: .55;
    transform-origin: left center;
    animation: mc-toast-bar var(--toast-duration, 5000ms) linear forwards;
}
.mc-toast.is-paused .mc-toast__bar { animation-play-state: paused; }
@keyframes mc-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 575.98px) {
    .mc-toasts { right: 16px; left: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-toast { animation: none; transition: opacity .15s linear; }
    .mc-toast.is-leaving { transform: none; }
    .mc-toast__bar { animation: none; display: none; }
}