/* ============================================================
   Shelvera Toast Notifications
   Global floating notification stack for transient mutation feedback.
   ============================================================ */

:root {
    --shelvera-toast-top: 6.75rem;
    --shelvera-toast-right: 1.5rem;
    --shelvera-toast-width: min(420px, calc(100vw - 2rem));
    --shelvera-toast-gap: 0.75rem;
    --shelvera-toast-radius: 1.25rem;
    --shelvera-toast-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    --shelvera-toast-border: rgba(148, 163, 184, 0.28);
    --shelvera-toast-text: #0f1b3d;
    --shelvera-toast-muted: #65708a;
    --shelvera-toast-success: #059669;
    --shelvera-toast-warning: #d97706;
    --shelvera-toast-error: #dc2626;
    --shelvera-toast-info: #2563eb;
}

/*
   Legacy inline mutation banners are intentionally hidden once the global
   toast host is installed. The TempData message is now rendered by the
   ViewComponent in _Layout, outside page layout flow.
*/
.entity-mutation-alert,
.entity-edit-success-alert {
    display: none !important;
}

.shelvera-toast-host {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--shelvera-toast-top));
    right: var(--shelvera-toast-right);
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--shelvera-toast-gap);
    width: var(--shelvera-toast-width);
    max-width: var(--shelvera-toast-width);
    pointer-events: none;
}

.shelvera-toast {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--shelvera-toast-border);
    border-left-width: 4px;
    border-radius: var(--shelvera-toast-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shelvera-toast-shadow);
    color: var(--shelvera-toast-text);
    pointer-events: auto;
    transform: translateX(1.5rem);
    opacity: 0;
    transition: transform 280ms ease, opacity 280ms ease, margin 280ms ease, max-height 280ms ease;
    will-change: transform, opacity;
    overflow: hidden;
    max-height: 220px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    .shelvera-toast.is-visible {
        transform: translateX(0);
        opacity: 1;
    }

    .shelvera-toast.is-leaving {
        transform: translateX(1.5rem);
        opacity: 0;
        max-height: 0;
        margin-top: calc(-1 * var(--shelvera-toast-gap));
        padding-top: 0;
        padding-bottom: 0;
        border-top-width: 0;
        border-bottom-width: 0;
    }

.shelvera-toast-success {
    border-left-color: var(--shelvera-toast-success);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.shelvera-toast-warning {
    border-left-color: var(--shelvera-toast-warning);
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.98));
}

.shelvera-toast-error {
    border-left-color: var(--shelvera-toast-error);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.98));
}

.shelvera-toast-info {
    border-left-color: var(--shelvera-toast-info);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.shelvera-toast-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

.shelvera-toast-success .shelvera-toast-icon {
    color: #ffffff;
    background: var(--shelvera-toast-success);
}

.shelvera-toast-warning .shelvera-toast-icon {
    color: #ffffff;
    background: var(--shelvera-toast-warning);
}

.shelvera-toast-error .shelvera-toast-icon {
    color: #ffffff;
    background: var(--shelvera-toast-error);
}

.shelvera-toast-info .shelvera-toast-icon {
    color: #ffffff;
    background: var(--shelvera-toast-info);
}

.shelvera-toast-copy {
    min-width: 0;
}

    .shelvera-toast-copy strong {
        display: block;
        margin: 0 0 0.15rem;
        color: var(--shelvera-toast-text);
        font-size: 0.92rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .shelvera-toast-copy p {
        margin: 0;
        color: var(--shelvera-toast-text);
        font-size: 0.94rem;
        font-weight: 600;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .shelvera-toast-copy strong + p {
        color: var(--shelvera-toast-muted);
        font-weight: 500;
    }

.shelvera-toast-close {
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

    .shelvera-toast-close:hover,
    .shelvera-toast-close:focus-visible {
        background: rgba(15, 23, 42, 0.12);
        color: #0f172a;
        transform: scale(1.04);
        outline: none;
    }

@media (max-width: 767px) {
    :root {
        --shelvera-toast-top: 5.75rem;
        --shelvera-toast-right: 1rem;
        --shelvera-toast-width: calc(100vw - 2rem);
    }

    .shelvera-toast-host {
        left: 1rem;
        right: 1rem;
        align-items: stretch;
    }

    .shelvera-toast {
        border-radius: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shelvera-toast {
        transition: opacity 120ms ease;
        transform: none;
    }

        .shelvera-toast.is-visible,
        .shelvera-toast.is-leaving {
            transform: none;
        }
}