/* ===== NOTIFICATION COMPONENT STYLES ===== */

.alert {
    @apply fixed top-15 left-1/2 transform -translate-x-1/2 -translate-y-full z-50;
    @apply flex items-center gap-1.5;
    @apply px-6 py-1.5 rounded-lg shadow-xl;
    @apply text-gray-800 font-medium text-sm leading-tight;
    @apply max-w-md w-auto mx-4;
    @apply transition-all duration-300 ease-out;
    @apply cursor-pointer;
    @apply opacity-0 scale-95;
    @apply backdrop-blur-sm;
}

.alert.show {
    @apply translate-y-0 opacity-100 scale-100;
}

.alert:hover {
    @apply shadow-2xl;
    @apply transition-all duration-200 ease-in-out;
}

/* Notification Types */
.alert-success {
    @apply bg-teal-500;
    @apply  text-white;
}

.alert-success i {
    @apply  text-white;
    @apply rounded-full p-0.5;
}

.alert-danger {
    @apply bg-warn-500;
    @apply  text-white;
}

.alert-danger i {
    @apply  text-white;
    @apply rounded-full p-0.5;
}

.alert-warning {
    @apply bg-yellow-600;
    @apply  text-white;
}

.alert-warning i {
    @apply  text-white;
    @apply rounded-full p-0.5;
    @apply shadow-sm;
}

.alert-info {
    @apply bg-blue-500;
    @apply  text-white;
}

.alert-info i {
    @apply  text-white;
    @apply rounded-full p-0.5;
    @apply shadow-sm;
}

/* Icon styling within notifications */
.alert i {
    @apply flex-shrink-0;
    @apply text-lg;
    @apply transition-all duration-200 ease-in-out;
}

.alert:hover i {
    @apply transition-all duration-200 ease-in-out;
}

/* Animation for entry and exit */
@keyframes slideInFromTop {
    0% {
        transform: translate(-50%, -100%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }
}

@keyframes slideOutToTop {
    0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -100%) scale(0.8);
        opacity: 0;
    }
}

.alert.entering {
    animation: slideInFromTop 0.3s ease-out forwards;
}

.alert.exiting {
    animation: slideOutToTop 0.3s ease-in forwards;
}

/* Focus states for accessibility */
.alert:focus {
    @apply outline-none ring-2 ring-offset-2;
}

.alert-success:focus {
    @apply ring-green-500;
}

.alert-danger:focus {
    @apply ring-red-500;
}

.alert-warning:focus {
    @apply ring-yellow-500;
}

.alert-info:focus {
    @apply ring-blue-500;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .alert {
        @apply mx-2 text-xs px-4 py-1.5;
        @apply max-w-sm;
        @apply gap-1.5;
    }
    
    .alert i {
        @apply text-base;
        @apply p-0;
    }
}

@media (max-width: 480px) {
    .alert {
        @apply mx-1 px-2 py-1;
        @apply max-w-xs;
        @apply text-xs;
    }
}

/* ===== Import toasts: showNotification-style, top-right list ===== */
.import-toasts {
    @apply fixed top-4 right-4 z-50 flex flex-col gap-2;
    @apply max-w-sm w-full;
    @apply pointer-events-none;
}

.import-toasts .import-toast {
    @apply relative pointer-events-auto max-w-full;
    @apply cursor-pointer;
}

.import-toasts .import-toast:not(.show) {
    @apply translate-x-full opacity-0;
}

.import-toasts .import-toast.show {
    @apply translate-x-0 opacity-100;
}

.import-toasts .import-toast .import-toast-close {
    @apply cursor-pointer;
}