/* ═══════════════════════════════════════════════════════════════════ CloudPrescription · Dark Mode (P8) ─────────────────────────────────────────────────────────────────── Activated by adding `data-theme="dark"` attribute to . All colors derived from CSS custom properties for a smooth swap. Print mode always forces light theme (saves ink + ensures legibility). ═══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { /* === Core palette === */ --ink: #f0ebe0; /* text → near-white */ --ink-deep: #ffffff; --paper: #1a1f1c; /* panel background */ --cream: #15191a; /* page background */ --cream-2: #1e2422; --line: #2a3230; /* dividers */ --line-2: #3a4441; --mute: #9aa39d; /* secondary text */ --mute-2: #6a7770; --emerald: #3ed694; /* accent — brighter for dark BG */ --emerald-d: #5fe5a8; --emerald-l: rgba(62, 214, 148, 0.12); --emerald-bright: #5fe5a8; /* --amber in our system is the PRIMARY brand color (emerald-themed). Keep it green in dark mode too, so the doctor portal sidebar uses the right brand color. Real financial amber is preserved as --amber-financial. */ --amber: #3ed694; --amber-l: rgba(62, 214, 148, 0.12); --amber-financial: #e09f48; --amber-financial-l: rgba(224, 159, 72, 0.12); --red: #ef6960; --blue: #5ea9f0; --blue-l: rgba(94, 169, 240, 0.12); --purple: #b08ce7; --purple-l: rgba(176, 140, 231, 0.12); } /* Global background — page level */ html[data-theme="dark"] body { background: var(--cream); color: var(--ink); } /* Common surfaces */ html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .panel, html[data-theme="dark"] .form-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .dp-card, html[data-theme="dark"] .price-card, html[data-theme="dark"] .feature, html[data-theme="dark"] .review { background: var(--paper); border-color: var(--line); color: var(--ink); } /* Form controls */ 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="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--cream-2); border-color: var(--line-2); color: var(--ink); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--mute-2); } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(62, 214, 148, 0.12); } /* Buttons — keep primary dark, secondary inverts */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .cta-big, html[data-theme="dark"] .pc-cta.primary, html[data-theme="dark"] .dp-cta.primary { background: var(--emerald); color: #0a1612; border-color: var(--emerald); } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .cta-big:hover { background: var(--emerald-bright); } html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .cta-outline, html[data-theme="dark"] .pc-cta.outline, html[data-theme="dark"] .dp-cta.outline { background: transparent; color: var(--ink); border-color: var(--line-2); } html[data-theme="dark"] .btn-outline:hover { border-color: var(--ink); background: var(--cream-2); } /* Sidebar (dashboards) */ html[data-theme="dark"] .sidebar, html[data-theme="dark"] .sb, html[data-theme="dark"] .admin-sidebar { background: #0e1311; border-right-color: var(--line); } html[data-theme="dark"] .sb-item, html[data-theme="dark"] .sidebar a { color: var(--mute); } html[data-theme="dark"] .sb-item:hover, html[data-theme="dark"] .sb-item.active, html[data-theme="dark"] .sidebar a:hover, html[data-theme="dark"] .sidebar a.active { background: rgba(62, 214, 148, 0.10); color: var(--emerald); } /* Topbar */ html[data-theme="dark"] .topbar, html[data-theme="dark"] .tb, html[data-theme="dark"] .rx-toolbar { background: var(--paper); border-bottom-color: var(--line); } html[data-theme="dark"] .tb-search, html[data-theme="dark"] .dm-search { background: var(--cream-2); border-color: var(--line); color: var(--ink); } /* Tables */ html[data-theme="dark"] table { background: var(--paper); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] thead { background: var(--cream-2); } html[data-theme="dark"] th { border-bottom-color: var(--line); color: var(--mute); } html[data-theme="dark"] td { border-bottom-color: var(--line); } html[data-theme="dark"] tr:hover { background: var(--cream-2); } /* Nav (public site) */ html[data-theme="dark"] .nav { background: rgba(21, 25, 26, 0.95); border-bottom-color: var(--line); backdrop-filter: blur(12px); } html[data-theme="dark"] .nav-links a { color: var(--mute); } html[data-theme="dark"] .nav-links a:hover { color: var(--ink); } /* Hero */ html[data-theme="dark"] .hero-eyebrow { background: var(--emerald-l); color: var(--emerald); border-color: rgba(62, 214, 148, 0.25); } /* Stats bar — dark inverts to lighter */ html[data-theme="dark"] .stats-bar { background: var(--paper); } /* Footer (dark version is even darker) */ html[data-theme="dark"] .footer { background: #0a0e0c; color: var(--mute); } /* Doctor profile page */ html[data-theme="dark"] .dp-banner { background: linear-gradient(135deg, #0a4730 0%, #084a37 100%); } html[data-theme="dark"] .dp-info-card, html[data-theme="dark"] .dp-sim-card, html[data-theme="dark"] .dp-disclaimer { background: var(--cream-2); border-color: var(--line); } html[data-theme="dark"] .dp-photo { border-color: var(--paper); } /* Prescription mock + dashboard mock (homepage hero) */ html[data-theme="dark"] .dash-mock, html[data-theme="dark"] .rx-mock { background: #1a1f1c; border-color: var(--line); } html[data-theme="dark"] .dm-titlebar { background: var(--cream-2); border-color: var(--line); } html[data-theme="dark"] .dm-url { background: var(--paper); border-color: var(--line); } html[data-theme="dark"] .dm-main, html[data-theme="dark"] .rxm-patient, html[data-theme="dark"] .rxm-date { background: var(--cream-2); } html[data-theme="dark"] .float-card { background: var(--paper); border-color: var(--line); } /* Find Doctor */ html[data-theme="dark"] .fd-wrap { background: var(--paper); border-color: var(--line); } html[data-theme="dark"] .fd-select, html[data-theme="dark"] .fd-input { background: var(--cream-2); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .doc-card-v2 { background: var(--cream-2); border-color: var(--line); } html[data-theme="dark"] .doc-card-v2:hover { background: var(--paper); } /* FAQ */ html[data-theme="dark"] .faq-item { background: var(--paper); border-color: var(--line); } html[data-theme="dark"] .faq-item summary:hover { background: var(--cream-2); } /* Pricing toggle */ html[data-theme="dark"] .pricing-toggle { background: var(--cream-2); border-color: var(--line); } html[data-theme="dark"] .pt-btn { color: var(--mute); } html[data-theme="dark"] .pt-btn.active { background: var(--paper); color: var(--ink); } /* Reviews */ html[data-theme="dark"] .review { background: var(--paper); } html[data-theme="dark"] .slider-btn { background: var(--paper); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .slider-dot { background: var(--line-2); } html[data-theme="dark"] .slider-dot.active { background: var(--emerald); } /* Comparison */ html[data-theme="dark"] .compare-pro { background: var(--paper); border-color: var(--line); } html[data-theme="dark"] .cp-row { border-bottom-color: var(--line); } html[data-theme="dark"] .cp-row:hover { background: var(--cream-2); } html[data-theme="dark"] .cp-h-us { background: rgba(62, 214, 148, 0.08); } /* Story */ html[data-theme="dark"] .story-quote { background: var(--paper); border-color: var(--line); color: var(--ink); } /* Contact form */ html[data-theme="dark"] .contact-form { background: var(--paper); border-color: var(--line); } /* Notifications panel */ html[data-theme="dark"] .alert-success, html[data-theme="dark"] .cf-success { background: rgba(62, 214, 148, 0.12); border-color: rgba(62, 214, 148, 0.30); color: var(--emerald-bright); } html[data-theme="dark"] .alert-error, html[data-theme="dark"] .cf-error { background: rgba(239, 105, 96, 0.12); border-color: rgba(239, 105, 96, 0.30); color: var(--red); } /* Prescription printer (preserves light during print) */ html[data-theme="dark"] .rx-sheet { background: var(--paper); border-color: var(--line); } /* WhatsApp float button stays bright */ html[data-theme="dark"] .wa-btn { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5); } /* Theme toggle button itself */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: transparent; border: 1.5px solid var(--line); cursor: pointer; color: var(--ink); font-size: .92rem; transition: all .2s; padding: 0; font-family: inherit; } .theme-toggle:hover { border-color: var(--ink); background: var(--cream-2); transform: rotate(-15deg); } .theme-toggle .sun-icon { display: none; } .theme-toggle .moon-icon { display: inline-flex; } html[data-theme="dark"] .theme-toggle .sun-icon { display: inline-flex; color: #ffce5b; } html[data-theme="dark"] .theme-toggle .moon-icon { display: none; } /* PRINT — Always force light theme */ @media print { html[data-theme="dark"] { --ink: #0a1612; --paper: #ffffff; --cream: #ffffff; --line: #e5dccb; --mute: #6b6155; } html[data-theme="dark"] body { background: #ffffff !important; color: #0a1612 !important; } .theme-toggle { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ Live chat (WhatsApp-style) — dark mode polish ═══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .cp-chat-shell { background: #0b141a; color: #e9edef; } html[data-theme="dark"] .cp-chat-header { background: #202c33; color: #e9edef; border-bottom-color: #2a3942; } html[data-theme="dark"] .cp-chat-name { color: #e9edef; } html[data-theme="dark"] .cp-chat-status { color: #8696a0; } html[data-theme="dark"] .cp-chat-msgs { background-color: #0b141a; background-image: linear-gradient(rgba(11,20,26,.92), rgba(11,20,26,.92)); } html[data-theme="dark"] .msg-bubble.in { background: #202c33; color: #e9edef; border-color: #2a3942; } html[data-theme="dark"] .msg-bubble.out { background: #005c4b; color: #e9edef; } html[data-theme="dark"] .cp-chat-input { background: #202c33; border-top-color: #2a3942; } html[data-theme="dark"] .cp-chat-input textarea, html[data-theme="dark"] .cp-chat-input input { background: #2a3942; color: #e9edef; border-color: transparent; } html[data-theme="dark"] .cp-chat-input textarea::placeholder, html[data-theme="dark"] .cp-chat-input input::placeholder { color: #8696a0; } html[data-theme="dark"] .cp-chat-send { background: #00a884; color: #fff; } html[data-theme="dark"] .msg-date-sep span { background: #182229; color: #8696a0; } /* Chat threads list dark mode */ html[data-theme="dark"] .dc-layout { background: #15191a; border-color: #2a3230; } html[data-theme="dark"] .dc-empty { background: #0b141a; color: #8696a0; }