/* =============================================================================
   Toast notifications (toastr: showInfo / showError / showWarning in site.js).
   A white card with a coloured status icon, dark text and a thin progress line in
   the status colour, replacing toastr's solid colour blocks. Loaded after theme.css.
   Uses the theme.css tokens.
   ============================================================================= */

/* just below the top bar, centred */
#toast-container.toast-top-center {
    top: calc(var(--rs-topbar-height) + 12px);
}

/* when the top bar has room (site.js sets the class and the two measurements): in the bar,
   centred on it across (in the space between the logo and the links when those reach past its
   centre) and down. A toast too tall for the bar, or a stack of them, starts at the top of the
   bar and runs down past it. The container only spans the free middle of the bar, and toastr
   lets clicks through it anyway (only the toasts take them) */
.rs-toasts-in-topbar #toast-container.toast-top-center {
    top: 0;
    left: var(--rs-toast-left);
    right: auto;
    width: var(--rs-toast-max-width);
    height: var(--rs-topbar-height);
    padding: 8px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    gap: 8px;
}

    .rs-toasts-in-topbar #toast-container.toast-top-center > div {
        flex: none; /* full height even when they don't all fit in the bar */
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding: 14px 40px 14px 46px;
        box-shadow: 0 6px 18px -8px rgba(16, 24, 40, 0.25), 0 1px 3px rgba(16, 24, 40, 0.06);
    }

        .rs-toasts-in-topbar #toast-container.toast-top-center > div::before {
            left: 14px;
            font-size: 20px;
        }

#toast-container > div,
#toast-container.toast-top-center > div {
    position: relative;
    width: 380px;
    max-width: calc(100vw - 32px);
    margin: 0 auto 10px;
    padding: 14px 42px 14px 50px;
    overflow: hidden;
    background-color: var(--rs-surface) !important;
    background-image: none !important;
    color: var(--rs-text);
    /*Adminto (app.min.css) forces a coloured 2px border on three of the four types*/
    border: 1px solid var(--rs-border) !important;
    border-radius: 12px;
    box-shadow: 0 12px 32px -10px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.06);
    font-family: var(--rs-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    opacity: 1;
    animation: rs-toast-in 0.22s ease-out;
}

    #toast-container > div:hover {
        opacity: 1;
        box-shadow: 0 14px 36px -10px rgba(16, 24, 40, 0.32), 0 2px 6px rgba(16, 24, 40, 0.08);
        cursor: default;
    }

/* the status icon (Material Design Icons, loaded by the layout) */
#toast-container > div::before {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-family: "Material Design Icons";
    font-size: 22px;
    line-height: 1;
    font-weight: normal;
}

#toast-container > .toast-success::before {
    content: "\F05E0";
    color: var(--rs-success);
}

#toast-container > .toast-error::before {
    content: "\F0159";
    color: var(--rs-danger);
}

#toast-container > .toast-warning::before {
    content: "\F0026";
    color: var(--rs-warning);
}

#toast-container > .toast-info::before {
    content: "\F02FC";
    color: var(--rs-info);
}

#toast-container .toast-title {
    font-weight: 600;
    margin-bottom: 2px;
}

#toast-container .toast-message {
    color: var(--rs-text);
    overflow-wrap: anywhere;
}

    #toast-container .toast-message a {
        color: var(--rs-accent-hover);
        text-decoration: underline;
    }

/* close: a quiet cross in the corner */
#toast-container .toast-close-button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    float: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    color: var(--rs-text-faint);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
}

    #toast-container .toast-close-button:hover,
    #toast-container .toast-close-button:focus {
        background: var(--rs-neutral-soft);
        color: var(--rs-text);
        opacity: 1;
    }

/* time left: a thin line in the status colour */
#toast-container .toast-progress {
    height: 3px;
    opacity: 1;
    background-color: var(--rs-border-strong);
}

#toast-container > .toast-success .toast-progress {
    background-color: var(--rs-success);
}

#toast-container > .toast-error .toast-progress {
    background-color: var(--rs-danger);
}

#toast-container > .toast-warning .toast-progress {
    background-color: var(--rs-warning);
}

#toast-container > .toast-info .toast-progress {
    background-color: var(--rs-info);
}

@keyframes rs-toast-in {
    from {
        transform: translateY(-8px) scale(0.98);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #toast-container > div {
        animation: none;
    }
}