/*
 * "Wackelnde Benachrichtigungen unten rechts" -> Sonner-artige Optik:
 * Toasts erscheinen oben mittig, ohne die animate.css "tada" (Zoom+
 * Rotation) Wobble-Animation, als schlanke, abgerundete Karte mit
 * dezentem farbigen Punkt statt einer breiten farbigen Kopfzeile.
 *
 * Pure CSS override - deliberately touches neither of the two core files
 * that actually create toasts (public/js/glpi_dialog.js's glpi_toast()
 * for JS-triggered toasts, templates/components/messages_after_redirect_
 * toasts.html.twig for server-side session messages), since both already
 * emit the exact same stable Bootstrap/animate.css class names
 * (.toast-container, .toast, .toast-header, .animate__tada) regardless of
 * GLPI version - overriding those classes here survives GLPI core updates
 * without needing to patch either source file.
 */

/*
 * Position: top-center, regardless of which of GLPI's four built-in
 * locations (top-left/top-right/bottom-left/bottom-right - see
 * css/includes/_base.scss's `.toast-container` rules, and the user's own
 * "toast_location" preference) actually got applied. !important is enough
 * to win over those compound-class rules since none of them use
 * !important themselves.
 */
.toast-container {
    top: 1rem !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%);
    /* "Fehlermeldungen stacken sich nicht richtig" - explicit gap between
     * stacked toasts regardless of whether Bootstrap's own default toast
     * spacing is present in this build. */
    gap: 0.75rem;
}

/*
 * No wobble: animate.css's "tada" keyframes are redefined here under the
 * same name - the last `@keyframes tada` declaration in the cascade wins
 * (keyframe names aren't subject to selector specificity), so this
 * replaces the zoom+rotate wobble everywhere `.animate__tada` is used
 * without needing to remove that class from either core file. Sonner's
 * own entrance is a simple slide+fade; since these toasts are now
 * anchored at the top, sliding down the last few pixels reads better than
 * a fade-only.
 */
@keyframes tada {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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

.animate__tada {
    animation-duration: 0.25s !important;
    animation-timing-function: ease-out !important;
    animation-iteration-count: 1 !important;
}

/*
 * Card look: rounded corners, soft shadow, neutral theme-aware surface
 * (--tblr-bg-surface/--tblr-body-color are plain CSS custom properties
 * GLPI itself already redefines under `:root[data-glpi-theme-dark="1"]` -
 * see css/includes/_palette_dark.scss - so this stays correct in both
 * themes with no dark-mode rule of our own) instead of the wide solid-
 * color header bar Bootstrap's default toast uses.
 */
/* Severity accent color, set on the whole card (not just the header) via
 * :has() so both the left border below and the header dot can read the
 * same variable - "fehlermeldungen sind viel zu leicht übersehbar": a
 * small dot alone wasn't prominent enough, this adds a solid colored left
 * edge the whole toast is anchored on. */
.toast:has(.toast-header.bg-danger) {
    --toast-accent: #d63939;
}

.toast:has(.toast-header.bg-warning) {
    --toast-accent: #f76707;
}

.toast:has(.toast-header.bg-info) {
    --toast-accent: #4299e1;
}

.toast:has(.toast-header.bg-success) {
    --toast-accent: #2fb344;
}

.toast {
    border: none !important;
    border-left: 4px solid var(--toast-accent, var(--tblr-body-color)) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
    background: var(--tblr-bg-surface) !important;
    min-width: 320px;
}

.toast .toast-header {
    background: transparent !important;
    color: var(--tblr-body-color) !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
}

.toast .toast-header strong {
    font-weight: 700;
    font-size: 0.95rem;
}

.toast .toast-header::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    margin-right: 0.6rem;
    background: var(--toast-accent, var(--tblr-body-color));
}

.toast .toast-body {
    color: var(--tblr-body-color);
    padding-top: 0.25rem;
    font-size: 0.925rem;
}