/**
 * PROJ-22: Einheitliches Benachrichtigungssystem
 * Animationen und Layout fuer Toast-Notifications + Confirm-Modal
 */

/* ==========================================
   Toast Container
   ========================================== */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 24rem;
    width: calc(100% - 2rem);
    pointer-events: none;
}

.toast-container > * {
    pointer-events: auto;
}

/* ==========================================
   Toast Item Animationen
   ========================================== */
.toast-item {
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.toast-item.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

/* ==========================================
   Confirm Modal Animationen
   ========================================== */
.confirm-overlay {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;
}

.confirm-overlay.confirm-overlay-visible {
    opacity: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.confirm-dialog {
    transform: scale(0.92) translateY(-0.75rem);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out;
}

.confirm-dialog.confirm-dialog-visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 640px) {
    .toast-container {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
        width: auto;
    }
}