/* ============================================================ BizPilot — Dark Mode Activated by: html[data-theme="dark"] Stored in: localStorage key "bpDark" = "1" Applied by: anti-FOUC script in each page's ============================================================ */ html[data-theme="dark"] { color-scheme: dark; } /* ── Body & main layout ─────────────────────────────────── */ html[data-theme="dark"] body { background: #0f172a !important; color: #e2e8f0 !important; } html[data-theme="dark"] #main-content { background: #0f172a !important; } html[data-theme="dark"] #mobile-topbar { background: #0f172a !important; border-bottom-color: rgba(255,255,255,0.07) !important; } /* ── Card class ─────────────────────────────────────────── */ html[data-theme="dark"] .card { background: #1e293b !important; border-color: rgba(255,255,255,0.07) !important; } /* ── Plan cards (pricing page) ──────────────────────────── */ html[data-theme="dark"] .plan-card { background: #1e293b !important; border-color: rgba(255,255,255,0.1) !important; } /* ── Nav bars (landing, pricing) ────────────────────────── */ html[data-theme="dark"] nav { background: #0f172a !important; border-bottom-color: rgba(255,255,255,0.07) !important; } /* ── === TEXT COLOR OVERRIDES (inline-style targets) === ── */ html[data-theme="dark"] [style*="color:#1C1917"], html[data-theme="dark"] [style*="color: #1C1917"] { color: #f1f5f9 !important; } html[data-theme="dark"] [style*="color:#78716C"], html[data-theme="dark"] [style*="color: #78716C"] { color: #94a3b8 !important; } html[data-theme="dark"] [style*="color:#A8A29E"], html[data-theme="dark"] [style*="color: #A8A29E"] { color: #64748b !important; } html[data-theme="dark"] [style*="color:#44403C"], html[data-theme="dark"] [style*="color: #44403C"] { color: #cbd5e1 !important; } html[data-theme="dark"] [style*="color:#57534E"], html[data-theme="dark"] [style*="color: #57534E"] { color: #94a3b8 !important; } html[data-theme="dark"] [style*="color:#292524"], html[data-theme="dark"] [style*="color: #292524"] { color: #e2e8f0 !important; } html[data-theme="dark"] [style*="color:#6B7280"], html[data-theme="dark"] [style*="color: #6B7280"] { color: #94a3b8 !important; } /* ── === BACKGROUND OVERRIDES (inline-style targets) === ── */ html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#FFF"], html[data-theme="dark"] [style*="background: #FFF"] { background: #1e293b !important; } html[data-theme="dark"] [style*="background:#FAFAF9"], html[data-theme="dark"] [style*="background: #FAFAF9"], html[data-theme="dark"] [style*="background:#F8FAFC"], html[data-theme="dark"] [style*="background: #F8FAFC"] { background: #0f172a !important; } html[data-theme="dark"] [style*="background:#F5F5F4"], html[data-theme="dark"] [style*="background: #F5F5F4"], html[data-theme="dark"] [style*="background:#F3F4F6"], html[data-theme="dark"] [style*="background: #F3F4F6"], html[data-theme="dark"] [style*="background:#F9FAFB"], html[data-theme="dark"] [style*="background: #F9FAFB"] { background: #1e293b !important; } /* ── === BORDER OVERRIDES ================================ ── */ html[data-theme="dark"] [style*="border:1px solid #E7E5E4"], html[data-theme="dark"] [style*="border: 1px solid #E7E5E4"], html[data-theme="dark"] [style*="border:1.5px solid #E7E5E4"], html[data-theme="dark"] [style*="border: 1.5px solid #E7E5E4"] { border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] [style*="border-bottom:1px solid #E7E5E4"], html[data-theme="dark"] [style*="border-bottom: 1px solid #E7E5E4"], html[data-theme="dark"] [style*="border-top:1px solid #E7E5E4"], html[data-theme="dark"] [style*="border-top: 1px solid #E7E5E4"] { border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] [style*="border-bottom:1px solid #F5F5F4"], html[data-theme="dark"] [style*="border-bottom: 1px solid #F5F5F4"], html[data-theme="dark"] [style*="border-bottom:1px solid #F3F4F6"], html[data-theme="dark"] [style*="border-bottom: 1px solid #F3F4F6"] { border-color: rgba(255,255,255,0.06) !important; } /* ── Input / Textarea / Select ──────────────────────────── */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #0f172a !important; border-color: rgba(255,255,255,0.12) !important; color: #e2e8f0 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #475569 !important; } /* ── Details / FAQ accordion ────────────────────────────── */ html[data-theme="dark"] details { border-bottom-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] details summary { color: #e2e8f0 !important; } html[data-theme="dark"] details p { color: #94a3b8 !important; } /* ── Code blocks ────────────────────────────────────────── */ html[data-theme="dark"] [style*="background:#1e293b"] { /* already dark, keep */ } /* ── Scrollbar ──────────────────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15) !important; } /* ── Stat cards inner text fix ──────────────────────────── */ html[data-theme="dark"] [style*="color:#059669"] { /* keep emerald green accents */ } /* ── Dark toggle button (shared across all pages) ───────── */ .dark-toggle-btn { background: none; border: 1.5px solid rgba(148,163,184,0.3); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: #94a3b8; transition: all 0.15s; flex-shrink: 0; } .dark-toggle-btn:hover { border-color: rgba(148,163,184,0.6); color: #f1f5f9; background: rgba(255,255,255,0.05); } /* ── Floating toggle (auth / standalone pages) ──────────── */ #float-dark-btn { position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 40px; height: 40px; border-radius: 50%; background: #1e293b; border: 1.5px solid rgba(255,255,255,0.12); box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, box-shadow 0.15s; } #float-dark-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.35); } html:not([data-theme="dark"]) #float-dark-btn { background: white; border-color: #E7E5E4; box-shadow: 0 4px 14px rgba(0,0,0,0.1); }