/* Professional Notification System - Consistent Blue-Gray Color Palette */

/* Notification Badge - Professional Dark Gray */
.notification-badge,
#notificationBadge {
    background-color: #495057 !important;
    color: white !important;
}

/* Priority Colors - Professional Blue-Gray Palette */
.priority-critical,
.notification-item.priority-critical,
.gmail-notification[data-priority="critical"] .notif-avatar {
    background-color: #495057 !important;
    border-left-color: #495057 !important;
    border-color: #495057 !important;
}

.priority-critical .notification-icon i,
.gmail-notification[data-priority="critical"] .notif-avatar i {
    color: #495057 !important;
}

.priority-high,
.notification-item.priority-high,
.gmail-notification[data-priority="high"] .notif-avatar {
    background-color: #6c757d !important;
    border-left-color: #6c757d !important;
    border-color: #6c757d !important;
}

.priority-high .notification-icon i,
.gmail-notification[data-priority="high"] .notif-avatar i {
    color: #6c757d !important;
}

.priority-medium,
.notification-item.priority-medium,
.gmail-notification[data-priority="medium"] .notif-avatar {
    background-color: #adb5bd !important;
    border-left-color: #adb5bd !important;
    border-color: #adb5bd !important;
}

.priority-medium .notification-icon i,
.gmail-notification[data-priority="medium"] .notif-avatar i {
    color: #adb5bd !important;
}

.priority-low,
.notification-item.priority-low,
.gmail-notification[data-priority="low"] .notif-avatar {
    background-color: #dee2e6 !important;
    border-left-color: #dee2e6 !important;
    border-color: #dee2e6 !important;
}

.priority-low .notification-icon i,
.gmail-notification[data-priority="low"] .notif-avatar i {
    color: #dee2e6 !important;
}

/* WhatsApp Notification Headers - Professional Gradients */
.whatsapp-notification.priority-critical .whatsapp-notification-header {
    background: linear-gradient(135deg, #495057, #343a40) !important;
}

.whatsapp-notification.priority-high .whatsapp-notification-header {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
}

.whatsapp-notification.priority-medium .whatsapp-notification-header {
    background: linear-gradient(135deg, #adb5bd, #6c757d) !important;
}

.whatsapp-notification.priority-low .whatsapp-notification-header {
    background: linear-gradient(135deg, #dee2e6, #adb5bd) !important;
}

/* WhatsApp Notification Borders - Professional Colors */
.whatsapp-notification.priority-critical {
    border-left-color: #495057 !important;
}

.whatsapp-notification.priority-high {
    border-left-color: #6c757d !important;
}

.whatsapp-notification.priority-medium {
    border-left-color: #adb5bd !important;
}

.whatsapp-notification.priority-low {
    border-left-color: #dee2e6 !important;
}

/* Gmail Notification Avatars - Professional Background */
.gmail-notification[data-priority="critical"] .notif-avatar,
.gmail-notification[data-priority="high"] .notif-avatar,
.gmail-notification[data-priority="medium"] .notif-avatar,
.gmail-notification[data-priority="low"] .notif-avatar {
    background: #f8f9fa !important;
}

/* Notification Icon Background - Consistent */
.notification-icon {
    background: #f8f9fa !important;
}

.notification-icon i {
    color: #6c757d !important;
}

/* Hover Effects - Professional */
.notification-item:hover {
    background-color: #f8f9fa !important;
}

.dropdown-action-btn:hover {
    background: #495057 !important;
    color: white !important;
}

/* Unread Notification - Professional Blue */
.notification-item.unread {
    background-color: #f8f9fa !important;
    border-left: 3px solid #495057 !important;
}

/* Enhanced Notification Interaction Styles */

/* Notification Item Layout */
.notification-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f3f4 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    background: white !important;
}

.notification-item:hover {
    background-color: #f8f9fa !important;
    transform: translateX(2px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Read vs Unread States */
.notification-item.read {
    opacity: 0.7 !important;
    background-color: #f8f9fa !important;
}

.notification-item.unread {
    opacity: 1 !important;
    background-color: white !important;
    border-left: 3px solid #495057 !important;
}

/* Action Buttons Container */
.notification-actions-dropdown {
    display: flex !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.notification-item:hover .notification-actions-dropdown {
    opacity: 1 !important;
}

/* Individual Action Buttons */
.dropdown-action-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #f8f9fa !important;
    color: #6c757d !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
}

.dropdown-action-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* View Button */
.dropdown-action-btn.view-btn {
    background: #495057 !important;
    color: white !important;
}

.dropdown-action-btn.view-btn:hover {
    background: #343a40 !important;
    color: white !important;
}

/* Decline Button */
.dropdown-action-btn.decline-btn {
    background: #dc3545 !important;
    color: white !important;
}

.dropdown-action-btn.decline-btn:hover {
    background: #c82333 !important;
    color: white !important;
}

/* Notification Feedback Animation */
.notification-feedback {
    animation: slideInRight 0.3s ease !important;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px) translateY(-50%);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }
}

/* Action States */
.notification-item.action-viewed {
    background-color: #d4edda !important;
    border-left-color: #28a745 !important;
}

.notification-item.action-declined {
    background-color: #f8d7da !important;
    border-left-color: #dc3545 !important;
}

/* Notification Details Modal */
.notification-detail {
    padding: 20px 0;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.detail-header i {
    font-size: 24px;
}

.detail-title {
    margin: 0;
    font-weight: 600;
    color: #212529;
}

.detail-message {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #495057;
}

.detail-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
}

.detail-meta small {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notification-actions-dropdown {
        position: static !important;
        opacity: 1 !important;
        margin-top: 8px !important;
        transform: none !important;
    }
    
    .notification-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .dropdown-action-btn {
        width: 32px !important;
        height: 32px !important;
    }
}