/* ============================================================ EB Dela Cruz Enterprises – Dark Mode (v2 · 2026-05-17) Activated by setting `data-theme="dark"` on . Loaded AFTER eb_theme.css and eb_ui_components.css so that `!important` rules beat the light-mode forced white surfaces. Goal: every button, dropdown, field, badge, and table row stays readable on dark surfaces across all 4 roles (admin / secretary / electrician / applicant) and the public site, without editing each template. ============================================================ */ html[data-theme="dark"] { /* Token overrides — many existing components read these vars. */ --eb-bg: #0b1220; --eb-ivory: #0b1220; --eb-paper: #111827; --eb-surface: #111827; --eb-text: #e5e7eb; --eb-muted: #94a3b8; --eb-border: rgba(148, 163, 184, 0.20); --eb-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.50); --eb-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.55); --eb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.60); color-scheme: dark; } /* ── Base surfaces ─────────────────────────────────────────── */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #0b1220 !important; color: var(--eb-text) !important; } /* The light theme aggressively forces white via [style*="background"] selectors, so we mirror that specificity to win cleanly. */ html[data-theme="dark"] [style*="background-color: #ffffff"], html[data-theme="dark"] [style*="background-color:#ffffff"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: white"], html[data-theme="dark"] [style*="background-color:white"], html[data-theme="dark"] [style*="background-color: #fffefc"], html[data-theme="dark"] [style*="background-color: #fffbeb"], html[data-theme="dark"] [style*="background-color: #eff6ff"], html[data-theme="dark"] [style*="background-color: #f0fdf4"], html[data-theme="dark"] [style*="background-color: #f8fafc"], html[data-theme="dark"] [style*="background-color: #fff7ed"], html[data-theme="dark"] [style*="background-color: #f0fdfa"], html[data-theme="dark"] [style*="background-color: #fef2f2"], html[data-theme="dark"] [style*="background-color: #f0f9ff"], html[data-theme="dark"] [style*="background-color: #fff1f2"], html[data-theme="dark"] [style*="background-color: #fff8f7"], html[data-theme="dark"] [style*="background-color: #dcfce7"], html[data-theme="dark"] [style*="background-color: #fef3c7"], html[data-theme="dark"] [style*="background-color: #fefce8"], html[data-theme="dark"] [style*="background-color: #fef9c3"], html[data-theme="dark"] [style*="background-color: #fee2e2"], html[data-theme="dark"] [style*="background-color: #fff7f8"], html[data-theme="dark"] [style*="background: #ffffff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] section[class*="rounded"], html[data-theme="dark"] div[class*="rounded-md"], html[data-theme="dark"] div[class*="rounded-xl"], html[data-theme="dark"] div[class*="rounded-lg"], html[data-theme="dark"] .eb-card, html[data-theme="dark"] .eb-card-interactive, html[data-theme="dark"] .rq-shell, html[data-theme="dark"] .rq-step, html[data-theme="dark"] .rq-card { background-color: #111827 !important; border-color: rgba(148, 163, 184, 0.18) !important; } /* When the markup uses `color-mix(... white)` for soft tints, it produces near-white surfaces. Re-route those to a dark tinted surface so the text inside them stays readable. */ html[data-theme="dark"] [style*="background-color: color-mix(in srgb,"][style*="white)"] { background-color: #1e293b !important; } /* Inline `color: #1e293b` / `#0f172a` etc. on dark surfaces would be unreadable — promote them to slate-200 for dark contrast. */ html[data-theme="dark"] [style*="color: #1e293b"], html[data-theme="dark"] [style*="color: #0f172a"], html[data-theme="dark"] [style*="color: #0b1220"], html[data-theme="dark"] [style*="color: #111827"], html[data-theme="dark"] [style*="color: #0f1729"], html[data-theme="dark"] [style*="color:#1e293b"], html[data-theme="dark"] [style*="color:#0f172a"] { color: #e5e7eb !important; } html[data-theme="dark"] [style*="color: #334155"], html[data-theme="dark"] [style*="color: #475569"], html[data-theme="dark"] [style*="color:#334155"], html[data-theme="dark"] [style*="color:#475569"] { color: #cbd5e1 !important; } html[data-theme="dark"] [style*="color: #64748b"], html[data-theme="dark"] [style*="color: #94a3b8"], html[data-theme="dark"] [style*="color:#64748b"], html[data-theme="dark"] [style*="color:#94a3b8"] { color: #cbd5e1 !important; } /* Tinted brand-text colors used on near-white pills/cards (greens, reds, ambers, blues). Promote to lighter shades that stay readable on the dark tinted backgrounds we redirect to. */ html[data-theme="dark"] [style*="color: #166534"], html[data-theme="dark"] [style*="color: #14532d"], html[data-theme="dark"] [style*="color: #166c4a"], html[data-theme="dark"] [style*="color:#166534"], html[data-theme="dark"] [style*="color:#14532d"] { color: #86efac !important; } html[data-theme="dark"] [style*="color: #0f766e"], html[data-theme="dark"] [style*="color:#0f766e"] { color: #5eead4 !important; } html[data-theme="dark"] [style*="color: #991b1b"], html[data-theme="dark"] [style*="color: #7f1d1d"], html[data-theme="dark"] [style*="color: #b91c1c"], html[data-theme="dark"] [style*="color:#991b1b"], html[data-theme="dark"] [style*="color:#b91c1c"] { color: #fca5a5 !important; } html[data-theme="dark"] [style*="color: #b45309"], html[data-theme="dark"] [style*="color: #92400e"], html[data-theme="dark"] [style*="color: #a16207"], html[data-theme="dark"] [style*="color:#b45309"], html[data-theme="dark"] [style*="color:#a16207"] { color: #fcd34d !important; } html[data-theme="dark"] [style*="color: #1d4ed8"], html[data-theme="dark"] [style*="color: #1e40af"], html[data-theme="dark"] [style*="color: #1e3a8a"], html[data-theme="dark"] [style*="color: #0369a1"], html[data-theme="dark"] [style*="color:#1d4ed8"], html[data-theme="dark"] [style*="color:#1e3a8a"], html[data-theme="dark"] [style*="color:#0369a1"] { color: #93c5fd !important; } html[data-theme="dark"] [style*="color: #4338ca"], html[data-theme="dark"] [style*="color: #3730a3"], html[data-theme="dark"] [style*="color:#4338ca"] { color: #c4b5fd !important; } /* Text colors — Tailwind-style slate utilities. */ html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-slate-700 { color: #e5e7eb !important; } html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-slate-500 { color: #cbd5e1 !important; } html[data-theme="dark"] .text-slate-400, html[data-theme="dark"] .text-slate-300 { color: #94a3b8 !important; } html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700 { color: #e5e7eb !important; } html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-500 { color: #cbd5e1 !important; } /* Tinted text on tinted backgrounds (badges) — keep contrast strong. */ html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-900 { color: #fecaca !important; } html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-800 { color: #bbf7d0 !important; } html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-yellow-800 { color: #fde68a !important; } html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-sky-700, html[data-theme="dark"] .text-sky-800, html[data-theme="dark"] .text-indigo-700, html[data-theme="dark"] .text-indigo-800 { color: #bfdbfe !important; } /* Tailwind backgrounds used heavily for tints. Keep the hue, darken it. */ html[data-theme="dark"] .bg-white { background-color: #111827 !important; } html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: #0f172a !important; } html[data-theme="dark"] .bg-slate-200, html[data-theme="dark"] .bg-gray-200 { background-color: #1f2a3c !important; color: #e5e7eb !important; } html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-red-100 { background-color: rgba(220, 38, 38, 0.18) !important; } html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(217, 119, 6, 0.20) !important; } html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-emerald-100, html[data-theme="dark"] .bg-green-100 { background-color: rgba(22, 163, 74, 0.20) !important; } html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-sky-50, html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-blue-100, html[data-theme="dark"] .bg-sky-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(37, 99, 235, 0.22) !important; } /* Striped table rows. */ html[data-theme="dark"] .even\:bg-slate-50\/60:nth-child(even), html[data-theme="dark"] .odd\:bg-white:nth-child(odd) { background-color: #0f172a !important; } /* Borders that default to slate. */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-t, html[data-theme="dark"] .border-b, html[data-theme="dark"] .border-l, html[data-theme="dark"] .border-r, html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-300, html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300 { border-color: rgba(148, 163, 184, 0.20) !important; } /* Inline border-color values that resolve to white-ish tints. */ html[data-theme="dark"] [style*="border-color: color-mix(in srgb,"][style*="white)"] { border-color: rgba(148, 163, 184, 0.22) !important; } /* ── Inputs / textareas / selects ──────────────────────────── */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: rgba(148, 163, 184, 0.24) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; opacity: 1; } /* Checkbox / radio remain visible in dark by giving them a contrast accent color (modern browsers respect accent-color). */ html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: var(--eb-brand, #C84C4C); } /* File input button label visibility. */ html[data-theme="dark"] input[type="file"] { color: #cbd5e1 !important; } html[data-theme="dark"] input[type="file"]::file-selector-button { background-color: #1e293b !important; color: #e5e7eb !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; } /* Date inputs need calendar icon to show on dark backgrounds. */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.85) brightness(1.1); } /* ── Buttons (generic) ─────────────────────────────────────── */ /* Primary brand-colored buttons keep their solid red background — we just make sure white-text-on-red stays white. */ html[data-theme="dark"] button[style*="background-color: var(--eb-brand)"], html[data-theme="dark"] a[style*="background-color: var(--eb-brand)"], html[data-theme="dark"] button[style*="background-color:#C84C4C"], html[data-theme="dark"] a[style*="background-color:#C84C4C"], html[data-theme="dark"] button[style*="background-color: #C84C4C"], html[data-theme="dark"] a[style*="background-color: #C84C4C"] { color: #ffffff !important; } /* "Outline" buttons that have inline `background-color: white|#ffffff` plus a brand text color: keep the brand text color, just darken bg. */ html[data-theme="dark"] [style*="background-color: white"][style*="color: var(--eb-brand)"], html[data-theme="dark"] [style*="background-color: #ffffff"][style*="color: var(--eb-brand)"], html[data-theme="dark"] [style*="background-color:white"][style*="color: var(--eb-brand)"], html[data-theme="dark"] [style*="background-color:#ffffff"][style*="color: var(--eb-brand)"] { color: #fda4af !important; } /* The light theme defines `.eb-btn-cancel` with `background:#f1f5f9` and gray text — promote both to readable dark equivalents. */ html[data-theme="dark"] .eb-modal-btn-cancel { background: #1e293b !important; color: #e5e7eb !important; } html[data-theme="dark"] .eb-modal-btn-cancel:hover { background: #273449 !important; } /* eb-pill in dark: keep brand color but dark-friendly background. */ html[data-theme="dark"] .eb-pill { background: rgba(200, 76, 76, 0.22) !important; color: #fecaca !important; border-color: rgba(200, 76, 76, 0.45) !important; } /* ── Tables ────────────────────────────────────────────────── */ html[data-theme="dark"] table, html[data-theme="dark"] .eb-list-table-wrap { background-color: #111827 !important; } html[data-theme="dark"] table thead th, html[data-theme="dark"] .eb-list-table thead th { background-color: #0f172a !important; color: #e5e7eb !important; } html[data-theme="dark"] table tbody td, html[data-theme="dark"] .eb-list-table tbody td { color: #e5e7eb !important; background-color: transparent !important; } html[data-theme="dark"] table tbody tr:hover, html[data-theme="dark"] .eb-list-table tbody tr:hover { background-color: rgba(148, 163, 184, 0.10) !important; box-shadow: inset 4px 0 0 var(--eb-brand, #C84C4C); } /* divide-y borders. */ html[data-theme="dark"] .divide-y > * + *, html[data-theme="dark"] .divide-y\/60 > * + * { border-top-color: rgba(148, 163, 184, 0.18) !important; } /* ── Sidebar (already dark-ish; keep brand red) ─────────────── */ html[data-theme="dark"] .eb-sidebar { background: #0f172a; } /* ── Notification & profile flyouts ─────────────────────────── */ html[data-theme="dark"] #notif-panel, html[data-theme="dark"] #profile-panel { background-color: #111827 !important; border-color: rgba(220, 38, 38, 0.30) !important; } html[data-theme="dark"] #notif-panel .notif-item { background-color: #1e293b !important; border-color: rgba(148, 163, 184, 0.18) !important; } html[data-theme="dark"] #notif-panel .notif-item--unread { background-color: rgba(220, 38, 38, 0.20) !important; } html[data-theme="dark"] #profile-panel a, html[data-theme="dark"] #profile-panel button { color: #e5e7eb !important; } html[data-theme="dark"] #profile-panel a:hover, html[data-theme="dark"] #profile-panel button:hover { background-color: rgba(148, 163, 184, 0.12) !important; } /* ── Hover utilities ────────────────────────────────────────── */ html[data-theme="dark"] .hover\:bg-slate-50:hover, html[data-theme="dark"] .hover\:bg-slate-100:hover, html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-white:hover { background-color: rgba(148, 163, 184, 0.10) !important; } /* ── Modals ───────────────────────────────────────────────── */ html[data-theme="dark"] .eb-modal-card { background-color: #111827 !important; color: #e5e7eb !important; } html[data-theme="dark"] .eb-modal-title { color: #f8fafc !important; } html[data-theme="dark"] .eb-modal-message { color: #cbd5e1 !important; } html[data-theme="dark"] .eb-modal-backdrop { background: rgba(0, 0, 0, 0.65) !important; } /* Inline reset-password modal in settings_panel.html. */ html[data-theme="dark"] #eb-reset-modal > div { background-color: #111827 !important; color: #e5e7eb !important; } /* ── Chat bubbles (messages screens) ──────────────────────── */ html[data-theme="dark"] [data-conversation-box], html[data-theme="dark"] #secretary-conversation-box, html[data-theme="dark"] #applicant-conversation-box, html[data-theme="dark"] #admin-conversation-box { background-color: #0f172a !important; } /* "My" message bubbles — already brand-red, keep white text. */ html[data-theme="dark"] [style*="background-color: #b91c1c"], html[data-theme="dark"] [style*="background-color:#b91c1c"] { color: #ffffff !important; } /* Public landing footer cards override. The footer uses brand red as bg already, so leave it alone — `bg-` red selectors aren't redirected. */ html[data-theme="dark"] footer[style*="var(--eb-brand)"], html[data-theme="dark"] header[style*="var(--eb-brand)"] { background-color: var(--eb-brand) !important; color: #ffffff !important; } /* Public hero overlay: keep its dark gradient as-is. */ html[data-theme="dark"] section .absolute.inset-0[style*="linear-gradient"] { /* Do nothing — already dark. */ } /* Public info_page card surface uses .eb-card — covered above. */ /* ── Dark-mode switch (used in settings pages) ─────────────── */ .eb-theme-switch { --switch-w: 48px; --switch-h: 26px; position: relative; display: inline-flex; align-items: center; width: var(--switch-w); height: var(--switch-h); background-color: #cbd5e1; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; } .eb-theme-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(var(--switch-h) - 6px); height: calc(var(--switch-h) - 6px); border-radius: 999px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); transition: transform 0.2s ease; } .eb-theme-switch[aria-checked="true"] { background-color: var(--eb-brand, #C84C4C); } .eb-theme-switch[aria-checked="true"]::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); } .eb-theme-switch:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-brand, #C84C4C) 35%, transparent); } html[data-theme="dark"] .eb-theme-switch:not([aria-checked="true"]) { background-color: #475569; } /* ── Public landing services / cards / buttons ───────────── */ html[data-theme="dark"] .leaflet-container { background: #0b1220 !important; } html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: #111827 !important; color: #e5e7eb !important; } /* ── Floating chatbot panel ────────────────────────────────── */ html[data-theme="dark"] #landing-chatbot-panel, html[data-theme="dark"] #chatbot-panel { background-color: #111827 !important; color: #e5e7eb !important; } html[data-theme="dark"] #landing-chatbot-messages, html[data-theme="dark"] #chatbot-messages { color: #e5e7eb !important; } /* ── Date-picker / select dropdowns — Webkit fallback ───── */ html[data-theme="dark"] select option { background-color: #1e293b !important; color: #e5e7eb !important; } /* ── Page configuration "preview" buttons (white outline) ─── */ html[data-theme="dark"] [style*="background-color: white"][style*="color: var(--eb-brand)"]:hover, html[data-theme="dark"] [style*="background-color: #ffffff"][style*="color: var(--eb-brand)"]:hover { background-color: rgba(200, 76, 76, 0.18) !important; } /* ── Inline color values that hardcode brand-on-white panels: when the wrapper goes dark we still want the brand-red header text to remain visible (it stays brand red, no override needed). The problem is INLINE color: #ffffff (white) text inside containers that get redirected to dark — this is fine. ───────────────── */ html[data-theme="dark"] [style*="color: white"]:not([style*="background"]):not(.eb-sidebar *) { /* Default white text fine on dark. */ } /* Borders specifically set to slate-200/-300 inline. */ html[data-theme="dark"] [style*="border-color: #e2e8f0"], html[data-theme="dark"] [style*="border-color: #cbd5e1"], html[data-theme="dark"] [style*="border-color:#e2e8f0"], html[data-theme="dark"] [style*="border-color:#cbd5e1"] { border-color: rgba(148, 163, 184, 0.22) !important; } /* prose blocks (info_page.html). */ html[data-theme="dark"] .prose, html[data-theme="dark"] .prose-slate { color: #e5e7eb !important; } html[data-theme="dark"] .prose h1, html[data-theme="dark"] .prose h2, html[data-theme="dark"] .prose h3, html[data-theme="dark"] .prose h4 { color: #f8fafc !important; } html[data-theme="dark"] .prose strong { color: #f8fafc !important; } html[data-theme="dark"] .prose a { color: #fda4af !important; }