/**
 * Notification Styles
 */

.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    min-width: 300px;
    max-width: 500px;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: auto;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-success {
    background-color: #10b981;
    color: white;
}

.notification-error {
    background-color: #ef4444;
    color: white;
}

.notification-warning {
    background-color: #f59e0b;
    color: white;
}

.notification-info {
    background-color: #3b82f6;
    color: white;
}

.dark .notification-success {
    background-color: #059669;
}

.dark .notification-error {
    background-color: #dc2626;
}

.dark .notification-warning {
    background-color: #d97706;
}

.dark .notification-info {
    background-color: #2563eb;
}

/* Stack multiple notifications */
.notification + .notification {
    top: calc(1rem + 80px);
}

.notification + .notification + .notification {
    top: calc(1rem + 160px);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .notification {
        right: 0.5rem;
        left: 0.5rem;
        min-width: auto;
        max-width: calc(100% - 1rem);
        transform: translateY(-100px);
    }

    .notification.show {
        transform: translateY(0);
    }
}