/* ========================================================== Ask Aunty Mimi — Dark Mode Stylesheet Applies when: 1. is present (user-chosen) 2. prefers-color-scheme: dark AND user has NOT chosen light ========================================================== */ /* ---------------------------------------------------------- Smooth transition for theme switching ---------------------------------------------------------- */ body, nav, .fmap-card, .fmap-sidebar, .fmap-list-header, .fmap-search-input, .fmap-province-select, .fmap-filter-chip, .fmap-detail-panel, .fmap-panel-header, .wc-input, .wc-input-area, .webchat-page, .webchat-header, .webchat-body, .glass-card, .lang-switcher, .lang-btn, .qr-chip, input, textarea, select { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ---------------------------------------------------------- Base ---------------------------------------------------------- */ .dark body { background: #0F172A; color: #F1F5F9; } .dark * { border-color: rgba(255, 255, 255, 0.08); } /* ---------------------------------------------------------- Navigation ---------------------------------------------------------- */ .dark nav { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark nav a { color: #94A3B8 !important; } .dark nav a:hover { color: #2DD4BF !important; } /* ---------------------------------------------------------- Cards / Glass ---------------------------------------------------------- */ .dark .glass-card, .dark [class*="glass"] { background: rgba(30, 41, 59, 0.8) !important; } .dark .fmap-card { background: #1E293B !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark .fmap-card:hover { border-color: rgba(45, 212, 191, 0.3) !important; } .dark .fmap-sidebar { background: #0F172A !important; } .dark .fmap-list-header { background: #0F172A !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark .fmap-search-input { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .dark .fmap-province-select { background: #1E293B !important; color: #F1F5F9 !important; } .dark .fmap-filter-chip { background: #1E293B !important; color: #94A3B8 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .dark .fmap-filter-chip.active { background: rgba(45, 212, 191, 0.15) !important; color: #2DD4BF !important; } /* ---------------------------------------------------------- Chat / Webchat ---------------------------------------------------------- */ .dark .webchat-page { background: #0F172A !important; } .dark .webchat-header { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark .webchat-body { background: #0F172A !important; } .dark .wc-input-area { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark .wc-input { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .dark .msg-mimi .msg-text { background: rgba(45, 212, 191, 0.08) !important; border-color: rgba(45, 212, 191, 0.15) !important; color: #F1F5F9 !important; } .dark .qr-chip { background: #1E293B !important; color: #2DD4BF !important; } .dark .lang-switcher { background: #1E293B !important; border-color: rgba(255, 255, 255, 0.06) !important; } .dark .lang-btn { color: #94A3B8 !important; } .dark .lang-btn.active { background: rgba(45, 212, 191, 0.12) !important; color: #2DD4BF !important; } /* ---------------------------------------------------------- Generic page elements ---------------------------------------------------------- */ .dark h1, .dark h2, .dark h3 { color: #F1F5F9; } .dark p { color: #94A3B8; } .dark .text-slate-900, .dark .text-gray-900 { color: #F1F5F9 !important; } .dark .text-slate-600, .dark .text-gray-600 { color: #94A3B8 !important; } .dark .text-slate-500, .dark .text-gray-500 { color: #64748B !important; } .dark .bg-white { background: #1E293B !important; } .dark .bg-slate-50, .dark .bg-gray-50 { background: #0F172A !important; } .dark .border-slate-100, .dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.06) !important; } .dark input, .dark textarea, .dark select { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.12) !important; } .dark input::placeholder, .dark textarea::placeholder { color: #475569 !important; } /* ---------------------------------------------------------- Detail panels ---------------------------------------------------------- */ .dark .fmap-detail-panel { background: #1E293B !important; } .dark .fmap-panel-header { background: #0F172A !important; } /* ---------------------------------------------------------- Scrollbars ---------------------------------------------------------- */ .dark ::-webkit-scrollbar { width: 6px; height: 6px; } .dark ::-webkit-scrollbar-track { background: #0F172A; } .dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ---------------------------------------------------------- Focus rings — keep accessible in dark mode ---------------------------------------------------------- */ .dark *:focus-visible { outline-color: #2DD4BF; } /* ---------------------------------------------------------- System preference fallback (no explicit class chosen) Activates when OS is dark AND user has NOT chosen light ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html:not(.light) body { background: #0F172A; color: #F1F5F9; } html:not(.light) * { border-color: rgba(255, 255, 255, 0.08); } html:not(.light) nav { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) nav a { color: #94A3B8 !important; } html:not(.light) nav a:hover { color: #2DD4BF !important; } html:not(.light) .glass-card, html:not(.light) [class*="glass"] { background: rgba(30, 41, 59, 0.8) !important; } html:not(.light) .fmap-card { background: #1E293B !important; border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) .fmap-card:hover { border-color: rgba(45, 212, 191, 0.3) !important; } html:not(.light) .fmap-sidebar { background: #0F172A !important; } html:not(.light) .fmap-list-header { background: #0F172A !important; border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) .fmap-search-input { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html:not(.light) .fmap-province-select { background: #1E293B !important; color: #F1F5F9 !important; } html:not(.light) .fmap-filter-chip { background: #1E293B !important; color: #94A3B8 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html:not(.light) .fmap-filter-chip.active { background: rgba(45, 212, 191, 0.15) !important; color: #2DD4BF !important; } html:not(.light) .webchat-page { background: #0F172A !important; } html:not(.light) .webchat-header { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) .webchat-body { background: #0F172A !important; } html:not(.light) .wc-input-area { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) .wc-input { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html:not(.light) .msg-mimi .msg-text { background: rgba(45, 212, 191, 0.08) !important; border-color: rgba(45, 212, 191, 0.15) !important; color: #F1F5F9 !important; } html:not(.light) .qr-chip { background: #1E293B !important; color: #2DD4BF !important; } html:not(.light) .lang-switcher { background: #1E293B !important; border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) .lang-btn { color: #94A3B8 !important; } html:not(.light) .lang-btn.active { background: rgba(45, 212, 191, 0.12) !important; color: #2DD4BF !important; } html:not(.light) h1, html:not(.light) h2, html:not(.light) h3 { color: #F1F5F9; } html:not(.light) p { color: #94A3B8; } html:not(.light) .text-slate-900, html:not(.light) .text-gray-900 { color: #F1F5F9 !important; } html:not(.light) .text-slate-600, html:not(.light) .text-gray-600 { color: #94A3B8 !important; } html:not(.light) .text-slate-500, html:not(.light) .text-gray-500 { color: #64748B !important; } html:not(.light) .bg-white { background: #1E293B !important; } html:not(.light) .bg-slate-50, html:not(.light) .bg-gray-50 { background: #0F172A !important; } html:not(.light) .border-slate-100, html:not(.light) .border-gray-100 { border-color: rgba(255, 255, 255, 0.06) !important; } html:not(.light) input, html:not(.light) textarea, html:not(.light) select { background: #1E293B !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.12) !important; } html:not(.light) input::placeholder, html:not(.light) textarea::placeholder { color: #475569 !important; } html:not(.light) .fmap-detail-panel { background: #1E293B !important; } html:not(.light) .fmap-panel-header { background: #0F172A !important; } }