/* Enhanced specificity for notifications */
.mission-reset-notification {
    z-index: 9999 !important;
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    pointer-events: auto;
}

/* Prevent conflicts with existing styles */
.mission-reset-notification * {
    box-sizing: border-box;
}

/* Mission Reset Notification Styles */
.mission-reset-notification {
    z-index: 9999;
    pointer-events: auto;
}

/* Mission Reset Animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.mission-reset-notification.slide-in {
    animation: slideInRight 0.3s ease-out;
}

.mission-reset-notification.slide-out {
    animation: slideOutRight 0.3s ease-in;
}

/* Dark mode compatibility for notifications */
.dark .mission-reset-notification .bg-blue-500 {
    background-color: #1e40af; /* darker blue for dark mode */
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .mission-reset-notification {
        left: 1rem;
        right: 1rem;
        top: 1rem;
    }
}

/* Hover effects for notification close button */
.mission-reset-notification button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
}

/* Additional styling for different notification types */
.mission-reset-notification.daily {
    border-left: 4px solid #f59e0b; /* amber accent */
}

.mission-reset-notification.weekly {
    border-left: 4px solid #10b981; /* emerald accent */
}

.mission-reset-notification.monthly {
    border-left: 4px solid #8b5cf6; /* violet accent */
}