/** * theme.css — Two-zone theming: dark sidebar shell + light/dark content toggle * Owns: content-zone CSS custom properties, light/dark mode overrides, theme transition * Does NOT own: sidebar colours (sidebar.css), mobile nav chrome (mobile-nav.css) * * How it works: * - Desktop: content area is always LIGHT (white bg, dark text) * - Mobile: content defaults to LIGHT; 🌙/☀️ toggle switches to dark * - Sidebar, topbar, mobile header, bottom nav — always dark regardless of toggle * - [data-theme="dark"] on activates dark content on mobile * - localStorage key: rjsol_theme ("light" | "dark") */ /* ── Content-zone tokens (light defaults) ────────────────────────────────── */ :root { --ct-bg: #ffffff; --ct-bg-alt: #f8f9fa; --ct-bg-card: #ffffff; --ct-bg-card-hover: #f3f4f6; --ct-text: #111827; --ct-text-muted: #6b7280; --ct-text-dim: #9ca3af; --ct-border: #e5e7eb; --ct-border-hover:#d1d5db; --ct-shadow: 0 1px 3px rgba(0,0,0,0.08); --ct-input-bg: #f9fafb; --ct-input-border:#d1d5db; --ct-accent: #f97316; --ct-accent-hover:#ea580c; } /* ── Desktop: force light content area ───────────────────────────────────── */ /* WHY 1025px: tablets ≤1024px use mobile layout (mobileShell), so the white content-zone styles only apply on true desktop viewports. */ @media (min-width: 1025px) { .main-content { background: var(--ct-bg-alt) !important; color: var(--ct-text) !important; } /* Tool panels inside content zone */ .main-content .panel-header h1, .main-content .mcs-badge, .main-content .section-title, .main-content .dt-card-title { color: var(--ct-text) !important; } .main-content .panel-header p, .main-content .stat-label, .main-content .benefit-sub { color: var(--ct-text-muted) !important; } /* Cards and panels */ .main-content .stat-card, .main-content .seg-card, .main-content .input-card, .main-content .calc-panel, .main-content .results-panel { background: var(--ct-bg-card) !important; border-color: var(--ct-border) !important; box-shadow: var(--ct-shadow); } .main-content .stat-value { color: var(--ct-text) !important; } .main-content .stat-card.highlight-amber .stat-value { color: var(--ct-accent) !important; } .main-content .stat-card.highlight-green .stat-value { color: var(--success, #10B981) !important; } /* Form inputs */ .main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .main-content select, .main-content textarea { background: var(--ct-input-bg) !important; border-color: var(--ct-input-border) !important; color: var(--ct-text) !important; } /* CRM board */ .main-content .crm-outer, .main-content .crm-header { background: transparent !important; } .main-content .crm-header-left h1 { color: var(--ct-text) !important; } .main-content .crm-header-left p { color: var(--ct-text-muted) !important; } .main-content .crm-col { background: var(--ct-bg-card) !important; border-color: var(--ct-border) !important; } .main-content .crm-col-header { border-bottom-color: var(--ct-border) !important; } .main-content .crm-card { background: var(--ct-bg-alt) !important; border-color: var(--ct-border) !important; } .main-content .crm-card:hover { border-color: var(--ct-border-hover) !important; } .main-content .crm-card-name { color: var(--ct-text) !important; } .main-content .crm-card-company { color: var(--ct-text-muted) !important; } .main-content .crm-card-activity { color: var(--ct-text-dim) !important; } .main-content .crm-empty { color: var(--ct-text-dim) !important; } /* Generic text/labels */ .main-content label, .main-content .form-label { color: var(--ct-text) !important; } /* Tables */ .main-content table { color: var(--ct-text) !important; } .main-content th { color: var(--ct-text-muted) !important; border-bottom-color: var(--ct-border) !important; } .main-content td { border-bottom-color: var(--ct-border) !important; } .main-content tr:hover td { background: var(--ct-bg-alt) !important; } /* Links in content */ .main-content a:not(.sidebar-item):not(.rjsol-item):not(.crm-save-btn):not(.btn-welcome-trial) { color: var(--ct-accent); } /* Scrollbar */ .main-content::-webkit-scrollbar { width: 8px; } .main-content::-webkit-scrollbar-track { background: var(--ct-bg-alt); } .main-content::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } .main-content::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Loading states / placeholders */ .main-content .loading-state, .main-content .placeholder-text { color: var(--ct-text-muted) !important; } /* DNO / compliance panels */ .main-content .dno-card, .main-content .compliance-card, .main-content .commission-card { background: var(--ct-bg-card) !important; border-color: var(--ct-border) !important; box-shadow: var(--ct-shadow); } /* Design tool panels */ .main-content .dt-panel, .main-content .dt2-panel, .main-content .product-card, .main-content .quote-card, .main-content .handover-card { background: var(--ct-bg-card) !important; border-color: var(--ct-border) !important; } } /* ── Mobile: dark by default (original theme) ────────────────────────────── */ /* WHY removed: previous tasks (#2897663, #2899339) added light-mode defaults here that broke the original dark theme. Mobile stays dark unless the user explicitly toggles to light via data-theme="light". */ /* ── Dark token overrides (when user chooses dark on mobile) ─────────────── */ :root[data-theme="dark"], body[data-theme="dark"] { --ct-bg: #07111F; --ct-bg-alt: #0f172a; --ct-bg-card: #111827; --ct-bg-card-hover: #1a2234; --ct-text: #F9FAFB; --ct-text-muted: #9CA3AF; --ct-text-dim: #6B7280; --ct-border: #1F2937; --ct-border-hover:#374151; --ct-shadow: 0 1px 3px rgba(0,0,0,0.3); --ct-input-bg: #111827; --ct-input-border:#374151; } /* ── Revert mobile content to dark when data-theme="dark" ────────────────── */ @media (max-width: 1024px) { body[data-theme="dark"] #mobileShell { background: #07111F !important; } body[data-theme="dark"] .msh-screens { background: #07111F !important; } body[data-theme="dark"] .msh-screen { color: #F9FAFB !important; } body[data-theme="dark"] .msh-section-title { color: #fff !important; } body[data-theme="dark"] .msh-stat-card { background: #111827 !important; border: none !important; box-shadow: none !important; } body[data-theme="dark"] .msh-stat-num { color: #fff !important; } body[data-theme="dark"] .msh-stat-num.green { color: #34d399 !important; } body[data-theme="dark"] .msh-stat-num.amber { color: #f59e0b !important; } body[data-theme="dark"] .msh-stat-label { color: #9ca3af !important; } body[data-theme="dark"] .msh-job-card { background: #111827 !important; border: none !important; box-shadow: none !important; } body[data-theme="dark"] .msh-job-name { color: #fff !important; } body[data-theme="dark"] .msh-job-meta { color: #6b7280 !important; } body[data-theme="dark"] .msh-sched-card { background: #111827 !important; border: none !important; box-shadow: none !important; } body[data-theme="dark"] .msh-sched-name { color: #fff !important; } body[data-theme="dark"] .msh-empty-state { color: #6b7280 !important; } body[data-theme="dark"] .mn-content { background: #0f172a !important; color: #F9FAFB !important; } } /* ── Theme toggle button ─────────────────────────────────────────────────── */ .theme-toggle { background: none; border: 1px solid rgba(255,255,255,0.15); color: #9CA3AF; cursor: pointer; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; flex-shrink: 0; transition: background 150ms ease, color 150ms ease; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: rgba(255,255,255,0.08); color: #F9FAFB; } .theme-toggle:active { background: rgba(255,255,255,0.12); } /* ── Smooth transition on theme change ───────────────────────────────────── */ body.theme-transitioning, body.theme-transitioning *, body.theme-transitioning *::before, body.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease !important; }