/* ============================================================ GlucoSynq — Comprehensive Light Theme Overrides Applied when does NOT have class="dark" ============================================================ */ /* ---- 1. ROOT & BODY ---- */ :root:not(.dark) { --bg-color: #f8fafc; --text-color: #0f172a; --card-bg: #ffffff; --card-border: #e2e8f0; --header-bg: #ffffff; } :root:not(.dark) body, :root:not(.dark) html { background-color: #f8fafc !important; color: #1e293b !important; } /* ---- 2. LOGO FIX ---- */ :root:not(.dark) img[alt*="Logo"], :root:not(.dark) img[src*="logo.png"] { filter: brightness(0.35) saturate(1.8) !important; } /* ---- 3. HARDCODED DARK BACKGROUNDS ---- Cover ALL hex dark bg colors used across pages */ :root:not(.dark) [class*="bg-[#0d1e33]"], :root:not(.dark) [class*="bg-[#0d1d31]"], :root:not(.dark) [class*="bg-[#061324]"], :root:not(.dark) [class*="bg-[#071321]"], :root:not(.dark) [class*="bg-[#0b1424]"], :root:not(.dark) [class*="bg-[#0b192e]"], :root:not(.dark) [class*="bg-[#0a1929]"], :root:not(.dark) [class*="bg-[#0d1b2b]"], :root:not(.dark) [class*="bg-[#08121c]"], :root:not(.dark) [class*="bg-[#0b1a2a]"], :root:not(.dark) [class*="bg-[#112235]"], :root:not(.dark) [class*="bg-[#112236]"], :root:not(.dark) [class*="bg-[#0f243c]"], :root:not(.dark) [class*="bg-[#162a3f]"], :root:not(.dark) [class*="bg-[var(--header-bg)]"], :root:not(.dark) [class*="bg-slate-900"], :root:not(.dark) .bg-brand-dark, :root:not(.dark) .bg-brand-card, :root:not(.dark) .bg-brand-surface, :root:not(.dark) .bg-glu-dark, :root:not(.dark) .bg-glu-card, :root:not(.dark) .bg-glu-bg, :root:not(.dark) .bg-darkBg { background-color: #ffffff !important; border-color: #e2e8f0 !important; } /* Glass cards and specific transparent darks */ :root:not(.dark) .glass-card, :root:not(.dark) [class*="bg-slate-800/40"], :root:not(.dark) [class*="bg-slate-900/30"] { background: #ffffff !important; border-color: #e2e8f0 !important; backdrop-filter: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important; } /* Filter Buttons in Alert Center */ :root:not(.dark) .filter-btn[class*="bg-gray-800"], :root:not(.dark) .filter-btn[class*="bg-slate-800"] { background-color: #f1f5f9 !important; color: #475569 !important; } :root:not(.dark) .filter-btn[class*="hover:bg-gray-700"]:hover, :root:not(.dark) .filter-btn[class*="hover:bg-slate-700"]:hover { background-color: #e2e8f0 !important; color: #1e293b !important; } /* ---- 4. CARD-BG via CSS VAR ---- */ :root:not(.dark) [style*="--card-bg"], :root:not(.dark) [class*="bg-[var(--card-bg)]"] { background-color: #ffffff !important; } /* ---- 5. HEADER / NAV ---- */ :root:not(.dark) nav, :root:not(.dark) nav[class], :root:not(.dark) [class*="bg-[var(--header-bg)]"] { background-color: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } /* Ensure text inside header stays light/dark-mode colors */ :root:not(.dark) nav .text-white, :root:not(.dark) nav .text-slate-900 { color: #475569 !important; } :root:not(.dark) nav .text-slate-400, :root:not(.dark) nav .text-gray-400 { color: #94a3b8 !important; } :root:not(.dark) nav .hover\:text-white:hover { color: #0f172a !important; } :root:not(.dark) nav [class*="bg-white/10"]:hover { background-color: rgba(0,0,0,0.05) !important; } /* ---- 6. FOOTER ---- */ :root:not(.dark) footer { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } /* ---- 7. WHITE TEXT → DARK ---- */ :root:not(.dark) .text-white { color: #0f172a !important; } /* ---- 8. GRAY/DIM TEXT ADJUSTMENTS ---- */ :root:not(.dark) .text-gray-400, :root:not(.dark) .text-gray-500, :root:not(.dark) .text-slate-400, :root:not(.dark) .text-slate-500, :root:not(.dark) .text-slate-300, :root:not(.dark) .text-brand-text-dim, :root:not(.dark) [class*="text-slate-300"] { color: #475569 !important; } :root:not(.dark) .text-gray-300 { color: #1e293b !important; } /* ---- 9. BORDER OVERRIDES ---- */ :root:not(.dark) [class*="border-brand-border"], :root:not(.dark) [class*="border-gray-800"], :root:not(.dark) [class*="border-slate-800"], :root:not(.dark) [class*="border-slate-700"], :root:not(.dark) [class*="border-[#1e2e42]"], :root:not(.dark) [class*="border-[#1e2e46]"], :root:not(.dark) [class*="border-[#1e3a5a]"], :root:not(.dark) .border-glu-border { border-color: #e2e8f0 !important; } :root:not(.dark) [class*="border-white/5"], :root:not(.dark) [class*="border-white/10"], :root:not(.dark) [class*="border-white/20"], :root:not(.dark) [class*="border-slate-700"] { border-color: #e2e8f0 !important; } /* ---- 10. UTILITY BACKGROUND OVERRIDES ---- */ :root:not(.dark) .bg-white\/5 { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; } :root:not(.dark) .bg-white\/10 { background-color: #f1f5f9 !important; } :root:not(.dark) .bg-slate-800, :root:not(.dark) .bg-gray-800 { background-color: #e2e8f0 !important; color: #1e293b !important; } :root:not(.dark) .bg-gray-700, :root:not(.dark) .bg-slate-700 { background-color: #e2e8f0 !important; color: #0f172a !important; } :root:not(.dark) .bg-inputBg { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } /* Half-transparent dark bg overrides */ :root:not(.dark) [class*="bg-brand-dark/50"], :root:not(.dark) [class*="bg-[#0d1e33]/"], :root:not(.dark) [class*="bg-[#0d1d31]/"], :root:not(.dark) [class*="bg-[#112235]/"], :root:not(.dark) [class*="bg-[#0d1b2b]/"] { background-color: #f1f5f9 !important; } /* ---- 11. SCROLLBAR ---- */ :root:not(.dark) .custom-scrollbar::-webkit-scrollbar-track, :root:not(.dark) ::-webkit-scrollbar-track { background: #f1f5f9 !important; } :root:not(.dark) .custom-scrollbar::-webkit-scrollbar-thumb, :root:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } /* ---- 12. SELECT / INPUT ---- */ :root:not(.dark) select, :root:not(.dark) input[type="text"], :root:not(.dark) input[type="email"], :root:not(.dark) input[type="password"], :root:not(.dark) input[type="search"], :root:not(.dark) textarea { background-color: #ffffff !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; } :root:not(.dark) select option { background-color: #ffffff !important; color: #1e293b !important; } /* ---- 13. FILTER BAR / BUTTON DARK OVERRIDES ---- */ :root:not(.dark) .filter-btn.bg-gray-800 { background-color: #e2e8f0 !important; color: #475569 !important; } :root:not(.dark) button[class*="bg-[#162a3f]"] { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #1e293b !important; } /* ---- 14. INLINE BODY BG OVERRIDE (some pages set body bg in style tags) ---- */ :root:not(.dark) body[class*="bg-brand-dark"], :root:not(.dark) body[class*="bg-glu-bg"], :root:not(.dark) body[class*="bg-glu-dark"] { background-color: #f8fafc !important; color: #1e293b !important; } /* ---- 15. HOVER STATES ---- */ :root:not(.dark) .hover\:text-white:hover { color: #0f172a !important; } :root:not(.dark) .hover\:bg-white\/10:hover, :root:not(.dark) .hover\:bg-brand-surface:hover, :root:not(.dark) .card-hover:hover { background-color: #f8fafc !important; border-color: #cbd5e1 !important; } /* ---- 16. BADGE COLORS FOR LIGHT MODE ---- */ :root:not(.dark) .status-badge-red { background: rgba(239, 68, 68, 0.12) !important; color: #dc2626 !important; } :root:not(.dark) .status-badge-orange { background: rgba(245, 158, 11, 0.12) !important; color: #d97706 !important; } :root:not(.dark) .status-badge-teal { background: rgba(16, 185, 129, 0.12) !important; color: #059669 !important; } :root:not(.dark) [class*="bg-cyan-900/30"], :root:not(.dark) [class*="bg-blue-900/40"], :root:not(.dark) [class*="bg-green-900/30"], :root:not(.dark) [class*="bg-teal-900/40"], :root:not(.dark) [class*="bg-emerald-900/40"] { background: rgba(14, 165, 233, 0.1) !important; /* light equivalent badge bg */ } :root:not(.dark) [class*="text-cyan-400"], :root:not(.dark) [class*="text-blue-400"], :root:not(.dark) [class*="text-emerald-400"] { color: #0284c7 !important; /* dark equivalent for text */ } /* ---- 17. MISC INLINE DARK OVERRIDES ---- */ :root:not(.dark) [class*="bg-brand-border"] { background-color: #e2e8f0 !important; } :root:not(.dark) [class*="ring-brand-dark"], :root:not(.dark) [class*="ring-[#112235]"] { --tw-ring-color: #e2e8f0 !important; } /* ---- 18. BOX-SHADOW ACCENT GLOWS ---- */ :root:not(.dark) [class*="shadow-\\[0_0_20px"] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important; } /* ---- 19. HARDCODED "card-bg" CLASSES IN CSS ---- */ :root:not(.dark) .card-bg, :root:not(.dark) [data-purpose="stat-cards"] > div, :root:not(.dark) [data-purpose="summary-stats"] > div { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; }