/**
 * Menu Badge Styles - Priority Colors
 * Extends existing .menu-count styles with priority-based coloring
 */

/* No unread NOTAMs - gray badge */
.menu-count.menu-badge--none {
    background: #6c757d !important;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.4);
    animation: none;
}

/* Priority-based colors for NOTAM badges */
.menu-count.menu-badge--very_important,
.menu-count.menu-badge--critical {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
    animation: badge-pulse-critical 2s ease-in-out infinite;
}

.menu-count.menu-badge--high {
    background: linear-gradient(135deg, #ff9800 0%, #e68900 100%) !important;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
    animation: badge-pulse-high 2s ease-in-out infinite;
}

.menu-count.menu-badge--normal {
    background: linear-gradient(135deg, #368BC1 0%, #2a6d96 100%) !important;
    box-shadow: 0 2px 6px rgba(54, 139, 193, 0.4);
}

.menu-count.menu-badge--low {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.4);
}

/* Pulse animations for critical/high priority */
@keyframes badge-pulse-critical {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(220, 53, 69, 0.6);
        transform: scale(1.1);
    }
}

@keyframes badge-pulse-high {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(255, 152, 0, 0.6);
        transform: scale(1.1);
    }
}

/* Override hover state for priority badges */
.left a:hover .menu-count.menu-badge--very_important,
.left a.active .menu-count.menu-badge--very_important,
.left a:hover .menu-count.menu-badge--critical,
.left a.active .menu-count.menu-badge--critical {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
}

.left a:hover .menu-count.menu-badge--high,
.left a.active .menu-count.menu-badge--high {
    background: linear-gradient(135deg, #e68900 0%, #cc7a00 100%) !important;
}

.left a:hover .menu-count.menu-badge--normal,
.left a.active .menu-count.menu-badge--normal {
    background: linear-gradient(135deg, #2a6d96 0%, #1f5272 100%) !important;
}

.left a:hover .menu-count.menu-badge--low,
.left a.active .menu-count.menu-badge--low {
    background: linear-gradient(135deg, #5a6268 0%, #4e555b 100%) !important;
}

/* Feedback badge styles */
.menu-count--feedback {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.menu-count--feedback.pulse {
    animation: feedback-badge-pulse 0.5s ease-out;
}

@keyframes feedback-badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    }
}

.left a:hover .menu-count--feedback,
.left a.active .menu-count--feedback {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
}

/* Smart Review (SR) badge styles - teal/cyan theme for learning */
.menu-count--sr {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.4);
    animation: sr-badge-pulse 3s ease-in-out infinite;
}

.menu-count--sr-empty {
    background: #6c757d !important;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
    opacity: 0.7;
    animation: none;
}

@keyframes sr-badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(13, 148, 136, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 10px rgba(13, 148, 136, 0.5);
        transform: scale(1.05);
    }
}

.left a:hover .menu-count--sr,
.left a.active .menu-count--sr {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important;
}

.left a:hover .menu-count--sr-empty,
.left a.active .menu-count--sr-empty {
    background: #5a6268 !important;
}

/* Comment Reports badge styles - orange/warning theme */
.menu-count--warning {
    background: linear-gradient(135deg, #ff9800 0%, #e68900 100%) !important;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
}

.menu-count--warning.menu-count--pulse,
.menu-count--warning.pulse {
    animation: warning-badge-pulse 0.5s ease-out;
}

@keyframes warning-badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
    }
}

.left a:hover .menu-count--warning,
.left a.active .menu-count--warning {
    background: linear-gradient(135deg, #e68900 0%, #cc7a00 100%) !important;
}

/* Saved Questions badge styles - solid color (no gradient) */
.menu-count--saved {
    background: #368BC1 !important;
    box-shadow: 0 2px 6px rgba(54, 139, 193, 0.4);
}

.left a:hover .menu-count--saved,
.left a.active .menu-count--saved {
    background: #2a6d96 !important;
}

/* Chat Queue badge styles - red for urgency */
.menu-count--chat {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: chat-badge-pulse 2s ease-in-out infinite;
}

@keyframes chat-badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(239, 68, 68, 0.6);
        transform: scale(1.08);
    }
}

.left a:hover .menu-count--chat,
.left a.active .menu-count--chat {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* Live Visitors badge styles - green pulsing for real-time activity */
.menu-count--live {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    animation: live-badge-pulse 2s ease-in-out infinite;
}

.menu-count--live.pulse {
    animation: live-badge-new 0.5s ease-out;
}

@keyframes live-badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 2px 12px rgba(16, 185, 129, 0.7);
    }
}

@keyframes live-badge-new {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    }
}

.left a:hover .menu-count--live,
.left a.active .menu-count--live {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

/* Transactions badge styles - emerald green for successful payments */
.menu-count--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
}

.menu-count--success.pulse {
    animation: success-badge-pulse 0.5s ease-out;
}

@keyframes success-badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
    }
}

.left a:hover .menu-count--success,
.left a.active .menu-count--success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* Dark mode adjustments for badges */
html.dark-mode .menu-count--success,
html.dark-mode-auto .menu-count--success {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.5);
}

html.dark-mode .left a:hover .menu-count--success,
html.dark-mode .left a.active .menu-count--success,
html.dark-mode-auto .left a:hover .menu-count--success,
html.dark-mode-auto .left a.active .menu-count--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

@media (prefers-color-scheme: dark) {
    html.dark-mode-auto .menu-count--success {
        background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
        box-shadow: 0 2px 8px rgba(74, 222, 128, 0.5);
    }

    html.dark-mode-auto .left a:hover .menu-count--success,
    html.dark-mode-auto .left a.active .menu-count--success {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    }
}

/* Mobile/tablet badge alignment fix (menu slides in) */
@media screen and (max-width: 1000px) {
    /* Ensure menu links use proper flex layout for badge alignment */
    .left a {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* Ensure all badges are consistently positioned at the end */
    .left a .menu-count {
        margin-left: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}