/** * Dark mode overrides for ReviewGuard pages * Applied when is set. * Targets Tailwind utility classes and custom components. */ /* ===== BASE ===== */ html.dark body { background-color: #0f172a !important; /* slate-900 */ color: #f1f5f9 !important; /* slate-100 */ } /* ===== BACKGROUNDS ===== */ html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #0f172a !important; } html.dark .bg-white { background-color: #1e293b !important; /* slate-800 */ } html.dark .bg-gray-200, html.dark .bg-slate-200 { background-color: #334155 !important; } /* ===== TEXT ===== */ html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-slate-900, html.dark .text-slate-800 { color: #f1f5f9 !important; } html.dark .text-gray-700, html.dark .text-gray-600, html.dark .text-slate-700, html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .text-gray-500, html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-gray-400, html.dark .text-slate-400 { color: #64748b !important; } /* ===== BORDERS ===== */ html.dark .border-gray-200, html.dark .border-gray-100, html.dark .border-gray-300, html.dark .border-slate-200, html.dark .border-slate-100, html.dark .border-slate-300 { border-color: #334155 !important; } html.dark .divide-gray-200 > * + * { border-color: #334155 !important; } /* ===== CARDS & PANELS ===== */ html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { --tw-shadow-color: rgba(0, 0, 0, 0.4); } html.dark .stat-card { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .stat-card:hover { box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3) !important; } /* ===== FORM INPUTS ===== */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="tel"], html.dark input[type="number"], html.dark input[type="search"], html.dark input[type="url"], html.dark textarea, html.dark select { background-color: #1e293b !important; border-color: #475569 !important; color: #f1f5f9 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important; } /* ===== TABLES ===== */ html.dark table { background-color: #1e293b !important; } html.dark thead { background-color: #0f172a !important; } html.dark th { color: #94a3b8 !important; border-color: #334155 !important; } html.dark td { color: #e2e8f0 !important; border-color: #334155 !important; } html.dark tr:hover td { background-color: #1e293b !important; } html.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; } /* ===== MODALS ===== */ html.dark .modal-backdrop { background: rgba(0, 0, 0, 0.7) !important; } /* ===== ROUNDED CARDS / CONTAINERS ===== */ html.dark .rounded-xl.bg-white, html.dark .rounded-lg.bg-white, html.dark .rounded-2xl.bg-white, html.dark [class*="rounded"][class*="bg-white"] { background-color: #1e293b !important; } /* ===== SPECIFIC DASHBOARD ELEMENTS ===== */ html.dark .drag-area { background-color: #1e293b !important; border-color: #475569 !important; } html.dark .drag-area.dragover { background: rgba(20, 184, 166, 0.1) !important; } /* ===== BADGES & PILLS ===== */ html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.1) !important; } html.dark .text-green-800 { color: #4ade80 !important; } html.dark .text-red-800 { color: #f87171 !important; } html.dark .text-yellow-800 { color: #facc15 !important; } html.dark .text-blue-800 { color: #60a5fa !important; } /* ===== SCROLLBAR (dark) ===== */ html.dark ::-webkit-scrollbar-track { background: #0f172a; } html.dark ::-webkit-scrollbar-thumb { background: #475569; } html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ===== AUTH PAGES (gradient background override) ===== */ html.dark .auth-body { background: linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #042f2e 100%) !important; } html.dark .auth-card { background: #1e293b !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; } html.dark .auth-card .brand-title { color: #f1f5f9 !important; } html.dark .auth-card .subtitle { color: #94a3b8 !important; } html.dark .auth-card .form-label { color: #cbd5e1 !important; } html.dark .auth-card .form-input { background: #0f172a !important; border-color: #475569 !important; color: #f1f5f9 !important; } html.dark .auth-card .form-input:focus { border-color: #0d9488 !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important; } html.dark .auth-card .signup-link { color: #94a3b8 !important; } html.dark .auth-card .message.error { background: rgba(239, 68, 68, 0.1) !important; border-color: #7f1d1d !important; color: #f87171 !important; } html.dark .auth-card .message.success { background: rgba(34, 197, 94, 0.1) !important; border-color: #14532d !important; color: #4ade80 !important; } /* ===== MARKETING PAGES ===== */ html.dark .marketing-page { background-color: #0f172a !important; color: #f1f5f9 !important; } html.dark .marketing-page .bg-brand-50, html.dark .marketing-page .bg-brand-100 { background-color: rgba(20, 184, 166, 0.1) !important; } /* ===== THEME TOGGLE (slide switch) ===== */ .theme-toggle-track { position: relative; display: inline-flex; align-items: center; width: 56px; height: 28px; border-radius: 9999px; background-color: #d1d5db; /* gray-300 */ border: none; cursor: pointer; padding: 0; transition: background-color 0.25s ease; flex-shrink: 0; } .theme-toggle-track:focus { outline: none; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3); } html.dark .theme-toggle-track { background-color: #10b981 !important; /* emerald-500 — green when dark mode is ON */ } .theme-toggle-icons { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; pointer-events: none; } .theme-icon-sun { width: 14px; height: 14px; color: #f59e0b; /* amber-500 */ } .theme-icon-moon { width: 14px; height: 14px; color: #f1f5f9; /* slate-100 */ } html.dark .theme-icon-moon { color: #1e293b !important; /* dark so it's visible on green track */ } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 9999px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s ease; } html.dark .theme-toggle-knob { transform: translateX(28px); } /* ===== ADMIN COMP TOGGLE — dark mode ===== */ html.dark .peer-checked\:bg-emerald-500 { background-color: #10b981 !important; /* keep emerald green in dark mode */ } html.dark .bg-gray-200.peer { background-color: #475569 !important; /* darker unchecked track */ } /* ===== ADMIN SAVE / ACTION BUTTONS — dark mode ===== */ html.dark .bg-emerald-600 { background-color: #10b981 !important; color: #ffffff !important; } html.dark .bg-emerald-600:hover { background-color: #059669 !important; } /* ===== ADMIN MODAL — dark mode overrides ===== */ html.dark .admin-action-card { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .admin-action-card:hover { background-color: #293548 !important; } /* Preserve colored badge/button backgrounds in dark mode */ html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; } html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; } html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.25) !important; } html.dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.25) !important; } html.dark .border-teal-200 { border-color: rgba(20, 184, 166, 0.25) !important; } html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.25) !important; } html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.25) !important; } html.dark .text-amber-700 { color: #fbbf24 !important; } html.dark .text-orange-700 { color: #fb923c !important; } html.dark .text-teal-700 { color: #5eead4 !important; } html.dark .text-blue-700 { color: #93c5fd !important; } html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .text-red-600 { color: #f87171 !important; } html.dark .text-emerald-700 { color: #6ee7b7 !important; } html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15) !important; } html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.25) !important; } /* ===== SETTINGS - location dropdown overflow ===== */ #google-location-select { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #google-location-picker .flex { min-width: 0; }