/* ================================================================
   toast-premium.css  –  SaaS-grade notification toasts
   ================================================================ */

/* ── Container (fixed top-right stack) ───────────────────────── */
#nt-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147483647;
    /* always on top */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    /* clicks pass through gaps */
    width: 380px;
    max-width: calc(100vw - 32px);
}

/* ── Single toast ─────────────────────────────────────────────── */
.nt-toast {
    position: relative;
    pointer-events: all;
    width: 100%;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.08),
        0 10px 28px -4px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Slide-in from right */
    animation: nt-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    /* Hover accent ring */
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.nt-toast:hover {
    box-shadow:
        0 6px 12px -2px rgba(15, 23, 42, 0.1),
        0 18px 36px -6px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px);
}

/* Dismiss state */
.nt-toast.nt-dismiss {
    animation: nt-leave 0.32s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/* ── Left accent border ───────────────────────────────────────── */
.nt-toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--nt-accent, #64748b);
}

/* ── Body row ─────────────────────────────────────────────────── */
.nt-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 12px 20px;
}

/* ── Icon badge ───────────────────────────────────────────────── */
.nt-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--nt-icon-bg, #f1f5f9);
    color: var(--nt-accent, #64748b);
    margin-top: 1px;
}

/* ── Text block ───────────────────────────────────────────────── */
.nt-text {
    flex: 1;
    min-width: 0;
}

.nt-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.nt-msg {
    font-size: 13px;
    font-weight: 400;
    color: #475569;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

/* ── Close button ─────────────────────────────────────────────── */
.nt-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-top: -1px;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1;
}

.nt-close:hover {
    background: #f1f5f9;
    color: #334155;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.nt-progress {
    height: 3px;
    background: var(--nt-accent, #64748b);
    border-radius: 0 0 14px 14px;
    transform-origin: left;
    animation: nt-progress linear forwards;
    animation-duration: var(--nt-duration, 5s);
    opacity: 0.55;
}

/* Pause progress + lift on hover */
.nt-toast:hover .nt-progress {
    animation-play-state: paused;
}

/* ================================================================
   VARIANT TOKENS
   ================================================================ */

/* ── success ──────────────────────────────────────────────────── */
.nt-toast.nt-success {
    --nt-accent: #16a34a;
    --nt-icon-bg: #dcfce7;
}

/* ── danger / error ───────────────────────────────────────────── */
.nt-toast.nt-danger {
    --nt-accent: #dc2626;
    --nt-icon-bg: #fee2e2;
}

/* ── warning ──────────────────────────────────────────────────── */
.nt-toast.nt-warning {
    --nt-accent: #d97706;
    --nt-icon-bg: #fef3c7;
}

/* ── info ─────────────────────────────────────────────────────── */
.nt-toast.nt-info {
    --nt-accent: #0ea5e9;
    --nt-icon-bg: #e0f2fe;
}

/* ── submit (green-teal, same as success but distinct label) ──── */
.nt-toast.nt-submit {
    --nt-accent: #0d9488;
    --nt-icon-bg: #ccfbf1;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes nt-enter {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes nt-leave {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 200px;
        margin-bottom: 0;
    }

    to {
        opacity: 0;
        transform: translateX(50px) scale(0.94);
        max-height: 0;
        margin-bottom: -10px;
    }
}

@keyframes nt-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 480px) {
    #nt-container {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .nt-toast {
        border-radius: 12px;
    }

    .nt-body {
        padding: 12px 12px 10px 18px;
        gap: 10px;
    }

    .nt-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
        border-radius: 8px;
    }

    .nt-label {
        font-size: 13px;
    }

    .nt-msg {
        font-size: 12px;
    }
}