/* ============================================================
   TOAST NOTIFICATIONS — toast.css
   ============================================================
   Floating status messages raised by showToast() — see js/toast.js.
   All values come from variables.css design tokens. Every var()
   carries a literal fallback so the component still renders
   correctly on pages that have not adopted variables.css yet.

   Naming convention: .app-toast-{element}[.is-{state}]
   Matches the existing .app-tooltip / .wc-* component naming.

   Anatomy
     .app-toast-stack          fixed, position-aware container
       .app-toast              the card (data-toast-type=success|error|warning|info)
         .app-toast-icon       tinted status tile
         .app-toast-body
           .app-toast-title    optional — only when a real heading is passed
           .app-toast-msg      the message
         .app-toast-close      dismiss button
         .app-toast-progress   countdown rail (omitted on sticky toasts)

   Load order:  variables.css  →  bootstrap  →  this file
   ============================================================ */

/* ── Stack ───────────────────────────────────────────────────
   pointer-events: none so the empty column never blocks clicks
   on the page behind it; the cards opt back in.                */
.app-toast-stack {
    position: fixed;
    z-index: 10050; /* above #fullScreenLoader (9999) and bootstrap modals (1055) */
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    pointer-events: none;
    font-family: var(--font-body, "IBM Plex Sans", sans-serif);
}

/* Top stacks clear the fixed topbar; bottom stacks sit off the page edge. */
.app-toast-stack[data-toast-stack^="top"] {
    top: calc(var(--layout-cu_topbar-height, 66px) + 16px);
}
.app-toast-stack[data-toast-stack^="bottom"] {
    bottom: 20px;
}
.app-toast-stack[data-toast-stack$="left"] {
    left: 20px;
}
.app-toast-stack[data-toast-stack$="right"] {
    right: 20px;
}
.app-toast-stack[data-toast-stack$="center"] {
    left: 50%;
    transform: translateX(-50%);
}

/* ── Card ────────────────────────────────────────────────────
   max-height / padding / border-width are transitioned as well
   as opacity, so a dismissed card collapses and lets the ones
   above it glide into place instead of snapping.               */
.app-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
    padding: 14px;
    overflow: hidden; /* clips .app-toast-progress to the radius */
    background: var(--color-surface-white, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(12, 37, 63, 0.2));
    pointer-events: auto;
    max-height: 60vh;
    will-change: transform, opacity;
    transition:
        opacity var(--transition-base, 0.28s cubic-bezier(0.4, 0, 0.2, 1)),
        transform var(--transition-base, 0.28s cubic-bezier(0.4, 0, 0.2, 1)),
        max-height var(--transition-base, 0.28s cubic-bezier(0.4, 0, 0.2, 1)),
        margin-bottom var(--transition-base, 0.28s cubic-bezier(0.4, 0, 0.2, 1)),
        padding var(--transition-base, 0.28s cubic-bezier(0.4, 0, 0.2, 1)),
        border-width var(--transition-base, 0.28s cubic-bezier(0.4, 0, 0.2, 1));
}

/* A message-only card is a single row, so centre it on the icon. */
.app-toast.has-no-title {
    align-items: center;
}

/* ── Status palette ──────────────────────────────────────────
   Each type sets two custom properties that the icon tile and
   the progress rail both read, so a new type is a 3-line add.  */
.app-toast[data-toast-type="success"] {
    --app-toast-accent: var(--color-status-success, #06890e);
    --app-toast-tint: rgba(6, 137, 14, 0.1);
}
.app-toast[data-toast-type="error"] {
    --app-toast-accent: var(--color-status-danger, #dc2626);
    --app-toast-tint: rgba(220, 38, 38, 0.1);
}
.app-toast[data-toast-type="warning"] {
    --app-toast-accent: var(--color-status-warning, #b45309);
    --app-toast-tint: rgba(180, 83, 9, 0.1);
}
.app-toast[data-toast-type="info"] {
    --app-toast-accent: var(--color-status-notification, #256bc1);
    --app-toast-tint: rgba(37, 107, 193, 0.1);
}

/* ── Icon tile ───────────────────────────────────────────────── */
.app-toast-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm, 8px);
    background: var(--app-toast-tint);
    color: var(--app-toast-accent);
}

.app-toast-icon svg {
    width: 19px;
    height: 19px;
}

/* ── Text ────────────────────────────────────────────────────── */
.app-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
}

.app-toast-body::-webkit-scrollbar { width: 6px; }
.app-toast-body::-webkit-scrollbar-track { background: transparent; }
.app-toast-body::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: var(--radius-full, 999px);
}

.app-toast-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary, #291704);
}

.app-toast-msg {
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary, #71717a);
    overflow-wrap: break-word;
}

/* No title above it, so the message carries the weight itself. */
.app-toast.has-no-title .app-toast-msg {
    font-size: 14px;
    font-weight: 450;
    color: var(--color-text-primary, #291704);
}

/* ── Dismiss button — same shell as .wc-icon-btn ─────────────── */
/* align-self keeps the ✕ level with the first line of a multi-line
   message even though .has-no-title centres the row. */
.app-toast-close {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: -2px -2px 0 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary, #71717a);
    cursor: pointer;
    transition:
        background var(--transition-fast, 0.15s ease),
        color var(--transition-fast, 0.15s ease);
}

.app-toast-close svg {
    width: 16px;
    height: 16px;
}

.app-toast-close:hover {
    background: var(--color-surface-inset, #f8f8f8);
    color: var(--color-text-primary, #291704);
}

.app-toast-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--gold-border, #d4c49a);
}

/* ── Countdown rail ──────────────────────────────────────────
   scaleX instead of width so the animation stays on the
   compositor; JS toggles .is-paused on hover / focus / hidden
   tab and pauses its own timer in the same breath, so the bar
   and the real countdown never drift apart.                    */
.app-toast-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(41, 23, 4, 0.07);
}

.app-toast-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--app-toast-accent);
    transform-origin: left center;
    animation: app-toast-countdown linear forwards;
    animation-duration: var(--app-toast-duration, 5000ms);
}

@keyframes app-toast-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.app-toast.is-paused .app-toast-progress-bar {
    animation-play-state: paused;
}

/* ── Enter / leave ───────────────────────────────────────────── */
.app-toast.is-entering {
    opacity: 0;
}
.app-toast-stack[data-toast-stack^="bottom"] .app-toast.is-entering {
    transform: translateY(12px) scale(0.97);
}
.app-toast-stack[data-toast-stack^="top"] .app-toast.is-entering {
    transform: translateY(-12px) scale(0.97);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    max-height: 0 !important;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    pointer-events: none;
}

/* ── Small screens ───────────────────────────────────────────
   Full-bleed with a 12px gutter, so a long validation message
   never gets squeezed into a narrow column on a phone.         */
@media (max-width: 575.98px) {
    .app-toast-stack {
        width: auto;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
    }
    .app-toast-stack[data-toast-stack^="bottom"] { bottom: 12px; }
    .app-toast-stack[data-toast-stack^="top"] {
        top: calc(var(--layout-cu_topbar-height, 66px) + 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────────
   Keep the fade and the countdown (both informational), drop
   the sliding and scaling.                                     */
@media (prefers-reduced-motion: reduce) {
    .app-toast {
        transition-duration: 0.01ms;
    }
    .app-toast.is-entering,
    .app-toast.is-leaving {
        transform: none;
    }
}