/* =================================================================== Aiosee — Theme Toggle (Light default / Original dark on toggle) Default state (no .theme-dark class on ) = LIGHT / WHITE panel. Clicking the theme button adds .theme-dark to , which removes all rules below and restores each page's original (dark glass) look. =================================================================== */ html:not(.theme-dark) body { background-color: #f4f6fb !important; color: #1e293b !important; } html:not(.theme-dark) .animated-bg { background: linear-gradient(-45deg, #eef2fb, #e6ecfb, #eef4fb, #e9edfb, #eef2fb) !important; } html:not(.theme-dark) .orb { opacity: 0.25 !important; } /* Glass surfaces -> solid white cards */ html:not(.theme-dark) .glass-panel, html:not(.theme-dark) .card, html:not(.theme-dark) .stat-card, html:not(.theme-dark) .chart-box, html:not(.theme-dark) .table-wrap, html:not(.theme-dark) .login-card { background: #ffffff !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08) !important; color: #1e293b !important; } html:not(.theme-dark) .glass-input { background: #f1f5f9 !important; border: 1px solid rgba(148, 163, 184, 0.4) !important; color: #1e293b !important; } html:not(.theme-dark) .glass-input::placeholder { color: #94a3b8 !important; } html:not(.theme-dark) .glass-input:focus { background: #ffffff !important; } html:not(.theme-dark) .glass-btn { color: #ffffff !important; } /* Sidebar */ html:not(.theme-dark) .sidebar { background: #ffffff !important; border-left: 1px solid rgba(148, 163, 184, 0.25) !important; box-shadow: 2px 0 20px rgba(99, 102, 241, 0.06) !important; } html:not(.theme-dark) .sidebar-link { color: #475569 !important; } html:not(.theme-dark) .sidebar-link:hover, html:not(.theme-dark) .sidebar-link.active { background: rgba(59, 130, 246, 0.08) !important; color: #1e293b !important; } /* Mobile top bar */ html:not(.theme-dark) .mobile-top { background: #ffffff !important; border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important; } html:not(.theme-dark) .mobile-top span, html:not(.theme-dark) .mobile-top .text-white { color: #1e293b !important; } html:not(.theme-dark) .mobile-top button, html:not(.theme-dark) .mobile-top .text-gray-300 { color: #475569 !important; } /* Bot status bar / chips */ html:not(.theme-dark) .bot-status-bar { background: #ffffff !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; } html:not(.theme-dark) .bot-chip { background: #f1f5f9 !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; color: #334155 !important; } html:not(.theme-dark) .bot-chip:hover { background: #e2e8f0 !important; } /* Tables */ html:not(.theme-dark) table { color: #1e293b !important; } html:not(.theme-dark) th { color: #64748b !important; } html:not(.theme-dark) th, html:not(.theme-dark) td { border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important; } html:not(.theme-dark) tr:hover td { background: #f8fafc !important; } /* Navbar (landing page) */ html:not(.theme-dark) .navbar { background: rgba(255, 255, 255, 0.85) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important; } html:not(.theme-dark) .btn-ghost { background: #f1f5f9 !important; color: #1e293b !important; } /* Generic text-color utility overrides used throughout the panels */ html:not(.theme-dark) .text-white { color: #1e293b !important; } html:not(.theme-dark) .text-slate-200 { color: #334155 !important; } html:not(.theme-dark) .text-slate-300 { color: #475569 !important; } html:not(.theme-dark) .text-slate-400 { color: #64748b !important; } html:not(.theme-dark) .text-slate-500 { color: #64748b !important; } html:not(.theme-dark) .text-slate-600 { color: #64748b !important; } html:not(.theme-dark) .text-gray-300 { color: #475569 !important; } /* Generic dark surface utility overrides */ html:not(.theme-dark) .bg-white\/5, html:not(.theme-dark) .bg-white\/10 { background: #f1f5f9 !important; } html:not(.theme-dark) .bg-black\/20, html:not(.theme-dark) .bg-black\/40, html:not(.theme-dark) .bg-black\/60 { background: rgba(148, 163, 184, 0.15) !important; } html:not(.theme-dark) .border-gray-700, html:not(.theme-dark) .border-gray-700\/50 { border-color: rgba(148, 163, 184, 0.3) !important; } /* Badges keep their accent colors but need lighter chips on white */ html:not(.theme-dark) .badge, html:not(.theme-dark) .badge-ok, html:not(.theme-dark) .badge-warn, html:not(.theme-dark) .badge-err, html:not(.theme-dark) .badge-dim { filter: saturate(1.1); } /* ---- Theme toggle button (shared across all pages) ---- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: #3b82f6; color: #3b82f6; } .theme-toggle-btn svg { width: 19px; height: 19px; } html:not(.theme-dark) .theme-toggle-btn { background: #f1f5f9 !important; border-color: rgba(148, 163, 184, 0.4) !important; color: #1e293b !important; } /* ---- Mobile / Android touch-friendliness ---- */ @media (max-width: 767px) { .theme-toggle-btn, #menuToggle, .mobile-nav-toggle { width: 42px; height: 42px; } .mobile-top button { padding: 6px; } table { font-size: 0.85rem; } .glass-panel, .card { border-radius: 14px; } }