:root {
    --app-toast-ink: #172b3a;
    --app-toast-muted: #60717d;
    --app-toast-border: #cbd7d4;
    --app-toast-success: #4cc2a4;
    --app-toast-danger: #e17468;
    --app-toast-warning: #e8ac55;
    --app-toast-info: #5f9fce;
}

.app-toast-region {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 10950;
    display: flex;
    width: min(380px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    gap: .65rem;
    pointer-events: none;
}

.app-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .65rem;
    padding: .8rem .85rem;
    color: var(--app-toast-ink);
    background: #fff;
    border: 1px solid var(--app-toast-border);
    border-left: 4px solid var(--app-toast-info);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(16, 38, 56, .22);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .8rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: auto;
    transform: translateX(18px);
    transition: opacity .18s ease, transform .18s ease;
}

.app-toast.is-visible { opacity: 1; transform: translateX(0); }
.app-toast.is-leaving { opacity: 0; transform: translateX(18px); }
.app-toast--success { border-left-color: var(--app-toast-success); }
.app-toast--danger { border-left-color: var(--app-toast-danger); }
.app-toast--warning { border-left-color: var(--app-toast-warning); }
.app-toast--info { border-left-color: var(--app-toast-info); }

.app-toast__icon {
    margin-top: .08rem;
    color: var(--app-toast-info);
    font-size: 1rem;
    line-height: 1;
}

.app-toast--success .app-toast__icon { color: #248e72; }
.app-toast--danger .app-toast__icon { color: #c65147; }
.app-toast--warning .app-toast__icon { color: #a96b0d; }

.app-toast__content { min-width: 0; }
.app-toast__title { margin-bottom: .12rem; font-weight: 700; }
.app-toast__message { overflow-wrap: anywhere; }
.app-toast__meta { margin-top: .2rem; color: var(--app-toast-muted); font-size: .7rem; }
.app-toast__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.app-toast__action {
    color: #245f83;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
}
.app-toast__action:hover { color: #163f59; text-decoration: underline; }
.app-toast__close {
    width: 1.4rem;
    height: 1.4rem;
    margin: -.22rem -.3rem 0 0;
    padding: 0;
    color: #6f7f89;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}
.app-toast__close:hover { color: var(--app-toast-ink); background: #eef2f2; }
.app-toast__close:focus-visible,
.app-toast__action:focus-visible { outline: 2px solid #4d8daf; outline-offset: 2px; }

@media (max-width: 575.98px) {
    .app-toast-region { right: 1rem; bottom: 1rem; left: 1rem; width: auto; }
}

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

/* Bootstrap toasts that have not yet moved to AppToast inherit the same visual language. */
.toast-container,
#toastContainer {
    position: fixed !important;
    top: auto !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    z-index: 10940 !important;
    width: min(380px, calc(100vw - 2rem));
}

.toast:not(.app-toast) {
    width: 100%;
    color: var(--app-toast-ink) !important;
    background: #fff !important;
    border: 1px solid var(--app-toast-border) !important;
    border-left: 4px solid var(--app-toast-info) !important;
    border-radius: 2px !important;
    box-shadow: 0 10px 30px rgba(16, 38, 56, .22) !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .8rem;
}
.toast:not(.app-toast):has(.bg-success),
.toast:not(.app-toast).bg-success { border-left-color: var(--app-toast-success) !important; }
.toast:not(.app-toast):has(.bg-danger),
.toast:not(.app-toast).bg-danger { border-left-color: var(--app-toast-danger) !important; }
.toast:not(.app-toast):has(.bg-warning),
.toast:not(.app-toast).bg-warning { border-left-color: var(--app-toast-warning) !important; }
.toast:not(.app-toast) .toast-header,
.toast:not(.app-toast) .toast-body {
    color: var(--app-toast-ink) !important;
    background: #fff !important;
}
.toast:not(.app-toast) .toast-header { border-bottom-color: #e7eceb; }
.toast:not(.app-toast) .btn-close { filter: none !important; }

@media (max-width: 575.98px) {
    .toast-container,
    #toastContainer {
        right: 1rem !important;
        bottom: 1rem !important;
        left: 1rem !important;
        width: auto;
    }
}