/**
 * NotificationService CSS - Badge Animations & Notification Styling
 * 
 * Handles:
 * - Badge "ding ding" animation
 * - Notification type colors (info, success, warning, error)
 * - Visual feedback for user interactions
 * 
 * Created: October 22, 2025
 * Agent: #1 - Notification System Integration
 */

/* ========================================
   BADGE DING ANIMATION
   ======================================== */

@keyframes badge-ding {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
    }
    25% { 
        transform: scale(1.3) rotate(-10deg); 
    }
    50% { 
        transform: scale(1.3) rotate(10deg); 
    }
    75% { 
        transform: scale(1.3) rotate(-10deg); 
    }
}

.notifications-badge-ding {
    animation: badge-ding 0.5s ease-in-out 2;
}

/* ========================================
   NOTIFICATION TYPE COLORS
   ======================================== */

/* Info - Blue (default, general information) */
.notification-item.type-info {
    border-left: 3px solid #555DFF;
}

/* Success - Green (positive actions, completions) */
.notification-item.type-success {
    border-left: 3px solid #00D98C;
}

/* Warning - Orange (attention needed, caution) */
.notification-item.type-warning {
    border-left: 3px solid #FFB800;
}

/* Error - Red (critical issues, failures) */
.notification-item.type-error {
    border-left: 3px solid #FF4757;
}

/* ========================================
   NOTIFICATION STATES
   ======================================== */

/* Unread notifications - subtle highlight */
.notification-item.unread {
    background: rgba(85, 93, 255, 0.05);
}

/* Read notifications - slightly dimmed */
.notification-item.read {
    opacity: 0.7;
}

/* Hover effect for all notifications */
.notification-item:hover {
    background: rgba(85, 93, 255, 0.08);
}