/* ============================================================
Zoechéa Academy — Dark Mode Theme Overrides
Loaded after main stylesheets. Overrides variables when
is present.
════════════════════════════════════════════════════════════
FUTURE BUILD CHECKLIST — Always keep dark mode in mind:
1. NEVER use hardcoded light colors (#fff, #faf9f6, #fffdf2)
in new components. Use var(--paper), var(--paper-2).
2. NEVER use hardcoded dark text (#111, #1a1714).
Use var(--ink).
3. If you create a new component with a background, add a
dark mode override here using [data-theme="dark"].
4. If you add inline styles in PHP/HTML, they will NOT adapt
to dark mode. Use CSS classes instead.
5. Test EVERY new page in dark mode before shipping.
6. When adding new pages, always include:
════════════════════════════════════════════════════════════
============================================================ */
[data-theme="dark"] {
/* Core palette inversion */
--paper: #161310;
--paper-2: #1e1a16;
--stage: #0e0d0c;
--stage-2: #1a1714;
--stage-3: #f5efe4;
--ink: #f5efe4;
--muted: #9e9488;
--soft: #7a7168;
--line: #3a3530;
--cream-text: #11100f;
/* Tile accents — slightly deeper for dark mode */
--tile-yellow: #4a3b1f;
--tile-peach: #4a2a1f;
--tile-lilac: #3a2a4a;
--tile-green: #2a4a2a;
--tile-pink: #4a2a3a;
/* Glyph colors stay similar but richer */
--glyph-coral: #ff8a6b;
--glyph-gold: #f5c76b;
--glyph-violet: #c4a8f5;
--glyph-green: #7bd46b;
/* Shadows adapt to dark */
--shadow-paper: 0 22px 54px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.25);
/* Grid — visible on dark */
--grid-light:
linear-gradient(90deg, rgba(255, 250, 242, 0.06) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 250, 242, 0.06) 1px, transparent 1px);
/* Compatibility aliases */
--page: var(--paper-2);
--panel: var(--paper-2);
--panel-warm: var(--tile-yellow);
--line-strong: rgba(242, 139, 28, 0.35);
--teal-dark: #f5c76b;
--teal-soft: var(--tile-yellow);
--coral-dark: #ffb8a8;
--coral-soft: var(--tile-peach);
--mustard-soft: var(--tile-yellow);
--rose: var(--tile-pink);
--clinical-blue: var(--tile-lilac);
--clinical-violet: var(--glyph-violet);
--forest: var(--paper-2);
--lake: var(--accent);
--mint: var(--tile-green);
--sky: var(--tile-lilac);
--butter: var(--tile-yellow);
--honey: var(--accent);
--clay: var(--accent-2);
--lavender: var(--tile-lilac);
--plum: var(--glyph-violet);
--safe: var(--glyph-green);
--cream: var(--tile-yellow);
--card-shadow: var(--shadow-soft);
}
[data-theme="dark"] body {
background: var(--grid-light), var(--paper);
color: var(--ink);
}
[data-theme="dark"] a {
color: var(--stage-3);
}
[data-theme="dark"] a:hover {
color: var(--accent);
}
/* ════════════════════════════════════════════════════════════════
CARDS (universal)
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card,
[data-theme="dark"] .portal-card,
[data-theme="dark"] .portal-stat-card,
[data-theme="dark"] .portal-tool-card,
[data-theme="dark"] .data-table-wrap,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .intake-section,
[data-theme="dark"] .intake-card,
[data-theme="dark"] .intake-table-wrap,
[data-theme="dark"] .intake-modal,
[data-theme="dark"] .intake-empty {
background: rgba(30, 26, 22, 0.92);
border-color: rgba(255, 250, 242, 0.08);
box-shadow: 0 1px 0 rgba(255, 253, 248, 0.04) inset, var(--shadow-paper);
}
/* ════════════════════════════════════════════════════════════════
HOMEPAGE — HERO SECTION (Critical Fix)
The hero uses hardcoded gradient + var(--cream-text) which
becomes dark in dark mode. We force everything here.
════════════════════════════════════════════════════════════════ */
/* Hero layout background — solid dark gradient (NO grid inside card) */
[data-theme="dark"] .hero-layout {
background: linear-gradient(180deg, #1a1714 0%, #0e0d0c 100%) !important;
border-color: rgba(255, 250, 242, 0.1);
}
/* Hero section background — brighter grid so it's visible */
[data-theme="dark"] .hero-section {
background:
linear-gradient(90deg, rgba(255, 250, 242, 0.10) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 250, 242, 0.10) 1px, transparent 1px),
var(--paper) !important;
background-size: var(--grid-size), var(--grid-size), auto !important;
}
/* ALL hero text forced to light cream for readability */
[data-theme="dark"] .hero-copy h1 {
color: #f5efe4 !important;
}
[data-theme="dark"] .hero-value {
color: #f5efe4 !important;
}
[data-theme="dark"] .hero-value strong {
color: var(--accent) !important;
}
[data-theme="dark"] .hero-desc {
color: rgba(245, 239, 228, 0.85) !important;
}
[data-theme="dark"] .eyebrow {
color: #f5efe4 !important;
border-color: rgba(242, 139, 28, 0.35);
}
[data-theme="dark"] .stage-kicker {
color: var(--muted);
}
[data-theme="dark"] .stage-kicker span:nth-child(2) {
color: #f5efe4;
}
[data-theme="dark"] .hero-trust-row span {
background: rgba(14, 13, 12, 0.7);
border-color: rgba(255, 250, 242, 0.12);
color: var(--muted);
}
/* Phone mockup */
[data-theme="dark"] .phone-shell {
background: #0e0d0c;
}
[data-theme="dark"] .phone-screen {
background: var(--paper-2);
}
[data-theme="dark"] .phone-notch {
background: #0e0d0c;
}
/* Homepage nav */
[data-theme="dark"] .site-nav {
background: #161310;
border-bottom-color: var(--line);
}
[data-theme="dark"] .nav-brand {
color: #f5efe4;
}
[data-theme="dark"] .nav-link {
background: transparent;
border-color: rgba(255, 250, 242, 0.12);
color: var(--muted);
}
[data-theme="dark"] .nav-link:hover {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
[data-theme="dark"] .hamburger span {
background: #f5efe4;
}
/* ════════════════════════════════════════════════════════════════
HOMEPAGE — OTHER SECTIONS
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .feature-card {
background: var(--paper-2);
border-color: rgba(255, 250, 242, 0.08);
}
[data-theme="dark"] .pricing-card {
background: var(--paper-2);
border-color: rgba(255, 250, 242, 0.08);
}
[data-theme="dark"] .compare-table th,
[data-theme="dark"] .compare-table td {
border-color: var(--line);
}
[data-theme="dark"] .faq-answer {
background: var(--paper-2);
}
[data-theme="dark"] footer {
background: var(--stage);
color: var(--muted);
}
[data-theme="dark"] .site-footer {
background: var(--stage);
}
/* ════════════════════════════════════════════════════════════════
PORTAL LAYOUT — grid background
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .portal-layout {
background: var(--grid-light), var(--paper);
background-size: var(--grid-size);
}
/* ════════════════════════════════════════════════════════════════
PORTAL PAGES (Dashboard, Login, Register, etc.)
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .portal-nav {
background: #161310;
border-bottom-color: var(--line);
}
[data-theme="dark"] .portal-nav-inner {
background: #161310;
}
[data-theme="dark"] .portal-nav a {
color: var(--muted);
}
[data-theme="dark"] .portal-nav a:hover {
color: #f5efe4;
}
[data-theme="dark"] .portal-nav-logo {
background: var(--accent);
color: #11100f;
}
/* Portal nav link pills */
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .portal-nav-links a,
[data-theme="dark"] .nav-links span,
[data-theme="dark"] .portal-nav-links span {
background: transparent;
border-color: rgba(255, 250, 242, 0.12);
color: var(--muted);
box-shadow: none;
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .portal-nav-links a:hover,
[data-theme="dark"] .portal-nav-links a.active {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
/* Dashboard hero panel */
[data-theme="dark"] .portal-hero-panel {
background: rgba(30, 26, 22, 0.95);
border-color: rgba(255, 250, 242, 0.08);
}
[data-theme="dark"] .portal-hero-copy h1 {
color: #f5efe4;
}
[data-theme="dark"] .portal-hero-copy p:not(.portal-eyebrow) {
color: var(--muted);
}
/* Mini tiles */
[data-theme="dark"] .portal-mini-tile {
border-color: rgba(255, 250, 242, 0.08);
}
[data-theme="dark"] .portal-mini-tile:nth-child(1) {
background: rgba(74, 59, 31, 0.6);
}
[data-theme="dark"] .portal-mini-tile:nth-child(2) {
background: rgba(42, 74, 42, 0.5);
}
[data-theme="dark"] .portal-mini-tile:nth-child(3) {
background: rgba(58, 42, 74, 0.5);
}
[data-theme="dark"] .portal-mini-tile strong {
color: #f5efe4;
}
[data-theme="dark"] .portal-mini-tile span {
color: var(--muted);
}
/* Subscription cards */
[data-theme="dark"] .portal-card-sub {
background: rgba(30, 26, 22, 0.95);
border-top-color: var(--accent);
}
[data-theme="dark"] .portal-card-sub-inactive {
background: rgba(30, 26, 22, 0.95);
border-top-color: var(--accent-2);
}
/* Section titles */
[data-theme="dark"] .portal-section-title {
color: #f5efe4;
}
/* Tool cards */
[data-theme="dark"] .portal-tool-title {
color: #f5efe4;
}
[data-theme="dark"] .portal-tool-sub {
color: var(--muted);
}
[data-theme="dark"] .portal-tool-desc {
color: var(--muted);
}
[data-theme="dark"] .portal-tool-icon {
background: #1a1714 !important;
color: #f5efe4 !important;
}
/* Portal footer */
[data-theme="dark"] .portal-footer,
[data-theme="dark"] .footer-note {
border-top-color: var(--line);
color: var(--muted);
}
/* ════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .portal-btn,
[data-theme="dark"] .btn-pill,
[data-theme="dark"] .search-btn,
[data-theme="dark"] .action-btn {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
[data-theme="dark"] .portal-btn:hover,
[data-theme="dark"] .btn-pill:hover,
[data-theme="dark"] .search-btn:hover,
[data-theme="dark"] .action-btn:hover {
color: #11100f;
}
[data-theme="dark"] .portal-btn-line,
[data-theme="dark"] .portal-btn-sm {
background: transparent;
border-color: rgba(255, 250, 242, 0.15);
color: #f5efe4;
}
[data-theme="dark"] .portal-btn-line:hover,
[data-theme="dark"] .portal-btn-sm:hover {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
/* ════════════════════════════════════════════════════════════════
BADGES
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .portal-badge,
[data-theme="dark"] .badge,
[data-theme="dark"] .badge-dmit {
border-color: rgba(255, 250, 242, 0.08);
}
[data-theme="dark"] .portal-badge-active,
[data-theme="dark"] .badge-active,
[data-theme="dark"] .badge-dmit.yes {
background: var(--tile-green);
color: #d2eecb;
}
[data-theme="dark"] .portal-badge-inactive,
[data-theme="dark"] .badge-expired,
[data-theme="dark"] .badge-dmit.no {
background: var(--tile-peach);
color: #ffe1d9;
}
[data-theme="dark"] .portal-badge-tier {
background: var(--tile-lilac);
color: #f3e6ff;
}
/* ════════════════════════════════════════════════════════════════
TABLES
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .data-table thead th,
[data-theme="dark"] .data-table th {
background: #1a1714;
color: #f5efe4;
}
[data-theme="dark"] .data-table tbody tr:nth-child(odd) {
background: rgba(74, 59, 31, 0.25);
}
[data-theme="dark"] .data-table tbody tr:nth-child(even) {
background: var(--paper-2);
}
[data-theme="dark"] .data-table td {
border-bottom-color: var(--line);
color: #f5efe4;
}
[data-theme="dark"] .data-table td strong {
color: #f5efe4;
}
[data-theme="dark"] .data-table td small {
color: var(--muted);
}
/* Intake table */
[data-theme="dark"] .intake-table thead {
background: rgba(255, 250, 242, 0.04);
}
[data-theme="dark"] .intake-table th {
border-bottom-color: var(--line);
color: var(--muted);
}
[data-theme="dark"] .intake-table td {
border-bottom-color: rgba(58, 53, 48, 0.5);
color: #f5efe4;
}
[data-theme="dark"] .intake-table tbody tr:hover {
background: rgba(242, 139, 28, 0.06);
}
/* ════════════════════════════════════════════════════════════════
FORM INPUTS
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .form-input,
[data-theme="dark"] .search-input {
background: var(--stage);
border-color: var(--line);
color: #f5efe4;
box-shadow: 0 1px 0 rgba(255, 253, 248, 0.04) inset;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(242, 139, 28, 0.18);
}
[data-theme="dark"] .form-input::placeholder {
color: var(--muted);
opacity: 0.5;
}
/* ════════════════════════════════════════════════════════════════
ACTION BAR / MODAL / TOAST
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .intake-action-bar {
background: rgba(22, 19, 16, 0.95);
border-top-color: var(--line);
}
[data-theme="dark"] .intake-modal-overlay {
background: rgba(14, 13, 12, 0.75);
}
[data-theme="dark"] .intake-modal {
background: var(--paper-2);
}
[data-theme="dark"] .intake-toast {
background: var(--tile-green);
color: #d2eecb;
}
[data-theme="dark"] .intake-toast.error {
background: var(--tile-peach);
color: #ffe1d9;
}
/* ════════════════════════════════════════════════════════════════
FLASH / ALERTS
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .portal-flash,
[data-theme="dark"] .alert {
background: var(--paper-2);
border-color: var(--line);
color: #f5efe4;
}
[data-theme="dark"] .portal-flash-error,
[data-theme="dark"] .alert-error {
background: var(--tile-peach);
color: #ffe1d9;
}
[data-theme="dark"] .portal-flash-success,
[data-theme="dark"] .alert-success {
background: var(--tile-green);
color: #d2eecb;
}
/* ════════════════════════════════════════════════════════════════
PHQ-9 / APP TABS
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .phq9-tabs {
background: rgba(30, 26, 22, 0.78);
border-color: var(--line);
}
[data-theme="dark"] .phq9-tabs a {
color: var(--muted);
}
[data-theme="dark"] .phq9-tabs a.active,
[data-theme="dark"] .phq9-tabs a:hover {
background: var(--accent);
color: #11100f;
}
[data-theme="dark"] .phq9-step-kicker span {
background: #1a1714;
color: #f5efe4;
}
[data-theme="dark"] .phq9-meaning-card {
background: var(--paper-2);
border-color: rgba(255, 250, 242, 0.08);
}
[data-theme="dark"] .phq9-meaning-card.active {
background: var(--tile-yellow);
}
[data-theme="dark"] .phq9-meaning-card strong,
[data-theme="dark"] .phq9-meaning-card span {
color: #f5efe4;
}
[data-theme="dark"] .phq9-meaning-card p {
color: var(--muted);
}
[data-theme="dark"] .phq9-answer-row:nth-child(odd) {
background: rgba(74, 59, 31, 0.15);
}
/* ════════════════════════════════════════════════════════════════
ADMIN PAGES
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .admin-nav {
background: #161310;
border-bottom-color: var(--line);
}
[data-theme="dark"] .admin-nav-brand {
color: #f5efe4;
}
[data-theme="dark"] .admin-nav-links a {
background: transparent;
border-color: rgba(255, 250, 242, 0.12);
color: var(--muted);
}
[data-theme="dark"] .admin-nav-links a:hover,
[data-theme="dark"] .admin-nav-links a.active {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
/* ════════════════════════════════════════════════════════════════
ADMIN PAGES — comprehensive overrides for hardcoded inline styles
════════════════════════════════════════════════════════════════ */
/* Admin body / shell */
[data-theme="dark"] body:has(.admin-nav) {
background: var(--paper);
}
[data-theme="dark"] .admin-shell {
background: transparent;
}
/* Filter tabs — fix grey pills */
[data-theme="dark"] .filter-tab {
background: transparent;
border-color: rgba(255, 250, 242, 0.12);
color: var(--muted);
}
[data-theme="dark"] .filter-tab:hover,
[data-theme="dark"] .filter-tab.active {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
/* Admin tickets page — override hardcoded inline colors */
[data-theme="dark"] .ticket-filters button {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .ticket-card {
background: var(--paper-2) !important;
border-color: rgba(255, 250, 242, 0.1) !important;
}
[data-theme="dark"] .ticket-message {
background: rgba(255, 250, 242, 0.05) !important;
border-color: var(--line) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .ticket-reply {
background: rgba(42, 74, 42, 0.25) !important;
border-color: rgba(108, 186, 91, 0.2) !important;
}
[data-theme="dark"] .ticket-reply-label {
color: var(--glyph-green) !important;
}
[data-theme="dark"] .reply-form textarea {
background: var(--stage);
border-color: var(--line);
color: #f5efe4;
}
[data-theme="dark"] .reply-form button {
background: var(--accent) !important;
color: #11100f !important;
}
/* Admin chat page — override hardcoded inline colors */
[data-theme="dark"] .chat-app-wrap {
background: var(--paper);
}
[data-theme="dark"] .chat-sidebar {
background: var(--paper-2) !important;
border-right-color: var(--line) !important;
}
[data-theme="dark"] .chat-sidebar-header {
background: var(--paper-2);
border-bottom-color: var(--line);
color: #f5efe4;
}
[data-theme="dark"] .chat-sidebar-header .count {
background: var(--stage-2);
color: var(--muted);
}
[data-theme="dark"] .chat-conv-list {
background: var(--paper-2);
}
[data-theme="dark"] .chat-conv-item {
border-bottom-color: var(--line);
}
[data-theme="dark"] .chat-conv-item:hover {
background: rgba(255, 250, 242, 0.04);
}
[data-theme="dark"] .chat-conv-item.active {
background: rgba(0, 113, 95, 0.12);
border-left-color: var(--accent);
}
[data-theme="dark"] .chat-conv-avatar {
background: #1a1714;
color: #f5efe4;
}
[data-theme="dark"] .chat-conv-avatar.guest {
background: var(--accent);
color: #11100f;
}
[data-theme="dark"] .chat-conv-name {
color: #f5efe4;
}
[data-theme="dark"] .chat-conv-preview {
color: var(--muted);
}
[data-theme="dark"] .chat-conv-badge.registered {
background: rgba(42, 74, 42, 0.4);
color: #86efac;
}
[data-theme="dark"] .chat-conv-badge.guest {
background: rgba(74, 59, 31, 0.4);
color: #f5c76b;
}
[data-theme="dark"] .chat-main {
background: var(--paper) !important;
}
[data-theme="dark"] .chat-main-header {
background: var(--paper-2) !important;
border-bottom-color: var(--line) !important;
}
[data-theme="dark"] .chat-main-header h2 {
color: #f5efe4;
}
[data-theme="dark"] .chat-main-header .sub {
color: var(--muted);
}
[data-theme="dark"] .chat-main-header .badge.registered {
background: rgba(42, 74, 42, 0.4);
color: #86efac;
}
[data-theme="dark"] .chat-main-header .badge.guest {
background: rgba(74, 59, 31, 0.4);
color: #f5c76b;
}
[data-theme="dark"] .chat-messages {
background: var(--paper);
}
[data-theme="dark"] .chat-empty {
color: var(--muted);
}
[data-theme="dark"] .chat-composer {
background: var(--paper-2) !important;
border-top-color: var(--line) !important;
}
[data-theme="dark"] .chat-composer textarea {
background: var(--stage);
border-color: var(--line);
color: #f5efe4;
}
[data-theme="dark"] .chat-composer button {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .chat-msg-bubble {
color: #f5efe4;
}
[data-theme="dark"] .chat-msg-row.client .chat-msg-bubble {
background: var(--paper-2) !important;
border-color: var(--line) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .chat-msg-row.admin .chat-msg-bubble {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .chat-msg-info {
color: var(--muted);
}
/* Admin logo fix */
[data-theme="dark"] .admin-nav-brand .logo {
background: var(--accent) !important;
color: #11100f !important;
}
/* Admin stat cards */
[data-theme="dark"] .stat-card {
background: var(--tile-yellow);
}
[data-theme="dark"] .stat-card .value {
color: #f5efe4 !important;
}
[data-theme="dark"] .stat-card .label {
color: var(--muted);
}
/* Admin chart cards */
[data-theme="dark"] .chart-card {
background: var(--paper-2);
border-color: rgba(255, 250, 242, 0.08);
}
/* Admin tables / data sections */
[data-theme="dark"] .admin-section {
background: var(--paper-2);
border-color: rgba(255, 250, 242, 0.08);
}
/* ════════════════════════════════════════════════════════════════
CONTACT / SUPPORT PAGE (contact.php)
════════════════════════════════════════════════════════════════ */
/* Contact page uses .nav not .site-nav, and .container not .portal-layout */
[data-theme="dark"] body:has(.nav):not(:has(.site-nav)) {
background: var(--grid-light), var(--paper);
background-size: var(--grid-size);
}
[data-theme="dark"] .container .nav {
background: #161310;
border-bottom-color: var(--line);
}
[data-theme="dark"] .container .nav .nav-brand {
color: #f5efe4;
}
[data-theme="dark"] .container .nav .nav-link {
background: transparent;
border-color: rgba(255, 250, 242, 0.12);
color: var(--muted);
}
[data-theme="dark"] .container .nav .nav-link:hover {
background: var(--accent);
border-color: var(--accent);
color: #11100f;
}
/* Contact page card / form elements */
[data-theme="dark"] .ticket-card {
background: var(--paper-2) !important;
border-color: rgba(255, 250, 242, 0.1) !important;
}
[data-theme="dark"] .message-client {
background: rgba(255, 250, 242, 0.06) !important;
border-color: var(--line) !important;
}
[data-theme="dark"] .message-admin {
background: rgba(42, 74, 42, 0.25) !important;
border-color: rgba(108, 186, 91, 0.2) !important;
}
[data-theme="dark"] .message-label-client {
color: var(--muted) !important;
}
[data-theme="dark"] .message-label-admin {
color: var(--glyph-green) !important;
}
[data-theme="dark"] .notice-box {
background: rgba(74, 59, 31, 0.4) !important;
border-color: rgba(242, 139, 28, 0.25) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .chat-panel {
background: var(--paper-2) !important;
border-color: var(--line) !important;
}
[data-theme="dark"] .chat-header {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .chat-close {
color: #11100f !important;
}
[data-theme="dark"] .chat-btn {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .reply-form button {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .chat-footer button {
background: var(--accent) !important;
color: #11100f !important;
}
/* Status badges on contact page */
[data-theme="dark"] .status-open {
background: rgba(254, 243, 199, 0.15);
color: #f5c76b;
}
[data-theme="dark"] .status-in_progress {
background: rgba(219, 234, 254, 0.15);
color: #93c5fd;
}
[data-theme="dark"] .status-resolved {
background: rgba(209, 250, 229, 0.15);
color: #86efac;
}
[data-theme="dark"] .status-closed {
background: rgba(243, 244, 246, 0.15);
color: #d1d5db;
}
/* ════════════════════════════════════════════════════════════════
AUTH PAGES
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .auth-shell {
background: var(--paper);
}
[data-theme="dark"] .auth-story {
background: #1a1714;
}
[data-theme="dark"] .auth-story h2,
[data-theme="dark"] .auth-story p {
color: #f5efe4;
}
[data-theme="dark"] .auth-card {
background: var(--paper-2);
}
/* ════════════════════════════════════════════════════════════════
CHAT WIDGET
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .chat-widget-btn {
background: var(--accent);
color: #11100f;
}
[data-theme="dark"] .chat-panel {
background: var(--paper-2);
border-color: var(--line);
}
[data-theme="dark"] .chat-header {
background: var(--paper-2);
border-bottom-color: var(--line);
}
[data-theme="dark"] .chat-body {
background: var(--paper);
}
[data-theme="dark"] .chat-msg.admin {
background: #1a1714;
color: #f5efe4;
}
[data-theme="dark"] .chat-msg.user {
background: var(--accent);
color: #11100f;
}
[data-theme="dark"] .chat-input {
background: var(--stage);
border-color: var(--line);
color: #f5efe4;
}
/* ════════════════════════════════════════════════════════════════
THEME TOGGLE BUTTON
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .theme-toggle-btn {
background: rgba(255, 250, 242, 0.08);
border-color: rgba(255, 250, 242, 0.15);
color: #f5efe4;
}
[data-theme="dark"] .theme-toggle-btn:hover {
background: rgba(255, 250, 242, 0.15);
border-color: var(--accent);
}
/* ════════════════════════════════════════════════════════════════
DMIT / EQ APPS
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #input-page,
[data-theme="dark"] #report-page,
[data-theme="dark"] .dmit-input-card,
[data-theme="dark"] .dmit-report-card {
background: var(--paper-2) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .input-page,
[data-theme="dark"] .input-hero,
[data-theme="dark"] .form-section,
[data-theme="dark"] .finger-table,
[data-theme="dark"] .report-page {
background: var(--paper-2) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .finger-table th,
[data-theme="dark"] .finger-table td {
border-color: var(--line);
color: #f5efe4;
}
[data-theme="dark"] .form-section h3,
[data-theme="dark"] .input-title,
[data-theme="dark"] .input-deck {
color: #f5efe4 !important;
}
[data-theme="dark"] .brand-logo {
background: var(--accent) !important;
color: #11100f !important;
}
[data-theme="dark"] .eq2-main,
[data-theme="dark"] .eq2-header,
[data-theme="dark"] .eq2-card,
[data-theme="dark"] .report-page {
background: var(--paper-2) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .eq2-qtext {
color: #f5efe4 !important;
}
[data-theme="dark"] .eq2-circle {
background: #1a1714;
border-color: var(--line);
color: var(--muted);
}
[data-theme="dark"] .toc-sidebar {
background: #1a1714;
border-right-color: var(--line);
}
[data-theme="dark"] .toc-link {
color: var(--muted);
}
[data-theme="dark"] .toc-link.active,
[data-theme="dark"] .toc-link:hover {
color: var(--accent);
}
/* ════════════════════════════════════════════════════════════════
NUCLEAR OVERRIDES — !important rules for elements with
hardcoded inline styles that refuse to adapt.
These are LAST RESORT rules to fix broken dark mode.
════════════════════════════════════════════════════════════════ */
/* Force body grid background everywhere */
[data-theme="dark"] body {
background: var(--grid-light), var(--paper) !important;
background-size: var(--grid-size) !important;
}
/* Portal / auth nav bars — force dark */
[data-theme="dark"] .nav,
[data-theme="dark"] .portal-nav,
[data-theme="dark"] .admin-nav {
background: rgba(22, 19, 16, 0.95) !important;
border-bottom-color: var(--line) !important;
}
/* All link pills in nav — force transparent */
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .portal-nav-links a,
[data-theme="dark"] .admin-nav-links a,
[data-theme="dark"] .filter-tab {
background: transparent !important;
border-color: rgba(255, 250, 242, 0.15) !important;
color: var(--muted) !important;
box-shadow: none !important;
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .portal-nav-links a:hover,
[data-theme="dark"] .admin-nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .portal-nav-links a.active,
[data-theme="dark"] .admin-nav-links a.active,
[data-theme="dark"] .filter-tab:hover,
[data-theme="dark"] .filter-tab.active {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #11100f !important;
}
/* Admin pages — force dark background on everything */
[data-theme="dark"] .admin-shell,
[data-theme="dark"] .container:has(.admin-nav) {
background: transparent !important;
}
/* Cards with hardcoded white backgrounds */
[data-theme="dark"] .ticket-card,
[data-theme="dark"] .card,
[data-theme="dark"] .portal-card,
[data-theme="dark"] .portal-tool-card,
[data-theme="dark"] .portal-stat-card,
[data-theme="dark"] .data-table-wrap {
background: #1e1a16 !important;
border-color: rgba(255, 250, 242, 0.08) !important;
}
/* Message / reply bubbles */
[data-theme="dark"] .ticket-message,
[data-theme="dark"] .message-client,
[data-theme="dark"] .message-bubble {
background: rgba(255, 250, 242, 0.05) !important;
border-color: var(--line) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .ticket-reply,
[data-theme="dark"] .message-admin {
background: rgba(42, 74, 42, 0.2) !important;
border-color: rgba(108, 186, 91, 0.2) !important;
color: #f5efe4 !important;
}
/* Textareas and inputs with hardcoded white bg */
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
background: #0e0d0c !important;
border-color: #3a3530 !important;
color: #f5efe4 !important;
}
/* Chat panel — force dark */
[data-theme="dark"] .chat-sidebar,
[data-theme="dark"] .chat-main,
[data-theme="dark"] .chat-main-header,
[data-theme="dark"] .chat-composer,
[data-theme="dark"] .chat-panel {
background: #1e1a16 !important;
border-color: #3a3530 !important;
}
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-empty {
background: #161310 !important;
}
[data-theme="dark"] .chat-conv-item {
border-bottom-color: #3a3530 !important;
}
[data-theme="dark"] .chat-conv-item:hover {
background: rgba(255, 250, 242, 0.04) !important;
}
[data-theme="dark"] .chat-conv-item.active {
background: rgba(242, 139, 28, 0.1) !important;
border-left-color: var(--accent) !important;
}
[data-theme="dark"] .chat-msg-row.client .chat-msg-bubble {
background: #1e1a16 !important;
border-color: #3a3530 !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .chat-msg-row.admin .chat-msg-bubble {
background: var(--accent) !important;
color: #11100f !important;
}
/* Admin stat / chart cards */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .chart-card {
background: #4a3b1f !important;
}
/* Buttons with hardcoded colors */
[data-theme="dark"] button:not(.theme-toggle-btn):not(.hamburger) {
background: var(--accent) !important;
color: #11100f !important;
}
/* Table header fix */
[data-theme="dark"] .data-table thead th {
background: #1a1714 !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .data-table tbody tr:nth-child(odd) {
background: rgba(74, 59, 31, 0.2) !important;
}
[data-theme="dark"] .data-table tbody tr:nth-child(even) {
background: #1e1a16 !important;
}
/* Contact page specific fixes */
[data-theme="dark"] .notice-box {
background: rgba(74, 59, 31, 0.4) !important;
border-color: rgba(242, 139, 28, 0.25) !important;
color: #f5efe4 !important;
}
[data-theme="dark"] .status-open {
background: rgba(254, 243, 199, 0.15) !important;
color: #f5c76b !important;
}
[data-theme="dark"] .status-in_progress {
background: rgba(219, 234, 254, 0.12) !important;
color: #93c5fd !important;
}
[data-theme="dark"] .status-resolved {
background: rgba(209, 250, 229, 0.12) !important;
color: #86efac !important;
}
[data-theme="dark"] .status-closed {
background: rgba(243, 244, 246, 0.1) !important;
color: #d1d5db !important;
}
/* Admin tickets spacing fix */
[data-theme="dark"] .admin-shell {
padding: 32px 28px !important;
}
/* Admin nav logo fix */
[data-theme="dark"] .admin-nav-brand .logo,
[data-theme="dark"] .nav-brand .logo {
background: var(--accent) !important;
color: #11100f !important;
}
/* Ensure headings and body text are readable */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
color: #f5efe4 !important;
}
[data-theme="dark"] .muted,
[data-theme="dark"] .ticket-meta,
[data-theme="dark"] .chat-conv-preview,
[data-theme="dark"] .chat-conv-time {
color: #9e9488 !important;
}