/* ═══════════════════════════════════════════════════════════════ GAVIO — LIGHT MODE OVERRIDES v3.0 Active when (toggled via theme-toggle.js) Covers ALL post-login pages: • "Born dark" pages → overview, settings, integrations, help, admin • "Dark override" pages → index.html (Google Ads), seo-dashboard.html html.light-mode selector beats both unscoped !important dark overrides AND native dark rgba() styles. Sidebar keeps its dark brand gradient — everything else goes light. ═══════════════════════════════════════════════════════════════ */ /* ── Toggle icon visibility ──────────────────────────────────── */ html:not(.light-mode) .theme-icon-light { display: none !important; } html.light-mode .theme-icon-dark { display: none !important; } /* ══════════════════════════════════════════════════════════════ 1. FOUNDATIONS ══════════════════════════════════════════════════════════════ */ html.light-mode body { background: #f1f5f9 !important; color: #1e293b !important; } /* ══════════════════════════════════════════════════════════════ 2. SIDEBAR — stays dark, protect every element ══════════════════════════════════════════════════════════════ */ html.light-mode #sidebar, html.light-mode #sidebar *, html.light-mode .sidebar-overlay { transition: none !important; } html.light-mode #sidebar .text-white { color: #fff !important; } html.light-mode #sidebar .text-white\/90 { color: rgba(255,255,255,0.9) !important; } html.light-mode #sidebar .text-white\/80 { color: rgba(255,255,255,0.8) !important; } html.light-mode #sidebar .text-white\/55 { color: rgba(255,255,255,0.55) !important; } html.light-mode #sidebar .text-white\/50 { color: rgba(255,255,255,0.5) !important; } html.light-mode #sidebar .text-white\/45 { color: rgba(255,255,255,0.45) !important; } html.light-mode #sidebar .text-white\/40 { color: rgba(255,255,255,0.4) !important; } html.light-mode #sidebar .text-white\/30 { color: rgba(255,255,255,0.3) !important; } html.light-mode #sidebar .border-white\/10 { border-color: rgba(255,255,255,0.1) !important; } html.light-mode #sidebar .border-white\/5 { border-color: rgba(255,255,255,0.05) !important; } html.light-mode #sidebar .text-brand-300 { color: #84ABFF !important; } html.light-mode #sidebar .bg-brand-500 { background-color: #1A56A8 !important; } html.light-mode #sidebar .text-green-400 { color: #4ade80 !important; } html.light-mode #sidebar .bg-green-500\/20 { background-color: rgba(34,197,94,0.2) !important; } html.light-mode #sidebar .bg-green-500\/15 { background-color: rgba(34,197,94,0.15) !important; } html.light-mode #sidebar .text-red-400 { color: #f87171 !important; } html.light-mode #sidebar nav { background: transparent !important; border-color: transparent !important; } html.light-mode #sidebar input { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; color: #fff !important; } html.light-mode #sidebar input::placeholder { color: rgba(255,255,255,0.3) !important; } /* ══════════════════════════════════════════════════════════════ 3. HEADER / TOP BAR ══════════════════════════════════════════════════════════════ */ html.light-mode header, html.light-mode header.sticky { background: rgba(255,255,255,0.88) !important; border-color: #e2e8f0 !important; backdrop-filter: blur(16px) saturate(1.6) !important; -webkit-backdrop-filter: blur(16px) saturate(1.6) !important; } /* Admin nav bar (pages without sidebar) */ html.light-mode body > div > nav, html.light-mode .min-h-full > nav { background: rgba(255,255,255,0.88) !important; border-color: #e2e8f0 !important; color: #1e293b !important; backdrop-filter: blur(16px) saturate(1.6) !important; } html.light-mode .min-h-full > nav .text-white { color: #1e293b !important; } /* Header text */ html.light-mode header .text-white\/80, html.light-mode header .text-white\/50, html.light-mode header .text-white\/40 { color: #475569 !important; } html.light-mode header .hover\:text-white:hover { color: #1e293b !important; } /* Toggle & lang buttons in header */ html.light-mode header button.text-white\/40, html.light-mode header .text-white\/40 { color: #64748b !important; } html.light-mode header .border-white\/10 { border-color: #e2e8f0 !important; } html.light-mode header .hover\:border-brand-400\/30:hover { border-color: #93bbfd !important; } html.light-mode header .hover\:text-brand-300:hover { color: #1A56A8 !important; } /* ══════════════════════════════════════════════════════════════ 4. TEXT — white ↦ dark slate ══════════════════════════════════════════════════════════════ */ html.light-mode .text-white { color: #1e293b !important; } html.light-mode .text-white\/95 { color: #0f172a !important; } html.light-mode .text-white\/90 { color: #1e293b !important; } html.light-mode .text-white\/85 { color: #1e293b !important; } html.light-mode .text-white\/80 { color: #334155 !important; } html.light-mode .text-white\/70 { color: #475569 !important; } html.light-mode .text-white\/60 { color: #64748b !important; } html.light-mode .text-white\/55 { color: #64748b !important; } html.light-mode .text-white\/50 { color: #64748b !important; } html.light-mode .text-white\/45 { color: #94a3b8 !important; } html.light-mode .text-white\/40 { color: #94a3b8 !important; } html.light-mode .text-white\/35 { color: #94a3b8 !important; } html.light-mode .text-white\/30 { color: #cbd5e1 !important; } html.light-mode .text-white\/25 { color: #cbd5e1 !important; } html.light-mode .text-white\/20 { color: #e2e8f0 !important; } /* Brand text — darken for light bg */ html.light-mode .text-brand-300 { color: #1A56A8 !important; } html.light-mode .text-brand-400 { color: #144A94 !important; } html.light-mode .text-brand-500 { color: #1A56A8 !important; } html.light-mode .text-brand-600 { color: #144A94 !important; } html.light-mode .text-brand-700 { color: #0E3D80 !important; } html.light-mode .text-primary-600 { color: #144A94 !important; } html.light-mode .hover\:text-brand-300:hover { color: #144A94 !important; } html.light-mode .hover\:text-brand-600:hover { color: #0E3D80 !important; } html.light-mode .hover\:text-brand-700:hover { color: #0A2F66 !important; } /* Sidebar text-white protection (re-assert after global .text-white) */ html.light-mode #sidebar .text-white { color: #fff !important; } /* ══════════════════════════════════════════════════════════════ 5. BORDERS ══════════════════════════════════════════════════════════════ */ html.light-mode .border-white\/10 { border-color: #e2e8f0 !important; } html.light-mode .border-white\/5 { border-color: #f1f5f9 !important; } html.light-mode .border-white\/\[0\.06\] { border-color: #e2e8f0 !important; } html.light-mode .border-white\/\[0\.08\] { border-color: #e2e8f0 !important; } html.light-mode .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } html.light-mode .divide-white\/\[0\.06\] > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } /* Re-protect sidebar borders */ html.light-mode #sidebar .border-white\/10 { border-color: rgba(255,255,255,0.1) !important; } html.light-mode #sidebar .border-white\/5 { border-color: rgba(255,255,255,0.05) !important; } /* ══════════════════════════════════════════════════════════════ 6. SURFACE / BACKGROUND COLORS ══════════════════════════════════════════════════════════════ */ html.light-mode .bg-surface-600 { background: #f1f5f9 !important; } html.light-mode .bg-surface-600\/80 { background: rgba(241,245,249,0.92) !important; } html.light-mode .bg-surface-500 { background: #f8fafc !important; } html.light-mode .bg-surface-500\/80 { background: rgba(255,255,255,0.85) !important; } html.light-mode .bg-surface-400 { background: #f1f5f9 !important; } html.light-mode .bg-surface-300 { background: #e2e8f0 !important; } html.light-mode .bg-surface-200 { background: #e2e8f0 !important; } html.light-mode .bg-surface-100 { background: #f1f5f9 !important; } html.light-mode .bg-surface-50 { background: #f8fafc !important; } /* White-on-dark overlays → subtle light tints */ html.light-mode .bg-white\/\[0\.02\] { background: rgba(0,0,0,0.01) !important; } html.light-mode .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.015) !important; } html.light-mode .bg-white\/\[0\.05\] { background: rgba(0,0,0,0.02) !important; } html.light-mode .bg-white\/3 { background: rgba(0,0,0,0.015) !important; } html.light-mode .bg-white\/5 { background: rgba(0,0,0,0.02) !important; } html.light-mode .bg-white\/8 { background: rgba(0,0,0,0.03) !important; } html.light-mode .bg-white\/10 { background: rgba(0,0,0,0.04) !important; } html.light-mode .bg-white\/15 { background: rgba(0,0,0,0.05) !important; } html.light-mode .hover\:bg-white\/3:hover { background: #f8fafc !important; } html.light-mode .hover\:bg-white\/5:hover { background: #f1f5f9 !important; } html.light-mode .hover\:bg-white\/8:hover { background: #e2e8f0 !important; } html.light-mode .hover\:bg-white\/10:hover { background: #e2e8f0 !important; } html.light-mode .hover\:bg-white\/15:hover { background: #e2e8f0 !important; } html.light-mode .hover\:bg-white\/\[0\.03\]:hover { background: #f8fafc !important; } /* Brand bg tints */ html.light-mode .bg-brand-500\/10 { background: rgba(26,86,168,0.08) !important; } html.light-mode .bg-brand-500\/15 { background: rgba(26,86,168,0.1) !important; } html.light-mode .bg-brand-500\/20 { background: rgba(26,86,168,0.12) !important; } /* Status colour bg pills */ html.light-mode .bg-green-500\/10 { background: rgba(22,163,74,0.1) !important; } html.light-mode .bg-green-500\/15 { background: rgba(22,163,74,0.12) !important; } html.light-mode .bg-green-500\/20 { background: rgba(22,163,74,0.15) !important; } html.light-mode .bg-blue-500\/15 { background: rgba(59,130,246,0.1) !important; } html.light-mode .bg-amber-500\/10 { background: rgba(245,158,11,0.1) !important; } html.light-mode .bg-amber-500\/15 { background: rgba(245,158,11,0.1) !important; } html.light-mode .bg-amber-500\/20 { background: rgba(245,158,11,0.15) !important; } html.light-mode .bg-indigo-500\/10 { background: rgba(99,102,241,0.08) !important; } html.light-mode .bg-indigo-500\/15 { background: rgba(99,102,241,0.1) !important; } html.light-mode .bg-red-500\/10 { background: rgba(239,68,68,0.08) !important; } html.light-mode .bg-red-500\/15 { background: rgba(239,68,68,0.1) !important; } html.light-mode .bg-red-500\/20 { background: rgba(239,68,68,0.12) !important; } html.light-mode .bg-purple-500\/15 { background: rgba(139,92,246,0.1) !important; } html.light-mode .bg-emerald-500\/15 { background: rgba(16,185,129,0.1) !important; } /* Status text colors — keep vibrant, but darker for light bg */ html.light-mode .text-green-400 { color: #16a34a !important; } html.light-mode .text-blue-400 { color: #2563eb !important; } html.light-mode .text-amber-400 { color: #d97706 !important; } html.light-mode .text-amber-300 { color: #d97706 !important; } html.light-mode .text-indigo-400 { color: #4f46e5 !important; } html.light-mode .text-indigo-400\/60 { color: rgba(79,70,229,0.6) !important; } html.light-mode .text-purple-400 { color: #7c3aed !important; } html.light-mode .text-emerald-400 { color: #059669 !important; } html.light-mode .text-red-400 { color: #dc2626 !important; } html.light-mode .text-emerald-300 { color: #059669 !important; } /* Keep sidebar status colors dark-friendly */ html.light-mode #sidebar .text-green-400 { color: #4ade80 !important; } html.light-mode #sidebar .text-red-400 { color: #f87171 !important; } /* ══════════════════════════════════════════════════════════════ 7. GLASS CARDS — the signature card style ══════════════════════════════════════════════════════════════ */ html.light-mode .glass-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important; backdrop-filter: none !important; } html.light-mode .glass-card:hover { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04) !important; transform: translateY(-2px); } html.light-mode .glass-card-static { background: #ffffff !important; border: 1px solid #e2e8f0 !important; backdrop-filter: none !important; } /* ══════════════════════════════════════════════════════════════ 8. FORM INPUTS (dark-input, dark-select, dark-textarea) ══════════════════════════════════════════════════════════════ */ html.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(#sidebar input) { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode input::placeholder { color: #9ca3af !important; } html.light-mode #sidebar input::placeholder { color: rgba(255,255,255,0.3) !important; } html.light-mode select:not(#sidebar select) { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode select option { background: #ffffff !important; color: #1e293b !important; } html.light-mode textarea { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode textarea::placeholder { color: #9ca3af !important; } html.light-mode input[type="checkbox"] { accent-color: #1A56A8; } html.light-mode input[type="date"] { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode .dark-input { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode .dark-input::placeholder { color: #9ca3af !important; } html.light-mode .dark-input:focus { border-color: #1A56A8 !important; box-shadow: 0 0 0 3px rgba(26,86,168,0.12) !important; } html.light-mode .dark-select { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode .dark-select option { background: #ffffff !important; color: #1e293b !important; } html.light-mode .dark-select:focus { border-color: #1A56A8 !important; box-shadow: 0 0 0 3px rgba(26,86,168,0.12) !important; } html.light-mode .dark-textarea { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode .dark-textarea::placeholder { color: #9ca3af !important; } html.light-mode .dark-textarea:focus { border-color: #1A56A8 !important; box-shadow: 0 0 0 3px rgba(26,86,168,0.12) !important; } /* Inner panels (integrations) */ html.light-mode .inner-panel { background: #ffffff !important; border-color: #e2e8f0 !important; } /* SEO dashboard form inputs via main scope */ html.light-mode main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([contenteditable]), html.light-mode main select, html.light-mode main textarea { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; } html.light-mode main input::placeholder, html.light-mode main textarea::placeholder { color: #9ca3af !important; } /* ══════════════════════════════════════════════════════════════ 9. HERO MESH + DECORATIVE BG ══════════════════════════════════════════════════════════════ */ html.light-mode .hero-mesh { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(26,86,168,0.03), transparent), radial-gradient(ellipse 50% 40% at 80% 50%, rgba(147,51,234,0.015), transparent), radial-gradient(ellipse 50% 40% at 20% 50%, rgba(16,185,129,0.015), transparent) !important; } /* ══════════════════════════════════════════════════════════════ 10. SKELETON SHIMMER ══════════════════════════════════════════════════════════════ */ html.light-mode .skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%) !important; background-size: 200% 100%; } /* ══════════════════════════════════════════════════════════════ 11. SHADOWS ══════════════════════════════════════════════════════════════ */ html.light-mode .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; } html.light-mode .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04) !important; } html.light-mode .hover\:shadow-md:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important; } /* ══════════════════════════════════════════════════════════════ 12. INTEGRATION CARDS ══════════════════════════════════════════════════════════════ */ html.light-mode .integ-card { background: #ffffff !important; border-color: #e2e8f0 !important; } html.light-mode .integ-card:hover { border-color: #93bbfd !important; box-shadow: 0 8px 24px rgba(26,86,168,0.06), 0 2px 8px rgba(0,0,0,0.05) !important; } html.light-mode .integ-card-locked { background: #f8fafc !important; border-color: #e2e8f0 !important; } html.light-mode .integ-card-locked::before { background: linear-gradient(90deg, #e2e8f0, #f1f5f9) !important; } /* Status pills */ html.light-mode .status-pill.connected { background: rgba(22,163,74,0.1) !important; color: #15803d !important; } html.light-mode .status-pill.connected .dot { background: #16a34a !important; } html.light-mode .status-pill.demo { background: rgba(59,130,246,0.1) !important; color: #1d4ed8 !important; } html.light-mode .status-pill.demo .dot { background: #2563eb !important; } html.light-mode .status-pill.not-connected { background: rgba(245,158,11,0.1) !important; color: #b45309 !important; } html.light-mode .status-pill.not-connected .dot { background: #d97706 !important; } html.light-mode .status-pill.locked { background: #f1f5f9 !important; color: #94a3b8 !important; } /* Service chips */ html.light-mode .service-chip { background: #f8fafc !important; border-color: #e2e8f0 !important; } html.light-mode .service-chip:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; } /* Slot bar */ html.light-mode .slot-bar-track { background: #e2e8f0 !important; } /* Section divider */ html.light-mode .section-divider::before, html.light-mode .section-divider::after { background: linear-gradient(90deg, transparent, #e2e8f0, transparent) !important; } /* ══════════════════════════════════════════════════════════════ 13. GLASS TABLE (admin) ══════════════════════════════════════════════════════════════ */ html.light-mode .glass-table { background: #ffffff !important; border-color: #e5e7eb !important; } html.light-mode .glass-table th { background: #f8fafc !important; color: #374151 !important; border-color: #e5e7eb !important; } html.light-mode .glass-table td { border-color: #e5e7eb !important; color: #374151 !important; } html.light-mode .glass-table tr:hover td { background: #f9fafb !important; } /* ══════════════════════════════════════════════════════════════ 14. HELP PAGE — FAQ items ══════════════════════════════════════════════════════════════ */ html.light-mode .faq-item + .faq-item { border-color: #e5e7eb !important; } /* ══════════════════════════════════════════════════════════════ 15. MODALS ══════════════════════════════════════════════════════════════ */ html.light-mode .bg-black\/60 { background: rgba(0,0,0,0.4) !important; } html.light-mode #account-modal > div, html.light-mode #gads-account-modal > div { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important; } /* ══════════════════════════════════════════════════════════════ 16. UNDO DARK OVERRIDES — Google Ads (index.html) & SEO Dashboard (seo-dashboard.html) html.light-mode .class beats unscoped .class { !important } ══════════════════════════════════════════════════════════════ */ /* ── Cards & panels → proper white ── */ html.light-mode .kpi-card, html.light-mode .bg-white { background: #ffffff !important; border-color: #e5e7eb !important; backdrop-filter: none !important; } html.light-mode .bg-white:hover, html.light-mode .kpi-card:hover { background: #ffffff !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; } html.light-mode .bg-white\/80 { background: rgba(255,255,255,0.9) !important; } /* ── Gray backgrounds → original Tailwind ── */ html.light-mode .bg-gray-50 { background: #f9fafb !important; } html.light-mode .bg-gray-100 { background: #f3f4f6 !important; } html.light-mode .bg-gray-200 { background: #e5e7eb !important; } html.light-mode .bg-gray-900 { background: #111827 !important; } html.light-mode .hover\:bg-gray-50:hover { background: #f3f4f6 !important; } html.light-mode .hover\:bg-gray-100:hover { background: #e5e7eb !important; } html.light-mode .hover\:bg-gray-200:hover { background: #d1d5db !important; } html.light-mode .hover\:bg-surface-50:hover { background: #f1f5f9 !important; } html.light-mode .hover\:bg-surface-100:hover { background: #e2e8f0 !important; } /* ── Gray borders → original ── */ html.light-mode .border-gray-200, html.light-mode .border-gray-300 { border-color: #e5e7eb !important; } html.light-mode .border-gray-100, html.light-mode .border-gray-50 { border-color: #f3f4f6 !important; } html.light-mode .border-surface-200, html.light-mode .border-surface-100, html.light-mode .border-surface-300 { border-color: #e2e8f0 !important; } html.light-mode .hover\:border-surface-300:hover { border-color: #cbd5e1 !important; } html.light-mode .hover\:border-brand-300:hover { border-color: #93bbfd !important; } html.light-mode .hover\:border-brand-400:hover { border-color: #4D85F5 !important; } html.light-mode .hover\:border-green-400:hover { border-color: #4ade80 !important; } /* ── Dividers → original ── */ html.light-mode .divide-surface-200 > :not([hidden]) ~ :not([hidden]), html.light-mode .divide-surface-100 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } html.light-mode .divide-surface-100 > :not(:last-child) { border-color: #e2e8f0 !important; } /* ── Gray text → original ── */ html.light-mode .text-gray-900 { color: #111827 !important; } html.light-mode .text-gray-800 { color: #1f2937 !important; } html.light-mode .text-gray-700 { color: #374151 !important; } html.light-mode .text-gray-600 { color: #4b5563 !important; } html.light-mode .text-gray-500 { color: #6b7280 !important; } html.light-mode .text-gray-400 { color: #9ca3af !important; } html.light-mode .text-gray-300 { color: #d1d5db !important; } /* ── Colored backgrounds → original Tailwind pastels ── */ html.light-mode .bg-green-50, html.light-mode .bg-green-100 { background: #ecfdf5 !important; } html.light-mode .bg-green-50\/60 { background: rgba(236,253,245,0.6) !important; } html.light-mode .bg-purple-50, html.light-mode .bg-purple-100 { background: #faf5ff !important; } html.light-mode .bg-blue-50, html.light-mode .bg-blue-100 { background: #eff6ff !important; } html.light-mode .bg-amber-50, html.light-mode .bg-amber-100 { background: #fffbeb !important; } html.light-mode .bg-red-50, html.light-mode .bg-red-100 { background: #fef2f2 !important; } html.light-mode .bg-emerald-50, html.light-mode .bg-emerald-100 { background: #ecfdf5 !important; } html.light-mode .bg-emerald-50\/50 { background: rgba(236,253,245,0.5) !important; } html.light-mode .bg-indigo-50 { background: #eef2ff !important; } html.light-mode .bg-brand-50, html.light-mode .bg-brand-100 { background: #eff6ff !important; } html.light-mode .bg-slate-50 { background: #f8fafc !important; } html.light-mode .bg-slate-100 { background: #f1f5f9 !important; } html.light-mode .bg-violet-50 { background: #f5f3ff !important; } html.light-mode .bg-violet-100 { background: #ede9fe !important; } html.light-mode .bg-transparent { background: transparent !important; } /* ── Colored borders → original ── */ html.light-mode .border-green-200, html.light-mode .border-green-100 { border-color: #bbf7d0 !important; } html.light-mode .border-purple-200, html.light-mode .border-purple-100 { border-color: #e9d5ff !important; } html.light-mode .border-blue-200, html.light-mode .border-blue-100 { border-color: #bfdbfe !important; } html.light-mode .border-amber-200, html.light-mode .border-amber-100 { border-color: #fde68a !important; } html.light-mode .border-red-200, html.light-mode .border-red-100 { border-color: #fecaca !important; } html.light-mode .border-emerald-200, html.light-mode .border-emerald-100 { border-color: #a7f3d0 !important; } html.light-mode .border-indigo-100 { border-color: #e0e7ff !important; } html.light-mode .border-brand-200 { border-color: #bfdbfe !important; } html.light-mode .border-brand-500 { border-color: #1A56A8 !important; } html.light-mode .border-green-500\/20 { border-color: rgba(22,163,74,0.2) !important; } html.light-mode .border-amber-500\/20 { border-color: rgba(245,158,11,0.2) !important; } html.light-mode .border-amber-200 { border-color: #fde68a !important; } html.light-mode .border-red-200 { border-color: #fecaca !important; } html.light-mode .border-brand-400\/20 { border-color: rgba(26,86,168,0.2) !important; } html.light-mode .border-purple-500\/30 { border-color: rgba(139,92,246,0.3) !important; } /* ── Badge / text → standard dark-on-light ── */ html.light-mode .text-green-700, html.light-mode .text-green-600 { color: #15803d !important; } html.light-mode .text-green-500 { color: #16a34a !important; } html.light-mode .text-green-800 { color: #166534 !important; } html.light-mode .text-green-900 { color: #14532d !important; } html.light-mode .text-purple-700, html.light-mode .text-purple-600 { color: #7e22ce !important; } html.light-mode .text-purple-500 { color: #9333ea !important; } html.light-mode .text-purple-300 { color: #c084fc !important; } html.light-mode .text-blue-700, html.light-mode .text-blue-600 { color: #1d4ed8 !important; } html.light-mode .text-blue-500 { color: #3b82f6 !important; } html.light-mode .text-blue-800 { color: #1e40af !important; } html.light-mode .text-blue-900 { color: #1e3a5f !important; } html.light-mode .text-amber-700, html.light-mode .text-amber-600 { color: #b45309 !important; } html.light-mode .text-amber-500 { color: #d97706 !important; } html.light-mode .text-amber-800 { color: #92400e !important; } html.light-mode .text-red-700 { color: #b91c1c !important; } html.light-mode .text-red-600 { color: #dc2626 !important; } html.light-mode .text-red-500 { color: #ef4444 !important; } html.light-mode .text-red-800 { color: #991b1b !important; } html.light-mode .text-indigo-700, html.light-mode .text-indigo-600 { color: #4338ca !important; } html.light-mode .text-emerald-700, html.light-mode .text-emerald-600 { color: #047857 !important; } html.light-mode .hover\:text-green-600:hover { color: #15803d !important; } html.light-mode .hover\:text-red-600:hover { color: #dc2626 !important; } html.light-mode .hover\:text-red-300:hover { color: #f87171 !important; } /* ── Coloured dividers → original ── */ html.light-mode .divide-red-100 > :not(:last-child) { border-color: #fecaca !important; } html.light-mode .divide-emerald-100 > :not(:last-child) { border-color: #a7f3d0 !important; } html.light-mode .divide-blue-100 > :not(:last-child) { border-color: #bfdbfe !important; } html.light-mode .divide-amber-100 > :not(:last-child) { border-color: #fde68a !important; } /* ── Partial-opacity colored bg → light original ── */ html.light-mode .bg-green-50\/30, html.light-mode .bg-green-50\/50 { background: rgba(236,253,245,0.7) !important; } html.light-mode .bg-indigo-50\/70 { background: rgba(238,242,255,0.7) !important; } html.light-mode .bg-red-50\/50 { background: rgba(254,242,242,0.7) !important; } html.light-mode .bg-blue-50\/30 { background: rgba(239,246,255,0.7) !important; } html.light-mode .bg-purple-50\/50 { background: rgba(250,245,255,0.7) !important; } /* ── White opacity backgrounds ── */ html.light-mode .bg-white\/70, html.light-mode .bg-white\/60, html.light-mode .bg-white\/50 { background: rgba(255,255,255,0.9) !important; } /* ══════════════════════════════════════════════════════════════ 17. SEO DASHBOARD — specific overrides ══════════════════════════════════════════════════════════════ */ /* Score ring */ html.light-mode .score-ring circle:first-child { stroke: #e5e7eb !important; } html.light-mode .audit-score-ring-track { stroke: #e5e7eb !important; } /* Progress tracks */ html.light-mode .writer-progress-track { background: #e5e7eb !important; } html.light-mode .h-3.bg-gray-100 { background: #e5e7eb !important; } /* GEO prose typography */ html.light-mode .geo-prose h2 { color: #111827 !important; border-color: #e5e7eb !important; } html.light-mode .geo-prose h3 { color: #1f2937 !important; } html.light-mode .geo-prose p, html.light-mode .geo-prose li { color: #374151 !important; } html.light-mode .geo-prose strong { color: #111827 !important; } html.light-mode .geo-prose a { color: #1A56A8 !important; } html.light-mode .geo-prose th { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #374151 !important; } html.light-mode .geo-prose td { border-color: #e2e8f0 !important; color: #4b5563 !important; } html.light-mode .geo-prose blockquote { background: #f5f3ff !important; border-color: #8B5CF6 !important; } html.light-mode .geo-prose blockquote p { color: #6d28d9 !important; } html.light-mode .geo-prose hr { border-color: #e5e7eb !important; } /* Article preview */ html.light-mode .article-preview h2 { color: #111827 !important; border-color: #f1f5f9 !important; } html.light-mode .article-preview h3 { color: #1f2937 !important; } html.light-mode .article-preview p, html.light-mode .article-preview li { color: #374151 !important; } html.light-mode .article-preview strong { color: #111827 !important; } html.light-mode .article-preview th { background: #f8fafc !important; border-color: #e2e8f0 !important; } html.light-mode .article-preview td { border-color: #e2e8f0 !important; } html.light-mode .article-preview blockquote { background: #f5f3ff !important; border-color: #8B5CF6 !important; } html.light-mode .article-preview blockquote p { color: #6d28d9 !important; } html.light-mode .article-preview hr { border-color: #f1f5f9 !important; } /* Platform badges */ html.light-mode .platform-mentioned { background: #dcfce7 !important; color: #15803d !important; } html.light-mode .platform-not-mentioned { background: #fee2e2 !important; color: #991b1b !important; } /* Audit */ html.light-mode .audit-check-row:hover { background: #f8fafc !important; } html.light-mode .geo-loading::after { background: rgba(241,245,249,0.85) !important; } /* Table headers */ html.light-mode thead tr, html.light-mode thead { background: #f9fafb !important; } /* Improve button tooltips */ html.light-mode .improve-btn-wrap .improve-tooltip { background: #1f2937 !important; color: #fff !important; border: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; backdrop-filter: none !important; } html.light-mode .improve-btn-wrap .improve-tooltip::after { border-top-color: #1f2937 !important; } /* Tab navigation container */ html.light-mode .bg-surface-100.rounded-xl.p-1 { background: #e2e8f0 !important; } html.light-mode .bg-surface-100.rounded-xl.p-1 .bg-white { background: #ffffff !important; } /* Code blocks — keep dark */ html.light-mode pre.bg-gray-900 { background: #1e293b !important; color: #e2e8f0 !important; } /* Contenteditable */ html.light-mode [contenteditable="true"] { background: #ffffff !important; color: #1e293b !important; } html.light-mode [contenteditable="true"]:focus { outline: 2px solid #1A56A8 !important; } /* Gradient backgrounds → light pastels */ html.light-mode .bg-gradient-to-br.from-emerald-50.to-blue-50 { background: linear-gradient(135deg, #ecfdf5, #eff6ff) !important; border-color: #bbf7d0 !important; } html.light-mode .bg-gradient-to-br.from-emerald-50.to-white, html.light-mode .bg-gradient-to-br.from-amber-50.to-white, html.light-mode .bg-gradient-to-br.from-red-50.to-white { background: #ffffff !important; } html.light-mode .to-white { --tw-gradient-to: #ffffff !important; } html.light-mode .from-amber-50.to-orange-50 { background: linear-gradient(to right, #fffbeb, #fff7ed) !important; } /* ══════════════════════════════════════════════════════════════ 18. GOOGLE ADS DASHBOARD — specific extras ══════════════════════════════════════════════════════════════ */ /* Loader */ html.light-mode .dash-loader { background: rgba(241,245,249,0.95) !important; backdrop-filter: blur(6px) !important; } html.light-mode .dash-loader-dots span { background: #1A56A8 !important; } html.light-mode .dash-loader-inner .text-gray-800 { color: #1f2937 !important; } html.light-mode .dash-loader-inner .text-gray-500 { color: #6b7280 !important; } /* PDF spinner */ html.light-mode .pdf-spinner { border-color: rgba(26,86,168,0.2) !important; border-top-color: #1A56A8 !important; } /* Trial expired overlay */ html.light-mode #trial-expired-overlay { background: rgba(241,245,249,0.97) !important; } /* Onboarding wizard */ html.light-mode #onboarding-wizard { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12) !important; } html.light-mode #seo-onboarding-wizard { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12) !important; } /* Score ring */ html.light-mode #score-ring { background: rgba(22,163,74,0.08) !important; } /* Insight text */ html.light-mode .insight-text { color: #475569 !important; } html.light-mode .insight-text strong { color: #1e293b !important; } html.light-mode .insight-text h3 { color: #1e293b !important; } /* Views container */ html.light-mode .view { background: transparent !important; } /* ══════════════════════════════════════════════════════════════ 19. ADMIN BADGE — keep vibrant ══════════════════════════════════════════════════════════════ */ html.light-mode .bg-red-500\/80 { background-color: rgba(239,68,68,0.85) !important; } html.light-mode .bg-red-500\/80.text-white { color: #fff !important; } /* ══════════════════════════════════════════════════════════════ 20. BUTTONS — hover states ══════════════════════════════════════════════════════════════ */ html.light-mode .hover\:bg-red-500\/10:hover { background: rgba(239,68,68,0.08) !important; } html.light-mode .hover\:bg-brand-500:hover { background: #1A56A8 !important; } html.light-mode .hover\:bg-brand-600:hover { background: #144A94 !important; } html.light-mode .hover\:bg-green-500:hover { background: #16a34a !important; } html.light-mode .hover\:bg-red-500:hover { background: #dc2626 !important; } /* Buttons/links with white text on colored bg — SAME element (compound selector) */ html.light-mode .bg-brand-500.text-white, html.light-mode .bg-brand-600.text-white, html.light-mode .bg-brand-500\/80.text-white, html.light-mode .bg-green-500.text-white, html.light-mode .bg-green-600.text-white, html.light-mode .bg-green-500\/80.text-white, html.light-mode .bg-red-500.text-white, html.light-mode .bg-red-600.text-white, html.light-mode .bg-red-500\/80.text-white, html.light-mode .bg-blue-500.text-white, html.light-mode .bg-blue-600.text-white, html.light-mode .bg-blue-700.text-white, html.light-mode .bg-amber-500.text-white, html.light-mode .bg-amber-600.text-white, html.light-mode .bg-amber-700.text-white, html.light-mode .bg-emerald-500.text-white, html.light-mode .bg-emerald-600.text-white, html.light-mode .bg-emerald-700.text-white, html.light-mode .bg-indigo-500.text-white, html.light-mode .bg-indigo-600.text-white, html.light-mode .bg-purple-500.text-white, html.light-mode .bg-purple-600.text-white, html.light-mode .bg-purple-700.text-white, html.light-mode .bg-violet-600.text-white, html.light-mode .bg-gradient-to-br .text-white { color: #fff !important; } /* CHILD text-white inside colored bg parents */ html.light-mode .bg-brand-500 .text-white, html.light-mode .bg-brand-600 .text-white, html.light-mode .bg-green-500 .text-white, html.light-mode .bg-green-600 .text-white, html.light-mode .bg-red-500 .text-white, html.light-mode .bg-red-600 .text-white, html.light-mode .bg-blue-600 .text-white, html.light-mode .bg-amber-600 .text-white, html.light-mode .bg-emerald-600 .text-white, html.light-mode .bg-purple-600 .text-white, html.light-mode .bg-gradient-to-br .text-white, html.light-mode [class*="from-indigo"] .text-white, html.light-mode [class*="from-purple"] .text-white { color: #fff !important; } /* ══════════════════════════════════════════════════════════════ 21. SCROLLBAR ══════════════════════════════════════════════════════════════ */ html.light-mode ::-webkit-scrollbar { background: #f1f5f9; width: 6px; } html.light-mode ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } html.light-mode ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ══════════════════════════════════════════════════════════════ 22. CHART.JS — no border override on canvas (avoid visible borders) ══════════════════════════════════════════════════════════════ */ html.light-mode canvas { border: none !important; } /* ══════════════════════════════════════════════════════════════ 23. INLINE STYLE OVERRIDES ══════════════════════════════════════════════════════════════ */ html.light-mode [style*="rgba(255,255,255,0.02)"] { background: #f8fafc !important; } html.light-mode [style*="rgba(255,255,255,0.03)"] { background: #f8fafc !important; } html.light-mode [style*="rgba(255,255,255,0.04)"] { background: #f8fafc !important; }