/* ── Toast notification ──────────────────────────────────────────────────
 * One [popover="manual"] viewport per position holds multiple .toast-card
 * children (same one-popover-many-children shape as popover-menu.css) -
 * promotes the whole stack into the browser's top layer, so a toast fired
 * while a <dialog> is open still renders above it, without needing a
 * z-index war.
 *
 * The card is named .toast-card, not .toast - bootstrap.css (still loaded
 * elsewhere in this app) owns the bare .toast class and forces
 * `.toast:not(.show) { display: none; }` at higher specificity than a
 * plain single-class rule can win against.
 *
 * Markup is built entirely by assets/js/components/toast.js - nothing here is
 * authored in Razor beyond the empty viewport container(s) in the layouts.
 *
 * Usage (viewport, one per position actually used, created lazily by toast.js):
 *   <div class="toast-viewport" data-position="top-right" popover="manual"></div>
 * ────────────────────────────────────────────────────────────────────────── */

.toast-viewport {
    position: fixed;
    inset: unset;
    margin: 0;
    border: none;
    padding: 0;
    overflow: visible;
    background: none;
    width: min(26.875rem, calc(100vw - 2rem));

    &:popover-open {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

.toast-viewport[data-position="top-left"] {
    top: 1rem;
    left: 1rem;
}
.toast-viewport[data-position="top-center"] {
    top: 1rem;
    left: 50%;
    translate: -50% 0;
}
.toast-viewport[data-position="top-right"] {
    top: 1rem;
    right: 1rem;
}
.toast-viewport[data-position="bottom-left"] {
    bottom: 1rem;
    left: 1rem;
}
.toast-viewport[data-position="bottom-center"] {
    bottom: 1rem;
    left: 50%;
    translate: -50% 0;
}
.toast-viewport[data-position="bottom-right"] {
    bottom: 1rem;
    right: 1rem;
}

/* Collapsed (default): only the front toast is fully visible; up to 2 more peek
   out behind it at full opacity (Sonner-style - no fade, so the peeking cards stay
   legible), scaled/offset by stack index. Anything past that (.toast-card--stack-hidden,
   toggled in toast.js's reindex()) sits invisibly in the same spot as the 3rd card,
   ready to reveal as toasts in front of it close. Expanded (hover/focus of the
   viewport): normal flex list, no transforms - flex `gap` handles spacing without
   any JS-measured pixel heights. */
.toast-viewport:popover-open:not(.expanded) .toast-card {
    position: absolute;
    inset-inline: 0;
    top: 0;
    transform: translateY(calc(min(var(--_toast-index, 0), 2) * 0.875rem))
        scale(calc(1 - min(var(--_toast-index, 0), 2) * 0.06));
    transform-origin: top center;
    opacity: 1;
    z-index: calc(10 - var(--_toast-index, 0));
}

.toast-viewport:popover-open:not(.expanded) .toast-card.toast-card--stack-hidden {
    opacity: 0;
}

.toast-viewport[data-position^="bottom"]:popover-open:not(.expanded)
    .toast-card {
    top: auto;
    bottom: 0;
    transform: translateY(calc(min(var(--_toast-index, 0), 2) * -0.875rem))
        scale(calc(1 - min(var(--_toast-index, 0), 2) * 0.06));
    transform-origin: bottom center;
}

.toast-viewport.expanded .toast-card {
    position: static;
    transform: none;
    opacity: 1;
}

/* ── Card shell ──────────────────────────────────────────────────────── */

.toast-card {
    --_toast-accent-clr: var(--midnight-blue-clr-800);
    --_toast-progress-clr: var(--primary-clr-500);

    width: 100%;
    background: var(--bw-white-clr);
    border: 1px solid var(--gray-clr-200);
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-property: opacity, transform;
    transition-duration: 350ms;
    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
    transition-behavior: allow-discrete;

    @starting-style {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.95);
    }
}

.toast-card--closing {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.95);
}

.toast-card--paused {
    cursor: default;
}

.toast-card--success {
    --_toast-accent-clr: var(--green-clr-600);
    --_toast-progress-clr: var(--green-clr-500);
}
.toast-card--info {
    --_toast-accent-clr: var(--blue-clr-400);
    --_toast-progress-clr: var(--blue-clr-400);
}
.toast-card--warning {
    --_toast-accent-clr: var(--orange-clr-500);
    --_toast-progress-clr: var(--orange-clr-500);
}
.toast-card--error {
    --_toast-accent-clr: var(--rose-clr-500);
    --_toast-progress-clr: var(--rose-clr-500);
}

/* ── Content row (both variants) ────────────────────────────────────── */

.toast-row {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 1.25rem 1rem;
}

.toast-card--has-footer .toast-row {
    align-items: flex-start;
    padding-bottom: 0;
    transition: align-items 200ms ease, padding-bottom 200ms ease;
    transition-behavior: allow-discrete;
}

/* Collapsed title+description toast reads as one line, same as a description-only
   toast - so it re-centers and re-pads to match, instead of keeping the top-aligned
   layout it needs while the description/footer underneath it are still visible. */
.toast-card--collapsed .toast-row {
    align-items: center;
    padding-bottom: 1.25rem;
}

.toast-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--_toast-accent-clr);
    transition: font-size 200ms ease;
}

.toast-card--has-footer .toast-icon {
    font-size: 1.875rem;
}

.toast-card--collapsed .toast-icon {
    font-size: 1.25rem;
}

.toast-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.toast-card--has-footer .toast-text {
    gap: 0.125rem;
}

.toast-title {
    font-size: var(--fs-400);
    font-weight: var(--fw-600);
    line-height: 1.25rem;
    color: var(--_toast-accent-clr);
    margin-bottom: 0;

    + .toast-description {
        margin-bottom: 0.625rem;
    }
}

.toast-description {
    margin-bottom: 0;
    font-size: var(--fs-300);
    font-weight: var(--fw-400);
    line-height: 1.125rem;
    color: var(--gray-clr-600);
    overflow: hidden;
    opacity: 1;
    max-height: 6.25rem;
    transition: max-height 250ms ease, opacity 200ms ease, margin-bottom 250ms ease;
}

/* Description-only toasts have no title - their one line of text is heavier
   than the same element's weight when it's the secondary line under a title. */
.toast-card:not(.toast-card--has-footer) .toast-description {
    font-weight: var(--fw-500);
}

/* max-height (not display: none) so collapsing animates instead of snapping -
   the cap is just generous enough to clear real content, the actual visible
   height still comes from the content itself. */
.toast-card--collapsed .toast-description {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.toast-controls {
    display: flex;
    align-items: center;
    gap: 0.8125rem;
    flex-shrink: 0;
}

.toast-close,
.toast-chevron-btn {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--gray-clr-400);
    font-size: 1.25rem;
    line-height: 1;
}

.toast-chevron {
    display: inline-flex;
    transition: transform 200ms;
    transform: rotate(180deg);
}

.toast-card--collapsed .toast-chevron {
    transform: rotate(0deg);
}

/* ── Footer: countdown + progress bar (title+description toasts only) ── */

.toast-footer {
    position: relative;
    height: 2.9375rem;
    padding: 0.5rem 1.25rem;
    background: var(--gray-clr-50);
    overflow: hidden;
    opacity: 1;
    transition: height 250ms ease, padding 250ms ease, opacity 200ms ease;
}

.toast-card--collapsed .toast-footer {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.toast-footer-text {
    font-size: var(--fs-300);
    font-weight: var(--fw-400);
    line-height: 1.125rem;
    color: var(--gray-clr-600);
}

.toast-footer-cta {
    font-weight: var(--fw-500);
    color: var(--primary-clr-500);
}

.toast-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 0.3125rem;
    background: var(--_toast-progress-clr);
    transform-origin: left;
    animation-name: toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: var(--_toast-duration, 5000ms);
}

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

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