/* Flash messages ("Login successful.", errors) float over the page as a toast
   instead of a banner that pushes the whole layout down. Success fades away on
   its own; errors stay until clicked. Loaded last, and on the redesigned admin
   shell too (which skips the rest of the site's CSS). */
.alert-wrap {
    position: fixed !important;
    top: 96px;
    left: 50%;
    z-index: 1300;
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: none;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    transform: translateX(-50%);
    pointer-events: none;
    animation: kdx-toast-in .28s ease-out both;
}
.alert-wrap .wrap { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.alert-wrap .alert {
    position: relative;
    margin: 0 !important;
    padding: 13px 40px 13px 18px;
    border-radius: 14px !important;
    font-weight: 700;
    box-shadow: 0 16px 40px rgba(28, 37, 71, .18);
    pointer-events: auto;
    cursor: pointer;
}
.alert-wrap .alert.ok  { background: #ecfdf3 !important; border: 1px solid #a7e3c0 !important; color: #14633f !important; }
.alert-wrap .alert.bad { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; }
body.theme-dark .alert-wrap .alert.ok  { background: #052e16 !important; border-color: #166534 !important; color: #bbf7d0 !important; }
body.theme-dark .alert-wrap .alert.bad { background: #450a0a !important; border-color: #7f1d1d !important; color: #fecaca !important; }
.alert-wrap .alert::after {
    content: "\00d7";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    opacity: .5;
}
.alert-wrap .alert:hover::after { opacity: .9; }
.alert-wrap[hidden] { display: none !important; }

/* Success messages tidy themselves away after ~5s; errors are left for the reader */
.alert-wrap[role="status"] {
    animation: kdx-toast-in .28s ease-out both, kdx-toast-out .4s ease-in 5s forwards;
}
@keyframes kdx-toast-in  { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes kdx-toast-out { to { opacity: 0; visibility: hidden; transform: translate(-50%, -10px); } }

@media (prefers-reduced-motion: reduce) {
    .alert-wrap, .alert-wrap[role="status"] { animation: none; }
    .alert-wrap[role="status"] { animation: kdx-toast-out .01s linear 6s forwards; }
}
@media (max-width: 760px) {
    .alert-wrap { top: 78px; }
}