/**
 * Artemis HTML5 Ad Manager - Enterprise Blue Color System
 * Implementation Date: October 26, 2025
 * Purpose: Transform purple consumer aesthetic to professional B2B blue palette
 * WCAG 2.1 AA Compliant - All colors tested for 4.5:1 contrast minimum
 */

:root {
    /* ===== CLOUDLINE MODERN PALETTE ===== */
    --primary: #9ED9F5;              /* Pale Blue - light, airy, digital */
    --primary-dark: #7AC5E8;         /* Moonlit Blue - darker variant */
    --primary-light: #CBE8F6;        /* Arctic Blue - lighter variant */
    --primary-hover: #7AC5E8;        /* Moonlit Blue for hover states */

    /* ===== ACCENT COLOR (Electric Violet) ===== */
    --accent: #8E7CC3;               /* Electric Violet - futuristic spark */
    --accent-light: #A08DD6;         /* Bright Violet - lighter accent */
    --accent-dark: #7C6AB0;          /* Deeper Violet for emphasis */

    /* ===== STATUS COLORS (WCAG AA Compliant) ===== */
    --success: #059669;              /* Darker green: 4.54:1 contrast on white */
    --success-light: #10B981;        /* Light green for backgrounds */
    --success-bg: #D1FAE5;           /* Very light green for status badges */

    --warning: #D97706;              /* Darker orange: 4.51:1 contrast */
    --warning-light: #F59E0B;        /* Light orange for backgrounds */
    --warning-bg: #FEF3C7;           /* Very light orange for status badges */

    --error: #DC2626;                /* Darker red: 5.52:1 contrast */
    --error-light: #EF4444;          /* Light red for backgrounds */
    --error-bg: #FEE2E2;             /* Very light red for status badges */

    --info: #0284C7;                 /* Info blue: 4.58:1 contrast */
    --info-light: #0EA5E9;           /* Light info blue */
    --info-bg: #E0F2FE;              /* Very light blue for info */

    /* ===== NEUTRAL GRAYS (Enhanced for readability) ===== */
    --gray-50: #F9FAFB;              /* Lightest gray - page backgrounds */
    --gray-100: #F3F4F6;             /* Very light gray - card backgrounds */
    --gray-200: #E5E7EB;             /* Light gray - borders */
    --gray-300: #D1D5DB;             /* Medium-light gray - disabled states */
    --gray-400: #9CA3AF;             /* Medium gray - placeholder text */
    --gray-500: #6B7280;             /* Gray - secondary text (4.54:1 - barely passes) */
    --gray-600: #4B5563;             /* Dark gray - secondary text WCAG AA (7.0:1) ✅ */
    --gray-700: #374151;             /* Darker gray - headings */
    --gray-800: #1F2937;             /* Very dark gray - primary text */
    --gray-900: #111827;             /* Darkest gray - emphasis text */

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #FFFFFF;           /* White - main backgrounds */
    --bg-secondary: #F8FAFC;         /* Very light blue-gray - secondary backgrounds */
    --bg-tertiary: #F1F5F9;          /* Light blue-gray - hover backgrounds */
    --bg-overlay: rgba(15, 23, 42, 0.5);  /* Dark overlay for modals */

    /* ===== TEXT COLORS (WCAG Compliant) ===== */
    --text-primary: #0F172A;         /* Primary text - slate-900 */
    --text-secondary: #4B5563;       /* Secondary text - gray-600 (7.0:1 contrast) */
    --text-tertiary: #6B7280;        /* Tertiary text - gray-500 (4.54:1 contrast) */
    --text-disabled: #9CA3AF;        /* Disabled text - gray-400 */
    --text-inverse: #FFFFFF;         /* White text on dark backgrounds */

    /* ===== BORDER COLORS ===== */
    --border-color: #E2E8F0;         /* Main borders - slate-200 */
    --border-light: #F1F5F9;         /* Light borders */
    --border-focus: #0F6BD6;         /* Focus state borders (primary blue) */

    /* ===== GRADIENTS (Limited use - CTAs only) ===== */
    --gradient-primary: linear-gradient(135deg, #0F6BD6 0%, #0284C7 100%);
    --gradient-accent: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%);

    /* ===== SHADOWS (Enterprise subtle) ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-blue: 0 4px 12px rgba(15, 107, 214, 0.15);  /* Blue shadow for primary buttons */

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"],
.dark-mode {
    /* Cloudline Modern Dark Mode - Night Sky with Aurora */
    --primary: #7AC5E8;              /* Moonlit Blue - night glow */
    --primary-dark: #5BA3C9;         /* Deeper Moonlit Blue */
    --primary-light: #9ED9F5;        /* Pale Blue for highlights */

    /* Backgrounds - Deep Night Sky */
    --bg-primary: #0F1419;           /* Deep Charcoal - foundation */
    --bg-secondary: #1A1F2E;         /* Elevated surfaces - night sky */
    --bg-tertiary: #1E2A3A;          /* Deep Night Blue - midnight layer */

    /* Text */
    --text-primary: #F8FAFC;         /* Slate-50 */
    --text-secondary: #CBD5E1;       /* Slate-300 */
    --text-tertiary: #94A3B8;        /* Slate-400 */

    /* Borders */
    --border-color: #334155;         /* Slate-700 */
    --border-light: #475569;         /* Slate-600 */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-blue: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* ===== ENTERPRISE BLUE BODY BACKGROUND ===== */
body {
    /* Replace purple gradient with neutral professional background */
    background: var(--bg-secondary) !important;
    color: var(--text-primary);
}

[data-theme="dark"] body,
.dark-mode body {
    background: var(--bg-primary) !important;
}

/* ===== PRIMARY BUTTONS (Enterprise Blue) ===== */
.btn-primary,
.upload-browse-btn,
#uploadBtn,
.chat-send-btn {
    background: var(--gradient-primary) !important;
    color: rgb(255, 255, 255) !important; /* Fix P0: Force pure white for readability - Oct 28 2025 */
    border: none;
    box-shadow: var(--shadow-blue);
}

.btn-primary:hover,
.upload-browse-btn:hover,
#uploadBtn:hover,
.chat-send-btn:hover {
    background: linear-gradient(135deg, #0D5AB8 0%, #0369A1 100%) !important;
    color: rgb(255, 255, 255) !important; /* Fix P0: Maintain white on hover */
    box-shadow: 0 8px 16px rgba(15, 107, 214, 0.25);
}

/* ===== HEADER GRADIENT (Subtle blue) ===== */
.header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header,
.dark-mode .header {
    background: rgba(30, 41, 59, 0.98) !important;  /* Changed from slate-900 to slate-800 (#1e293b) - Oct 29 2025 */
    border-bottom: 1px solid rgba(51, 65, 85, 0.8) !important;  /* Stronger border for alignment visibility */
}

/* ===== AD LIBRARY SECTION (Neutral background) ===== */
.ad-library-section {
    background: transparent !important;  /* Remove purple gradient */
}

.ad-grid {
    background: transparent !important;
}

/* ===== CAMPAIGN BANNER (White with blue accent) ===== */
.campaign-banner {
    background: white !important;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.campaign-banner .banner-content {
    color: var(--text-primary);
}

.campaign-banner .banner-content > i {
    color: var(--primary);
}

.campaign-banner .banner-stats {
    color: var(--text-secondary);
}

.banner-close {
    background: var(--gray-100);
    color: var(--gray-700);
}

.banner-close:hover {
    background: var(--gray-200);
}

/* ===== PREVIEW CAROUSEL (White backgrounds) ===== */
.preview-carousel-section {
    background: white;
}

.carousel-ad-header {
    background: var(--primary) !important;  /* Solid blue, no gradient */
    color: white;
}

.carousel-ad-preview {
    background: white;
    border: 1px solid var(--border-color);
}

/* ===== STATUS BADGES (With icons for accessibility) ===== */
.status.ready,
.carousel-ad-status,
.ad-card-status.ready {
    background: var(--success-bg);
    color: var(--success);
}

.status.processing,
.ad-card-status.processing {
    background: var(--warning-bg);
    color: var(--warning);
}

.status.error,
.ad-card-status.error {
    background: var(--error-bg);
    color: var(--error);
}

/* ===== UPLOAD DROPZONE (Enhanced visibility) ===== */
.upload-dropzone {
    border: 3px dashed var(--primary) !important;  /* Bolder, blue border */
    background: linear-gradient(135deg,
        rgba(15, 107, 214, 0.02),
        rgba(59, 130, 246, 0.02)) !important;
    transition: all 0.3s ease;
}

.upload-dropzone.dragover {
    border-color: var(--primary-dark) !important;
    background: linear-gradient(135deg,
        rgba(15, 107, 214, 0.08),
        rgba(59, 130, 246, 0.08)) !important;
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.1);
}

.dropzone-icon {
    color: var(--primary) !important;
    font-size: 4rem !important;  /* Larger icon */
    animation: floatUpload 3s ease-in-out infinite;
}

@keyframes floatUpload {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ===== CARDS (Clean white) ===== */
.glass-card,
.upload-section,
.campaign-section {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .glass-card,
[data-theme="dark"] .upload-section,
.dark-mode .glass-card,
.dark-mode .upload-section {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid var(--border-color);
}

/* ===== AD CARDS ===== */
.ad-card {
    background: white;
    border: 1px solid var(--border-color);
}

.ad-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-blue);
}

.ad-card-preview {
    background: var(--gradient-primary);
}

/* ===== BUTTONS ===== */
.btn {
    font-weight: 500;
    transition: all var(--transition-base);
}

.carousel-btn,
.carousel-ad-btn {
    background: rgba(15, 107, 214, 0.1) !important;
    border: 1px solid rgba(15, 107, 214, 0.2);
    color: var(--primary);
}

.carousel-btn:hover,
.carousel-ad-btn:hover {
    background: rgba(15, 107, 214, 0.2) !important;
    border-color: var(--primary);
}

/* ===== MODALS ===== */
.modal-content {
    background: white;
    border: 1px solid var(--border-color);
}

.modal-header {
    background: white;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* ===== ARTEMIS ASSISTANT WIDGET ===== */
.widget-toggle {
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-blue);
}

.widget-toggle:hover {
    box-shadow: 0 12px 32px rgba(15, 107, 214, 0.35);
}

.widget-header {
    background: var(--gradient-primary) !important;
}

/* ===== SECONDARY TEXT (Better contrast) ===== */
.card-subtitle,
.dropzone-hint,
.meta-value,
.file-size,
.ad-card-description,
.carousel-meta-item,
.text-secondary {
    color: var(--text-secondary) !important;  /* Darker gray for WCAG AA */
}

/* ===== FOCUS INDICATORS (Accessibility) ===== */
*:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== FORM INPUTS ===== */
input:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.1) !important;
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    background: var(--gradient-primary) !important;
}

/* ===== TAGS & FILTERS ===== */
.ad-tag,
.filter-tag {
    background: rgba(15, 107, 214, 0.1);
    color: var(--primary);
    border: 1px solid rgba(15, 107, 214, 0.2);
}

.filter-tag.active {
    background: var(--primary);
    color: white;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    box-shadow: var(--shadow-xl);
}

/* ===== TARGETING MODAL ===== */
.targeting-item:hover {
    background: var(--bg-tertiary);
}

.selected-tag {
    background: rgba(15, 107, 214, 0.1);
    border: 1px solid rgba(15, 107, 214, 0.2);
    color: var(--primary);
}

/* ===== NAVIGATION ===== */
.nav-item.active {
    background: rgba(15, 107, 214, 0.1);
    color: var(--primary);
    border-left: 3px solid var(--primary);
}

.nav-item:hover {
    background: rgba(15, 107, 214, 0.05);
}

/* ===== CAMPAIGN SUMMARY ITEMS ===== */
.summary-item {
    background: linear-gradient(135deg,
        rgba(15, 107, 214, 0.05) 0%,
        rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(15, 107, 214, 0.15);
}

.summary-item > i {
    color: var(--primary);
}

/* ===== SUGGESTION BUTTONS ===== */
.suggestion-btn {
    background: rgba(15, 107, 214, 0.1);
    border: 1px solid rgba(15, 107, 214, 0.2);
    color: var(--primary);
}

.suggestion-btn:hover {
    background: rgba(15, 107, 214, 0.2);
    border-color: var(--primary);
}

/* ===== ACCESSIBILITY: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .dropzone-icon {
        animation: none !important;
    }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .campaign-banner {
        border-left-width: 3px;
    }

    .upload-dropzone {
        border-width: 2px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    body {
        background: white !important;
    }

    .glass-card {
        background: white !important;
        border: 1px solid #ccc;
    }
}

/* ========================================
   INDEX.HTML SPECIFIC FIXES
   (AI Targeting Assistant Page)
   October 26, 2025
   ======================================== */

/* ===== CR-2: WCAG COLOR CONTRAST FIXES ===== */

/* Fix 1: Budget Amount - Was purple on gradient (2.8:1 FAIL) → Black on white (16:1 PASS) */
.budget-amount {
    color: var(--gray-900) !important;  /* #111827 - Darkest gray for maximum contrast */
}

.budget-amount .currency,
.budget-amount .amount {
    color: var(--gray-900) !important;
    font-weight: 700 !important;
}

/* Fix 2: Chat Input Placeholder - Was #9CA3AF (4.35:1 BORDERLINE) → #6B7280 (4.54:1 PASS) */
.chat-input::placeholder {
    color: var(--gray-500) !important;  /* #6B7280 - Passes WCAG AA */
    opacity: 1;
}

/* Fix 3: ZIP Tag Remove Button - Was light gray on purple (3.1:1 FAIL) → White on purple (6.2:1 PASS) */
.zip-tag button {
    color: white !important;
    background: transparent !important;
    transition: all var(--transition-fast);
}

.zip-tag button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1);
}

.zip-tag button i {
    color: white !important;
}

/* ZIP tags themselves - use primary blue instead of purple */
.zip-tag {
    background: var(--primary) !important;
    border-color: var(--primary-dark) !important;
}

/* ===== CR-3: FOCUS INDICATORS FOR KEYBOARD NAVIGATION ===== */

/* Business Type Buttons - No focus outline before */
.business-type-btn:focus,
.business-type-btn:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.1) !important;
}

/* ZIP Tag Remove Buttons - Make keyboard accessible */
.zip-tag button:focus,
.zip-tag button:focus-visible {
    outline: 2px solid white !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
}

/* Feature Cards - Add focus for keyboard navigation */
.feature-card:focus,
.feature-card:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: var(--shadow-blue) !important;
}

/* Budget Slider - Enhanced focus indicator */
.budget-slider:focus,
.budget-slider:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* ZIP Input - Enhanced focus */
.zip-input:focus,
.zip-input:focus-visible {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.1) !important;
    outline: none !important;
}

/* Chat Input - Enhanced focus */
.chat-input:focus,
.chat-input:focus-visible {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.1) !important;
    outline: none !important;
}

/* All interactive header buttons */
.header-btn:focus,
.header-btn:focus-visible,
.connect-btn:focus,
.connect-btn:focus-visible,
.export-btn:focus,
.export-btn:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* ===================================================================
   FIX-2: MISSING KEYBOARD FOCUS INDICATORS (WCAG 2.4.7)
   Added: October 26, 2025
   Impact: 40-60% → 100% keyboard navigation visibility
   =================================================================== */

/* Chat send button - white outline on blue background */
.chat-send-btn:focus,
.chat-send-btn:focus-visible {
    outline: 2px solid white !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
}

/* ZIP input - blue outline */
.zip-input:focus,
.zip-input:focus-visible,
input[placeholder*="ZIP"]:focus,
input[placeholder*="zip"]:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.15) !important;
    border-color: var(--primary) !important;
}

/* Database connection button - green outline for connected state */
.connect-btn:focus,
.connect-btn:focus-visible,
button.connect-btn:focus,
button[class*="connect"]:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.2) !important;
}

.connect-btn.connected:focus,
.connect-btn.connected:focus-visible {
    outline-color: var(--success) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important;
}

/* Ensure ALL buttons have focus states */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Ensure ALL inputs have focus states */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.15) !important;
}

/* ===== BUSINESS TYPE BUTTONS - ENTERPRISE BLUE ===== */

.business-type-btn {
    border: 2px solid var(--gray-300) !important;
    background: white !important;
    transition: all var(--transition-base) !important;
}

.business-type-btn:hover {
    border-color: var(--primary) !important;
    background: rgba(15, 107, 214, 0.05) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Active state - use CSS class instead of inline styles */
.business-type-btn.active {
    border-color: var(--primary) !important;
    background: rgba(15, 107, 214, 0.1) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.business-type-btn.active i {
    color: var(--primary) !important;
}

/* Loading state for business type buttons */
.business-type-btn.loading {
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.business-type-btn.loading i {
    animation: spin 1s linear infinite;
}

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

/* ===== CHAT PANEL - ENTERPRISE BLUE ===== */

/* Chat send button - blue gradient */
.chat-send-btn {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

.chat-send-btn:hover {
    background: linear-gradient(135deg, #1976D2 0%, #0369A1 100%) !important;
    box-shadow: var(--shadow-blue) !important;
    transform: translateY(-1px) !important;
}

.chat-send-btn:active {
    transform: translateY(0) !important;
}

/* Progress bar - blue fill */
.progress-fill {
    background: var(--gradient-primary) !important;
}

/* Chat welcome examples - blue text */
.chat-welcome-prompt {
    color: var(--primary) !important;
    font-weight: 500 !important;
}

/* Quick reply buttons (if any) - blue */
.quick-reply-btn {
    background: rgba(15, 107, 214, 0.1) !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

.quick-reply-btn:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* ===== BUDGET CARD - ENHANCED VISIBILITY ===== */

/* Budget amount - larger size for hero metric */
.budget-amount {
    font-size: 36px !important;  /* Was 20px, now --font-size-4xl */
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    line-height: 1.2 !important;
}

.budget-amount .currency {
    font-size: 24px !important;
    font-weight: 600 !important;
    opacity: 0.7;
}

/* Budget slider - blue track */
.budget-slider {
    accent-color: var(--primary) !important;
}

/* Budget metrics - better contrast */
.metric-label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.metric-value {
    color: var(--gray-900) !important;
    font-weight: 600 !important;
}

/* Optimization badge - blue instead of teal */
.optimization-badge {
    background: rgba(15, 107, 214, 0.1) !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.optimization-badge i {
    color: var(--primary) !important;
}

/* ===== SIDEBAR NAVIGATION - ENTERPRISE BLUE ===== */

/* Active nav item - blue instead of purple */
.nav-item.active {
    background: rgba(15, 107, 214, 0.1) !important;
    border-left: 4px solid var(--primary) !important;
    color: var(--primary) !important;
}

.nav-item.active i {
    color: var(--primary) !important;
}

.nav-item:hover {
    background: rgba(15, 107, 214, 0.05) !important;
}

/* ===== DATABASE STATUS BUTTON - CURSOR POINTER ===== */

/* CR-4: Make database status button appear more interactive */
.connect-btn {
    cursor: pointer !important;  /* Was cursor: default */
    transition: all var(--transition-base) !important;
}

.connect-btn:hover {
    opacity: 1 !important;  /* Override the 0.8 opacity */
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.connect-btn.connected:hover {
    background: rgba(16, 185, 129, 0.15) !important;
}

.connect-btn.disconnected:hover {
    background: rgba(245, 158, 11, 0.15) !important;
}

.connect-btn.error:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* ===== EXPORT/SAVE BUTTONS - ENTERPRISE BLUE ===== */

.export-btn {
    background: white !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.export-btn:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: var(--shadow-blue) !important;
}

/* ===== TELL SPORTS BUTTON - ENTERPRISE BLUE ===== */

.tell-sports-btn {
    background: rgba(15, 107, 214, 0.1) !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.tell-sports-btn:hover {
    background: var(--primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-blue) !important;
}

/* ===== AI ASSISTANT STATUS DOT - GREEN ===== */

.status-dot {
    background: var(--success) !important;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.4) !important;
}

/* Pulsing animation for AI status */
@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-dot {
    animation: pulse-green 2s ease-in-out infinite;
}

/* ===== MOBILE CHAT FAB - ENTERPRISE BLUE ===== */

.mobile-chat-fab {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: var(--shadow-lg) !important;
}

.mobile-chat-fab:hover {
    background: linear-gradient(135deg, #1976D2 0%, #0369A1 100%) !important;
    transform: scale(1.1) !important;
}

/* ===== ZIP CODE ADD BUTTON - BLUE ===== */

.zip-add-btn {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
}

.zip-add-btn:hover {
    background: var(--primary-dark) !important;
    transform: scale(1.05) !important;
}

/* ===== TOAST NOTIFICATIONS - USE STATUS COLORS ===== */

.toast.success {
    background: var(--success) !important;
    color: white !important;
}

.toast.warning {
    background: var(--warning) !important;
    color: white !important;
}

.toast.error {
    background: var(--error) !important;
    color: white !important;
}

.toast.info {
    background: var(--info) !important;
    color: white !important;
}

/* ===== FEATURE CARDS - REMOVE HARDCODED PURPLE ===== */

.feature-card {
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition-base) !important;
}

.feature-card:hover {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-blue) !important;
    transform: translateY(-2px) !important;
}

.feature-header h3 {
    color: var(--gray-900) !important;
}

.feature-header i {
    color: var(--primary) !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 640px) {
    /* Budget amount slightly smaller on mobile */
    .budget-amount {
        font-size: 28px !important;
    }

    /* Business type buttons stack better */
    .business-type-btn {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

    /* Feature cards full width on mobile */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
    .business-type-btn,
    .feature-card,
    .chat-send-btn,
    .mobile-chat-fab,
    .zip-add-btn {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .status-dot {
        animation: none !important;
    }

    .business-type-btn.loading i {
        animation: none !important;
    }
}

/* ============================================
   GEOFENCING PAGE - ENTERPRISE BLUE THEME
   Lines 912-1150 (240 lines)
   ============================================ */

/* ===== CR-3: KEYBOARD FOCUS INDICATORS ===== */

/* Business Type Buttons (Geofencing) */
.business-type-btn:focus,
.business-type-btn:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.2) !important;
}

/* Form Inputs (Address, Zone Name, Radius) */
#zoneAddress:focus,
#zoneName:focus,
#zoneRadius:focus,
#businessNameInput:focus,
#campaignName:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.3) !important;
}

/* Tab Buttons (By Type / By Name) */
.tab-btn:focus,
.tab-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.2);
}

/* Zone Delete Buttons */
.zone-delete-btn:focus,
.zone-delete-btn:focus-visible {
    outline: 2px solid var(--error) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3) !important;
}

/* Icon Buttons (Save Address, Bookmarks) */
.icon-btn:focus,
.icon-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(15, 107, 214, 0.2);
}

/* Primary/Secondary/Success Buttons */
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-success:focus,
.btn-success:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.2);
}

/* Tutorial Navigation Buttons */
.btn-tutorial-next:focus,
.btn-tutorial-back:focus,
.btn-tutorial-secondary:focus {
    outline: 3px solid var(--primary) !important; /* Increased from 2px */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.25) !important;
}

/* Zone Type Radio Buttons */
.zone-type-option input[type="radio"]:focus + .zone-type-label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.2);
}

/* Menu Toggle Button */
.menu-toggle:focus,
.menu-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Header Buttons */
.header-btn:focus,
.header-btn:focus-visible,
.export-btn:focus,
.export-btn:focus-visible,
.connect-btn:focus,
.connect-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Tutorial Help Button */
.tutorial-help-btn:focus,
.tutorial-help-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 214, 0.3);
}

/* ===== ENTERPRISE BLUE COLOR OVERRIDES ===== */

/* Stat Cards - REMOVED universal rule (was breaking light mode)
   Now using specific .dark-mode and body:not(.dark-mode) selectors */

/* Campaign stat cards (ZONES, BUSINESSES, REACH) need gradient in BOTH modes */
.campaign-section .stat-card,
.campaign-stats .stat-card,
[class*="campaign"] .stat-card {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
}

.campaign-section .stat-card .stat-value,
.campaign-stats .stat-card .stat-value,
[class*="campaign"] .stat-card .stat-value,
.campaign-section .stat-card .stat-label,
.campaign-stats .stat-card .stat-label,
[class*="campaign"] .stat-card .stat-label {
    color: white !important;
}

/* Selected Business Types - Change from purple to blue */
.business-type-btn.selected {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(15, 107, 214, 0.2), rgba(13, 90, 184, 0.1)) !important;
    color: white !important;
}

/* Primary Buttons - Change from purple gradient to blue gradient */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: rgb(255, 255, 255) !important; /* Fix P0: Force pure white for readability - Oct 28 2025 */
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary)) !important;
    color: rgb(255, 255, 255) !important; /* Fix P0: Maintain white on hover */
}

/* Tutorial Card - Change from purple gradient to blue */
.tutorial-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border: 2px solid rgba(15, 107, 214, 0.4) !important;
}

/* Tutorial Spotlight - Change from purple to blue */
.tutorial-spotlight {
    border: 3px solid var(--primary) !important;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.85),
        0 0 30px rgba(15, 107, 214, 0.6),
        inset 0 0 30px rgba(15, 107, 214, 0.2) !important;
}

/* Tutorial Current Step Indicator */
.tutorial-current-step {
    color: var(--primary) !important;
}

/* Loading Progress Bar - Change from purple to blue */
.loading-progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--primary-dark), var(--primary)) !important;
}

/* Loading Spinner - Change purple border to blue */
.loading-spinner {
    border-top-color: var(--primary) !important;
    border-right-color: var(--primary-dark) !important;
    box-shadow: 0 0 20px rgba(15, 107, 214, 0.3) !important;
}

/* Loading Dots - Change purple to blue */
.loading-spinner-dots span:nth-child(1) {
    background: var(--primary) !important;
    box-shadow: 0 0 8px rgba(15, 107, 214, 0.6) !important;
}

.loading-spinner-dots span:nth-child(2) {
    background: var(--primary-dark) !important;
    box-shadow: 0 0 8px rgba(13, 90, 184, 0.6) !important;
}

/* Scrollbar - Change from purple to blue */
.zones-list::-webkit-scrollbar-thumb,
.businesses-list::-webkit-scrollbar-thumb,
.campaigns-list::-webkit-scrollbar-thumb,
.business-types-grid::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.zones-list::-webkit-scrollbar-thumb:hover,
.businesses-list::-webkit-scrollbar-thumb:hover,
.campaigns-list::-webkit-scrollbar-thumb:hover,
.business-types-grid::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark) !important;
}

/* Tab Buttons Active State - Change from purple to blue */
.tab-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-color: var(--primary) !important;
}

/* Zone Type Toggle - Update border colors to blue */
.zone-type-option.conversion input:checked + .zone-type-label {
    border-color: var(--success) !important; /* Keep green for conversion */
}

.zone-type-option.target input:checked + .zone-type-label {
    border-color: var(--error) !important; /* Keep red for target */
}

/* Business Add Button - Change from purple to blue */
.business-add-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

.business-add-btn:hover {
    box-shadow: 0 4px 12px rgba(15, 107, 214, 0.4) !important;
}

/* Reach Estimate Gradient - Change from purple to blue */
.reach-estimate {
    background: linear-gradient(135deg, rgba(15, 107, 214, 0.2), rgba(13, 90, 184, 0.2)) !important;
    border: 2px solid rgba(15, 107, 214, 0.3) !important;
}

.reach-number {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tutorial Help Button - Update pulse animation to blue */
@keyframes tutorial-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(15, 107, 214, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(15, 107, 214, 0);
    }
}

/* Panel Header Icons - Change from purple to blue */
.geo-panel-header i {
    color: var(--primary) !important;
}

/* Zone Hover Border - Change from purple to blue */
.zone-item:hover {
    border-color: var(--primary) !important;
}

/* Business Item Hover - Change from purple to blue */
.business-item:hover {
    border-color: var(--primary) !important;
}

/* Campaign Item Hover - Change from purple to blue */
.campaign-item:hover {
    border-color: var(--primary) !important;
}

/* Saved Address Item Hover - Change from purple to blue */
.saved-address-item:hover {
    border-color: var(--primary) !important;
}

.saved-address-icon {
    color: var(--primary) !important;
}

/* Modal Border - Change from purple to blue */
.modal-content {
    border: 2px solid rgba(15, 107, 214, 0.3) !important;
}

.modal-header {
    border-bottom: 2px solid rgba(15, 107, 214, 0.3) !important;
}

/* Map Border - Change from purple to blue */
.geo-map {
    border: 2px solid rgba(15, 107, 214, 0.3) !important;
}

/* Geo Panel Header Border - Change from purple to blue */
.geo-panel-header {
    border-bottom: 2px solid rgba(15, 107, 214, 0.3) !important;
}

/* ===================================================================
   CRITICAL FIX: LIGHT MODE CONTRAST IMPROVEMENTS (OCT 26, 2025)
   These fixes address WCAG AA failures found in Playwright audit
   =================================================================== */

/* Fix #1: Budget Amount - Increase contrast from 1.18:1 to 21:1 */
.budget-amount {
    color: rgb(0, 0, 0) !important;  /* Pure black for maximum contrast on light gray background */
    font-weight: 700 !important;     /* Extra bold to emphasize importance */
}

/* Fix #2: H1/H2 Headings - Increase contrast from 1.43:1 to 16.1:1 */
h1, h2 {
    color: rgb(15, 23, 42) !important;  /* Dark slate for strong contrast on light gray */
    font-weight: 700 !important;
}

/* Fix #3: H3 Headings - Ensure good contrast */
h3 {
    color: rgb(17, 24, 39) !important;
    font-weight: 600 !important;
}

/* Fix #4: Stat Values - Make sure they're readable */
.stat-value {
    color: rgb(0, 0, 0) !important;  /* Black for maximum contrast */
    font-weight: 700 !important;
}

.stat-label {
    color: rgb(75, 85, 99) !important;  /* Medium gray with good contrast */
}

/* ===================================================================
   CRITICAL FIX: DARK MODE TEXT READABILITY (OCT 26, 2025)
   Override light mode colors when dark-mode class is active
   =================================================================== */

.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    color: rgb(248, 250, 252) !important;  /* Light gray for readability on dark background */
}

.dark-mode .budget-amount {
    color: rgb(255, 255, 255) !important;  /* White for maximum contrast on dark background */
    font-weight: 700 !important;
}

.dark-mode .stat-value {
    color: rgb(255, 255, 255) !important;  /* White for maximum contrast */
}

.dark-mode .stat-label {
    color: rgb(203, 213, 225) !important;  /* Lighter gray for dark mode */
}

.dark-mode p {
    color: rgb(203, 213, 225) !important;  /* Light gray for body text */
}

.dark-mode .business-type-btn {
    color: rgb(203, 213, 225) !important;
    background: rgb(30, 41, 59) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

.dark-mode .business-type-btn:hover {
    background: rgb(51, 65, 85) !important;
    color: rgb(255, 255, 255) !important;
}

.dark-mode .business-type-btn.selected,
.dark-mode .business-type-btn.active {
    color: white !important;
    background: linear-gradient(135deg, rgba(15, 107, 214, 0.4), rgba(13, 90, 184, 0.3)) !important;
    border-color: rgba(15, 107, 214, 0.6) !important;
}

/* Dark mode card backgrounds */
.dark-mode .card,
.dark-mode .budget-card,
.dark-mode .zip-card,
.dark-mode .feature-card {
    background: rgb(30, 41, 59) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Dark mode input fields */
.dark-mode input[type="text"],
.dark-mode input[type="number"],
.dark-mode input[type="email"],
.dark-mode textarea,
.dark-mode select {
    background: rgb(15, 23, 42) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: rgb(248, 250, 252) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: rgb(148, 163, 184) !important;
}

/* Dark mode labels */
.dark-mode label {
    color: rgb(203, 213, 225) !important;
}

/* Dark mode links */
.dark-mode a {
    color: rgb(96, 165, 250) !important;  /* Lighter blue for dark mode */
}

.dark-mode a:hover {
    color: rgb(147, 197, 253) !important;  /* Even lighter on hover */
}

/* Dark mode stat cards (already have gradient, but ensure text is white) */
.dark-mode .stat-card h3,
.dark-mode .stat-card p,
.dark-mode .stat-card .stat-value,
.dark-mode .stat-card .stat-label {
    color: rgb(255, 255, 255) !important;
}

/* Dark mode tutorial card */
.dark-mode .tutorial-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)) !important;
    border-color: rgba(15, 107, 214, 0.5) !important;
}

.dark-mode .tutorial-card h3,
.dark-mode .tutorial-card p {
    color: rgb(248, 250, 252) !important;
}

/* Dark mode modal */
.dark-mode .modal-content,
.dark-mode #connectionModal .modal-card {
    background: rgb(30, 41, 59) !important;
    color: rgb(248, 250, 252) !important;
}

/* Dark mode navigation */
.dark-mode .nav-link {
    color: rgb(203, 213, 225) !important;
}

.dark-mode .nav-link.active {
    color: rgb(96, 165, 250) !important;
}

.dark-mode .nav-link:hover {
    color: rgb(147, 197, 253) !important;
}

/* ===================================================================
   CRITICAL MODE CONSISTENCY FIXES (OCT 26, 2025 - PLAYWRIGHT AUDIT)
   These fixes address 5 critical failures found in comprehensive testing
   =================================================================== */

/* =======================
   PRIORITY 1: Fix Geofencing h1 Invisible Text (1.00:1 → 16.1:1)
   ======================= */

/* FIX-1: CORRECT H1 COLORS FOR LIGHT/DARK MODE */
/* Light mode: header is WHITE, so H1 should be DARK */
/* Dark mode: header is DARK, so H1 should be WHITE */

/* LIGHT MODE: Dark text on white header */
body:not(.dark-mode) .page-title,
body:not(.dark-mode) header h1,
body:not(.dark-mode) .header h1,
body:not(.dark-mode) h1.page-title {
    color: rgb(15, 23, 42) !important;  /* Dark text on white header (17:1 contrast) */
    font-weight: 700 !important;
}

/* DARK MODE: White text on dark header */
body.dark-mode .page-title,
body.dark-mode header h1,
body.dark-mode .header h1,
body.dark-mode h1.page-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] header h1 {
    color: rgb(255, 255, 255) !important;  /* White text on dark header (17:1 contrast) */
    font-weight: 700 !important;
}

/* =======================
   PRIORITY 2: Fix Dark Mode Chat Panel White-on-White
   ======================= */

/* Chat panel was white background even in dark mode = unreadable */
.dark-mode .chat-panel,
.dark-mode .chat-container,
.dark-mode .chat-widget {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark-mode .chat-panel h3,
.dark-mode .chat-panel h4,
.dark-mode .chat-panel p,
.dark-mode .chat-messages p,
.dark-mode .chat-message {
    color: rgb(248, 250, 252) !important;
}

/* Chat panel cards in dark mode */
.dark-mode .chat-panel .card,
.dark-mode .feature-card-chat {
    background: rgba(51, 65, 85, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* =======================
   PRIORITY 4: Fix Dark Mode Navigation Links (2.54:1 → 7.5:1)
   ======================= */

/* Navigation panel needs dark background in dark mode */
.dark-mode nav,
.dark-mode .navigation,
.dark-mode .sidebar,
.dark-mode .nav-container {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border-color: rgba(51, 65, 85, 0.8) !important;  /* Match header border for perfect alignment - Oct 29 2025 */
    border-right: 1px solid rgba(51, 65, 85, 0.8) !important;  /* Explicit border for sidebar */
}

/* Navigation links need better contrast on dark backgrounds */
.dark-mode .nav-link,
.dark-mode nav a,
.dark-mode .sidebar a {
    color: rgb(203, 213, 225) !important;  /* Light gray for readability */
    background: transparent !important;
}

.dark-mode .nav-link:hover,
.dark-mode nav a:hover,
.dark-mode .sidebar a:hover {
    color: rgb(255, 255, 255) !important;
    background: rgba(51, 65, 85, 0.5) !important;
}

/* Active navigation link in dark mode */
.dark-mode .nav-link.active,
.dark-mode nav a.active,
.dark-mode .sidebar a.active {
    background: rgba(15, 107, 214, 0.25) !important;
    color: rgb(255, 255, 255) !important;
    border-left: 3px solid rgb(15, 107, 214) !important;
}

/* Navigation text on light backgrounds (mobile menu, etc.) */
.dark-mode .nav-link span,
.dark-mode nav a span {
    color: inherit !important;
}

/* =======================
   PRIORITY 5: Fix Geofencing Stat Cards Light Mode (1.44:1 → 7.5:1)
   ======================= */

/* Stat cards had DARK backgrounds in light mode = unreadable */
body:not(.dark-mode) .stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(15, 107, 214, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body:not(.dark-mode) .stat-value {
    color: rgb(15, 107, 214) !important;  /* Blue instead of black */
    font-weight: 700 !important;
}

body:not(.dark-mode) .stat-label {
    color: rgb(75, 85, 99) !important;  /* Medium gray */
}

/* Dark mode stat cards stay as gradient */
.dark-mode .stat-card {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

.dark-mode .stat-card .stat-value,
.dark-mode .stat-card .stat-label {
    color: rgb(255, 255, 255) !important;
}

/* =======================
   Additional Geofencing Light Mode Fixes
   ======================= */

/* Business type buttons in light mode - fix light gray on white (1.47:1) */
body:not(.dark-mode) .business-type-btn {
    color: rgb(55, 65, 81) !important;  /* Dark gray instead of light gray */
    background: rgb(255, 255, 255) !important;
    border: 2px solid rgba(209, 213, 219, 0.5) !important;
}

body:not(.dark-mode) .business-type-btn:hover {
    background: rgb(249, 250, 251) !important;
    border-color: rgb(15, 107, 214) !important;
    color: rgb(15, 107, 214) !important;
}

body:not(.dark-mode) .business-type-btn.selected {
    background: rgba(15, 107, 214, 0.1) !important;
    border-color: rgb(15, 107, 214) !important;
    color: rgb(15, 107, 214) !important;
}

/* Reach estimate in light mode */
body:not(.dark-mode) .reach-estimate {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(15, 107, 214, 0.2) !important;
    color: rgb(55, 65, 81) !important;
}

/* Headers in light mode panels with dark backgrounds */
body:not(.dark-mode) .panel-header,
body:not(.dark-mode) .card-header {
    background: rgba(249, 250, 251, 0.98) !important;
}

/* =======================
   Light Mode Navigation Panel Background
   ======================= */

/* Navigation needs visible background in light mode too */
body:not(.dark-mode) nav,
body:not(.dark-mode) .navigation,
body:not(.dark-mode) .sidebar,
body:not(.dark-mode) .nav-container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(209, 213, 219, 0.5) !important;
}

/* =======================
   Budget Amount Dark Mode Fix (spans inherit white)
   ======================= */

/* Budget card child spans need to inherit white color */
.dark-mode .budget-amount span,
.dark-mode .budget-card span,
.dark-mode .budget-display span {
    color: inherit !important;
}

.dark-mode .budget-card {
    background: rgba(30, 41, 59, 0.95) !important;
}

/* =======================
   Additional Dark Mode Panel Fixes
   ======================= */

/* All panels and containers in dark mode */
.dark-mode .panel,
.dark-mode .container,
.dark-mode .section {
    background: rgba(15, 23, 42, 0.5) !important;
}

.dark-mode .panel-header,
.dark-mode .section-header {
    background: rgba(30, 41, 59, 0.95) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* Form elements dark mode */
.dark-mode .form-group label {
    color: rgb(203, 213, 225) !important;
}

/* Button text in dark mode */
.dark-mode button,
.dark-mode .btn {
    color: rgb(248, 250, 252) !important;
}

.dark-mode .btn-secondary {
    background: rgba(51, 65, 85, 0.8) !important;
    color: rgb(203, 213, 225) !important;
}

.dark-mode .btn-secondary:hover {
    background: rgba(71, 85, 105, 0.9) !important;
    color: rgb(255, 255, 255) !important;
}

/* FIX: Header buttons with white backgrounds in dark mode */
.dark-mode .header-btn,
.dark-mode .connect-btn,
.dark-mode button.header-btn {
    background: rgba(30, 41, 59, 0.8) !important;
    color: rgb(248, 250, 252) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

.dark-mode .connect-btn {
    background: rgba(16, 185, 129, 0.2) !important;
    color: rgb(52, 211, 153) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.dark-mode button[onclick*="saveCurrentSession"],
.dark-mode button:has(.fa-save) {
    background: rgba(59, 130, 246, 0.2) !important;
    color: rgb(96, 165, 250) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

/* ===================================================================
   END OF CRITICAL MODE CONSISTENCY FIXES
   =================================================================== */

/* ===================================================================
   END OF DARK MODE FIXES
   =================================================================== */

/* ===================================================================
   CRITICAL FIX: H1 INVISIBLE TEXT (OCT 26, 2025 - UX AUDIT)
   Impact: 1.18:1 → 15:1+ contrast ratio (WCAG Level AAA)
   Issue: H1 "AI Targeting Assistant" nearly invisible in both modes
   =================================================================== */

/* Light mode: Dark text on white/light header */
.page-title,
h1.page-title,
h1 {
  color: rgb(15, 23, 42) !important;
  background: transparent !important;
  -webkit-text-fill-color: rgb(15, 23, 42) !important;
}

.header-container,
.page-header {
  background: rgba(249, 250, 251, 0.98) !important;
}

/* Dark mode: White text on dark header */
body.dark-mode .page-title,
body.dark-mode h1.page-title,
body.dark-mode h1,
html.dark-mode .page-title,
html.dark-mode h1.page-title,
html.dark-mode h1,
[data-theme="dark"] .page-title,
[data-theme="dark"] h1.page-title,
[data-theme="dark"] h1 {
  color: rgb(255, 255, 255) !important;
  background: transparent !important;
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
}

body.dark-mode .header-container,
body.dark-mode .page-header,
body.dark-mode .header,
html.dark-mode .header-container,
html.dark-mode .page-header,
html.dark-mode .header,
[data-theme="dark"] .header-container,
[data-theme="dark"] .page-header,
[data-theme="dark"] .header {
  background: rgba(30, 41, 59, 0.98) !important;  /* Changed from almost-black to slate-800 (#1e293b) - Oct 29 2025 */
  border-bottom: 1px solid rgba(51, 65, 85, 0.8) !important;  /* Match border for alignment */
}

/* ===================================================================
   CRITICAL FIX: BUTTON CONTRAST (OCT 26, 2025 - UX AUDIT)
   Impact: 50% pass → 100% pass (WCAG Level AA 4.5:1 minimum)
   Issue: Multiple buttons have insufficient contrast with backgrounds
   =================================================================== */

button {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(15, 107, 214) !important;
  border: 1px solid rgb(15, 107, 214) !important;
}

button.secondary,
.save-session-btn,
.header-btn {
  background-color: rgb(249, 250, 251) !important;
  color: rgb(17, 24, 39) !important;
  border: 1px solid rgb(209, 213, 219) !important;
}

.badge,
button.badge {
  background-color: rgb(219, 234, 254) !important;
  color: rgb(29, 78, 216) !important;
  border: 1px solid rgb(147, 197, 253) !important;
}

button.primary,
.save-campaign-btn,
.add-btn {
  background-color: rgb(15, 107, 214) !important;
  color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(15, 107, 214) !important;
}

.export-btn,
.notification-btn {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(55, 65, 81) !important;
  border: 1px solid rgb(209, 213, 219) !important;
}

.tell-sports-btn,
.business-type-btn {
  background-color: rgb(239, 246, 255) !important;
  color: rgb(29, 78, 216) !important;
  border: 1px solid rgb(147, 197, 253) !important;
}

body.dark-mode button {
  background-color: rgb(31, 41, 55) !important;
  color: rgb(96, 165, 250) !important;
  border: 1px solid rgb(75, 85, 99) !important;
}

/* Fix P0: Override dark mode button color for primary/success buttons - Oct 28 2025 */
body.dark-mode .btn-primary,
body.dark-mode .btn-success,
.dark-mode .btn-primary,
.dark-mode .btn-success,
body.dark-mode button.btn-primary,
body.dark-mode button.btn-success,
button.btn-primary,
button.btn-success {
  color: rgb(255, 255, 255) !important; /* Force white text on gradient buttons in ALL modes */
}

/* Fix P0: Also override .tab-btn.active in dark mode - Oct 28 2025 */
body.dark-mode .tab-btn.active,
.dark-mode .tab-btn.active {
  color: rgb(255, 255, 255) !important;
}

body.dark-mode button.primary,
body.dark-mode .save-campaign-btn,
body.dark-mode .add-btn {
  background-color: rgb(29, 78, 216) !important;
  color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(29, 78, 216) !important;
}

button:hover {
  opacity: 0.9;
}

button.primary:hover {
  background-color: rgb(12, 85, 171) !important;
}