/**
 * Toast styling — light card, circular status badge, quiet meta.
 *
 * Loaded globally after toastr.min.css in layouts/app.blade.php, so it restyles
 * EVERY toast in the panel (session success/fail/validation flashes plus every
 * `toastr.*` call in page scripts) rather than one screen's.
 *
 * Replaces filled brand-coloured cards with white text. The card is now the
 * surface and colour appears only in the badge and a hairline accent, which is
 * what keeps a stack of four toasts readable.
 *
 * toastr's DOM is fixed:
 *   #toast-container > div.toast.toast-<type>
 *       > button.toast-close-button
 *       > div.toast-title
 *       > div.toast-message
 *       > div.toast-progress
 *
 * The status mark is DRAWN with gradients, not typed: toastr's own icons are
 * background-images on the card (disabled below), and a font glyph would tie
 * this file to a specific icon font's codepoints — the same reasoning as the
 * responsive expand control in ui-interactions.css.
 */

#toast-container {
    z-index: 10900;
}

/* ---- the card ---------------------------------------------------------- */

#toast-container > div {
    --toast-accent: #64748b;
    --toast-badge-bg: #f1f5f9;
    /* ONE radius for the card and the progress bar that rides its bottom edge.
       Written twice they drift: the card was 14px and the bar repeated `0 0
       14px 14px`, so changing the card left the bar's corners behind. */
    --toast-radius: 14px;

    position: relative;
    width: 23rem;
    max-width: calc(100vw - 2rem);
    /* Left gutter holds the badge; right gutter holds the close button. */
    padding: 0.85rem 2.4rem 0.85rem 3.6rem;
    /*
     * `!important` on the surface, reluctantly and specifically: the theme
     * build public/backend/css/app.min.css loads AFTER this file and carries
     *
     *   .toast-success{border:2px solid #6fd088!important;
     *                  background-color:rgba(111,208,136,.8)!important}
     *
     * on success / info / warning but NOT on error — which is why error alone
     * rendered as the intended white card while the other three kept the old
     * filled look, even though `#toast-container > div` out-specifies a bare
     * `.toast-success`. Specificity cannot beat `!important`, and app.min.css
     * is a minified vendor theme build, not a file to hand-edit.
     */
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--toast-radius);
    /*
     * Clips the progress bar to the card's own curve, which is what makes the
     * bar's ends follow the corners at ANY width. A radius on the bar alone
     * cannot do it: the bar is 3px tall, so the browser clamps a 14px corner
     * down to about a pixel and the square ends poke past the card's rounding.
     */
    overflow: hidden;
    /* toastr ships per-type background images; the badge replaces them. */
    background-image: none !important;
    /* frosted: a see-through card over a soft blur, a lit top edge, a tinted lift under it */
    background-color: rgba(255, 255, 255, 0.8) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    color: #0f172a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 18px 36px -16px color-mix(in srgb, var(--toast-accent) 38%, rgba(15, 23, 42, 0.3));
    opacity: 1;
    animation: focus-toast-in 0.46s cubic-bezier(0.32, 0.72, 0, 1) both;
    font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.84rem;
    line-height: 1.45;
}

#toast-container > div:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 22px 42px -16px color-mix(in srgb, var(--toast-accent) 46%, rgba(15, 23, 42, 0.32));
}

@keyframes focus-toast-in {
    from { opacity: 0; transform: translate3d(22px, -6px, 0) scale(0.96); }
    to { opacity: 1; transform: none; }
}

/* the countdown bar of a toast drawn without toastr (the sign-in page) */
@keyframes focus-toast-run {
    from { width: 100%; }
    to { width: 0; }
}

/* the badge fades in a beat after the card; opacity only, so the mark never drifts off the disc's centre mid-animation */
@keyframes focus-toast-badge {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* The circular badge. ::before is the disc, ::after draws the mark inside it. */
#toast-container > div::before {
    content: '';
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff -40%, var(--toast-badge-bg) 70%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--toast-accent) 22%, transparent),
        0 6px 14px -6px color-mix(in srgb, var(--toast-accent) 60%, transparent);
    animation: focus-toast-badge 0.5s 0.12s cubic-bezier(0.32, 0.72, 0, 1) both;
}

#toast-container > div::after {
    content: '';
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    animation: focus-toast-badge 0.5s 0.12s ease-out both;
}

/*
 * toastr paints its own tick/cross/bang as a background image per type with
 * `#toast-container>.toast-success{background-image:url(...)!important}` (specificity 1,1,0), which beats the
 * `background-image: none !important` on the card above (1,0,1). On a white card the white icon was invisible;
 * on the frosted card it shows next to the drawn badge as a second tick. One more class on the selector wins.
 */
#toast-container > div.toast {
    background-image: none !important;
}

/* ---- text -------------------------------------------------------------- */

#toast-container > div > .toast-title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
}

#toast-container > div > .toast-message {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    overflow-wrap: anywhere;
}

/*
 * A toast with no title carries the whole message, so it must not be muted.
 *
 * `.toast-title:empty + .toast-message` cannot work: toastr omits the title
 * ELEMENT entirely when the title is empty (measured: children are
 * toast-progress, toast-close-button, toast-message), so there is nothing for
 * `:empty +` to match. `:first-child` fails for the same reason — the progress
 * bar and close button are emitted first. Selecting on the parent's lack of a
 * title is the only reliable form.
 */
#toast-container > div:not(:has(.toast-title)) > .toast-message {
    margin-top: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0f172a;
}

/* ---- close ------------------------------------------------------------- */

#toast-container > div > .toast-close-button {
    position: absolute;
    top: 0.6rem;
    right: 0.55rem;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #94a3b8;
    text-shadow: none;
    background: transparent;
    opacity: 1;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 22px;
    transition: color 0.15s ease, background 0.15s ease;
}

#toast-container > div > .toast-close-button:hover,
#toast-container > div > .toast-close-button:focus {
    color: #334155;
    background: #f1f5f9;
    opacity: 1;
}

/* ---- progress ---------------------------------------------------------- */

/* A hairline on the card's bottom edge, tinted by type — the old full-width
   dark bar read as part of the message. */
#toast-container > div > .toast-progress {
    /* `position` stated here rather than inherited from toastr.min.css: the
       offsets below are meaningless on a static element, and relying on
       another file for it means the bar sits at the TOP of the card anywhere
       that file has not loaded (which is exactly how it rendered in a
       standalone preview of this stylesheet). */
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    /*
     * The card's `overflow: hidden` shapes the two ends that sit ON the
     * corners, so all this needs is a cap on the end that moves — toastr
     * shrinks the width toward the left, so the right edge travels across the
     * card and a square edge there reads as a clipped rectangle rather than a
     * deliberate bar.
     */
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--toast-accent) 55%, #fff), var(--toast-accent));
    opacity: 0.7;
}

/* ---- per type ---------------------------------------------------------- */

/*
 * ::before is the disc; ::after is the mark drawn inside it. The success mark
 * needs a rotation (a tick is two bars meeting at an angle), so it is a box
 * with two borders turned -45deg — the canonical CSS checkmark. The other three
 * are axis-aligned, so they are gradients and need no transform.
 */

#toast-container > div.toast-success {
    --toast-accent: #2f9e44;
    --toast-badge-bg: #eaf7ed;
}

#toast-container > div.toast-success::after {
    /* Sized and offset so the rotated tick lands centred in the 30px disc: the disc's centre
       (badge offset + 15px), less half the tick box, less 1.4px — the turned L's bounding box
       (width 11 + 2 border, height 6 + 2 border, rotated -45deg) sits 1.41px below its own box's
       centre, so lifting it by that much puts the tick's true middle on the disc's. */
    top: calc(0.85rem + 15px - 3px - 1.4px);
    /* stated, not inherited: the sums here assume the borders sit inside 11 x 6 */
    box-sizing: border-box;
    left: calc(0.85rem + 15px - 5.5px);
    width: 11px;
    height: 6px;
    border-left: 2px solid #2f9e44;
    border-bottom: 2px solid #2f9e44;
    border-radius: 1px;
    transform: rotate(-45deg);
}

#toast-container > div.toast-error {
    --toast-accent: #d64545;
    --toast-badge-bg: #fdeeee;
}

/* A cross from two diagonal bands — no transform, so nothing shifts the box. */
#toast-container > div.toast-error::after {
    background-image:
        linear-gradient(45deg, transparent 43%, #d64545 43%, #d64545 57%, transparent 57%),
        linear-gradient(135deg, transparent 43%, #d64545 43%, #d64545 57%, transparent 57%);
    background-size: 13px 13px, 13px 13px;
    background-position: 8.5px 8.5px, 8.5px 8.5px;
}

#toast-container > div.toast-warning {
    --toast-accent: #f08c00;
    --toast-badge-bg: #fff4e0;
}

/* Exclamation: stem plus dot. */
#toast-container > div.toast-warning::after {
    background-image:
        linear-gradient(#f08c00, #f08c00),
        linear-gradient(#f08c00, #f08c00);
    background-size: 2px 8px, 2px 2px;
    background-position: 14px 8px, 14px 19px;
}

#toast-container > div.toast-info {
    --toast-accent: #228be6;
    --toast-badge-bg: #e7f2fd;
}

/* Information mark: dot above stem. */
#toast-container > div.toast-info::after {
    background-image:
        linear-gradient(#228be6, #228be6),
        linear-gradient(#228be6, #228be6);
    background-size: 2px 2px, 2px 8px;
    background-position: 14px 8px, 14px 13px;
}

/* ---- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    #toast-container > div,
    #toast-container > div::before,
    #toast-container > div > .toast-close-button {
        transition: none;
        animation: none;
    }
}

/* no backdrop blur: back to a solid card, so text never sits on a see-through fill */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #toast-container > div {
        background-color: #fff !important;
    }
}

/* ---- small screens ----------------------------------------------------- */

@media (max-width: 575.98px) {
    #toast-container > div {
        width: calc(100vw - 1.5rem);
    }
}