/* ==========================================================================
   Toast stack — global Django messages (success / info / warning / error)
   ==========================================================================
   Replaces the legacy inline `.alert` block in base.html. Fixed-position
   stack at the top-right that doesn't push content down. Slate-900 surface
   with a tag-coloured icon tile + progress bar. Auto-dismiss after 5s
   (paused on hover). Wired to static/js/main.js.
   ========================================================================== */

.nx-toast-stack {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(360px, calc(100vw - 2.5rem));
    pointer-events: none; /* let clicks through the empty space; toasts re-enable below */
}

.nx-toast {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 0.85rem 0.95rem;
    background: #0f172a;
    color: #fff;
    border-radius: 0.85rem;
    box-shadow:
        0 14px 32px -16px rgba(15, 23, 42, 0.55),
        0 4px 12px rgba(15, 23, 42, 0.18);
    font-size: 0.88rem;
    line-height: 1.45;
    overflow: hidden;
    pointer-events: auto;
    animation: nxToastIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nx-toast.is-leaving {
    animation: nxToastOut 220ms ease forwards;
}

/* --- Icon tile (tag-coloured) -------------------------------------------- */
.nx-toast-icon {
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    margin-top: -0.05rem;
}

.nx-toast--success .nx-toast-icon { color: #34d399; background: rgba(16, 185, 129, 0.18); }
.nx-toast--info    .nx-toast-icon { color: #60a5fa; background: rgba(37, 99, 235, 0.20); }
.nx-toast--warning .nx-toast-icon { color: #fbbf24; background: rgba(217, 119, 6, 0.22); }
.nx-toast--error   .nx-toast-icon,
.nx-toast--danger  .nx-toast-icon { color: #f87171; background: rgba(239, 68, 68, 0.20); }
.nx-toast--debug   .nx-toast-icon { color: #94a3b8; background: rgba(148, 163, 184, 0.20); }

/* --- Body --------------------------------------------------------------- */
.nx-toast-body {
    padding-top: 0.18rem;
    color: #f8fafc;
    word-break: break-word;
    /* Allow markup escaping via the template, but keep emphasis subtle. */
}
.nx-toast-body strong { color: #fff; font-weight: 600; }
.nx-toast-body a { color: #93c5fd; text-decoration: underline; }
.nx-toast-body a:hover { color: #bfdbfe; }

/* --- Close button -------------------------------------------------------- */
.nx-toast-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0.2rem;
    margin-top: -0.15rem;
    border-radius: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    transition: color 160ms ease, background 160ms ease;
}
.nx-toast-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.nx-toast-close i { font-size: 0.85rem; }

/* --- Progress bar (auto-dismiss visual) --------------------------------- */
.nx-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform-origin: left center;
    animation: nxToastProgress var(--toast-life, 5000ms) linear forwards;
    background: rgba(255, 255, 255, 0.3);
}
.nx-toast--success .nx-toast-progress { background: #34d399; }
.nx-toast--info    .nx-toast-progress { background: #60a5fa; }
.nx-toast--warning .nx-toast-progress { background: #fbbf24; }
.nx-toast--error   .nx-toast-progress,
.nx-toast--danger  .nx-toast-progress { background: #f87171; }
.nx-toast--debug   .nx-toast-progress { background: #94a3b8; }

.nx-toast:hover .nx-toast-progress { animation-play-state: paused; }

/* --- Animations --------------------------------------------------------- */
@keyframes nxToastIn {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes nxToastOut {
    to { opacity: 0; transform: translateX(110%); }
}
@keyframes nxToastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .nx-toast { animation: none; }
    .nx-toast-progress { animation-duration: 0s; transform: scaleX(0); }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 520px) {
    .nx-toast-stack {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
    }
}