/* ===== COMPREHENSIVE DARK MODE SYSTEM ===== */

/* Debug: Test if data-theme attribute is working */
html[data-theme="dark"] {
    --debug-dark-mode: 1;
}

/* Dark Mode Variables (System preference) */
@media (prefers-color-scheme: dark) {
    :root {
        /* ===== PRIMARY COLORS (Enhanced for Dark Mode) ===== */
        --color-primary: #FF6B6B; /* Brighter NoQ5 Red for dark backgrounds */
        --color-primary-dark: #E04F4F;
        --color-primary-light: #FF9B9B;
        --color-secondary: #00A896; /* Brighter NoQ5 Teal */
        --color-secondary-dark: #007C70;
        --color-secondary-light: #3DCCBE;

        /* ===== NEUTRAL COLORS (Inverted Hierarchy) ===== */
        --color-gray-50: #1a1d20;   /* Darkest */
        --color-gray-100: #212529;
        --color-gray-200: #343a40;
        --color-gray-300: #495057;
        --color-gray-400: #6c757d;
        --color-gray-500: #adb5bd;
        --color-gray-600: #ced4da;
        --color-gray-700: #dee2e6;
        --color-gray-800: #e9ecef;
        --color-gray-900: #f8f9fa;  /* Lightest */

        /* ===== SEMANTIC COLORS (Adjusted for Dark Mode) ===== */
        --color-success: #4CAF50;
        --color-success-light: #1c3a20;
        --color-success-dark: #2ee05d;
        --color-error: #F44336;
        --color-error-light: #4a1c1f;
        --color-error-dark: #ff7b85;
        --color-warning: #FFC107;
        --color-warning-light: #4a3a00;
        --color-warning-dark: #ffdb70;
        --color-info: #2196F3;
        --color-info-light: #1a3a40;
        --color-info-dark: #5adbe8;

        /* ===== BACKGROUNDS ===== */
        --color-bg-primary: #10131a;    /* Deep dark background */
        --color-bg-secondary: #171c24;  /* Slightly lighter */
        --color-bg-tertiary: #1f2530;   /* Cards/panels */
        --color-bg-inverse: #ffffff;    /* Light backgrounds when needed */
        --color-surface: #1f2530;       /* General card/modal background */
        --color-surface-elevated: #272f3d; /* Elevated surfaces */
        --color-surface-hover: #2d3544;
        --color-surface-pressed: #394255;
        --color-card-bg: #212936;
        --color-card-border: rgba(148, 163, 184, 0.14);
        --card-panel-gradient-start: rgba(33, 39, 52, 0.96);
        --card-panel-gradient-end: rgba(27, 33, 44, 0.92);
        --card-panel-border: rgba(148, 163, 184, 0.14);

        /* ===== TEXT COLORS ===== */
        --color-text-primary: #e0e0e0;   /* Light gray text */
        --color-text-secondary: #b0b0b0;
        --color-text-tertiary: #808080;
        --color-text-disabled: #606060;
        --color-text-inverse: #121212;   /* For text on light backgrounds */
        --color-text-link: #6cb7ff;      /* Lighter blue for links */
        --color-text-link-hover: #9acaff;

        /* ===== BORDERS & SHADOWS ===== */
        --color-border-primary: #444444;
        --color-border-secondary: #666666;
        --color-border-focus: #FF6B6B;   /* NoQ5 Red for focus */
        --color-border-error: var(--color-error);
        --color-border-success: var(--color-success);
        --color-focus-ring: rgba(255, 107, 107, 0.35);

        /* Enhanced shadows for dark mode */
        --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
        --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
        --shadow-primary: 0 0 0 0.25rem rgba(255, 107, 107, 0.35);

        /* ===== COMPONENT-SPECIFIC COLORS ===== */
        
        /* Navigation */
        --color-nav-bg: #1e1e1e;
        --color-nav-text: var(--color-text-primary);
        --color-nav-text-hover: var(--color-primary-light);

        /* Buttons */
        --color-btn-primary-bg: var(--color-primary);
        --color-btn-primary-text: #ffffff;
        --color-btn-primary-hover: var(--color-primary-light);
        
        --color-btn-secondary-bg: var(--color-secondary);
        --color-btn-secondary-text: #ffffff;
        --color-btn-secondary-hover: var(--color-secondary-light);

        /* Forms */
        --color-input-bg: #3a3a3a;
        --color-input-border: #555555;
        --color-input-text: var(--color-text-primary);
        --color-input-placeholder: var(--color-text-tertiary);
        --color-input-border-focus: var(--color-primary);

        /* Alerts (Dark Mode Adjusted) */
        --color-alert-success-bg: rgba(76, 175, 80, 0.15);
        --color-alert-success-border: var(--color-success);
        --color-alert-success-text: var(--color-success-dark);

        --color-alert-warning-bg: rgba(255, 193, 7, 0.15);
        --color-alert-warning-border: var(--color-warning);
        --color-alert-warning-text: var(--color-warning-dark);

        --color-alert-error-bg: rgba(244, 67, 54, 0.15);
        --color-alert-error-border: var(--color-error);
        --color-alert-error-text: var(--color-error-dark);

        --color-alert-info-bg: rgba(33, 150, 243, 0.15);
        --color-alert-info-border: var(--color-info);
        --color-alert-info-text: var(--color-info-dark);

        /* ===== GRADIENTS (Dark Mode) ===== */
        --gradient-primary: linear-gradient(135deg, #FF6B6B 0%, #E04F4F 100%);
        --gradient-secondary: linear-gradient(135deg, #00A896 0%, #007C70 100%);
        --gradient-warm: linear-gradient(135deg, #FF6B6B 0%, #FF9B9B 100%);
        --gradient-cool: linear-gradient(135deg, #00A896 0%, #3DCCBE 100%);
        --gradient-dark: linear-gradient(135deg, #2c2c2c 0%, #1e1e1e 100%);

        /* ===== PROVENANCE COLORS (Dark Mode) ===== */
        --color-provenance-direct: #4CAF50;
        --color-provenance-direct-bg: rgba(76, 175, 80, 0.15);
        --color-provenance-web: #2196F3;
        --color-provenance-web-bg: rgba(33, 150, 243, 0.15);
        --color-provenance-ai: #FFC107;
        --color-provenance-ai-bg: rgba(255, 193, 7, 0.15);
        --color-provenance-mixed: #9C27B0;
        --color-provenance-mixed-bg: rgba(156, 39, 176, 0.15);

        /* ===== CRM SPECIFIC COLORS ===== */
        --color-salesforce-blue: #0056b3;
        --color-salesforce-blue-glow: rgba(0, 86, 179, 0.35);
        --color-hubspot-orange: #cc5c3f;
        --color-hubspot-orange-glow: rgba(204, 92, 63, 0.35);
    }
}

/* Dark Mode Variables (Manual toggle via html[data-theme="dark"]) */
html[data-theme="dark"] {
    color-scheme: dark;
    /* ===== PRIMARY COLORS (Enhanced for Dark Mode) ===== */
    --color-primary: #FF6B6B; /* Brighter NoQ5 Red for dark backgrounds */
    --color-primary-dark: #E04F4F;
    --color-primary-light: #FF9B9B;
    --color-secondary: #00A896; /* Brighter NoQ5 Teal */
    --color-secondary-dark: #007C70;
    --color-secondary-light: #3DCCBE;

    /* ===== NEUTRAL COLORS (Inverted Hierarchy) ===== */
    --color-gray-50: #1a1d20;   /* Darkest */
    --color-gray-100: #212529;
    --color-gray-200: #343a40;
    --color-gray-300: #495057;
    --color-gray-400: #6c757d;
    --color-gray-500: #adb5bd;
    --color-gray-600: #ced4da;
    --color-gray-700: #dee2e6;
    --color-gray-800: #e9ecef;
    --color-gray-900: #f8f9fa;  /* Lightest */

    /* ===== SEMANTIC COLORS (Adjusted for Dark Mode) ===== */
    --color-success: #4CAF50;
    --color-success-light: #1c3a20;
    --color-success-dark: #2ee05d;
    --color-error: #F44336;
    --color-error-light: #4a1c1f;
    --color-error-dark: #ff7b85;
    --color-warning: #FFC107;
    --color-warning-light: #4a3a00;
    --color-warning-dark: #ffdb70;
    --color-info: #2196F3;
    --color-info-light: #1a3a40;
    --color-info-dark: #5adbe8;

    /* ===== BACKGROUNDS ===== */
    --color-bg-primary: #10131a;    /* Deep dark background */
    --color-bg-secondary: #171c24;  /* Slightly lighter */
    --color-bg-tertiary: #1f2530;   /* Cards/panels */
    --color-bg-inverse: #ffffff;    /* Light backgrounds when needed */
    --color-surface: #1f2530;       /* General card/modal background */
    --color-surface-elevated: #272f3d; /* Elevated surfaces */
    --color-surface-hover: #2d3544;
    --color-surface-pressed: #394255;
    --color-card-bg: #212936;
    --color-card-border: rgba(148, 163, 184, 0.14);
    --card-panel-gradient-start: rgba(33, 39, 52, 0.96);
    --card-panel-gradient-end: rgba(27, 33, 44, 0.92);
    --card-panel-border: rgba(148, 163, 184, 0.14);

    /* ===== TEXT COLORS ===== */
    --color-text-primary: #e0e0e0;   /* Light gray text */
    --color-text-secondary: #b0b0b0;
    --color-text-tertiary: #808080;
    --color-text-disabled: #606060;
    --color-text-inverse: #121212;   /* For text on light backgrounds */
    --color-text-link: #6cb7ff;      /* Lighter blue for links */
    --color-text-link-hover: #9acaff;

    /* ===== BORDERS & SHADOWS ===== */
    --color-border-primary: #444444;
    --color-border-secondary: #666666;
    --color-border-focus: #FF6B6B;   /* NoQ5 Red for focus */
    --color-border-error: var(--color-error);
    --color-border-success: var(--color-success);

    /* Enhanced shadows for dark mode */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 0 0 0.25rem rgba(255, 107, 107, 0.35);

    /* ===== COMPONENT-SPECIFIC COLORS ===== */
    /* Navigation */
    --color-nav-bg: #1e1e1e;
    --color-nav-text: var(--color-text-primary);
    --color-nav-text-hover: var(--color-primary-light);

    /* Buttons */
    --color-btn-primary-bg: var(--color-primary);
    --color-btn-primary-text: #ffffff;
    --color-btn-primary-hover: var(--color-primary-light);
    --color-btn-secondary-bg: var(--color-secondary);
    --color-btn-secondary-text: #ffffff;
    --color-btn-secondary-hover: var(--color-secondary-light);

    /* Forms */
    --color-input-bg: #3a3a3a;
    --color-input-border: #555555;
    --color-input-text: var(--color-text-primary);
    --color-input-placeholder: var(--color-text-tertiary);
    --color-input-border-focus: var(--color-primary);

    /* Alerts (Dark Mode Adjusted) */
    --color-alert-success-bg: rgba(76, 175, 80, 0.15);
    --color-alert-success-border: var(--color-success);
    --color-alert-success-text: var(--color-success-dark);
    --color-alert-warning-bg: rgba(255, 193, 7, 0.15);
    --color-alert-warning-border: var(--color-warning);
    --color-alert-warning-text: var(--color-warning-dark);
    --color-alert-error-bg: rgba(244, 67, 54, 0.15);
    --color-alert-error-border: var(--color-error);
    --color-alert-error-text: var(--color-error-dark);
    --color-alert-info-bg: rgba(33, 150, 243, 0.15);
    --color-alert-info-border: var(--color-info);
    --color-alert-info-text: var(--color-info-dark);

    /* ===== GRADIENTS (Dark Mode) ===== */
    --gradient-primary: linear-gradient(135deg, #FF6B6B 0%, #E04F4F 100%);
    --gradient-secondary: linear-gradient(135deg, #00A896 0%, #007C70 100%);
    --gradient-warm: linear-gradient(135deg, #FF6B6B 0%, #FF9B9B 100%);
    --gradient-cool: linear-gradient(135deg, #00A896 0%, #3DCCBE 100%);
    --gradient-dark: linear-gradient(135deg, #2c2c2c 0%, #1e1e1e 100%);

    /* ===== PROVENANCE COLORS (Dark Mode) ===== */
    --color-provenance-direct: #4CAF50;
    --color-provenance-direct-bg: rgba(76, 175, 80, 0.15);
    --color-provenance-web: #2196F3;
    --color-provenance-web-bg: rgba(33, 150, 243, 0.15);
    --color-provenance-ai: #FFC107;
    --color-provenance-ai-bg: rgba(255, 193, 7, 0.15);
    --color-provenance-mixed: #9C27B0;
    --color-provenance-mixed-bg: rgba(156, 39, 176, 0.15);

    /* ===== CRM SPECIFIC COLORS ===== */
    --color-salesforce-blue: #0056b3;
    --color-salesforce-blue-glow: rgba(0, 86, 179, 0.35);
    --color-hubspot-orange: #cc5c3f;
    --color-hubspot-orange-glow: rgba(204, 92, 63, 0.35);
}

/* ===== DARK MODE COMPONENT OVERRIDES (System preference) ===== */

@media (prefers-color-scheme: dark) {
    
    /* Body and HTML */
    body {
        background-color: var(--color-bg-primary);
        color: var(--color-text-primary);
    }

    /* Cards */
    .card {
        background-color: var(--color-surface);
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .card-header {
        background-color: var(--color-surface-elevated);
        border-bottom-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .card-footer {
        background-color: var(--color-surface-elevated);
        border-top-color: var(--color-border-primary);
    }

    /* Modals */
    .modal-content {
        background-color: var(--color-surface);
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .modal-header {
        border-bottom-color: var(--color-border-primary);
    }

    .modal-footer {
        border-top-color: var(--color-border-primary);
    }

    /* Forms */
    .form-control {
        background-color: var(--color-input-bg) !important;
        border-color: var(--color-input-border) !important;
        color: var(--color-input-text) !important;
    }

    .form-control:focus {
        background-color: var(--color-input-bg) !important;
        border-color: var(--color-input-border-focus) !important;
        color: var(--color-input-text) !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25) !important;
    }

    .form-control::placeholder {
        color: var(--color-input-placeholder) !important;
    }

    .form-select {
        background-color: var(--color-input-bg) !important;
        border-color: var(--color-input-border) !important;
        color: var(--color-input-text) !important;
    }

    .form-select:focus {
        border-color: var(--color-input-border-focus) !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25) !important;
    }

    /* Input groups */
    .input-group-text {
        background-color: var(--color-surface-elevated) !important;
        border-color: var(--color-input-border) !important;
        color: var(--color-text-primary) !important;
    }

    /* Form labels */
    .form-label {
        color: var(--color-text-primary) !important;
    }

    /* Form check (checkboxes and radios) */
    .form-check-input {
        background-color: var(--color-input-bg) !important;
        border-color: var(--color-input-border) !important;
    }

    .form-check-input:checked {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

    .form-check-label {
        color: var(--color-text-primary) !important;
    }

    /* Tables */
    .table {
        color: var(--color-text-primary);
    }

    .table-dark {
        --bs-table-bg: var(--color-surface);
        --bs-table-border-color: var(--color-border-primary);
    }

    /* Navbar */
    .navbar {
        background-color: var(--color-nav-bg) !important;
    }

    .navbar-brand,
    .navbar-nav .nav-link {
        color: var(--color-nav-text) !important;
    }

    .navbar-nav .nav-link:hover {
        color: var(--color-nav-text-hover) !important;
    }

    .navbar-brand-text {
        color: var(--color-nav-text) !important;
        font-weight: 600;
    }

    .navbar-brand:hover .navbar-brand-text {
        color: var(--color-nav-text-hover) !important;
    }

    /* Navbar toggler for mobile */
    .navbar-toggler {
        border-color: var(--color-border-primary) !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28224, 224, 224, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Logo switching for dark mode */
    .navbar-logo {
        content: url('/images/noq5_logo-dark.svg') !important;
    }

    /* Auth form logos */
    .auth-logo-img {
        content: url('/images/noq5_logo-dark.svg') !important;
    }

    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--color-surface-elevated);
        border-color: var(--color-border-primary);
    }

    .dropdown-item {
        color: var(--color-text-primary);
    }

    .dropdown-item:hover {
        background-color: var(--color-surface-hover);
        color: var(--color-text-primary);
    }

    /* Alerts */
    .alert-success {
        background-color: var(--color-alert-success-bg);
        border-color: var(--color-alert-success-border);
        color: var(--color-alert-success-text);
    }

    .alert-warning {
        background-color: var(--color-alert-warning-bg);
        border-color: var(--color-alert-warning-border);
        color: var(--color-alert-warning-text);
    }

    .alert-danger {
        background-color: var(--color-alert-error-bg);
        border-color: var(--color-alert-error-border);
        color: var(--color-alert-error-text);
    }

    .alert-info {
        background-color: var(--color-alert-info-bg);
        border-color: var(--color-alert-info-border);
        color: var(--color-alert-info-text);
    }

    /* Buttons - Enhanced Dark Mode Support */
    .btn {
        color: var(--color-text-primary) !important;
    }

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

    .btn-secondary {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
        color: #ffffff !important;
    }

    .btn-success {
        background-color: var(--color-success) !important;
        border-color: var(--color-success) !important;
        color: #ffffff !important;
    }

    .btn-danger {
        background-color: var(--color-error) !important;
        border-color: var(--color-error) !important;
        color: #ffffff !important;
    }

    .btn-warning {
        background-color: var(--color-warning) !important;
        border-color: var(--color-warning) !important;
        color: #000000 !important;
    }

    .btn-info {
        background-color: var(--color-info) !important;
        border-color: var(--color-info) !important;
        color: #ffffff !important;
    }

    .btn-light {
        background-color: var(--color-surface-elevated) !important;
        border-color: var(--color-border-primary) !important;
        color: var(--color-text-primary) !important;
    }

    .btn-dark {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border-secondary) !important;
        color: var(--color-text-primary) !important;
    }

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

    .btn-outline-primary:hover {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    .btn-outline-secondary {
        background-color: transparent !important;
        border-color: var(--color-secondary) !important;
        color: var(--color-secondary) !important;
    }

    .btn-outline-secondary:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
        color: #ffffff !important;
    }

    /* Text colors - Force override */
    .text-dark {
        color: var(--color-text-primary) !important;
    }

    .text-light {
        color: var(--color-text-secondary) !important;
    }

    .text-white {
        color: #ffffff !important;
    }

    .text-black {
        color: var(--color-text-primary) !important;
    }

    /* Badges */
    .badge {
        color: var(--color-text-inverse) !important;
    }

    .badge.bg-light {
        background-color: var(--color-surface-elevated) !important;
        color: var(--color-text-primary) !important;
    }

    .badge.bg-dark {
        background-color: var(--color-surface) !important;
        color: var(--color-text-primary) !important;
    }

    /* Progress bars */
    .progress {
        background-color: var(--color-surface-elevated);
    }

    /* List groups */
    .list-group-item {
        background-color: var(--color-surface);
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .list-group-item:hover {
        background-color: var(--color-surface-hover);
    }

    /* Tooltips */
    .tooltip .tooltip-inner {
        background-color: var(--color-surface-elevated);
        color: var(--color-text-primary);
    }

    /* Popovers */
    .popover {
        background-color: var(--color-surface-elevated);
        border-color: var(--color-border-primary);
    }

    .popover-body {
        color: var(--color-text-primary);
    }

    /* Accordion */
    .accordion-item {
        background-color: var(--color-surface);
        border-color: var(--color-border-primary);
    }

    .accordion-button {
        background-color: var(--color-surface-elevated);
        color: var(--color-text-primary);
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--color-surface-hover);
        color: var(--color-text-primary);
    }

    /* Pagination */
    .page-link {
        background-color: var(--color-surface);
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);
    }

    .page-link:hover {
        background-color: var(--color-surface-hover);
        border-color: var(--color-border-secondary);
        color: var(--color-text-primary);
    }

    /* Breadcrumb */
    .breadcrumb {
        background-color: var(--color-surface-elevated);
    }

    .breadcrumb-item a {
        color: var(--color-text-link);
    }

    /* Spinners */
    .spinner-border {
        color: var(--color-primary);
    }

    /* Custom NoQ5 Components */
    .sf-card {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border-primary) !important;
        color: var(--color-text-primary) !important;
    }

    .sf-card:hover {
        background-color: var(--color-surface-hover) !important;
    }

    .enhanced-data-card {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border-primary) !important;
        color: var(--color-text-primary) !important;
    }

    .enhanced-data-card:has(.enhanced-card-checkbox:checked) {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.25) !important;
    }

    /* Additional text elements that might be black */
    p, span, div, h1, h2, h3, h4, h5, h6 {
        color: var(--color-text-primary);
    }

    /* Specific overrides for stubborn elements */
    .text-muted {
        color: var(--color-text-secondary) !important;
    }

    .small, small {
        color: var(--color-text-secondary) !important;
    }

    /* Links */
    a {
        color: var(--color-text-link) !important;
    }

    a:hover {
        color: var(--color-text-link-hover) !important;
    }

    /* Bootstrap utility overrides */
    .bg-white {
        background-color: var(--color-surface) !important;
    }

    .bg-light {
        background-color: var(--color-surface-elevated) !important;
    }

    .bg-dark {
        background-color: var(--color-surface) !important;
    }

    /* Card specific overrides */
    .card-title {
        color: var(--color-text-primary) !important;
    }

    .card-text {
        color: var(--color-text-primary) !important;
    }

    .card-subtitle {
        color: var(--color-text-secondary) !important;
    }

    /* List items */
    .list-group-item {
        color: var(--color-text-primary) !important;
    }

    /* Table elements */
    .table td, .table th {
        color: var(--color-text-primary) !important;
        border-color: var(--color-border-primary) !important;
    }

    .table-striped > tbody > tr:nth-of-type(odd) > td,
    .table-striped > tbody > tr:nth-of-type(odd) > th {
        background-color: var(--color-surface-elevated) !important;
    }

    /* CRM Mode Indicators */
    .crm-mode-indicator.hubspot {
        background-color: var(--color-hubspot-orange);
    }

    .crm-mode-indicator.salesforce {
        background-color: var(--color-salesforce-blue);
    }

    /* Data Provenance Legend */
    .data-provenance-legend {
        background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%);
        border-color: var(--color-border-primary);
    }

    /* Loading States */
    .loading-overlay {
        background-color: rgba(18, 18, 18, 0.9);
        color: var(--color-text-primary);
    }

    .loading-overlay .spinner {
        color: var(--color-primary);
    }

    /* Scrollbars (Webkit) */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--color-surface);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-border-secondary);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-tertiary);
    }
}

/* ===== DARK MODE COMPONENT OVERRIDES (Manual toggle) ===== */
html[data-theme="dark"] {
    /* Body and HTML */
    body {
        background-color: var(--color-bg-primary);
        color: var(--color-text-primary);
    }
    .card { background-color: var(--color-surface); border-color: var(--color-border-primary); }
    .modal-content { background-color: var(--color-surface); color: var(--color-text-primary); }
    .navbar { background-color: var(--color-nav-bg) !important; }
    .navbar a, .navbar .nav-link, .navbar-brand, .navbar-brand-text { color: var(--color-nav-text) !important; }
    .dropdown-menu { background-color: var(--color-surface-elevated); border-color: var(--color-border-primary); }
    .form-control, .form-select { background-color: var(--color-input-bg) !important; border-color: var(--color-input-border) !important; color: var(--color-input-text) !important; }
    .form-control::placeholder { color: var(--color-input-placeholder) !important; }
    .btn-primary:not(.crm-hubspot-btn):not(.crm-salesforce-btn) {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #fff !important;
    }

    .crm-hubspot-btn {
        background-color: var(--crm-hubspot) !important;
        border-color: var(--crm-hubspot) !important;
        color: #fff !important;
    }

    .crm-salesforce-btn {
        background-color: var(--crm-salesforce) !important;
        border-color: var(--crm-salesforce) !important;
        color: #fff !important;
    }

    .crm-mode-pill {
        background: rgba(33, 39, 52, 0.85);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    .crm-mode-option {
        color: rgba(255, 255, 255, 0.7);
    }

    .crm-mode-option:hover {
        color: rgba(255, 255, 255, 0.9);
    }

    .crm-mode-option.active {
        color: #fff;
    }

    .nav-tabs .nav-link {
        color: var(--color-text-secondary);
    }

    .nav-tabs .nav-link.active {
        background-color: var(--crm-accent-color);
        border-color: var(--crm-accent-color);
        color: #fff;
    }

    .nav-tabs .nav-link:hover {
        color: var(--crm-accent-color);
    }
}

/* ===== DARK MODE ACCESSIBILITY ENHANCEMENTS ===== */

@media (prefers-color-scheme: dark) {
    /* Ensure sufficient contrast for text */
    .text-muted {
        color: var(--color-text-secondary) !important;
    }

    /* Focus indicators */
    *:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* High contrast borders for important elements */
    .btn:focus-visible,
    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25);
    }

    /* Ensure links are visible */
    a {
        color: var(--color-text-link);
    }

    a:hover {
        color: var(--color-text-link-hover);
    }

    /* Code blocks */
    code {
        background-color: var(--color-surface-elevated);
        color: var(--color-text-primary);
    }

    pre {
        background-color: var(--color-surface-elevated);
        color: var(--color-text-primary);
        border-color: var(--color-border-primary);
    }
}

html[data-theme="dark"] {
    /* Ensure sufficient contrast for text */
    .text-muted { color: var(--color-text-secondary) !important; }
    .link-secondary { color: var(--color-text-link) !important; }
}

@media (prefers-color-scheme: dark) {
    .home-input-panel,
    .crm-current-column,
    .crm-changes-column {
        background: linear-gradient(180deg, rgba(33, 39, 52, 0.96) 0%, rgba(27, 33, 44, 0.94) 75%);
        border-color: rgba(148, 163, 184, 0.14);
        box-shadow: var(--shadow-lg);
    }

    .crm-current-column,
    .crm-changes-column {
        border-top-color: var(--crm-accent-color);
    }

    .home-input-panel {
        border-color: rgba(148, 163, 184, 0.12);
    }

    .preview-help-modal {
        background: var(--color-surface);
        color: var(--color-text-primary);
        border-color: rgba(148, 163, 184, 0.18);
        box-shadow: 0 20px 45px rgba(6, 11, 21, 0.55);
    }

    .preview-help-backdrop {
        background: rgba(3, 6, 13, 0.7);
        backdrop-filter: blur(4px);
    }

    .preview-help-steps li {
        color: var(--color-text-secondary);
    }

    .preview-help-steps li::before {
        background: linear-gradient(135deg, var(--crm-accent-color) 0%, rgba(255, 255, 255, 0.25) 100%);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
    }
}

html[data-theme="dark"] {
    .home-input-panel,
    .crm-current-column,
    .crm-changes-column {
        background: linear-gradient(180deg, rgba(33, 39, 52, 0.96) 0%, rgba(27, 33, 44, 0.94) 75%);
        border-color: rgba(148, 163, 184, 0.14);
        box-shadow: var(--shadow-lg);
    }

    .crm-current-column,
    .crm-changes-column {
        border-top-color: var(--crm-accent-color);
    }

    .home-input-panel {
        border-color: rgba(148, 163, 184, 0.12);
    }

    .preview-help-modal {
        background: var(--color-surface);
        color: var(--color-text-primary);
        border-color: rgba(148, 163, 184, 0.18);
        box-shadow: 0 20px 45px rgba(6, 11, 21, 0.55);
    }

    .preview-help-backdrop {
        background: rgba(3, 6, 13, 0.7);
        backdrop-filter: blur(4px);
    }

    .preview-help-steps li {
        color: var(--color-text-secondary);
    }

    .preview-help-steps li::before {
        background: linear-gradient(135deg, var(--crm-accent-color) 0%, rgba(255, 255, 255, 0.25) 100%);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
    }
}

/* ===== DARK MODE PRINT STYLES ===== */

@media print and (prefers-color-scheme: dark) {
    * {
        background: white !important;
        color: black !important;
    }
}

@media print {
    html[data-theme="dark"] * {
        background: white !important;
        color: black !important;
    }
}