/* ══════════════════════════════════════════════════════════════════════ SE-EC dark palette — applies only when is set. Every selector is scoped to `html.dark` so disabling the class removes all overrides instantly. Uses CSS custom properties where the original stylesheets consume them, and hard-overrides where they don't. ══════════════════════════════════════════════════════════════════════ */ html.dark { color-scheme: dark; } html.dark body { background: #0f172a; color: #e5e7eb; } /* ── Native form controls */ html.dark input, html.dark textarea, html.dark select { background: #1e293b; color: #e5e7eb; border-color: #334155; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } html.dark hr { border-color: #334155; } html.dark a { color: #60a5fa; } html.dark a:hover { color: #93c5fd; } /* ══════════════════════════════════════════════════════════════════════ Portal (zoom-app / zma-*) — authored with --z-* custom properties. ══════════════════════════════════════════════════════════════════════ */ html.dark { --z-blue: #3b82f6; --z-blue-light: #1e293b; --z-border: #1f2937; --z-muted: #94a3b8; --z-text: #e5e7eb; --z-bg: #0f172a; --z-chrome: #111827; --z-chrome-alt: #1e293b; --z-chrome-hover:#1f2a40; } html.dark .zma-app, html.dark .zma-main, html.dark .zma-content { background: #0f172a; color: #e5e7eb; } html.dark .zma-sidebar, html.dark .zma-topbar { background: #111827; border-color: #1f2937; color: #e5e7eb; } html.dark .zma-sidebar-logo, html.dark .zma-sidebar-profile, html.dark .zma-sidebar-footer { border-color: #1f2937; } html.dark .zma-sidebar-logo:hover { background: #0f172a; } html.dark .zma-sidebar-logo > div > div { color: #e5e7eb; } html.dark .zma-sidebar-logo > div small { color: #64748b; } /* Profile card — the canvas-bg rounded card inside the dark sidebar */ html.dark .zma-sidebar-profile { background: transparent; } html.dark .zma-sidebar-profile { background: #0f172a; border: 1px solid #1f2937; } html.dark .zma-sidebar-profile h6 { color: #e5e7eb; } html.dark .zma-sidebar-profile .zma-sidebar-role { color: #94a3b8; } html.dark .zma-sidebar-profile small { color: #94a3b8; } html.dark .zma-sidebar-section { color: #64748b; } html.dark .zma-sidebar-nav a { color: #cbd5e1; } html.dark .zma-sidebar-nav a i { color: #64748b; } html.dark .zma-sidebar-nav a:hover { background: #1f2937; color: #e5e7eb; } html.dark .zma-sidebar-nav a:hover i { color: #e5e7eb; } html.dark .zma-sidebar-nav a.active { background: #1e293b; color: #93c5fd; } html.dark .zma-sidebar-nav a.active i { color: #93c5fd; } html.dark .zma-sidebar-nav a.active::before { background: #3b82f6; } /* Connection-status card (the new footer widget) — dark variant */ html.dark .zma-sidebar-status-card { background: #0f172a; border-color: #1f2937; } html.dark .zma-sidebar-status-title { color: #e5e7eb; } html.dark .zma-sidebar-status-left { color: #cbd5e1; } html.dark .zma-sidebar-status-left i { color: #64748b; } html.dark .zma-sidebar-footer-row a { background: #0f172a; border-color: #1f2937; color: #cbd5e1; } html.dark .zma-sidebar-footer-row a:hover { background: #1e293b; border-color: #3b82f6; color: #93c5fd; } html.dark .zma-sidebar-footer-row a.zma-logout:hover { background: #1f0f12; border-color: #ef4444; color: #fca5a5; } html.dark .zma-topbar-title { color: #e5e7eb; } html.dark .zma-topbar-search input, html.dark .zma-topbar-search { background: #1e293b; color: #e5e7eb; } html.dark .zma-topbar-icon-btn, html.dark .zma-topbar-avatar { color: #cbd5e1; } html.dark .zma-card, html.dark .zma-panel, html.dark .zma-content section, html.dark .zma-meeting-row { background: #111827 !important; border-color: #1f2937 !important; color: #e5e7eb !important; } html.dark .zma-form-control { background: #1e293b; border-color: #334155; color: #e5e7eb; } html.dark .zma-btn { background: #1e293b; color: #e5e7eb; border-color: #334155; } html.dark .zma-btn-primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; } html.dark .zma-btn-outline { background: transparent; color: #93c5fd; border-color: #334155; } html.dark .zma-nav-badge { background: #ef4444; color: #fff; } /* ══════════════════════════════════════════════════════════════════════ Admin (ad-* / Dore / Bootstrap pages) ══════════════════════════════════════════════════════════════════════ */ html.dark { --ad-bg: #0f172a; --ad-text: #e5e7eb; --ad-muted: #94a3b8; --ad-border: #1f2937; --ad-accent-soft: #1e293b; --ad-accent-soft2:#1f2937; --ad-accent-text: #93c5fd; --ad-navy: #e5e7eb; } html.dark .adm-app, html.dark .adm-main, html.dark .adm-content { background: #0f172a; } html.dark .adm-sidebar, html.dark .adm-topbar { background: #111827; border-color: #1f2937; box-shadow: none; } html.dark .adm-brand-txt strong { color: #e5e7eb; } html.dark .adm-user-name { color: #e5e7eb; } html.dark .adm-nav li > a { color: #cbd5e1; } html.dark .adm-nav li > a i { color: #94a3b8; } html.dark .adm-nav li > a:hover, html.dark .adm-nav li.active > a { background: #1e293b; color: #93c5fd; } html.dark .adm-nav li > a:hover i, html.dark .adm-nav li.active > a i { color: #93c5fd; } html.dark .adm-sidebar-footer { background: #0f172a; border-color: #1f2937; } html.dark .adm-sidebar-footer a { background: #1e293b; border-color: #334155; color: #cbd5e1; } html.dark .adm-topbar-title { color: #e5e7eb; } html.dark .adm-page-head h1 { color: #e5e7eb; } /* Bootstrap shim — only the most visible surfaces inside admin pages. */ html.dark .card, html.dark .modal-content, html.dark .dropdown-menu, html.dark .list-group-item { background: #111827; color: #e5e7eb; border-color: #1f2937; } html.dark .card-header, html.dark .card-footer, html.dark .modal-header, html.dark .modal-footer { background: #0f172a; color: #e5e7eb; border-color: #1f2937; } html.dark .form-control, html.dark .custom-select { background: #1e293b !important; color: #e5e7eb !important; border-color: #334155 !important; } html.dark .form-control::placeholder { color: #64748b !important; } html.dark table { color: #e5e7eb; } html.dark .table thead th, html.dark .table th, html.dark .table td { border-color: #1f2937 !important; color: #e5e7eb; } html.dark .table-hover tbody tr:hover { background: #1e293b; } html.dark .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); } html.dark .btn-outline-primary, html.dark .btn-outline-secondary { color: #93c5fd; border-color: #334155; } html.dark .btn-outline-primary:hover { background: #1e293b; color: #fff; } html.dark .breadcrumb { background: transparent; } html.dark .nav-tabs .nav-link.active { background: #111827; color: #e5e7eb; border-color: #1f2937 #1f2937 #111827; } html.dark .nav-tabs { border-color: #1f2937; } html.dark .badge-secondary { background: #334155; color: #e5e7eb; } /* DataTables controls */ html.dark .dataTables_wrapper .dataTables_length, html.dark .dataTables_wrapper .dataTables_filter, html.dark .dataTables_wrapper .dataTables_info, html.dark .dataTables_wrapper .dataTables_paginate { color: #cbd5e1; } html.dark .page-link { background: #111827; color: #cbd5e1; border-color: #1f2937; } html.dark .page-item.active .page-link { background: #2563eb; border-color: #2563eb; color: #fff; } /* Select2 */ html.dark .select2-container--default .select2-selection--single, html.dark .select2-container--default .select2-selection--multiple { background: #1e293b; border-color: #334155; color: #e5e7eb; } html.dark .select2-dropdown { background: #111827; border-color: #1f2937; } html.dark .select2-results__option { color: #e5e7eb; } html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #1e293b; color: #93c5fd; } /* ══════════════════════════════════════════════════════════════════════ Chat page (wa-* classes) ══════════════════════════════════════════════════════════════════════ */ html.dark .wa-app { background: #0f172a; color: #e5e7eb; } html.dark .wa-side { background: #111827; border-color: #1f2937; } html.dark .wa-side-head { background: #111827; border-color: #1f2937; } html.dark .wa-side-search input { background: #1e293b; color: #e5e7eb; border-color: #334155; } html.dark .chat-row { color: #e5e7eb; } html.dark .chat-row:hover { background: #1f2937; } html.dark .chat-row.active { background: #1e293b; } html.dark .chat-row .preview { color: #94a3b8; } html.dark .chat-row time { color: #64748b; } html.dark .chat-row.unread .preview { color: #e5e7eb; } html.dark .conv-head { background: #111827; border-color: #1f2937; color: #e5e7eb; } html.dark .conv-head small { color: #94a3b8; } html.dark .compose { background: #111827; border-color: #1f2937; } html.dark .compose .input-wrap, html.dark .compose [contenteditable] { background: #1e293b; color: #e5e7eb; } html.dark .wa-conv { /* WhatsApp pattern keeps working — we just darken the overlay layer. */ background-color: #0b1220; background-image: linear-gradient(rgba(11,18,32,.88), rgba(11,18,32,.88)), url("data:image/svg+xml;utf8,"); } html.dark .bubble.theirs { background: #1e293b; color: #e5e7eb; } html.dark .bubble.mine { background: #1e3a8a; color: #e5e7eb; } html.dark .date-sep { background: rgba(30,41,59,.9); color: #cbd5e1; } html.dark .wa-info { background: #111827; border-color: #1f2937; color: #e5e7eb; } /* Notif banner, meta strip, anything subtle */ html.dark .notif-banner, html.dark .meta, html.dark .info-head { color: #94a3b8; } /* Scrollbars — subtle on dark */ html.dark *::-webkit-scrollbar-thumb { background: #334155; } html.dark *::-webkit-scrollbar-thumb:hover { background: #475569; } /* ══════════════════════════════════════════════════════════════════════ Portal content pages — history (.hs-*), contacts (.ct-*), notifications (.nt-*), profile (.pf-*), change-password (.cp-*), meeting-new / meeting-detail (.mt-*), search (.se-*). Each page authors its own namespaced styles with hardcoded white backgrounds (`background: #fff`). Without these overrides the pages render full white chrome inside the dark shell. Rather than editing every template's inline CSS, we invert the common patterns here. ══════════════════════════════════════════════════════════════════════ */ html.dark .zma-content { color: #e5e7eb; } html.dark .zma-content h1, html.dark .zma-content h2, html.dark .zma-content h3, html.dark .zma-content h4, html.dark .zma-content h5, html.dark .zma-content h6, html.dark .zma-content strong, html.dark .zma-content label, html.dark .zma-content p, html.dark .zma-content th { color: #e5e7eb; } html.dark .zma-content small, html.dark .zma-content .text-muted, html.dark .zma-content .z-muted { color: #94a3b8; } /* Generic card / panel / toolbar / row / stat / tab / filter / section patterns — catches every page's card-like element in one rule. */ html.dark .zma-content [class*="-card"], html.dark .zma-content [class*="-panel"], html.dark .zma-content [class*="-toolbar"], html.dark .zma-content [class*="-filter-bar"], html.dark .zma-content [class*="-stat"]:not([class*="-stat-icon"]):not([class*="-stat-dot"]), html.dark .zma-content [class*="-row"]:not(a):not(button), html.dark .zma-content [class*="-group"]:not([class*="-group-label"]), html.dark .zma-content [class*="-sec-"], html.dark .zma-content [class*="-box"], html.dark .zma-content [class*="-list"], html.dark .zma-content [class*="-item"]:not(li):not(option) { background-color: #111827 !important; border-color: #1f2937 !important; color: #e5e7eb; } /* Inputs, selects, textareas across all portal pages */ html.dark .zma-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), html.dark .zma-content select, html.dark .zma-content textarea { background: #1e293b !important; color: #e5e7eb !important; border-color: #334155 !important; } html.dark .zma-content input::placeholder, html.dark .zma-content textarea::placeholder { color: #64748b !important; } /* Stat values + labels */ html.dark .zma-content [class*="-stat-value"], html.dark .zma-content [class*="-stat-val"] { color: #e5e7eb; } html.dark .zma-content [class*="-stat-label"], html.dark .zma-content [class*="-stat-lbl"] { color: #94a3b8; } /* Tab bars — hs-tab, pf-tab, ct-tab etc. Inactive = muted, active = brand */ html.dark .zma-content [class*="-tab"]:not([class*="-tab-bar"]):not(.active) { background: transparent !important; color: #94a3b8; } html.dark .zma-content [class*="-tab"]:not(.active):hover { background: #1f2937 !important; color: #e5e7eb; } /* Form labels + form-group wrappers stay transparent (just text color) */ html.dark .zma-content [class*="-form-group"], html.dark .zma-content [class*="form-row"] { background: transparent !important; border: 0 !important; } html.dark .zma-form-group label, html.dark .zma-content label { color: #cbd5e1; } /* Group-label dividers (notifications page section headers) */ html.dark .zma-content [class*="-group-label"] { color: #94a3b8; } /* Toggle switches (profile page) */ html.dark .zma-content [class*="-toggle"] { background: #1e293b !important; border-color: #334155 !important; } /* Buttons defined by pages — keep primary brand, recolor outlines */ html.dark .zma-content .zma-btn-outline, html.dark .zma-content [class*="-btn"][class*="outline"] { background: transparent !important; color: #93c5fd !important; border-color: #334155 !important; } html.dark .zma-content .zma-btn-outline:hover, html.dark .zma-content [class*="-btn"][class*="outline"]:hover { background: #1e293b !important; color: #fff !important; } /* Icon-only buttons ("action" buttons inside rows) */ html.dark .zma-content [class*="-action-btn"], html.dark .zma-content [class*="-icon-btn"] { background: #1e293b !important; color: #cbd5e1 !important; border-color: #334155 !important; } /* Hovers on list rows / contact rows / meeting rows */ html.dark .zma-content [class*="-row"]:not(a):not(button):hover { background: #1e293b !important; } /* Empty-state illustrations (the faint boxes with "no data") */ html.dark .zma-content [class*="-empty"] { background: #0f172a !important; border-color: #1f2937 !important; color: #94a3b8 !important; } /* Tables inside portal pages (history timeline, participants list) */ html.dark .zma-content table { color: #e5e7eb; } html.dark .zma-content table th { background: #0f172a !important; border-color: #1f2937 !important; } html.dark .zma-content table td { border-color: #1f2937 !important; } html.dark .zma-content table tbody tr:hover { background: #1e293b; } /* Alerts + notices inside content pages */ html.dark .zma-content [class*="-alert"] { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } html.dark .zma-content [class*="-alert-success"] { background: #064e3b !important; color: #a7f3d0 !important; border-color: #065f46 !important; } html.dark .zma-content [class*="-alert-error"], html.dark .zma-content [class*="-alert-danger"] { background: #450a0a !important; color: #fecaca !important; border-color: #7f1d1d !important; } html.dark .zma-content [class*="-alert-info"] { background: #172554 !important; color: #bfdbfe !important; border-color: #1e40af !important; } /* Topbar in dark mode — search, icons, avatar, language/theme pills */ html.dark .zma-topbar-search { background: #1e293b !important; border-color: #334155 !important; } html.dark .zma-topbar-search input { background: transparent !important; color: #e5e7eb !important; } html.dark .zma-topbar-search input::placeholder { color: #64748b; } html.dark .zma-topbar-icon-btn { color: #cbd5e1; background: transparent; } html.dark .zma-topbar-icon-btn:hover { background: #1e293b; color: #fff; }