/* XI Ai Betting Alerts - Clean Styling */

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.6;
}

/* iPhone Safe Area Support */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Custom xs breakpoint for very small screens (< 400px) */
@media (min-width: 400px) {
    .xs\:inline {
        display: inline !important;
    }
}

/* Alert Cards */
.alert-card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.alert-card:hover {
    border-color: #d1d1d1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.alert-card.sharp-money {
    border-left: 4px solid #ef4444;
}

.alert-card.casual-money {
    border-left: 4px solid #3b82f6;
}

.alert-header {
    display: flex;
    align-items-start;
    justify-content: between;
    margin-bottom: 12px;
}

.alert-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    rounded: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.alert-badge.sharp-money {
    background-color: #fef2f2;
    color: #dc2626;
}

.alert-badge.casual-money {
    background-color: #eff6ff;
    color: #2563eb;
}

.match-info {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

.match-details {
    font-size: 14px;
    color: #666666;
    margin-bottom: 8px;
}

.confidence-bar {
    width: 100%;
    height: 6px;
    background-color: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.confidence-fill {
    height: 100%;
    background-color: #22c55e;
    transition: width 0.3s ease;
}

.confidence-text {
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
}

/* Loading States */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Error States */
.error-message {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .alert-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .match-info {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 6px;
    }
    
    .match-details {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .alert-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    /* Mobile-friendly badge layout */
    .flex.items-center.space-x-1 {
        gap: 0.25rem;
    }
    
    .alert-badge,
    .market-badge {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    /* Mobile betting recommendations */
    .mt-3.p-3 {
        padding: 12px;
        margin-top: 12px;
    }
    
    .text-base {
        font-size: 14px;
    }
    
    .text-sm {
        font-size: 12px;
    }
    
    .text-xs {
        font-size: 11px;
    }
    
    /* Grid responsiveness */
    .grid.grid-cols-1.md\\:grid-cols-4 {
        gap: 12px;
    }
    
    .bg-gray-50.border.border-gray-200.rounded-lg.p-6 {
        padding: 16px;
    }
}

/* Simple iPhone Filter Buttons */
.filter-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 2px solid #e5e7eb;
    background-color: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn:active {
    transform: scale(0.95);
}

.filter-btn.active {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Status Indicators */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.status-running {
    background-color: #22c55e;
}

.status-warning {
    background-color: #f59e0b;
}

.status-error {
    background-color: #ef4444;
}

/* Hover Effects */
button:hover {
    transform: translateY(-1px);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Thin scrollbar for scrollable sections */
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Professional Alert Cards */
.professional-alert-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.professional-alert-card:hover {
    transform: translateY(-1px);
}

.professional-alert-card.expanded .supporting-data {
    display: block !important;
}

/* Confidence meter animations */
.confidence-section .bg-green-500,
.confidence-section .bg-yellow-500,
.confidence-section .bg-blue-500,
.confidence-section .bg-gray-400 {
    transition: width 0.8s ease-in-out;
}

/* Stage tag styling */
.header-section span[class*="bg-"] {
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Signal core gradient */
.signal-core {
    background: linear-gradient(135deg, #f0f9ff 0%, #f0fdf4 100%);
}

/* Supporting data grid */
.supporting-data .grid > div {
    padding: 0.5rem;
    background: white;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}

/* ============================================================================
   DARK MODE STYLES - PREMIUM EDITION
   ============================================================================ */

/* Dark mode transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode base styles */
body.dark-mode {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* ===== HEADER & NAVIGATION ===== */
body.dark-mode .border-b.border-gray-200 {
    border-color: #334155 !important;
    background-color: #1e293b !important;
}

body.dark-mode header,
body.dark-mode nav {
    background-color: #1e293b !important;
}

/* ===== BACKGROUND COLORS ===== */
body.dark-mode .bg-gray-50 {
    background-color: #1e293b !important;
}

body.dark-mode .bg-white {
    background-color: #1e293b !important;
}

body.dark-mode .bg-gray-100 {
    background-color: #334155 !important;
}

/* ===== TEXT COLORS - PREMIUM VISIBILITY ===== */
body.dark-mode,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode label,
body.dark-mode li {
    color: #e2e8f0;
}

body.dark-mode .text-black {
    color: #f1f5f9 !important;
}

body.dark-mode .text-gray-400 {
    color: #94a3b8 !important;
}

body.dark-mode .text-gray-500 {
    color: #94a3b8 !important;
}

body.dark-mode .text-gray-600 {
    color: #cbd5e1 !important;
}

body.dark-mode .text-gray-700 {
    color: #e2e8f0 !important;
}

body.dark-mode .text-gray-800 {
    color: #f1f5f9 !important;
}

body.dark-mode .text-gray-900 {
    color: #f8fafc !important;
}

/* ===== HEADINGS - BRIGHT & CLEAR ===== */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f8fafc !important;
}

body.dark-mode .font-bold,
body.dark-mode .font-semibold {
    color: #f1f5f9 !important;
}

/* ===== MATCH INFO - ALERT CARDS ===== */
body.dark-mode .match-info {
    color: #f8fafc !important;
}

body.dark-mode .match-details {
    color: #94a3b8 !important;
}

body.dark-mode .confidence-text {
    color: #94a3b8 !important;
}

/* ===== STAT CARDS - PREMIUM GRADIENTS ===== */
body.dark-mode .bg-green-50 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

body.dark-mode .bg-blue-50 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .bg-purple-50 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

body.dark-mode .bg-yellow-50 {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

body.dark-mode .bg-indigo-50 {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.1) 100%) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

body.dark-mode .bg-teal-50 {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(13, 148, 136, 0.1) 100%) !important;
    border-color: rgba(20, 184, 166, 0.4) !important;
}

body.dark-mode .bg-amber-50 {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

body.dark-mode .bg-rose-50 {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(225, 29, 72, 0.1) 100%) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
}

body.dark-mode .bg-emerald-50 {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

body.dark-mode .bg-cyan-50 {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.1) 100%) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
}

body.dark-mode .bg-orange-50 {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.1) 100%) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

/* ===== COLORED TEXT IN STAT CARDS ===== */
body.dark-mode .text-green-600,
body.dark-mode .text-green-700 {
    color: #4ade80 !important;
}

body.dark-mode .text-blue-600,
body.dark-mode .text-blue-700 {
    color: #60a5fa !important;
}

body.dark-mode .text-purple-600,
body.dark-mode .text-purple-700 {
    color: #a78bfa !important;
}

body.dark-mode .text-yellow-600,
body.dark-mode .text-yellow-700 {
    color: #fbbf24 !important;
}

body.dark-mode .text-indigo-600,
body.dark-mode .text-indigo-700 {
    color: #818cf8 !important;
}

body.dark-mode .text-teal-600,
body.dark-mode .text-teal-700 {
    color: #2dd4bf !important;
}

body.dark-mode .text-amber-600,
body.dark-mode .text-amber-700 {
    color: #fbbf24 !important;
}

body.dark-mode .text-rose-600,
body.dark-mode .text-rose-700 {
    color: #fb7185 !important;
}

body.dark-mode .text-emerald-600,
body.dark-mode .text-emerald-700 {
    color: #34d399 !important;
}

body.dark-mode .text-cyan-600,
body.dark-mode .text-cyan-700 {
    color: #22d3ee !important;
}

body.dark-mode .text-orange-600,
body.dark-mode .text-orange-700 {
    color: #fb923c !important;
}

/* ===== BORDERS ===== */
body.dark-mode .border-gray-100 {
    border-color: #334155 !important;
}

body.dark-mode .border-gray-200 {
    border-color: #334155 !important;
}

body.dark-mode .border-gray-300 {
    border-color: #475569 !important;
}

body.dark-mode .divide-gray-200 > * + * {
    border-color: #334155 !important;
}

/* ===== ALERT CARDS - PREMIUM DESIGN ===== */
body.dark-mode .alert-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .alert-card:hover {
    border-color: #475569 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .professional-alert-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ===== ALERT BADGES ===== */
body.dark-mode .alert-badge.sharp-money {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

body.dark-mode .alert-badge.casual-money {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* ===== SIGNAL CORE - INTELLIGENCE VIEW ===== */
body.dark-mode .signal-core {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
}

body.dark-mode .supporting-data .grid > div {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* ===== FILTER BUTTONS ===== */
body.dark-mode .filter-btn {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .filter-btn:hover {
    background-color: #475569 !important;
}

body.dark-mode .filter-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}

/* ===== INPUTS & SELECTS ===== */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.dark-mode input::placeholder,
body.dark-mode select::placeholder,
body.dark-mode textarea::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* ===== MODALS & POPUPS - INTELLIGENCE VIEW ===== */
body.dark-mode .bg-white.rounded-2xl,
body.dark-mode .bg-white.rounded-xl,
body.dark-mode .bg-white.rounded-lg {
    background-color: #1e293b !important;
}

body.dark-mode [class*="modal"],
body.dark-mode [id*="modal"],
body.dark-mode [id*="Modal"] {
    background-color: #1e293b !important;
}

body.dark-mode .fixed.inset-0 > div {
    background-color: #1e293b !important;
}

/* ===== PREMIUM FILTER SECTION - DARK MODE ===== */
body.dark-mode .bg-gradient-to-br.from-slate-50,
body.dark-mode [class*="from-slate-50"] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
}

body.dark-mode .bg-gradient-to-br.from-blue-50,
body.dark-mode [class*="from-blue-50"][class*="to-indigo-50"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

body.dark-mode .bg-gradient-to-br.from-amber-50,
body.dark-mode [class*="from-amber-50"][class*="to-orange-50"] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* Filter header labels - make them bright white */
body.dark-mode .text-sm.font-semibold.text-gray-700 {
    color: #f1f5f9 !important;
}

/* Filter section labels */
body.dark-mode .text-xs.font-semibold.text-gray-500 {
    color: #94a3b8 !important;
}

/* Filter info text */
body.dark-mode .text-xs.text-gray-600 {
    color: #cbd5e1 !important;
}

/* Active filters summary */
body.dark-mode .bg-gradient-to-r.from-blue-50 {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* League dropdown specific */
body.dark-mode .league-dropdown-content {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .league-category-header {
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

body.dark-mode .league-option {
    color: #e2e8f0 !important;
}

body.dark-mode .league-option:hover {
    background-color: #334155 !important;
}

body.dark-mode .league-option.selected {
    background-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

/* ===== TABLES ===== */
body.dark-mode table {
    background-color: #1e293b !important;
}

body.dark-mode th {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

body.dark-mode td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-mode tbody tr {
    background-color: #1e293b !important;
}

body.dark-mode tbody tr:hover {
    background-color: #334155 !important;
}

body.dark-mode tbody tr:nth-child(even) {
    background-color: rgba(51, 65, 85, 0.5) !important;
}

/* ===== CONFIDENCE BAR ===== */
body.dark-mode .confidence-bar {
    background-color: #334155 !important;
}

/* ===== BUTTONS ===== */
body.dark-mode button:not(.filter-btn):not(#themeToggle) {
    color: #e2e8f0;
}

body.dark-mode .bg-black {
    background-color: #475569 !important;
}

body.dark-mode .hover\:bg-gray-800:hover {
    background-color: #334155 !important;
}

/* ===== SCROLLBAR ===== */
body.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Dark mode thin scrollbar */
body.dark-mode .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #475569;
}

body.dark-mode .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ===== PERFORMANCE ANALYTICS ===== */
body.dark-mode .bg-gradient-to-br {
    opacity: 0.95;
}

body.dark-mode [class*="bg-gradient"] {
    filter: brightness(0.9);
}

/* ===== PILLS & BADGES ===== */
body.dark-mode .rounded-full {
    color: inherit;
}

body.dark-mode .bg-gray-200 {
    background-color: #475569 !important;
}

/* ===== LINKS ===== */
body.dark-mode a {
    color: #818cf8;
}

body.dark-mode a:hover {
    color: #a5b4fc;
}

/* ===== SHADOWS ===== */
body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ===== BACKDROP FOR MODALS ===== */
body.dark-mode .bg-black.bg-opacity-50,
body.dark-mode .bg-gray-900.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ===== RING/FOCUS STYLES ===== */
body.dark-mode .ring-1 {
    --tw-ring-color: #475569;
}

body.dark-mode .focus\:ring-2:focus {
    --tw-ring-color: rgba(99, 102, 241, 0.5);
}

/* ===== LOADER/SPINNER ===== */
body.dark-mode .animate-spin {
    color: #818cf8;
}

/* ===== ERROR STATES ===== */
body.dark-mode .error-message {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

/* ===== THEME TOGGLE BUTTON ===== */
#themeToggle {
    padding: 8px;
    border-radius: 8px;
    background-color: #f3f4f6;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#themeToggle:hover {
    background-color: #e5e7eb;
    transform: scale(1.05);
}

body.dark-mode #themeToggle {
    background-color: #334155;
    color: #fbbf24;
}

body.dark-mode #themeToggle:hover {
    background-color: #475569;
}

/* ===== CHART STYLING ===== */
body.dark-mode canvas {
    filter: brightness(0.95);
}

/* ===== SPECIFIC COMPONENT FIXES ===== */

/* Stats panel numbers */
body.dark-mode .text-2xl,
body.dark-mode .text-3xl,
body.dark-mode .text-4xl {
    color: #f8fafc !important;
}

/* Small text in cards */
body.dark-mode .text-xs,
body.dark-mode .text-sm {
    color: #cbd5e1;
}

/* Red/green text for win/loss */
body.dark-mode .text-red-500,
body.dark-mode .text-red-600 {
    color: #f87171 !important;
}

body.dark-mode .text-green-500,
body.dark-mode .text-green-600 {
    color: #4ade80 !important;
}

/* Odds movement arrows */
body.dark-mode [class*="text-emerald"],
body.dark-mode [class*="text-green"] {
    color: #4ade80 !important;
}

body.dark-mode [class*="text-rose"],
body.dark-mode [class*="text-red"] {
    color: #f87171 !important;
}

/* ===== INTELLIGENCE MODAL - PREMIUM DARK MODE ===== */
body.dark-mode #intelligenceModal .bg-white {
    background-color: #1e293b !important;
}

body.dark-mode #intelligenceModal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode #intelligenceModal h3,
body.dark-mode #intelligenceModal h4,
body.dark-mode #intelligenceModal h5 {
    color: #f8fafc !important;
}

body.dark-mode #intelligenceModal .text-gray-900,
body.dark-mode #intelligenceModal .text-gray-800,
body.dark-mode #intelligenceModal .text-gray-700 {
    color: #e2e8f0 !important;
}

body.dark-mode #intelligenceModal .text-gray-600,
body.dark-mode #intelligenceModal .text-gray-500,
body.dark-mode #intelligenceModal .text-gray-400 {
    color: #94a3b8 !important;
}

body.dark-mode #intelligenceModal .border-gray-200,
body.dark-mode #intelligenceModal .border-gray-100 {
    border-color: #334155 !important;
}

body.dark-mode #intelligenceContent {
    color: #e2e8f0 !important;
}

body.dark-mode #intelligenceContent p,
body.dark-mode #intelligenceContent span,
body.dark-mode #intelligenceContent div {
    color: #e2e8f0;
}

body.dark-mode #intelligenceContent .bg-gray-50,
body.dark-mode #intelligenceContent .bg-gray-100 {
    background-color: #334155 !important;
}

/* ===== ALERT CARDS - FULL TEXT VISIBILITY ===== */
body.dark-mode .professional-alert-card p,
body.dark-mode .professional-alert-card span,
body.dark-mode .professional-alert-card div {
    color: #e2e8f0;
}

body.dark-mode .professional-alert-card .text-gray-900,
body.dark-mode .professional-alert-card .text-gray-800 {
    color: #f1f5f9 !important;
}

body.dark-mode .professional-alert-card .text-gray-700,
body.dark-mode .professional-alert-card .text-gray-600 {
    color: #cbd5e1 !important;
}

body.dark-mode .professional-alert-card .text-gray-500,
body.dark-mode .professional-alert-card .text-gray-400 {
    color: #94a3b8 !important;
}

body.dark-mode .professional-alert-card .bg-gray-50 {
    background-color: #334155 !important;
}

body.dark-mode .professional-alert-card .bg-opacity-50 {
    background-color: rgba(51, 65, 85, 0.6) !important;
}

/* ===== DASHBOARD STAT CARDS TEXT ===== */
body.dark-mode .bg-green-50 p,
body.dark-mode .bg-green-50 span,
body.dark-mode .bg-blue-50 p,
body.dark-mode .bg-blue-50 span,
body.dark-mode .bg-purple-50 p,
body.dark-mode .bg-purple-50 span,
body.dark-mode .bg-yellow-50 p,
body.dark-mode .bg-yellow-50 span,
body.dark-mode .bg-indigo-50 p,
body.dark-mode .bg-indigo-50 span,
body.dark-mode .bg-teal-50 p,
body.dark-mode .bg-teal-50 span,
body.dark-mode .bg-amber-50 p,
body.dark-mode .bg-amber-50 span,
body.dark-mode .bg-rose-50 p,
body.dark-mode .bg-rose-50 span,
body.dark-mode .bg-emerald-50 p,
body.dark-mode .bg-emerald-50 span {
    color: #e2e8f0;
}

/* ===== FILTER SECTION TEXT ===== */
body.dark-mode .space-y-4 label,
body.dark-mode .space-y-4 span {
    color: #e2e8f0 !important;
}

/* ===== CLOSING MOVEMENT ALERTS SECTION ===== */
body.dark-mode #alertsContainer p,
body.dark-mode #alertsContainer span,
body.dark-mode #alertsContainer div {
    color: #e2e8f0;
}

body.dark-mode #alertsContainer h2,
body.dark-mode #alertsContainer h3 {
    color: #f8fafc !important;
}

/* ===== ML PERFORMANCE ANALYTICS MAIN CONTAINER ===== */
body.dark-mode .from-indigo-50.via-purple-50.to-pink-50,
body.dark-mode .bg-gradient-to-br.from-indigo-50 {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-color: #475569 !important;
}

/* ===== ML PERFORMANCE ANALYTICS PANEL ===== */
body.dark-mode #performanceContent {
    background-color: #1e293b !important;
}

body.dark-mode #performanceContent h3,
body.dark-mode #performanceContent h4 {
    color: #f8fafc !important;
}

body.dark-mode #performanceContent p,
body.dark-mode #performanceContent span,
body.dark-mode #performanceContent div {
    color: #e2e8f0 !important;
}

body.dark-mode #performanceContent .bg-gray-50,
body.dark-mode #performanceContent .bg-gray-100 {
    background-color: #334155 !important;
}

body.dark-mode #performanceContent .border-gray-200 {
    border-color: #475569 !important;
}

/* ===== ML PERFORMANCE TAB BUTTONS ===== */
body.dark-mode #leaguePerformanceTab,
body.dark-mode #marketPerformanceTab,
body.dark-mode #topPerformersTab,
body.dark-mode #oddsRangesTab {
    color: #94a3b8 !important;
}

body.dark-mode #leaguePerformanceTab.border-indigo-600,
body.dark-mode #marketPerformanceTab.border-indigo-600,
body.dark-mode #topPerformersTab.border-indigo-600,
body.dark-mode #oddsRangesTab.border-indigo-600 {
    color: #a5b4fc !important;
    border-color: #818cf8 !important;
}

body.dark-mode #leaguePerformanceTab:hover,
body.dark-mode #marketPerformanceTab:hover,
body.dark-mode #topPerformersTab:hover,
body.dark-mode #oddsRangesTab:hover {
    color: #c7d2fe !important;
}

/* ===== PERFORMANCE CONTENT TAB BORDER ===== */
body.dark-mode #performanceContent .border-b.border-gray-200 {
    border-color: #475569 !important;
}

/* ===== PERFORMANCE CONTENT TEXT COLORS ===== */
body.dark-mode #performanceContent .text-gray-500,
body.dark-mode #performanceContent .text-gray-600,
body.dark-mode #leaguePerformanceContent .text-gray-500,
body.dark-mode #marketPerformanceContent .text-gray-500,
body.dark-mode #topPerformersContent .text-gray-500,
body.dark-mode #oddsRangesContent .text-gray-500 {
    color: #94a3b8 !important;
}

body.dark-mode #performanceContent .text-gray-400,
body.dark-mode #leaguePerformanceContent .text-gray-400,
body.dark-mode #marketPerformanceContent .text-gray-400,
body.dark-mode #topPerformersContent .text-gray-400,
body.dark-mode #oddsRangesContent .text-gray-400 {
    color: #64748b !important;
}

/* ===== TOP PERFORMERS / BEST ODDS TEXT ===== */
body.dark-mode #topByProfit .text-gray-500,
body.dark-mode #topByAccuracy .text-gray-500,
body.dark-mode #aiInsightsSummary .text-gray-500,
body.dark-mode #bestOddsRanges .text-gray-500,
body.dark-mode #oddsRecommendation .text-gray-500 {
    color: #94a3b8 !important;
}

/* ===== TAB BUTTONS IN PERFORMANCE PANEL ===== */
body.dark-mode .tab-btn {
    background-color: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

body.dark-mode .tab-btn.active,
body.dark-mode .tab-btn:hover {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* ===== BETTING RECOMMENDATION BOX ===== */
body.dark-mode .betting-recommendation {
    background-color: #334155 !important;
}

body.dark-mode .betting-recommendation p,
body.dark-mode .betting-recommendation span {
    color: #e2e8f0 !important;
}

/* ===== MARKET BADGES ===== */
body.dark-mode .market-badge {
    color: inherit;
}

/* ===== SUPPORTING DATA GRID ===== */
body.dark-mode .supporting-data p,
body.dark-mode .supporting-data span,
body.dark-mode .supporting-data div {
    color: #e2e8f0 !important;
}

/* ===== ODDS PANELS ===== */
body.dark-mode .odds-panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .odds-panel p,
body.dark-mode .odds-panel span {
    color: #e2e8f0 !important;
}

/* ===== LEAGUE FILTER BUTTONS ===== */
body.dark-mode .league-filter-btn {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-mode .league-filter-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

/* ===== ACCURACY BARS ===== */
body.dark-mode .accuracy-bar-bg {
    background-color: #334155 !important;
}

/* ===== ICON COLORS IN DARK MODE ===== */
body.dark-mode svg {
    color: inherit;
}

body.dark-mode .text-gray-400 svg,
body.dark-mode .text-gray-500 svg {
    color: #94a3b8 !important;
}

/* ===== CONFIDENCE BADGES - STRONG/MODERATE ===== */
body.dark-mode .bg-green-100 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.2) 100%) !important;
}

body.dark-mode .bg-yellow-100 {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.25) 0%, rgba(234, 179, 8, 0.2) 100%) !important;
}

body.dark-mode .bg-blue-100 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
}

body.dark-mode .bg-red-100 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%) !important;
}

body.dark-mode .bg-purple-100 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(147, 51, 234, 0.2) 100%) !important;
}

body.dark-mode .bg-orange-100 {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.25) 0%, rgba(234, 88, 12, 0.2) 100%) !important;
}

body.dark-mode .bg-teal-100 {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.25) 0%, rgba(20, 184, 166, 0.2) 100%) !important;
}

body.dark-mode .bg-indigo-100 {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.25) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
}

body.dark-mode .bg-emerald-100 {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
}

/* ===== TEXT COLORS FOR BADGES ===== */
body.dark-mode .text-green-800 {
    color: #4ade80 !important;
}

body.dark-mode .text-yellow-800 {
    color: #fde047 !important;
}

body.dark-mode .text-blue-800 {
    color: #60a5fa !important;
}

body.dark-mode .text-red-800 {
    color: #f87171 !important;
}

body.dark-mode .text-red-900 {
    color: #fca5a5 !important;
}

body.dark-mode .text-purple-800 {
    color: #c4b5fd !important;
}

body.dark-mode .text-orange-800 {
    color: #fdba74 !important;
}

body.dark-mode .text-teal-800 {
    color: #5eead4 !important;
}

body.dark-mode .text-indigo-800 {
    color: #a5b4fc !important;
}

body.dark-mode .text-emerald-800 {
    color: #6ee7b7 !important;
}

/* ===== ODDS DISPLAY - ALERT CARDS ===== */
body.dark-mode .text-lg.font-bold,
body.dark-mode .text-xl.font-bold {
    color: #f8fafc !important;
}

body.dark-mode [class*="odds"],
body.dark-mode .odds-value {
    color: #f1f5f9 !important;
}

/* Odds in alert cards - specific targeting */
body.dark-mode .professional-alert-card .text-lg,
body.dark-mode .professional-alert-card .text-xl,
body.dark-mode .professional-alert-card .font-mono {
    color: #f1f5f9 !important;
}

/* Bookmaker odds sections */
body.dark-mode .professional-alert-card .grid span,
body.dark-mode .professional-alert-card .flex span {
    color: #e2e8f0;
}

/* ===== FILTER SECTION - FULL VISIBILITY ===== */
body.dark-mode #filterSection,
body.dark-mode [id*="filter"],
body.dark-mode [class*="filter-section"] {
    background-color: #1e293b !important;
}

body.dark-mode #filterSection label,
body.dark-mode #filterSection span,
body.dark-mode #filterSection p,
body.dark-mode #filterSection div {
    color: #e2e8f0 !important;
}

body.dark-mode #filterSection h3,
body.dark-mode #filterSection h4 {
    color: #f8fafc !important;
}

/* Time Period & Market Type Labels */
body.dark-mode .flex.items-center.gap-2 span,
body.dark-mode .flex.items-center.space-x-2 span {
    color: #e2e8f0 !important;
}

/* Date filter buttons */
body.dark-mode button[class*="filter"],
body.dark-mode .date-filter-btn {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-mode button[class*="filter"].active,
body.dark-mode button[class*="filter"]:hover {
    background-color: #475569 !important;
}

/* Market type filter buttons */
body.dark-mode .market-filter-btn {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-mode .market-filter-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

/* ===== INTELLIGENCE MODAL - ODDS & CONFIDENCE ===== */
body.dark-mode #intelligenceContent .text-lg,
body.dark-mode #intelligenceContent .text-xl,
body.dark-mode #intelligenceContent .font-bold {
    color: #f1f5f9 !important;
}

body.dark-mode #intelligenceContent .bg-green-100,
body.dark-mode #intelligenceContent .bg-yellow-100,
body.dark-mode #intelligenceContent .bg-blue-100 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode #intelligenceContent .text-green-800,
body.dark-mode #intelligenceContent .text-yellow-800,
body.dark-mode #intelligenceContent .text-blue-800 {
    font-weight: 600;
}

/* ===== BORDER COLORS FOR BADGES ===== */
body.dark-mode .border-green-200 {
    border-color: rgba(74, 222, 128, 0.4) !important;
}

body.dark-mode .border-yellow-200 {
    border-color: rgba(253, 224, 71, 0.4) !important;
}

body.dark-mode .border-blue-200 {
    border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark-mode .border-red-200,
body.dark-mode .border-red-300 {
    border-color: rgba(248, 113, 113, 0.4) !important;
}

/* ===== GRADIENT BADGES FROM/TO ===== */
body.dark-mode .from-green-50,
body.dark-mode .to-emerald-50 {
    --tw-gradient-from: rgba(34, 197, 94, 0.15) !important;
    --tw-gradient-to: rgba(16, 185, 129, 0.15) !important;
}

body.dark-mode .from-yellow-50,
body.dark-mode .to-amber-50 {
    --tw-gradient-from: rgba(250, 204, 21, 0.15) !important;
    --tw-gradient-to: rgba(245, 158, 11, 0.15) !important;
}

body.dark-mode .from-blue-50,
body.dark-mode .to-indigo-50 {
    --tw-gradient-from: rgba(59, 130, 246, 0.15) !important;
    --tw-gradient-to: rgba(99, 102, 241, 0.15) !important;
}

/* ===== RESULT BADGES - WIN/LOSS ===== */
body.dark-mode .bg-green-500 {
    background-color: #22c55e !important;
}

body.dark-mode .bg-red-500 {
    background-color: #ef4444 !important;
}

body.dark-mode .bg-yellow-500 {
    background-color: #eab308 !important;
}

/* ===== CLOSING SIGNAL BADGE ===== */
body.dark-mode span[class*="Closing"] {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

/* ===== STAGE BADGES (OPENING, EARLY, etc.) ===== */
body.dark-mode .bg-gray-100.text-gray-700,
body.dark-mode .bg-gray-100.text-gray-800 {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* ===== KELLY STAKE BADGE ===== */
body.dark-mode [class*="kelly"],
body.dark-mode .stake-badge {
    color: #fbbf24 !important;
}

/* ===== ALL REMAINING TEXT ELEMENTS ===== */
body.dark-mode .text-base {
    color: #e2e8f0 !important;
}

body.dark-mode strong {
    color: #f1f5f9 !important;
}

body.dark-mode em {
    color: #cbd5e1 !important;
}

/* ===== MATCH RESULT SECTION ===== */
body.dark-mode .match-result,
body.dark-mode [class*="result"] {
    color: #e2e8f0;
}

body.dark-mode .match-result .text-green-800,
body.dark-mode .match-result .text-red-800 {
    font-weight: 700;
}

/* ===== FIX FOR INLINE STYLES ===== */
body.dark-mode [style*="color: #"] {
    color: inherit !important;
}

/* ===== PREMIUM GLOW EFFECTS FOR ACTIVE ELEMENTS ===== */
body.dark-mode .filter-btn.active {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
}

body.dark-mode .market-filter-btn.active {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

body.dark-mode .league-filter-btn.active {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
}

/* ============================================================================
   🧠 AI INSIGHT PILLS - Premium Styling for Light & Dark Mode
   ============================================================================ */

/* Base insight pill styling */
.insight-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.insight-pill .insight-icon {
    font-size: 0.75rem;
}

.insight-pill .insight-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Light mode styles */
.insight-pill.insight-positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.insight-pill.insight-negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.insight-pill.insight-neutral {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.1) 100%);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.insight-pill.insight-loading {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(100, 116, 139, 0.1) 100%);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Shimmer animation for loading state */
.shimmer-text {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark mode insight pills */
body.dark-mode .insight-pill.insight-positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.4);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

body.dark-mode .insight-pill.insight-negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.4);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

body.dark-mode .insight-pill.insight-neutral {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(79, 70, 229, 0.15) 100%);
    color: #a5b4fc;
    border: 1px solid rgba(165, 180, 252, 0.4);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

body.dark-mode .insight-pill.insight-loading {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.4) 0%, rgba(51, 65, 85, 0.3) 100%);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

body.dark-mode .shimmer-text {
    background: linear-gradient(90deg, #475569 25%, #64748b 50%, #475569 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Insight pill placeholder styling */
.insight-pill-placeholder {
    min-height: 1.5rem;
}

.insight-pill-placeholder:empty {
    display: none;
}

/* ============================================================================
   TEAM NAMES AUTO-SCALING
   ============================================================================ */

.team-names-auto {
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
}

/* Auto-scale based on container width using container queries or JS fallback */
@supports (container-type: inline-size) {
    .professional-alert-card {
        container-type: inline-size;
    }
    
    .team-names-auto {
        font-size: clamp(10px, 4cqi, 14px);
    }
}

/* ============================================================================
   ALERT CARDS - DARK MODE OVERRIDES
   ============================================================================ */

/* Card Base - Dark Mode */
body.dark-mode .professional-alert-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .professional-alert-card:hover {
    border-color: #475569 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ML Reasoning Section - Dark Mode */
body.dark-mode .ml-reasoning-section > div {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.15) 100%) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

body.dark-mode .ml-reasoning-section svg {
    color: #a78bfa !important;
}

body.dark-mode .ml-reasoning-section p {
    color: #e9d5ff !important;
}

/* Header Section - Dark Mode */
body.dark-mode .professional-alert-card .border-gray-100 {
    border-color: #334155 !important;
}

body.dark-mode .professional-alert-card .text-gray-900 {
    color: #f8fafc !important;
}

body.dark-mode .professional-alert-card .text-gray-600 {
    color: #94a3b8 !important;
}

body.dark-mode .professional-alert-card .text-gray-500 {
    color: #94a3b8 !important;
}

body.dark-mode .professional-alert-card .text-gray-400 {
    color: #64748b !important;
}

body.dark-mode .professional-alert-card .text-gray-300 {
    color: #475569 !important;
}

body.dark-mode .professional-alert-card .text-gray-700 {
    color: #cbd5e1 !important;
}

/* Signal Core Section - Dark Mode */
body.dark-mode .professional-alert-card .bg-gradient-to-r.from-blue-50.to-green-50 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
}

/* Multi-market predictions - Dark Mode */
body.dark-mode .professional-alert-card .bg-white\/80 {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: #334155 !important;
}

body.dark-mode .professional-alert-card .bg-white {
    background: #1e293b !important;
}

/* Confidence bar background - Dark Mode */
body.dark-mode .professional-alert-card .bg-gray-200 {
    background: #334155 !important;
}

/* Edge Values - Dark Mode */
body.dark-mode .professional-alert-card .text-green-600 {
    color: #4ade80 !important;
}

body.dark-mode .professional-alert-card .text-red-600 {
    color: #f87171 !important;
}

body.dark-mode .professional-alert-card .text-blue-600 {
    color: #60a5fa !important;
}

/* Supporting Data Section - Dark Mode */
body.dark-mode .professional-alert-card .supporting-data {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: #334155 !important;
}

body.dark-mode .professional-alert-card .bg-gray-50 {
    background: rgba(15, 23, 42, 0.8) !important;
}

/* Violet text colors for ML Reasoning - Dark Mode */
body.dark-mode .professional-alert-card .text-violet-600 {
    color: #a78bfa !important;
}

body.dark-mode .professional-alert-card .text-violet-800 {
    color: #e9d5ff !important;
}

/* Gradient backgrounds for ML Reasoning - Dark Mode */
body.dark-mode .professional-alert-card .from-violet-50 {
    --tw-gradient-from: rgba(139, 92, 246, 0.2) !important;
}

body.dark-mode .professional-alert-card .to-purple-50 {
    --tw-gradient-to: rgba(124, 58, 237, 0.15) !important;
}

body.dark-mode .professional-alert-card .border-violet-200 {
    border-color: rgba(139, 92, 246, 0.4) !important;
}

/* ============================================================================
   ML Performance Analytics Cards - Light Mode
   ============================================================================ */

/* League Performance Cards */
.league-perf-card {
    background: white;
    border-color: #e5e7eb;
}
.league-card-title {
    color: #111827;
}
.league-card-subtitle {
    color: #4b5563;
}
.league-progress-bg {
    background: #e5e7eb;
}

/* Market Performance Cards - 1X2 */
.market-card-1x2 {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #c7d2fe;
}

/* Market Performance Cards - O/U 2.5 */
.market-card-ou {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border-color: #99f6e4;
}

.market-card-title {
    color: #111827;
}
.market-card-subtitle {
    color: #4b5563;
}
.market-progress-bg {
    background: #d1d5db;
}

/* Performance Card Items (Top Performers, Best Odds) */
.perf-card-item {
    background: white;
}
.perf-card-text {
    color: #1f2937;
}
.perf-card-subtext {
    color: #6b7280;
}
.perf-card-muted {
    color: #9ca3af;
}

/* Best Odds Top Item (Gold highlight) */
.odds-range-top {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

/* ============================================================================
   ML Performance Analytics Cards - Dark Mode
   ============================================================================ */

/* League Performance Cards - Dark Mode */
body.dark-mode .league-perf-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-color: #475569;
}
body.dark-mode .league-card-title {
    color: #f1f5f9;
}
body.dark-mode .league-card-subtitle {
    color: #94a3b8;
}
body.dark-mode .league-progress-bg {
    background: #334155;
}

/* Market Performance Cards - 1X2 - Dark Mode */
body.dark-mode .market-card-1x2 {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.15) 100%);
    border-color: rgba(129, 140, 248, 0.4);
}

/* Market Performance Cards - O/U 2.5 - Dark Mode */
body.dark-mode .market-card-ou {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%);
    border-color: rgba(45, 212, 191, 0.4);
}

body.dark-mode .market-card-title {
    color: #f1f5f9;
}
body.dark-mode .market-card-subtitle {
    color: #94a3b8;
}
body.dark-mode .market-progress-bg {
    background: #475569;
}

/* Performance Card Items - Dark Mode */
body.dark-mode .perf-card-item {
    background: rgba(30, 41, 59, 0.8);
}
body.dark-mode .perf-card-text {
    color: #e2e8f0;
}
body.dark-mode .perf-card-subtext {
    color: #94a3b8;
}
body.dark-mode .perf-card-muted {
    color: #64748b;
}

/* Best Odds Top Item - Dark Mode */
body.dark-mode .odds-range-top {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Performance Section Borders - Dark Mode */
body.dark-mode #topPerformersContent .border-green-200,
body.dark-mode #topPerformersContent .border-green-100 {
    border-color: rgba(74, 222, 128, 0.3) !important;
}
body.dark-mode #topPerformersContent .border-blue-200,
body.dark-mode #topPerformersContent .border-blue-100 {
    border-color: rgba(96, 165, 250, 0.3) !important;
}
body.dark-mode #topPerformersContent .border-purple-200 {
    border-color: rgba(167, 139, 250, 0.3) !important;
}

/* ============================================================================
   Top Performers / Best Odds Cards - Light Mode
   ============================================================================ */

/* Top by Profit Card */
.perf-profit-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}
.perf-profit-title {
    color: #166534;
}

/* Top by Accuracy Card */
.perf-accuracy-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}
.perf-accuracy-title {
    color: #1e40af;
}

/* AI Insights Card */
.perf-insights-card {
    background: linear-gradient(135deg, #faf5ff 0%, #f5d0fe 100%);
    border-color: #d8b4fe;
}
.perf-insights-title {
    color: #7e22ce;
}

/* Best Odds Card */
.perf-odds-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}
.perf-odds-title {
    color: #92400e;
}
.perf-odds-subtitle {
    color: #d97706;
}

/* Recommendation Card */
.perf-recommendation-card {
    background: white;
    border-color: #e5e7eb;
}
.perf-recommendation-title {
    color: #111827;
}
.perf-recommendation-text {
    color: #374151;
}

/* ============================================================================
   Top Performers / Best Odds Cards - Dark Mode
   ============================================================================ */

/* Top by Profit Card - Dark Mode */
body.dark-mode .perf-profit-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
    border-color: rgba(74, 222, 128, 0.4);
}
body.dark-mode .perf-profit-title {
    color: #86efac;
}

/* Top by Accuracy Card - Dark Mode */
body.dark-mode .perf-accuracy-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: rgba(96, 165, 250, 0.4);
}
body.dark-mode .perf-accuracy-title {
    color: #93c5fd;
}

/* AI Insights Card - Dark Mode */
body.dark-mode .perf-insights-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(192, 132, 252, 0.4);
}
body.dark-mode .perf-insights-title {
    color: #d8b4fe;
}

/* Best Odds Card - Dark Mode */
body.dark-mode .perf-odds-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-color: rgba(251, 191, 36, 0.4);
}
body.dark-mode .perf-odds-title {
    color: #fcd34d;
}
body.dark-mode .perf-odds-subtitle {
    color: #fbbf24;
}

/* Recommendation Card - Dark Mode */
body.dark-mode .perf-recommendation-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: #475569;
}
body.dark-mode .perf-recommendation-title {
    color: #f1f5f9;
}
body.dark-mode .perf-recommendation-text {
    color: #cbd5e1;
}

/* ============================================================================
   League Standings Page - Dark Mode
   ============================================================================ */

body.dark-mode .standings-row {
    background: #1e293b;
}

body.dark-mode .standings-row:hover {
    background: #334155 !important;
}

body.dark-mode .standings-row td {
    color: #e2e8f0;
}

body.dark-mode .standings-row .text-gray-900 {
    color: #f1f5f9 !important;
}

body.dark-mode .standings-row .text-gray-600 {
    color: #94a3b8 !important;
}

body.dark-mode thead.bg-gray-50 {
    background: #334155 !important;
}

body.dark-mode thead th {
    color: #94a3b8 !important;
}

body.dark-mode tbody.divide-gray-200 {
    border-color: #475569;
}

body.dark-mode tbody tr {
    border-color: #475569;
}

/* ============================================================================
   Admin Modal & User Dropdown - Dark Mode
   ============================================================================ */

body.dark-mode #userDropdownMenu {
    background: #1e293b;
    border-color: #475569;
}

body.dark-mode #userDropdownMenu .border-b {
    border-color: #475569;
}

body.dark-mode #adminModal > div > div {
    background: #0f172a;
}

body.dark-mode #adminModal .bg-gray-50 {
    background: #1e293b !important;
}

body.dark-mode #adminModal table {
    background: #0f172a;
}

body.dark-mode #adminModal thead {
    background: #1e293b !important;
}

body.dark-mode #adminModal tbody tr:hover {
    background: #1e293b !important;
}

body.dark-mode #adminModal .border-gray-200 {
    border-color: #475569;
}

body.dark-mode #adminUserModal > div {
    background: #1e293b;
}

body.dark-mode #adminUserModal input,
body.dark-mode #adminUserModal select,
body.dark-mode #adminModal input,
body.dark-mode #adminModal select {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}