/* Notification Center Styling */

/* Notification list color system - using CSS variables for consistency */
:root {
    /* Dark theme (default state) */
    --notification-bg: var(--dark-card, #2c2c2c);
    --notification-text: var(--text-primary, #ffffff);
    --notification-heading: var(--text-primary, #ffffff);
    --notification-body: var(--text-secondary, #e9ecef);
    --notification-muted: var(--text-muted, #adb5bd);
    --notification-border: var(--gray-800, #343a40);
    
    /* Light theme (hover state) */
    --notification-hover-bg: #ffffff;
    --notification-hover-text: #333333;
    --notification-hover-heading: #212529;
    --notification-hover-body: #555555;
    --notification-hover-muted: #6c757d;
    
    /* Unread notification */
    --notification-unread-bg: rgba(43, 57, 144, 0.05);
    --notification-unread-border: var(--primary-blue, #0d6efd);
}

/* Notification list items */
.notification-list .list-group-item,
.list-group.notification-list .list-group-item {
    background-color: var(--notification-bg);
    color: var(--notification-text) !important;
    border-color: var(--notification-border);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Notification list items on hover */
.notification-list .list-group-item:hover,
.list-group.notification-list .list-group-item:hover {
    background-color: var(--notification-hover-bg) !important;
    color: var(--notification-hover-text) !important;
}

/* Text elements - heading */
.notification-list .list-group-item h5,
.list-group.notification-list .list-group-item h5 {
    color: var(--notification-heading) !important;
    transition: color 0.2s ease;
}

/* Text elements - paragraph */
.notification-list .list-group-item p,
.list-group.notification-list .list-group-item p {
    color: var(--notification-body) !important;
    transition: color 0.2s ease;
}

/* Text elements - muted text */
.notification-list .list-group-item .text-muted,
.list-group.notification-list .list-group-item .text-muted {
    color: var(--notification-muted) !important;
    transition: color 0.2s ease;
}

/* Hover state color adjustments */
.notification-list .list-group-item:hover h5,
.list-group.notification-list .list-group-item:hover h5 {
    color: var(--notification-hover-heading) !important;
}

.notification-list .list-group-item:hover p,
.list-group.notification-list .list-group-item:hover p {
    color: var(--notification-hover-body) !important;
}

.notification-list .list-group-item:hover .text-muted,
.list-group.notification-list .list-group-item:hover .text-muted {
    color: var(--notification-hover-muted) !important;
}

/* Unread notification style */
.unread-notification {
    background-color: var(--notification-unread-bg) !important;
    border-left: 3px solid var(--notification-unread-border) !important;
}

/* Urgent notification style */
.urgent-notification {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-left: 4px solid #dc3545 !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.3) !important;
}

/* Urgent notification title animation */
.urgent-notification .urgent-pulse {
    animation: urgent-pulse 1.5s infinite;
}

@keyframes urgent-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Urgent notification indicator */
.urgent-notification .badge.bg-danger {
    animation: urgent-glow 2s infinite;
}

@keyframes urgent-glow {
    0% { box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); }
    50% { box-shadow: 0 0 10px rgba(220, 53, 69, 0.8); }
    100% { box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); }
}

/* Button colors in notifications should stay consistent */
.notification-list .list-group-item .btn-outline-primary,
.list-group.notification-list .list-group-item .btn-outline-primary {
    color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

.notification-list .list-group-item .btn-outline-success,
.list-group.notification-list .list-group-item .btn-outline-success {
    color: var(--success) !important;
    border-color: var(--success) !important;
}

/* Notification Bell - Animation */
@keyframes bell-ring {
    0% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-7deg); }
    100% { transform: rotate(0); }
}

.notification-bell {
    display: inline-block;
    position: relative;
}

.notification-bell .fa-bell {
    transition: color 0.3s ease;
}

.notification-bell:hover .fa-bell {
    color: var(--primary-blue);
    animation: bell-ring 0.5s ease;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 50%;
    background-color: var(--danger);
    color: white;
    font-weight: bold;
}