/* * SEO AutoPilot — Dashboard Theme System * Light/Dark mode via [data-theme="light"] on * Comprehensive light theme with !important overrides for inline styles */ /* ==================== INTER FONT ==================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ==================== DARK THEME (default) ==================== */ :root { --dash-bg: #0f0f1a; --dash-bg-alt: #1a1a2e; --dash-sidebar-from: #1a1a2e; --dash-sidebar-to: #0f0f1a; --dash-panel-bg: #1a1a2e; --dash-panel-border: #252540; --dash-panel-hover: #1a1a2e; --dash-input-bg: #141420; --dash-input-border: #303052; --dash-stat-bg: #1a1a2e; --dash-stat-border: #252540; --dash-text-bright: #ffffff; --dash-text-primary: #e2e2f5; --dash-text-secondary: #a0a0c0; --dash-text-muted: #6c6c8a; --dash-text-dim: #3a3a5a; --dash-border-subtle: rgba(255,255,255,0.03); --dash-border-light: #252540; --dash-row-hover: rgba(207,254,37,0.02); --dash-overlay-bg: rgba(0,0,0,0.6); --dash-toast-bg: #1a1a2e; --dash-shadow: 0 8px 32px rgba(0,0,0,0.3); --dash-purple: #2563eb; --dash-purple-dim: rgba(207,254,37,0.06); --dash-purple-border: rgba(207,254,37,0.15); --dash-cyan: #7986cb; --dash-green: #10b981; --dash-red: #ef4444; --dash-amber: #fbbf24; } /* ==================== LIGHT THEME VARIABLES ==================== Dit is de ENIGE plek om light mode kleuren aan te passen. ============================================================== */ [data-theme="light"] { --dash-bg: #f5f5f7; --dash-bg-alt: #ffffff; --dash-sidebar-from: #ffffff; --dash-sidebar-to: #ffffff; --dash-panel-bg: #ffffff; --dash-panel-border: #e8e8ee; --dash-panel-hover: #ffffff; --dash-input-bg: #ffffff; --dash-input-border: #d0d0da; --dash-stat-bg: #ffffff; --dash-stat-border: #e8e8ee; --dash-text-bright: #1a1a2e; --dash-text-primary: #2a2a4a; --dash-text-secondary: #6c6c8a; --dash-text-muted: #8a8a9a; --dash-text-dim: #b0b0ba; --dash-border-subtle: rgba(0,0,0,0.04); --dash-border-light: #e8e8ee; --dash-row-hover: rgba(26,26,46,0.02); --dash-overlay-bg: rgba(0,0,0,0.4); --dash-toast-bg: #ffffff; --dash-shadow: 0 2px 8px rgba(0,0,0,0.06); --dash-purple: #1a1a2e; --dash-purple-dim: rgba(26,26,46,0.04); --dash-purple-border: rgba(26,26,46,0.1); --dash-cyan: #5d5fef; --dash-green: #059669; --dash-red: #dc2626; --dash-amber: #d97706; } /* ================================================================== SECTION 1: LAYOUT — body, main content, top bar ================================================================== */ [data-theme="light"] body { background: var(--dash-bg) !important; color: var(--dash-text-primary) !important; } [data-theme="light"] .main-content, [data-theme="light"] .main-wrap { background: var(--dash-bg) !important; color: var(--dash-text-primary) !important; } [data-theme="light"] .top-bar { background: transparent !important; border-bottom: none !important; backdrop-filter: none; } [data-theme="light"] .top-bar h1 { color: var(--dash-text-bright) !important; } [data-theme="light"] .top-bar .sub { color: var(--dash-text-muted) !important; } [data-theme="light"] .page-title { color: var(--dash-text-bright) !important; } /* ================================================================== SECTION 2: SIDEBAR — warm cream with dark text (calm, minimal) ================================================================== */ [data-theme="light"] .sidebar { background: #ffffff !important; border-right: 1px solid rgba(0, 0, 0, 0.07) !important; box-shadow: none !important; } [data-theme="light"] .sidebar-header { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .sidebar-logo { color: #1a1a2e !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #1a1a2e !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } [data-theme="light"] .sidebar-toggle { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #6c6c8a !important; } [data-theme="light"] .nav-item { color: #6c6c8a !important; font-weight: 500 !important; font-size: 0.95rem !important; } [data-theme="light"] .nav-item:hover { background: rgba(0, 0, 0, 0.04) !important; color: #1a1a2e !important; } [data-theme="light"] .nav-item.active { background: rgba(0, 0, 0, 0.06) !important; color: #1a1a2e !important; border-left-color: #1a1a2e !important; font-weight: 500 !important; } [data-theme="light"] .nav-section-title, [data-theme="light"] .nav-section-label { color: #a0a0c0 !important; font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } [data-theme="light"] .nav-divider { background: rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .sidebar-footer { border-top-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .sidebar-user { border-top-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .user-info, [data-theme="light"] .user-info-bar { background: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .user-name { color: #1a1a2e !important; font-weight: 500 !important; } [data-theme="light"] .user-email { color: #a0a0c0 !important; } /* ================================================================== SECTION 3: PANELS & CARDS ================================================================== */ [data-theme="light"] .panel { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } [data-theme="light"] .panel:hover { background: var(--dash-panel-hover) !important; } [data-theme="light"] .panel-header { border-bottom-color: var(--dash-border-subtle) !important; } [data-theme="light"] .panel-title { color: var(--dash-text-bright) !important; } [data-theme="light"] .panel-sub { color: var(--dash-text-secondary) !important; } [data-theme="light"] .panel-badge { background: rgba(207, 254, 37, 0.08) !important; color: var(--dash-purple) !important; } /* ================================================================== SECTION 4: STAT BOXES ================================================================== */ [data-theme="light"] .stat-box { background: var(--dash-stat-bg) !important; border-color: var(--dash-stat-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="light"] .stat-box:hover { border-color: rgba(207, 254, 37, 0.2) !important; background: rgba(255, 255, 255, 1) !important; } [data-theme="light"] .stat-num { color: var(--dash-text-bright) !important; -webkit-text-fill-color: var(--dash-text-bright) !important; } [data-theme="light"] .stat-label { color: var(--dash-text-secondary) !important; } [data-theme="light"] .stat-muted { color: var(--dash-text-muted) !important; -webkit-text-fill-color: var(--dash-text-muted) !important; } /* ================================================================== SECTION 5: DATA TABLES ================================================================== */ [data-theme="light"] .data-table { background: transparent !important; } [data-theme="light"] .data-table th { color: var(--dash-text-secondary) !important; background: rgba(207, 254, 37, 0.03) !important; border-bottom-color: var(--dash-border-light) !important; } [data-theme="light"] .data-table td { border-bottom-color: var(--dash-border-subtle) !important; color: var(--dash-text-primary) !important; background: transparent !important; } [data-theme="light"] .data-table tr:hover td { background: rgba(207, 254, 37, 0.04) !important; } [data-theme="light"] .data-table tr.selected td { background: rgba(207, 254, 37, 0.06) !important; } /* ================================================================== SECTION 6: BUTTONS — all variants ================================================================== */ /* Action buttons (table row) */ [data-theme="light"] .act-btn { border-color: var(--dash-border-light) !important; color: var(--dash-text-secondary) !important; background: rgba(0, 0, 0, 0.02) !important; } [data-theme="light"] .act-btn:hover { background: rgba(207, 254, 37, 0.1) !important; color: var(--dash-purple) !important; border-color: rgba(207, 254, 37, 0.2) !important; } [data-theme="light"] .act-btn.act-optimize { color: var(--dash-cyan) !important; } [data-theme="light"] .act-btn.act-edit { color: var(--dash-text-primary) !important; } [data-theme="light"] .act-btn.act-publish { color: var(--dash-green) !important; } [data-theme="light"] .act-btn.act-view { color: var(--dash-cyan) !important; } [data-theme="light"] .act-btn.act-delete { color: var(--dash-red) !important; } /* Primary buttons — blue with white text */ [data-theme="light"] .btn-primary-sm, [data-theme="light"] .btn-primary { background: var(--c-btn-primary-bg) !important; color: var(--c-btn-primary-text) !important; border-color: transparent !important; box-shadow: 0 1px 3px rgba(37,99,235,0.15); } /* Success buttons — blue */ [data-theme="light"] .btn-success-sm { background: var(--c-btn-primary-bg) !important; color: var(--c-btn-primary-text) !important; } /* Ghost/secondary buttons */ [data-theme="light"] .btn-ghost-sm, [data-theme="light"] .btn-secondary, [data-theme="light"] .btn-sm-secondary { background: rgba(0, 0, 0, 0.03) !important; color: var(--dash-text-secondary) !important; border-color: var(--dash-border-light) !important; } [data-theme="light"] .btn-ghost-sm:hover, [data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-sm-secondary:hover { background: rgba(37, 99, 235, 0.06) !important; color: var(--c-btn-primary-bg) !important; border-color: rgba(37, 99, 235, 0.2) !important; } /* Danger buttons */ [data-theme="light"] .btn-danger-sm, [data-theme="light"] .btn-sm-danger { background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; } [data-theme="light"] .btn-danger-sm:hover, [data-theme="light"] .btn-sm-danger:hover { background: rgba(220, 38, 38, 0.15) !important; } /* Scan/action button — blue */ [data-theme="light"] .btn-scan { background: var(--c-btn-primary-bg) !important; color: var(--c-btn-primary-text) !important; box-shadow: 0 1px 3px rgba(37,99,235,0.15); } /* ================================================================== SECTION 7: FORMS — inputs, selects, textareas, toolbars ================================================================== */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: var(--dash-input-bg) !important; border-color: var(--dash-input-border) !important; color: var(--dash-text-primary) !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: rgba(207, 254, 37, 0.4) !important; box-shadow: 0 0 0 3px rgba(207, 254, 37, 0.08) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--dash-text-muted) !important; } [data-theme="light"] input[disabled], [data-theme="light"] select[disabled], [data-theme="light"] textarea[disabled] { background: rgba(240, 240, 250, 0.6) !important; color: var(--dash-text-muted) !important; } [data-theme="light"] .toolbar select, [data-theme="light"] .toolbar input { background: var(--dash-input-bg) !important; border-color: var(--dash-input-border) !important; color: var(--dash-text-primary) !important; } [data-theme="light"] .toolbar label { color: var(--dash-text-secondary) !important; } [data-theme="light"] .form-label { color: var(--dash-text-secondary) !important; } [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea { background: var(--dash-input-bg) !important; color: var(--dash-text-primary) !important; border-color: var(--dash-input-border) !important; } [data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus, [data-theme="light"] .form-textarea:focus { border-color: rgba(26, 26, 46, 0.4) !important; box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08) !important; } [data-theme="light"] .form-select option { background: #ffffff !important; color: #1a1a2e !important; } /* Inline color:white on selects/inputs */ [data-theme="light"] select[style*="color: white"], [data-theme="light"] select[style*="color:white"], [data-theme="light"] input[style*="color: white"], [data-theme="light"] input[style*="color:white"] { color: var(--dash-text-primary) !important; } [data-theme="light"] .form-input[disabled] { background: rgba(240, 240, 250, 0.6) !important; color: var(--dash-text-muted) !important; } [data-theme="light"] .form-hint { color: var(--dash-text-muted) !important; } /* ================================================================== SECTION 8: MODALS & OVERLAYS ================================================================== */ [data-theme="light"] .modal-overlay, [data-theme="light"] .confirm-overlay, [data-theme="light"] .modal { background: rgba(0, 0, 0, 0.35) !important; } [data-theme="light"] .modal-content, [data-theme="light"] .confirm-box, [data-theme="light"] .schedule-panel, [data-theme="light"] .create-modal { background: #ffffff !important; border-color: var(--dash-panel-border) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important; color: var(--dash-text-primary) !important; } [data-theme="light"] .modal-title { color: var(--dash-text-bright) !important; } [data-theme="light"] .modal-sub, [data-theme="light"] .modal-desc { color: var(--dash-text-secondary) !important; } /* ================================================================== SECTION 9: STATUS & SCORE BADGES ================================================================== */ [data-theme="light"] .status-draft { background: rgba(108, 108, 138, 0.08) !important; color: #6c6c8a !important; } [data-theme="light"] .status-publish { background: rgba(5, 150, 105, 0.08) !important; color: #059669 !important; } [data-theme="light"] .status-scheduled { background: rgba(26, 26, 46, 0.08) !important; color: #6c6c8a !important; } [data-theme="light"] .score-good { background: rgba(5, 150, 105, 0.08) !important; color: #059669 !important; } [data-theme="light"] .score-mid { background: rgba(245, 158, 11, 0.08) !important; color: #d97706 !important; } [data-theme="light"] .score-bad { background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; } /* ================================================================== SECTION 10: CATEGORY BADGES & PICKER ================================================================== */ [data-theme="light"] .cat-badge { background: rgba(93, 95, 239, 0.06) !important; color: #0891b2 !important; border-color: rgba(93, 95, 239, 0.15) !important; } [data-theme="light"] .cat-picker { background: #ffffff !important; border-color: var(--dash-panel-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; } [data-theme="light"] .cat-picker-item { color: var(--dash-text-primary) !important; } [data-theme="light"] .cat-picker-item:hover { background: rgba(207, 254, 37, 0.06) !important; } /* ================================================================== SECTION 11: FILTER PILLS & CHIPS ================================================================== */ [data-theme="light"] .filter-pill { border-color: var(--dash-border-light) !important; background: rgba(0, 0, 0, 0.02) !important; color: var(--dash-text-secondary) !important; } [data-theme="light"] .filter-pill.active { background: rgba(207, 254, 37, 0.1) !important; color: var(--dash-purple) !important; border-color: rgba(207, 254, 37, 0.25) !important; } [data-theme="light"] .filter-chip { background: rgba(0, 0, 0, 0.02) !important; color: var(--dash-text-secondary) !important; border-color: var(--dash-border-light) !important; } [data-theme="light"] .filter-chip.active { background: rgba(207, 254, 37, 0.1) !important; color: var(--dash-purple) !important; } /* ================================================================== SECTION 12: ARTICLE IDEAS — suggestion cards ================================================================== */ [data-theme="light"] .sug-card { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="light"] .sug-card:hover { border-color: rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .sug-title { color: var(--dash-text-bright) !important; } [data-theme="light"] .sug-keyword { color: var(--dash-cyan) !important; } [data-theme="light"] .sug-type { color: var(--dash-purple) !important; } [data-theme="light"] .sug-reasoning { background: rgba(0, 0, 0, 0.02) !important; border-left-color: rgba(0, 0, 0, 0.08) !important; color: var(--dash-text-secondary) !important; } [data-theme="light"] .sug-meta { color: var(--dash-text-muted) !important; } /* ================================================================== SECTION 13: ANALYTICS — alerts, opportunities, trends ================================================================== */ [data-theme="light"] .alert-card { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } [data-theme="light"] .alert-title { color: var(--dash-text-bright) !important; } [data-theme="light"] .alert-message { color: var(--dash-text-secondary) !important; } [data-theme="light"] .alert-action { color: var(--dash-purple) !important; } [data-theme="light"] .opp-card { background: rgba(207, 254, 37, 0.03) !important; border-color: var(--dash-border-light) !important; } [data-theme="light"] .opp-card:hover { border-color: rgba(207, 254, 37, 0.2) !important; } [data-theme="light"] .opp-query { color: var(--dash-text-bright) !important; } [data-theme="light"] .opp-reason { color: var(--dash-text-secondary) !important; } [data-theme="light"] .opp-stats { color: var(--dash-text-muted) !important; } [data-theme="light"] .opp-stats .val { color: var(--dash-text-primary) !important; } [data-theme="light"] .opp-btn { background: rgba(207, 254, 37, 0.08) !important; color: var(--dash-purple) !important; border-color: rgba(207, 254, 37, 0.2) !important; } /* ================================================================== SECTION 14: KENNISBANK ================================================================== */ [data-theme="light"] .kb-stat-card { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; } [data-theme="light"] .kb-article-card { background: rgba(0, 0, 0, 0.02) !important; border-color: var(--dash-border-light) !important; } [data-theme="light"] .faq-q { color: var(--dash-text-bright) !important; } [data-theme="light"] .faq-arrow { color: var(--dash-text-muted) !important; } [data-theme="light"] .faq-a { color: var(--dash-text-secondary) !important; } /* ================================================================== SECTION 15: LINKBUILDING ================================================================== */ [data-theme="light"] .dir-item { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; } [data-theme="light"] .dir-name { color: var(--dash-text-bright) !important; } [data-theme="light"] .dir-desc { color: var(--dash-text-secondary) !important; } [data-theme="light"] .priority-name { color: var(--dash-text-bright) !important; } [data-theme="light"] .nap-label { color: var(--dash-text-muted) !important; } [data-theme="light"] .nap-value { color: var(--dash-text-primary) !important; } [data-theme="light"] .nap-input { background: var(--dash-input-bg) !important; color: var(--dash-text-primary) !important; border-color: var(--dash-input-border) !important; } /* ================================================================== SECTION 16: NETWORK ================================================================== */ [data-theme="light"] .hero { background: linear-gradient(135deg, rgba(207,254,37,0.06), rgba(8,145,178,0.04)) !important; } [data-theme="light"] .hero h2 { color: var(--dash-text-bright) !important; } [data-theme="light"] .hero p { color: var(--dash-text-secondary) !important; } [data-theme="light"] .hero-feature-text { color: var(--dash-text-primary) !important; } [data-theme="light"] .opt-in-title { color: var(--dash-text-bright) !important; } [data-theme="light"] .opt-in-sub { color: var(--dash-text-secondary) !important; } [data-theme="light"] .cat-name { color: var(--dash-text-primary) !important; } [data-theme="light"] .profile-label { color: var(--dash-text-muted) !important; } [data-theme="light"] .profile-value { color: var(--dash-text-primary) !important; } [data-theme="light"] .req-text { color: var(--dash-text-primary) !important; } [data-theme="light"] .req-text.dimmed { color: var(--dash-text-muted) !important; } [data-theme="light"] .review-input-row input { background: var(--dash-input-bg) !important; color: var(--dash-text-primary) !important; } /* ================================================================== SECTION 17: ACCOUNT ================================================================== */ [data-theme="light"] .check-label { color: var(--dash-text-primary) !important; } [data-theme="light"] .check-desc { color: var(--dash-text-secondary) !important; } [data-theme="light"] .pkg-label { color: var(--dash-text-muted) !important; } [data-theme="light"] .checklist-item { color: var(--dash-text-secondary) !important; } /* ================================================================== SECTION 18: ONBOARDING ================================================================== */ [data-theme="light"] .step-indicator { background: rgba(255, 255, 255, 0.9) !important; border-color: var(--dash-panel-border) !important; } [data-theme="light"] .step-indicator .step-label { color: var(--dash-text-secondary) !important; } [data-theme="light"] .step-indicator .step.done { background: rgba(5, 150, 105, 0.12) !important; color: #059669 !important; } [data-theme="light"] .card { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } [data-theme="light"] .card h2 { color: var(--dash-text-bright) !important; } [data-theme="light"] .form-group label { color: var(--dash-text-primary) !important; } [data-theme="light"] .province-check { background: rgba(0, 0, 0, 0.02) !important; color: var(--dash-text-secondary) !important; border-color: var(--dash-border-light) !important; } [data-theme="light"] .province-check.selected { background: rgba(207, 254, 37, 0.08) !important; color: var(--dash-purple) !important; border-color: rgba(207, 254, 37, 0.25) !important; } [data-theme="light"] .oauth-button { background: rgba(66, 133, 244, 0.06) !important; color: #1a73e8 !important; border-color: rgba(66, 133, 244, 0.2) !important; } /* ================================================================== SECTION 19: LOADING, SKELETON, EMPTY STATES ================================================================== */ [data-theme="light"] .skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(207,254,37,0.04) 50%, rgba(0,0,0,0.04) 75%) !important; } [data-theme="light"] .loading-progress { background: rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .loading-step { color: var(--dash-text-muted) !important; } [data-theme="light"] .loading-step.active { color: var(--dash-cyan) !important; } [data-theme="light"] .empty-state { color: var(--dash-text-secondary) !important; } /* ================================================================== SECTION 20: TOAST / NOTIFICATIONS ================================================================== */ [data-theme="light"] .toast { background: #ffffff !important; color: var(--dash-text-primary) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important; border-color: var(--dash-border-light) !important; } /* ================================================================== SECTION 21: QUOTA BARS & PROGRESS ================================================================== */ [data-theme="light"] .quota-bar, [data-theme="light"] [class*="quota"] { background: var(--dash-panel-bg) !important; border-color: var(--dash-panel-border) !important; } /* ================================================================== SECTION 22: SCROLLBAR ================================================================== */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--dash-bg); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(207, 254, 37, 0.2); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(207, 254, 37, 0.35); } /* ================================================================== SECTION 23: CHART.JS ================================================================== */ [data-theme="light"] canvas { filter: none; } /* ================================================================== SECTION 24: INLINE STYLE OVERRIDES (CSS fallback) The main fix is in theme.js which replaces inline styles via JS. These CSS selectors act as a safety net. ================================================================== */ /* --- Dark backgrounds → light --- */ /* Solid hex dark backgrounds → crème */ [data-theme="light"] [style*="background:#0f0f1a"], [data-theme="light"] [style*="background: #0f0f1a"], [data-theme="light"] [style*="background:#1a1a2e"], [data-theme="light"] [style*="background: #1a1a2e"] { background: #ffffff !important; color: var(--dash-text-primary) !important; } /* Match rgba dark values regardless of spacing format */ [data-theme="light"] [style*="rgba(26, 26, 46"], [data-theme="light"] [style*="rgba(30,41,59"] { background: var(--dash-panel-bg) !important; } [data-theme="light"] [style*="rgba(15, 15, 26"], [data-theme="light"] [style*="rgba(15,23,42"] { background: var(--dash-input-bg) !important; } /* Black semi-transparent backgrounds */ [data-theme="light"] [style*="background"][style*="rgba(0, 0, 0, 0.1"], [data-theme="light"] [style*="background"][style*="rgba(0,0,0,0.1"], [data-theme="light"] [style*="background"][style*="rgba(0, 0, 0, 0.15"], [data-theme="light"] [style*="background"][style*="rgba(0,0,0,0.15"], [data-theme="light"] [style*="background"][style*="rgba(0, 0, 0, 0.2"], [data-theme="light"] [style*="background"][style*="rgba(0,0,0,0.2"], [data-theme="light"] [style*="background"][style*="rgba(0, 0, 0, 0.3"], [data-theme="light"] [style*="background"][style*="rgba(0,0,0,0.3"] { background: rgba(207, 254, 37, 0.04) !important; } /* White-alpha backgrounds */ [data-theme="light"] [style*="background"][style*="rgba(255, 255, 255, 0.0"], [data-theme="light"] [style*="background"][style*="rgba(255,255,255,0.0"] { background: rgba(0, 0, 0, 0.04) !important; } /* --- Light text on dark → dark text on light --- */ /* #e2e2f5 — primary text (slate-200, unreadable on white) */ [data-theme="light"] [style*="color: #e2e2f5"], [data-theme="light"] [style*="color:#e2e2f5"] { color: var(--dash-text-primary) !important; } /* #e2e2f5 — bright headings (slate-100) */ [data-theme="light"] [style*="color: #e2e2f5"], [data-theme="light"] [style*="color:#e2e2f5"] { color: var(--dash-text-bright) !important; } /* #a0a0c0 — secondary text (slate-300) */ [data-theme="light"] [style*="color: #a0a0c0"], [data-theme="light"] [style*="color:#a0a0c0"] { color: var(--dash-text-primary) !important; } /* #a0a0c0 — secondary (slate-400, low contrast on white) */ [data-theme="light"] [style*="color: #a0a0c0"], [data-theme="light"] [style*="color:#a0a0c0"] { color: var(--dash-text-secondary) !important; } /* #6c6c8a — muted text (slate-500, ok on white but darken slightly) */ [data-theme="light"] [style*="color: #6c6c8a"], [data-theme="light"] [style*="color:#6c6c8a"] { color: #6c6c8a !important; } /* #6c6c8a — dim text (slate-600) */ [data-theme="light"] [style*="color: #6c6c8a"], [data-theme="light"] [style*="color:#6c6c8a"] { color: #6c6c8a !important; } /* #2a2a4a — very dim (slate-700) */ [data-theme="light"] [style*="color: #2a2a4a"], [data-theme="light"] [style*="color:#2a2a4a"] { color: var(--dash-text-muted) !important; } /* white text */ [data-theme="light"] [style*="color: #fff"], [data-theme="light"] [style*="color:#fff"], [data-theme="light"] [style*="color: white"], [data-theme="light"] [style*="color:white"] { /* Only override if it's NOT on a colored/gradient button */ } /* #2563eb — light purple → neutral gray */ [data-theme="light"] [style*="color: #2563eb"], [data-theme="light"] [style*="color:#2563eb"] { color: #6c6c8a !important; } /* #2563eb — purple → neutral gray */ [data-theme="light"] [style*="color: #2563eb"], [data-theme="light"] [style*="color:#2563eb"] { color: #6c6c8a !important; } /* #00ff9d — neon green → muted (only for success context) */ [data-theme="light"] [style*="color: #00ff9d"], [data-theme="light"] [style*="color:#00ff9d"] { color: #047857 !important; } /* #7986cb — cyan → neutral gray */ [data-theme="light"] [style*="color: #7986cb"], [data-theme="light"] [style*="color:#7986cb"] { color: #6c6c8a !important; } /* #10b981 — green → muted green */ [data-theme="light"] [style*="color: #10b981"], [data-theme="light"] [style*="color:#10b981"] { color: #047857 !important; } /* #fbbf24 — amber → muted */ [data-theme="light"] [style*="color: #fbbf24"], [data-theme="light"] [style*="color:#fbbf24"] { color: #92400e !important; } /* #ef4444 — red → muted red */ [data-theme="light"] [style*="color: #ef4444"], [data-theme="light"] [style*="color:#ef4444"] { color: #b91c1c !important; } /* --- Borders with white-alpha or dark values --- */ [data-theme="light"] [style*="border"][style*="rgba(255, 255, 255"], [data-theme="light"] [style*="border"][style*="rgba(255,255,255"] { border-color: var(--dash-border-light) !important; } /* -webkit-text-fill-color — no gradient text in calm mode */ [data-theme="light"] [style*="-webkit-text-fill-color: transparent"] { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #1a1a2e !important; } [data-theme="light"] [style*="-webkit-text-fill-color: #2a2a4a"], [data-theme="light"] [style*="-webkit-text-fill-color:#2a2a4a"] { -webkit-text-fill-color: var(--dash-text-muted) !important; } /* ================================================================== SECTION 25: NOTIFICATION SYSTEM (JS-generated inline) ================================================================== */ [data-theme="light"] [style*="position:fixed"][style*="background"], [data-theme="light"] [style*="position: fixed"][style*="background"] { color: var(--dash-text-primary) !important; } /* ================================================================== SECTION 27: LINKS ================================================================== */ [data-theme="light"] a { color: var(--c-btn-primary-bg); } [data-theme="light"] a[style*="background"] { color: var(--c-btn-primary-text) !important; } [data-theme="light"] a:hover { color: var(--c-btn-primary-hover); } /* ================================================================== SECTION 28: MISSING CLASS OVERRIDES Covers classes defined in HTML