/* ============================
   PLATFORMA TOAST NOTIFICATIONS
   -----------------------------
   Token-drevet erstatning for den tidligere JS-injectede <style>-blok.
   Bindes til platforma-tokens.css så tenant-branding + v2 parchment-lag
   styrer både surface, border og icon-farver — ingen hardcoded hex.
   JS'en (platforma-toast.js) opretter kun DOM; visuel kontrakt lever her.
   ============================ */

#platforma-toast-container {
    position: fixed;
    top: var(--platforma-space-4, 1rem);
    right: var(--platforma-space-4, 1rem);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--platforma-space-2, 0.5rem);
    max-width: 420px;
    width: calc(100% - var(--platforma-space-8, 2rem));
    pointer-events: none;
}

/* ── Base toast ──────────────────────────────────────────── */
.platforma-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--platforma-space-3, 0.75rem);
    padding: 0.875rem var(--platforma-space-4, 1rem);
    border-radius: var(--platforma-radius-lg, 12px);
    background: var(--platforma-surface-card, var(--platforma-white));
    color: var(--platforma-ink-primary, var(--platforma-gray-800));
    box-shadow: var(--platforma-shadow-float,
                0 8px 24px rgba(26, 29, 43, 0.10),
                0 2px 6px rgba(26, 29, 43, 0.06));
    border-left: 4px solid transparent;
    font-size: var(--platforma-text-sm, 0.875rem);
    line-height: 1.4;
    pointer-events: auto;
    cursor: pointer;
    animation: pf-toast-in var(--platforma-duration, 180ms)
               var(--platforma-ease-out, ease-out);
    transition: opacity 0.2s, transform 0.2s;
}

.platforma-toast.is-leaving {
    opacity: 0;
    transform: translateX(100%);
}

/* ── Variant-farver — token-drevne ──────────────────────── */
.platforma-toast--success {
    border-left-color: var(--platforma-success);
}

    .platforma-toast--success .platforma-toast__icon {
        color: var(--platforma-success);
    }

.platforma-toast--error {
    border-left-color: var(--platforma-danger);
}

    .platforma-toast--error .platforma-toast__icon {
        color: var(--platforma-danger);
    }

.platforma-toast--info {
    border-left-color: var(--platforma-accent, var(--platforma-info));
}

    .platforma-toast--info .platforma-toast__icon {
        color: var(--platforma-accent, var(--platforma-info));
    }

.platforma-toast--warning {
    border-left-color: var(--platforma-warning);
}

    .platforma-toast--warning .platforma-toast__icon {
        color: var(--platforma-warning);
    }

/* ── Del-elementer ───────────────────────────────────────── */
.platforma-toast__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

    .platforma-toast__icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.platforma-toast__body {
    flex: 1;
    min-width: 0;
}

.platforma-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--platforma-ink-subtle, var(--platforma-gray-400));
    font-size: 1.125rem;
    line-height: 1;
    padding: 0 0 0 var(--platforma-space-2, 0.5rem);
    transition: color var(--platforma-duration-fast, 120ms) ease;
}

    .platforma-toast__close:hover {
        color: var(--platforma-ink-muted, var(--platforma-gray-600));
    }

/* ── Animation ───────────────────────────────────────────── */
@keyframes pf-toast-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Mobile — flyt til bunden ────────────────────────────── */
@media (max-width: 480px) {
    #platforma-toast-container {
        top: auto;
        bottom: var(--platforma-space-4, 1rem);
        right: var(--platforma-space-2, 0.5rem);
        max-width: calc(100% - var(--platforma-space-4, 1rem));
    }
}

/* ── Respekter reduced-motion (redundant med base.css, men
   toast-animation kan blive aggressiv uden eksplicit kill) ── */
@media (prefers-reduced-motion: reduce) {
    .platforma-toast {
        animation: none;
    }
}