/*
    ProspectToast.css - the prospect app's notification surface.

    Replaces the full-width alert banners that used to sit at the top of each step. Those pushed the page
    content down on arrival, were easy to scroll past on a long step, and on the Unit costs step the banner
    landed above the fold while the thing it described was below it.

    Success toasts close themselves after 10 seconds (see pp-toast.js) and run a countdown bar along the
    bottom edge, so the close is something the prospect can see coming rather than a card vanishing while
    they read it. Errors, warnings and info stay until dismissed: an upload result is the only record a
    prospect gets of what did and did not import.

    Depends on ProspectTokens.css for var(--pp-*); loaded from _LayoutProspectEmpty.cshtml and
    _LayoutPProspect.cshtml so every step gets it regardless of which step partial rendered.
*/

.pp-toast-region {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090; /* over Bootstrap's modal (1050) and its backdrop (1040) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 380px;
    max-width: calc(100vw - 40px);
    pointer-events: none; /* the region is only a positioner; the cards take the clicks */
}

.pp-toast {
    pointer-events: auto;
    /* position + overflow are for the countdown bar: it sits on the bottom edge and gets clipped to the
       card's rounded corners rather than squaring them off. */
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 28px 1fr 22px;
    gap: 12px;
    align-items: start;
    padding: 14px 14px 16px;
    border: 1px solid var(--pp-rule-2);
    border-radius: 10px;
    background: var(--pp-paper);
    box-shadow: 0 10px 40px rgba(18, 32, 60, .18);
}

/* ── Severity ─────────────────────────────────────────────────────────────────
   Carried by a tinted glyph disc rather than a coloured card, so a stack of three
   stays readable and no single toast shouts louder than its content warrants. */

.pp-toast-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
}

.pp-toast-error .pp-toast-glyph {
    background: var(--pp-red-100);
    color: var(--pp-red);
}

.pp-toast-warning .pp-toast-glyph {
    background: var(--pp-amber-100);
    color: var(--pp-amber);
}

.pp-toast-success .pp-toast-glyph {
    background: var(--pp-green-100);
    color: var(--pp-green);
}

.pp-toast-info .pp-toast-glyph {
    background: var(--pp-blue-100);
    color: var(--pp-blue);
}

.pp-toast-error {
    border-color: var(--pp-red-br);
}

.pp-toast-warning {
    border-color: var(--pp-amber-br);
}

.pp-toast-success {
    border-color: var(--pp-green-br);
}

/* ── Content ──────────────────────────────────────────────────────────────── */

.pp-toast-body {
    min-width: 0; /* lets long unbroken text wrap instead of widening the grid column */
}

.pp-toast-heading {
    margin: 1px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pp-ink);
}

.pp-toast-text {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pp-muted);
    overflow-wrap: break-word;
}

/* A heading on its own should not sit higher than the glyph beside it. */
.pp-toast-heading:only-child {
    margin-top: 5px;
}

.pp-toast-close {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--pp-faint);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.pp-toast-close:hover {
    background: var(--pp-surface-2);
    color: var(--pp-ink);
}

.pp-toast-close:focus-visible {
    outline: 2px solid var(--pp-navy-ring);
    outline-offset: 1px;
}

/* ── Countdown bar ────────────────────────────────────────────────────────────
   Only added to toasts that close themselves, so its presence is the signal: a card without
   one is a card that will wait. Absolutely positioned rather than a fourth grid child, which
   would land in column 1 of a second row instead of spanning the full width.

   The duration is set inline by pp-toast.js from SUCCESS_DISMISS_MS, so the timeout and the bar
   cannot drift out of step. scaleX is used rather than width so it animates on the compositor. */

.pp-toast-timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: transparent;
}

.pp-toast-timer i {
    display: block;
    height: 100%;
    background: var(--pp-faint);
    transform-origin: left center;
    animation-name: pp-toast-countdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.pp-toast-success .pp-toast-timer i {
    background: var(--pp-green-500);
}

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

/* ── Motion ───────────────────────────────────────────────────────────────── */

.pp-toast {
    animation: pp-toast-in .16s ease-out;
}

.pp-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .14s ease, transform .14s ease;
}

@keyframes pp-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-toast {
        animation: none;
    }

    .pp-toast.is-leaving {
        transition: none;
    }
}

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
    .pp-toast-region {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }
}