/*
 * Toast — transient notification banners
 *
 * Replaces heritage jGrowl + toastr in Heilsugátt (DashboardAlert →
 * $.jGrowl). Modern anatomy:
 *
 *   [icon] [text]  ([action])  ([close ×])
 *
 * Variants are "tinted cards" — each variant carries a light tinted
 * background + matching full colored border + strong colored icon,
 * all driven by the existing semantic token families:
 *
 *   .toast-success  — green tinted bg, green border, check icon
 *   .toast-error    — red tinted bg, red border, exclamation circle
 *   .toast-warning  — yellow tinted bg, yellow border, triangle exclamation
 *   .toast-info     — brand-blue tinted bg, brand border, info circle
 *
 * Optional modifiers:
 *   .toast-with-action  — adds a brand-color inline button (Undo / View …)
 *   .toast-dismissable  — renders the × close button on the right
 *
 * The container .toast-container is fixed top-right, z-1000, with
 * aria-live="polite" announcing messages to assistive tech.
 */

/* ─── Container ───
 * Fixed top-right of viewport. Toasts slide in from above and stack
 * downward — newer toasts appear at the top of the stack.
 */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

/* ─── Base toast ─── */
.toast {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-secondary);

    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 420px;

    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Static demo toasts rendered in the document flow (not in the fixed
 * container) — used on the docs page to show the anatomy side-by-side
 * without firing showToast(). The .toast-static modifier resets the
 * slide-in transform/opacity so the toast renders as-shown. */
.toast-static {
    transform: none;
    opacity: 1;
    margin: 0;
}

/* ─── Variant: success ─── */
.toast-success {
    background-color: var(--bg-success-primary);
    border-color: var(--border-success);
}
.toast-success .toast-icon {
    color: var(--fg-success-primary);
}

/* ─── Variant: error ─── */
.toast-error {
    background-color: var(--bg-error-primary);
    border-color: var(--border-error);
}
.toast-error .toast-icon {
    color: var(--fg-error-primary);
}

/* ─── Variant: warning ─── */
.toast-warning {
    background-color: var(--bg-warning-primary);
    border-color: var(--border-warning);
}
.toast-warning .toast-icon {
    color: var(--fg-warning-primary);
}

/* ─── Variant: info ─── */
.toast-info {
    background-color: var(--bg-brand-primary-alt);
    border-color: var(--border-brand);
}

/* ─── Dark mode overrides ───
 * Mirrors the Tag secondary-variant pattern: *-950 bg + *-800 border.
 * This is more subtle than the default semantic-token mapping
 * (which uses *-900 for success). Keeps the four variants visually
 * uniform in dark mode. */
[data-theme="dark"] .toast-success {
    background-color: var(--success-950);
    border-color: var(--success-800);
}
[data-theme="dark"] .toast-error {
    background-color: var(--error-950);
    border-color: var(--error-800);
}
[data-theme="dark"] .toast-warning {
    background-color: var(--warning-950);
    border-color: var(--warning-800);
}
[data-theme="dark"] .toast-info {
    background-color: var(--brand-950);
    border-color: var(--brand-800);
}

.toast-info .toast-icon {
    color: var(--fg-brand-primary);
}

/* ─── Anatomy ─── */
.toast-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
}

.toast-text {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* ─── Close button (dismissable variant) ─── */
.toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 4px;
    margin: -4px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--radius-xs, 4px);
    line-height: 1;
}

.toast-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
}

.toast-close:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 1px;
}

/* ─── Action button variant ─── */
.toast-with-action {
    gap: 16px;
}

.toast-with-action .toast-action {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 4px 8px;
    margin: -4px -8px -4px 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border-radius: var(--radius-xs, 4px);
}

.toast-with-action .toast-action:hover {
    background-color: var(--bg-primary-hover);
}

.toast-with-action .toast-action:focus-visible {
    outline: 2px solid var(--border-primary);
    outline-offset: 1px;
}