/**
 * Global toast notification system.
 *
 * Mounted by frontend/js/components/toast.js into #toast-stack (rendered
 * by advisor/templates/components/_toast_region.html). Picks up Django
 * messages framework output on page load and exposes a programmatic API
 * via window.toast.{success,info,warning,error}.
 *
 * Theme-aware (uses --do-* tokens). Colors per level are SEMANTIC and
 * intentionally NOT brand-overridable — toasts are universal feedback, not
 * brand identity.
 */

/* ========================================
   STACK CONTAINER
   Top-right, floating ABOVE the sticky navbar (z-index 1020). New toasts
   slide-in from the right; the stack grows downwards.
======================================== */

.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;            /* above navbar (1020), modals (1055), dropdowns (1080) */
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;     /* let clicks pass through the stack itself */
    max-width: 420px;
    width: max-content;
}

.toast-stack > * {
    pointer-events: auto;     /* re-enable on each toast */
}

/* ========================================
   TOAST CARD
======================================== */

.toast-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--do-card-bg, #ffffff);
    color: var(--do-text, #1e293b);
    border: 1px solid var(--border-primary, #e5e7eb);
    border-left: 4px solid var(--toast-accent, #64748b);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18),
                0 4px 10px -3px rgba(15, 23, 42, 0.08);
    min-width: 300px;
    max-width: 420px;
    max-height: 320px;
    overflow: hidden;
    /* Enter state — slide-fade from the right to match the top-right
       anchor. JS toggles .toast-item--visible after mount. */
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.21, 1.02, 0.73, 1);
    outline: none;
}

.toast-item:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 71, 85, 105), 0.35),
                0 10px 25px -5px rgba(15, 23, 42, 0.18);
}

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

.toast-item--leaving {
    opacity: 0;
    transform: translateX(110%);
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}

/* ========================================
   ICON
======================================== */

.toast-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--toast-accent, #64748b);
    font-size: 1.15rem;
    line-height: 1;
}

/* ========================================
   MESSAGE TEXT
======================================== */

.toast-body {
    min-width: 0;
    flex: 1;
    line-height: 1.4;
    font-size: 0.9rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 280px;
    overflow-y: auto;
}

/* ========================================
   CLOSE BUTTON
======================================== */

.toast-close {
    background: transparent;
    border: none;
    padding: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--do-text-muted, #64748b);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.toast-close:hover {
    background: var(--do-progress-track-bg, #f1f5f9);
    color: var(--do-text, #1e293b);
}

.toast-close:focus-visible {
    outline: 2px solid var(--toast-accent, #64748b);
    outline-offset: 2px;
}

/* ========================================
   LEVELS
======================================== */

.toast-item--success { --toast-accent: #10b981; }
.toast-item--info    { --toast-accent: #3b82f6; }
.toast-item--warning { --toast-accent: #f59e0b; }
.toast-item--error   { --toast-accent: #ef4444; }
.toast-item--debug   { --toast-accent: #6b7280; }

/* ========================================
   NOSCRIPT FALLBACK
   Shown only when JS is disabled. Uses Bootstrap alert classes which the
   rest of the platform already styles. Positioned below the navbar like
   the toast stack so the UX is comparable.
======================================== */

.toast-noscript-fallback {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    max-width: 420px;
    width: max-content;
}

.toast-noscript-fallback .alert {
    margin-bottom: 0.5rem;
}

/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
    .toast-item,
    .toast-item--visible,
    .toast-item--leaving {
        transition: opacity 0.01ms linear;
        transform: none;
    }
}

/* ========================================
   MOBILE — full-width at the top with side margins
======================================== */

@media (max-width: 640px) {
    .toast-stack {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
        width: auto;
        align-items: stretch;
    }

    .toast-item {
        min-width: 0;
        max-width: none;
    }

    .toast-noscript-fallback {
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
        width: auto;
    }
}