/* ===== Light Theme Override ===== */ /* Applied when */ [data-theme="light"] { --background: 0 0% 98%; --foreground: 240 10% 10%; --card: 0 0% 100%; --card-foreground: 240 10% 10%; --popover: 0 0% 100%; --popover-foreground: 240 10% 10%; --primary: 263.4 70% 50.4%; --primary-foreground: 0 0% 100%; --secondary: 263.4 70% 50.4%; --secondary-foreground: 0 0% 100%; --muted: 240 5% 92%; --muted-foreground: 240 5% 40%; --accent: 240 5% 92%; --accent-foreground: 240 10% 10%; --destructive: 0 62.8% 50%; --destructive-foreground: 0 0% 100%; --border: 240 5% 87%; --input: 240 5% 87%; --ring: 263.4 70% 50.4%; } [data-theme="light"] body { background-color: #f5f5f7; background-image: none; color: #1a1a2e; } /* Galaxy/stars backgrounds hidden in light mode */ [data-theme="light"] .galaxy-bg, [data-theme="light"] .stars, [data-theme="light"] .cyber-grid, [data-theme="light"] .cyber-glow, [data-theme="light"] .circuit-lines, [data-theme="light"] .particles { display: none !important; } /* Header */ [data-theme="light"] header { background-color: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(138, 75, 255, 0.15) !important; } [data-theme="light"] .nav-link { color: #4a4a6a; } [data-theme="light"] .nav-link:hover { color: #8a4bff; background: rgba(138, 75, 255, 0.08); } /* Dropdown menus */ [data-theme="light"] #toolsDropdown, [data-theme="light"] #userDropdown { background-color: rgba(255, 255, 255, 0.95) !important; border-color: rgba(138, 75, 255, 0.15) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .dropdown-item { color: #2d2d4e !important; } [data-theme="light"] .dropdown-item:hover { background: rgba(138, 75, 255, 0.1) !important; color: #8a4bff !important; } [data-theme="light"] .dropdown-item.text-red-400 { color: #ef4444 !important; } /* Cards and panels */ [data-theme="light"] .bg-\[\#13141c\]\/50, [data-theme="light"] .bg-\[\#13141c\]\/80 { background-color: rgba(255, 255, 255, 0.85) !important; } [data-theme="light"] .bg-\[\#0d0e12\], [data-theme="light"] .bg-\[\#0d0e12\]\/80 { background-color: #f0f0f3 !important; } [data-theme="light"] .bg-\[\#1a1d2d\]\/50, [data-theme="light"] .bg-\[\#1a1d2d\]\/30 { background-color: rgba(245, 245, 250, 0.9) !important; } [data-theme="light"] .bg-\[\#0d0e14\]\/50 { background-color: rgba(240, 240, 245, 0.8) !important; } /* Borders */ [data-theme="light"] .border-primary\/10, [data-theme="light"] .border-primary\/20 { border-color: rgba(138, 75, 255, 0.15) !important; } [data-theme="light"] .border-gray-800\/50, [data-theme="light"] .border-gray-800 { border-color: rgba(0, 0, 0, 0.1) !important; } /* Text colors */ [data-theme="light"] .text-white { color: #1a1a2e !important; } [data-theme="light"] .text-gray-400 { color: #6b6b8a !important; } [data-theme="light"] .text-gray-500 { color: #8888a4 !important; } [data-theme="light"] .text-gray-300 { color: #4a4a6a !important; } /* Keep primary colors as-is */ [data-theme="light"] .text-primary { color: #8a4bff !important; } /* Input fields */ [data-theme="light"] .input-field, [data-theme="light"] .input, [data-theme="light"] .form-input, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="date"], [data-theme="light"] input[type="url"], [data-theme="light"] textarea, [data-theme="light"] select { background-color: rgba(245, 245, 250, 0.95) !important; border-color: rgba(138, 75, 255, 0.2) !important; color: #1a1a2e !important; } [data-theme="light"] .input-field::placeholder, [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #a0a0b8 !important; } [data-theme="light"] .input-field:focus, [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: rgba(138, 75, 255, 0.4) !important; } /* Buttons */ [data-theme="light"] .cyber-btn, [data-theme="light"] .button-primary { background: #8a4bff !important; color: white !important; } [data-theme="light"] .cyber-btn:hover, [data-theme="light"] .button-primary:hover { background: #7a3bef !important; } /* Cards with bg-gray */ [data-theme="light"] .bg-gray-800\/50, [data-theme="light"] .bg-gray-800\/30 { background-color: rgba(0, 0, 0, 0.04) !important; } /* Footer */ [data-theme="light"] footer { background-color: rgba(245, 245, 250, 0.95) !important; border-top-color: rgba(138, 75, 255, 0.1) !important; } [data-theme="light"] .footer-section-title { color: #1a1a2e !important; border-bottom-color: rgba(138, 75, 255, 0.15) !important; } [data-theme="light"] .footer-link { color: #6b6b8a !important; } [data-theme="light"] .footer-link:hover { color: #8a4bff !important; } [data-theme="light"] .footer-social-link { background: rgba(138, 75, 255, 0.06) !important; border-color: rgba(138, 75, 255, 0.15) !important; color: #6b6b8a !important; } [data-theme="light"] .footer-social-link:hover { background: rgba(138, 75, 255, 0.12) !important; color: #8a4bff !important; } /* Mobile menu */ [data-theme="light"] #mobileMenu { background-color: rgba(255, 255, 255, 0.95) !important; border-top-color: rgba(138, 75, 255, 0.1) !important; } [data-theme="light"] .mobile-nav-link { color: #4a4a6a !important; } [data-theme="light"] .mobile-nav-link:hover { color: #8a4bff !important; background: rgba(138, 75, 255, 0.08) !important; } [data-theme="light"] .mobile-nav-title { color: #1a1a2e !important; border-bottom-color: rgba(138, 75, 255, 0.15) !important; } /* Mobile menu hamburger lines */ [data-theme="light"] .mobile-menu-line { background: #1a1a2e !important; } /* User menu button */ [data-theme="light"] #userMenuBtn { background: rgba(138, 75, 255, 0.06) !important; border-color: rgba(138, 75, 255, 0.15) !important; } [data-theme="light"] #userMenuBtn:hover { background: rgba(138, 75, 255, 0.12) !important; } [data-theme="light"] #userMenuBtn .text-white { color: #1a1a2e !important; } /* User dropdown info section */ [data-theme="light"] #userDropdown .border-b { border-bottom-color: rgba(138, 75, 255, 0.1) !important; } /* Auth page specific (login/register) */ [data-theme="light"] .login-container { background-color: #f5f5f7 !important; } [data-theme="light"] .card { background-color: rgba(255, 255, 255, 0.95) !important; border-color: rgba(138, 75, 255, 0.15) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .card-title { color: #1a1a2e !important; } [data-theme="light"] .input-label { color: #4a4a6a !important; } [data-theme="light"] .input-wrapper { background-color: rgba(245, 245, 250, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .input-icon { color: #8888a4 !important; } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f3; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(138, 75, 255, 0.3); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(138, 75, 255, 0.5); } /* Leaflet map overrides */ [data-theme="light"] .leaflet-container { background: #e8e8ec !important; } [data-theme="light"] .leaflet-popup-content-wrapper { background: #ffffff !important; border-color: rgba(138, 75, 255, 0.2) !important; color: #1a1a2e !important; } [data-theme="light"] .leaflet-popup-tip { background: #ffffff !important; border-color: rgba(138, 75, 255, 0.2) !important; } [data-theme="light"] .leaflet-control-zoom a { background: #ffffff !important; color: #8a4bff !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* Chart.js overrides handled via JS */ /* Notification overrides */ [data-theme="light"] .notification-error { background-color: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.2) !important; } [data-theme="light"] .notification-success { background-color: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.2) !important; } /* Table styling */ [data-theme="light"] table { border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] th { background-color: rgba(245, 245, 250, 0.9) !important; color: #4a4a6a !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] td { color: #1a1a2e !important; border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] tr:hover td { background-color: rgba(138, 75, 255, 0.04) !important; } /* Badge/pill overrides */ [data-theme="light"] .bg-primary\/10 { background-color: rgba(138, 75, 255, 0.08) !important; } [data-theme="light"] .bg-primary\/20 { background-color: rgba(138, 75, 255, 0.12) !important; } /* Status indicators keep their colors */ [data-theme="light"] .status-active { background-color: #10b981; } [data-theme="light"] .status-inactive { background-color: #6b7280; } /* Password requirements */ [data-theme="light"] .password-requirements { background-color: rgba(245, 245, 250, 0.8) !important; } /* Divider */ [data-theme="light"] .divider span { color: #8888a4 !important; } /* Social buttons */ [data-theme="light"] .button-social { background-color: rgba(245, 245, 250, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #4a4a6a !important; } [data-theme="light"] .button-social:hover { border-color: rgba(138, 75, 255, 0.3) !important; color: #8a4bff !important; } /* Signup/login link */ [data-theme="light"] .signup-link { color: #6b6b8a !important; } [data-theme="light"] .signup-link a { color: #8a4bff !important; } /* Theme toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0.75rem; border: 1px solid rgba(138, 75, 255, 0.2); background: rgba(138, 75, 255, 0.1); color: #9ca3af; cursor: pointer; transition: all 0.3s ease; } .theme-toggle:hover { background: rgba(138, 75, 255, 0.2); color: #8a4bff; transform: scale(1.05); } [data-theme="light"] .theme-toggle { background: rgba(138, 75, 255, 0.06); border-color: rgba(138, 75, 255, 0.15); color: #6b6b8a; } [data-theme="light"] .theme-toggle:hover { background: rgba(138, 75, 255, 0.12); color: #8a4bff; } /* Smooth transition when switching themes */ html { transition: background-color 0.3s ease; } html * { transition: background-color 0.3s ease, color 0.15s ease, border-color 0.3s ease; } /* Disable transitions on page load to prevent flash */ html.no-transition, html.no-transition * { transition: none !important; } /* Logo text in light mode */ [data-theme="light"] .logo-text .text-white { color: #1a1a2e !important; }