/* ============================================================ ChatMMM Dark Theme Activated when has class "theme-dark". Applies broad overrides to Tailwind utilities and custom components so the same markup works in both modes. ============================================================ */ /* ─── Smooth transitions for theme switching ─────────────────── */ html, body, *, *::before, *::after { transition-property: background-color, color, border-color, fill, stroke, box-shadow; transition-duration: 220ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Avoid transitioning rapid-fire interactions */ html.theme-no-transition, html.theme-no-transition *, html.theme-no-transition *::before, html.theme-no-transition *::after { transition: none !important; } /* Never transition transform/opacity-only animations */ .no-theme-transition, .no-theme-transition * { transition: none !important; } /* ─── Floating toggle button (always present) ────────────────── */ #chatmmmThemeToggle { position: fixed; bottom: 18px; right: 18px; z-index: 2147483646; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(255, 255, 255, 0.95); color: #0f172a; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.10); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; user-select: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease; } #chatmmmThemeToggle:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.12); } #chatmmmThemeToggle:active { transform: scale(0.95); } #chatmmmThemeToggle .cmm-theme-icon { display: inline-block; font-size: 20px; } html.theme-dark #chatmmmThemeToggle { background: rgba(30, 41, 59, 0.95); color: #f8fafc; border-color: rgba(148, 163, 184, 0.35); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); } /* On small screens, tuck it slightly out of the way */ @media (max-width: 640px) { #chatmmmThemeToggle { bottom: 78px; /* clear of mobile bottom nav */ right: 14px; width: 40px; height: 40px; } } /* ============================================================ DARK MODE OVERRIDES ============================================================ */ html.theme-dark { color-scheme: dark; /* "Lifted slate" palette — page lifted out of near-black (#0b1220) so cards (#1b2335) read as gentle elevation. Keep in sync with tokens.css and the --color-gray-* / token block lower in this file. */ --bg-page: #131826; --bg-card: #1b2335; --bg-elevated: #232c40; --bg-hover: #232c40; --bg-active: #2b3550; --text-primary: #e7ecf3; --text-secondary: #aab4c4; --text-muted: #7e8a9c; --border-base: rgba(148, 163, 184, 0.14); --border-strong: rgba(148, 163, 184, 0.26); } html.theme-dark body { background: var(--bg-page) !important; color: var(--text-primary); } /* ─── Global text-color sanity in dark mode ──────────────────── */ html.theme-dark body, html.theme-dark p, html.theme-dark span, html.theme-dark li, html.theme-dark dd, html.theme-dark dt, html.theme-dark label, html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: inherit; } /* ─── Tailwind utility overrides ─────────────────────────────── */ /* Backgrounds */ html.theme-dark .bg-white { background-color: var(--bg-card) !important; } html.theme-dark .bg-gray-50 { background-color: #0f172a !important; } html.theme-dark .bg-gray-100 { background-color: #111827 !important; } html.theme-dark .bg-gray-200 { background-color: #1f2937 !important; } html.theme-dark .bg-slate-50 { background-color: #0f172a !important; } html.theme-dark .bg-slate-100 { background-color: #111827 !important; } html.theme-dark .bg-slate-200 { background-color: #1f2937 !important; } html.theme-dark .bg-neutral-50 { background-color: #0f172a !important; } html.theme-dark .bg-neutral-100 { background-color: #111827 !important; } html.theme-dark .bg-zinc-50 { background-color: #0f172a !important; } html.theme-dark .bg-zinc-100 { background-color: #111827 !important; } /* Text */ html.theme-dark .text-black { color: #f1f5f9 !important; } html.theme-dark .text-gray-900, html.theme-dark .text-slate-900, html.theme-dark .text-neutral-900, html.theme-dark .text-zinc-900 { color: #f1f5f9 !important; } html.theme-dark .text-gray-800, html.theme-dark .text-slate-800, html.theme-dark .text-neutral-800, html.theme-dark .text-zinc-800 { color: #e5e7eb !important; } html.theme-dark .text-gray-700, html.theme-dark .text-slate-700, html.theme-dark .text-neutral-700, html.theme-dark .text-zinc-700 { color: #d1d5db !important; } html.theme-dark .text-gray-600, html.theme-dark .text-slate-600, html.theme-dark .text-neutral-600, html.theme-dark .text-zinc-600 { color: #9ca3af !important; } html.theme-dark .text-gray-500, html.theme-dark .text-slate-500, html.theme-dark .text-neutral-500, html.theme-dark .text-zinc-500 { color: #94a3b8 !important; } html.theme-dark .text-gray-400, html.theme-dark .text-slate-400 { color: #94a3b8 !important; } /* Borders */ html.theme-dark .border-gray-100, html.theme-dark .border-slate-100, html.theme-dark .border-neutral-100 { border-color: rgba(148, 163, 184, 0.12) !important; } html.theme-dark .border-gray-200, html.theme-dark .border-slate-200, html.theme-dark .border-neutral-200 { border-color: rgba(148, 163, 184, 0.18) !important; } html.theme-dark .border-gray-300, html.theme-dark .border-slate-300, html.theme-dark .border-neutral-300 { border-color: rgba(148, 163, 184, 0.28) !important; } html.theme-dark .border-gray-400, html.theme-dark .border-slate-400 { border-color: rgba(148, 163, 184, 0.4) !important; } /* Divide colors (used by Tailwind divide-y/x) */ html.theme-dark .divide-gray-100 > * + *, html.theme-dark .divide-gray-200 > * + *, html.theme-dark .divide-slate-100 > * + *, html.theme-dark .divide-slate-200 > * + * { border-color: rgba(148, 163, 184, 0.16) !important; } /* Ring */ html.theme-dark .ring-gray-200, html.theme-dark .ring-slate-200 { --tw-ring-color: rgba(148, 163, 184, 0.25) !important; } /* Hover variants commonly seen */ html.theme-dark .hover\:bg-gray-50:hover, html.theme-dark .hover\:bg-slate-50:hover { background-color: #182234 !important; } html.theme-dark .hover\:bg-gray-100:hover, html.theme-dark .hover\:bg-slate-100:hover { background-color: #1e293b !important; } html.theme-dark .hover\:bg-gray-200:hover, html.theme-dark .hover\:bg-slate-200:hover { background-color: #273449 !important; } html.theme-dark .hover\:text-gray-900:hover, html.theme-dark .hover\:text-slate-900:hover { color: #f1f5f9 !important; } /* ─── Generic card / panel classes used across the app ───────── */ html.theme-dark .card, html.theme-dark .panel, html.theme-dark .rounded-lg.bg-white, html.theme-dark .rounded-xl.bg-white, html.theme-dark .rounded-2xl.bg-white, html.theme-dark .shadow.bg-white, html.theme-dark .shadow-md.bg-white, html.theme-dark .shadow-lg.bg-white { background-color: var(--bg-card) !important; color: var(--text-primary); border-color: var(--border-base); } /* ─── Inputs / form controls ─────────────────────────────────── */ html.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html.theme-dark textarea, html.theme-dark select { background-color: #0f172a !important; color: #f1f5f9 !important; border-color: rgba(148, 163, 184, 0.28) !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #64748b !important; } html.theme-dark input:focus, html.theme-dark textarea:focus, html.theme-dark select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important; } /* Code blocks / pre */ html.theme-dark pre, html.theme-dark code { background-color: #0b1220 !important; color: #e5e7eb !important; } /* ─── Modals & overlays ──────────────────────────────────────── */ html.theme-dark .modal-content, html.theme-dark .modal, html.theme-dark dialog, html.theme-dark [role="dialog"], html.theme-dark .fixed.inset-0 > .bg-white, html.theme-dark .fixed.inset-0 .bg-white, html.theme-dark .auth-modal-content, html.theme-dark .auth-modal-card, html.theme-dark .auth-modal-panel { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-base) !important; } /* Tailwind backdrop overlays — keep them dark in dark mode */ html.theme-dark .bg-black\/50, html.theme-dark .bg-black\/40, html.theme-dark .bg-black\/30, html.theme-dark .bg-opacity-50 { background-color: rgba(0, 0, 0, 0.65) !important; } /* ─── ChatMMM-specific component overrides ───────────────────── */ /* Dashboard right-sidebar card */ html.theme-dark .right-sidebar-card, html.theme-dark #rightSidebarContainer .right-sidebar-card { background-color: var(--bg-card) !important; border-color: var(--border-base) !important; color: var(--text-primary); } /* Performance tracker table */ html.theme-dark .perf-table, html.theme-dark .perf-table thead, html.theme-dark .perf-table tbody, html.theme-dark .perf-table tr, html.theme-dark .perf-table td, html.theme-dark .perf-table th { background-color: transparent !important; color: inherit; border-color: rgba(148, 163, 184, 0.16) !important; } html.theme-dark .perf-table thead { background-color: #0f172a !important; } /* Signal hub */ html.theme-dark .signal-hub, html.theme-dark .hub-module, html.theme-dark .hub-sidebar-card, html.theme-dark .hub-module-feed { background-color: var(--bg-card) !important; color: var(--text-primary); border-color: var(--border-base) !important; } html.theme-dark .hub-module-title, html.theme-dark .hub-module-title i { color: var(--text-primary) !important; } html.theme-dark .hub-module-action { color: #93c5fd !important; } html.theme-dark .hub-module-action:hover { background: rgba(59, 130, 246, 0.15) !important; } html.theme-dark .hub-action-sm { background: #1f2937 !important; color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.25) !important; } html.theme-dark .hub-action-sm:hover { background: #273449 !important; color: #93c5fd !important; border-color: rgba(99, 165, 250, 0.4) !important; } html.theme-dark .hub-chip, html.theme-dark .hub-ind-filter-btn, html.theme-dark .hub-sort-select { background: #1f2937 !important; color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.25) !important; } html.theme-dark .hub-chip.active, html.theme-dark .hub-ind-filter-btn.active { background: rgba(59, 130, 246, 0.18) !important; border-color: rgba(99, 165, 250, 0.5) !important; color: #93c5fd !important; } html.theme-dark .hub-position-card, html.theme-dark .hub-watchlist-card, html.theme-dark .hub-breaking-card, html.theme-dark .hub-signal-card, html.theme-dark .hub-latest-brief { background: #182234 !important; border-color: rgba(148, 163, 184, 0.18) !important; color: var(--text-primary); } html.theme-dark .hub-latest-title p, html.theme-dark .hub-brief-time { color: #94a3b8 !important; } html.theme-dark .hub-brief-rank { background: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; } html.theme-dark .hub-brief-headline { color: #f1f5f9 !important; } html.theme-dark .hub-brief-return { color: #e2e8f0 !important; } html.theme-dark .hub-reason-tag { background: rgba(148, 163, 184, 0.10) !important; color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.20) !important; } html.theme-dark .hub-reason-tag.watchlist-match { background: rgba(16, 185, 129, 0.14) !important; color: #86efac !important; border-color: rgba(16, 185, 129, 0.28) !important; } html.theme-dark .hub-reason-tag.same-sector { background: rgba(59, 130, 246, 0.14) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, 0.28) !important; } html.theme-dark .hub-reason-tag.breaking, html.theme-dark .hub-reason-tag.high-impact, html.theme-dark .hub-reason-tag.pro-brief { background: rgba(245, 158, 11, 0.14) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.30) !important; } html.theme-dark .hub-signal-row { border-color: rgba(148, 163, 184, 0.12) !important; } html.theme-dark .hub-signal-row:hover { background: rgba(148, 163, 184, 0.06) !important; } html.theme-dark .hub-signal-headline { color: #f1f5f9 !important; } html.theme-dark .hub-signal-meta { color: #94a3b8 !important; } html.theme-dark .hub-load-more { background: #111827 !important; border-top-color: rgba(148, 163, 184, 0.16) !important; color: #93c5fd !important; } html.theme-dark .hub-load-more:hover { background: #1e293b !important; color: #bfdbfe !important; } /* Industry dropdown */ html.theme-dark .hub-industry-dropdown-toggle, html.theme-dark .hub-industry-dropdown-panel { background: #0f172a !important; color: #e5e7eb !important; border-color: rgba(148, 163, 184, 0.25) !important; } /* Navigation bar */ html.theme-dark #navigationBar, html.theme-dark .navigation-bar, html.theme-dark .nav-bar { background: rgba(11, 18, 32, 0.88) !important; backdrop-filter: blur(12px); border-color: rgba(148, 163, 184, 0.18) !important; color: var(--text-primary); } /* User dropdown */ html.theme-dark .user-dropdown-menu, html.theme-dark #userDropdownMenu { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-base) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important; } html.theme-dark .user-dropdown-menu a, html.theme-dark .user-dropdown-menu button { color: var(--text-primary) !important; } html.theme-dark .user-dropdown-menu a:hover, html.theme-dark .user-dropdown-menu button:hover { background: rgba(148, 163, 184, 0.1) !important; } /* Tables (generic) */ html.theme-dark table { color: inherit; } html.theme-dark table thead { background-color: #0f172a; } html.theme-dark table tbody tr { border-color: rgba(148, 163, 184, 0.12); } html.theme-dark table tbody tr:hover { background-color: rgba(148, 163, 184, 0.06); } /* Scrollbars */ html.theme-dark ::-webkit-scrollbar { background: transparent; } html.theme-dark ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); } html.theme-dark { scrollbar-color: rgba(148, 163, 184, 0.3) transparent; } /* Anchor / link defaults — violet (brand) rather than sky-blue, so links read on-brand in dark mode. Shell chrome (nav, breadcrumbs, user card) is given explicit neutral colors in the "V2 app shell — dark mode" block below so this accent never bleeds into the sidebar. */ html.theme-dark a { color: #a78bfa; } html.theme-dark a:hover { color: #c4b5fd; } /* Disabled state */ html.theme-dark [disabled], html.theme-dark .disabled { opacity: 0.55; } /* ─── Landing page (index.html) light-mode overrides ─────────── */ /* The landing page was hardcoded dark. When in light mode, flip it. */ html.theme-light body.cmm-landing, html.theme-light .cmm-landing-body { background: #ffffff !important; color: #0f172a !important; } html.theme-light .cmm-landing a { color: inherit; } /* In dark mode, restore landing's original dark feel */ html.theme-dark body.cmm-landing, html.theme-dark .cmm-landing-body { background: #0f172a !important; color: #f8fafc !important; } /* ============================================================ LANDING PAGE (index.html) � LIGHT MODE OVERRIDES The landing was authored with hardcoded dark Tailwind classes (bg-slate-950, text-white, etc). When the user picks light mode, flip those to readable light equivalents. ============================================================ */ html.theme-light body.cmm-landing { background: #ffffff !important; color: #0f172a !important; } /* Section / surface backgrounds */ html.theme-light body.cmm-landing .bg-slate-950, html.theme-light body.cmm-landing .bg-slate-900, html.theme-light body.cmm-landing .bg-slate-800 { background-color: #f8fafc !important; } html.theme-light body.cmm-landing .bg-slate-950\/95, html.theme-light body.cmm-landing .bg-slate-900\/95, html.theme-light body.cmm-landing .bg-slate-950\/80, html.theme-light body.cmm-landing .bg-slate-900\/80, html.theme-light body.cmm-landing .bg-slate-950\/60, html.theme-light body.cmm-landing .bg-slate-900\/60 { background-color: rgba(248, 250, 252, 0.92) !important; } html.theme-light body.cmm-landing .bg-black, html.theme-light body.cmm-landing .bg-black\/50, html.theme-light body.cmm-landing .bg-black\/40 { background-color: rgba(15, 23, 42, 0.04) !important; } html.theme-light body.cmm-landing .bg-white\/10, html.theme-light body.cmm-landing .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; } html.theme-light body.cmm-landing .bg-white\/20 { background-color: rgba(15, 23, 42, 0.08) !important; } /* Text */ html.theme-light body.cmm-landing .text-white, html.theme-light body.cmm-landing .text-white\/90 { color: #0f172a !important; } html.theme-light body.cmm-landing .text-white\/80 { color: #1e293b !important; } html.theme-light body.cmm-landing .text-white\/70 { color: #334155 !important; } html.theme-light body.cmm-landing .text-white\/60 { color: #475569 !important; } html.theme-light body.cmm-landing .text-white\/50 { color: #64748b !important; } html.theme-light body.cmm-landing .text-white\/40 { color: #94a3b8 !important; } html.theme-light body.cmm-landing .text-slate-300, html.theme-light body.cmm-landing .text-slate-400 { color: #475569 !important; } html.theme-light body.cmm-landing .text-slate-500 { color: #64748b !important; } /* Borders */ html.theme-light body.cmm-landing .border-white\/10, html.theme-light body.cmm-landing .border-white\/20 { border-color: rgba(15, 23, 42, 0.12) !important; } html.theme-light body.cmm-landing .border-slate-800, html.theme-light body.cmm-landing .border-slate-700 { border-color: #e2e8f0 !important; } /* Hover variants */ html.theme-light body.cmm-landing .hover\:text-white:hover { color: #0f172a !important; } html.theme-light body.cmm-landing .hover\:bg-white\/10:hover { background: rgba(15, 23, 42, 0.06) !important; } /* Gradients keep their accent color but lighten the base */ html.theme-light body.cmm-landing .from-slate-950, html.theme-light body.cmm-landing .from-slate-900 { --tw-gradient-from: #f8fafc !important; --tw-gradient-to: rgba(248, 250, 252, 0) !important; } html.theme-light body.cmm-landing .via-slate-900 { --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9, var(--tw-gradient-to) !important; } html.theme-light body.cmm-landing .to-slate-950, html.theme-light body.cmm-landing .to-slate-900 { --tw-gradient-to: #ffffff !important; } /* Cards with backdrop-blur should pick up a subtle tinted surface */ html.theme-light body.cmm-landing .backdrop-blur, html.theme-light body.cmm-landing .backdrop-blur-lg { backdrop-filter: blur(8px); } /* ============================================================ AGGRESSIVE DARK MODE FIXES (comprehensive contrast pass) ============================================================ */ /* CSS variable rebinds for theme.css tokens */ html.theme-dark { /* Surfaces lifted to match the "Lifted slate" palette above. */ --color-gray-50: #161c2b; --color-gray-100: #1b2335; --color-gray-200: #232c40; --color-gray-300: #2b3550; --color-gray-400: #475569; --color-gray-500: #64748b; --color-gray-600: #8b96a7; --color-gray-700: #aab4c4; --color-gray-800: #cdd5e0; --color-gray-900: #e7ecf3; --bg-page: #131826; --bg-card: #1b2335; --bg-hover: #232c40; --bg-active: #2b3550; --text-primary: #e7ecf3; --text-secondary: #aab4c4; --text-muted: #7e8a9c; --border-color: rgba(148, 163, 184, 0.14); --border-color-dark: rgba(148, 163, 184, 0.26); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4); } /* --- Settings page cards ------------------------------------- */ html.theme-dark .theme-card { background: #111827 !important; border-color: rgba(148, 163, 184, 0.22) !important; color: #f1f5f9 !important; } html.theme-dark .theme-card-header { background: #0f172a !important; border-bottom-color: rgba(148, 163, 184, 0.22) !important; } html.theme-dark .theme-card-title, html.theme-dark .theme-card-title i, html.theme-dark .theme-card-title span, html.theme-dark .theme-card h2, html.theme-dark .theme-card h3 { color: #f8fafc !important; } html.theme-dark .theme-info-box { background: #182234 !important; border-color: rgba(148, 163, 184, 0.22) !important; } html.theme-dark .theme-info-box:hover { background: #1e293b !important; } html.theme-dark .theme-info-label, html.theme-dark .theme-info-label i { color: #cbd5e1 !important; } html.theme-dark .theme-info-value, html.theme-dark .theme-info-value span { color: #f1f5f9 !important; } html.theme-dark .theme-info-value i.text-gray-400, html.theme-dark .theme-info-value .text-gray-500 { color: #94a3b8 !important; } html.theme-dark .settings-page-hero { background: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(16, 185, 129, 0.08)), #111827 !important; border-color: rgba(148, 163, 184, 0.18) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22) !important; } html.theme-dark .settings-page-hero h1 { color: #f8fafc !important; } html.theme-dark .settings-page-hero p:not(.settings-eyebrow) { color: #cbd5e1 !important; } html.theme-dark .settings-eyebrow { color: #a5b4fc !important; } html.theme-dark .settings-section-map span { background: rgba(15, 23, 42, 0.72) !important; border-color: rgba(129, 140, 248, 0.22) !important; color: #cbd5e1 !important; } html.theme-dark .settings-section-map i { color: #a5b4fc !important; } html.theme-dark .theme-sidebar { background: #111827 !important; border-color: rgba(148, 163, 184, 0.22) !important; } html.theme-dark .theme-nav-item { color: #cbd5e1 !important; } html.theme-dark .theme-nav-item:hover { background: rgba(148, 163, 184, 0.08) !important; color: #f1f5f9 !important; } html.theme-dark .theme-nav-item.active { background: rgba(99, 102, 241, 0.15) !important; color: #a5b4fc !important; border-left-color: #818cf8 !important; } /* --- Force light text for ALL plain headings/labels/paragraphs -- */ html.theme-dark body { color: #e5e7eb; } html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: #f8fafc; } html.theme-dark label { color: #cbd5e1; } html.theme-dark p { color: #cbd5e1; } html.theme-dark small { color: #94a3b8; } /* Strong text utility coverage */ html.theme-dark .text-black, html.theme-dark .text-gray-900, html.theme-dark .text-slate-900, html.theme-dark .text-neutral-900, html.theme-dark .text-zinc-900, html.theme-dark .text-stone-900 { color: #f8fafc !important; } html.theme-dark .text-gray-800, html.theme-dark .text-slate-800, html.theme-dark .text-neutral-800, html.theme-dark .text-zinc-800, html.theme-dark .text-stone-800 { color: #e5e7eb !important; } html.theme-dark .text-gray-700, html.theme-dark .text-slate-700, html.theme-dark .text-neutral-700, html.theme-dark .text-zinc-700, html.theme-dark .text-stone-700 { color: #cbd5e1 !important; } html.theme-dark .text-gray-600, html.theme-dark .text-slate-600, html.theme-dark .text-neutral-600, html.theme-dark .text-zinc-600, html.theme-dark .text-stone-600 { color: #94a3b8 !important; } html.theme-dark .text-gray-500, html.theme-dark .text-slate-500, html.theme-dark .text-neutral-500, html.theme-dark .text-zinc-500, html.theme-dark .text-stone-500 { color: #94a3b8 !important; } html.theme-dark .text-gray-400, html.theme-dark .text-slate-400, html.theme-dark .text-neutral-400 { color: #cbd5e1 !important; } html.theme-dark .text-gray-300, html.theme-dark .text-slate-300 { color: #e2e8f0 !important; } /* --- Tailwind colored pills: dim bg / brighten dark text ------- */ html.theme-dark .bg-green-50, html.theme-dark .bg-emerald-50 { background-color: rgba(16,185,129,0.16) !important; } html.theme-dark .bg-green-100, html.theme-dark .bg-emerald-100 { background-color: rgba(16,185,129,0.22) !important; } html.theme-dark .bg-green-200, html.theme-dark .bg-emerald-200 { background-color: rgba(16,185,129,0.28) !important; } html.theme-dark .bg-red-50, html.theme-dark .bg-rose-50 { background-color: rgba(239,68,68,0.16) !important; } html.theme-dark .bg-red-100, html.theme-dark .bg-rose-100 { background-color: rgba(239,68,68,0.22) !important; } html.theme-dark .bg-red-200 { background-color: rgba(239,68,68,0.28) !important; } html.theme-dark .bg-amber-50, html.theme-dark .bg-yellow-50, html.theme-dark .bg-orange-50 { background-color: rgba(245,158,11,0.16) !important; } html.theme-dark .bg-amber-100, html.theme-dark .bg-yellow-100, html.theme-dark .bg-orange-100 { background-color: rgba(245,158,11,0.22) !important; } html.theme-dark .bg-amber-200, html.theme-dark .bg-yellow-200, html.theme-dark .bg-orange-200 { background-color: rgba(245,158,11,0.28) !important; } html.theme-dark .bg-blue-50, html.theme-dark .bg-sky-50, html.theme-dark .bg-indigo-50 { background-color: rgba(59,130,246,0.16) !important; } html.theme-dark .bg-blue-100, html.theme-dark .bg-sky-100, html.theme-dark .bg-indigo-100 { background-color: rgba(59,130,246,0.22) !important; } html.theme-dark .bg-blue-200, html.theme-dark .bg-sky-200 { background-color: rgba(59,130,246,0.28) !important; } html.theme-dark .bg-violet-50, html.theme-dark .bg-purple-50, html.theme-dark .bg-pink-50, html.theme-dark .bg-fuchsia-50 { background-color: rgba(168,85,247,0.16) !important; } html.theme-dark .bg-violet-100, html.theme-dark .bg-purple-100, html.theme-dark .bg-pink-100 { background-color: rgba(168,85,247,0.22) !important; } html.theme-dark .bg-teal-50, html.theme-dark .bg-cyan-50 { background-color: rgba(20,184,166,0.16) !important; } html.theme-dark .bg-teal-100, html.theme-dark .bg-cyan-100 { background-color: rgba(20,184,166,0.22) !important; } /* Dark colored text needs to become bright on pills */ html.theme-dark .text-green-600, html.theme-dark .text-green-700, html.theme-dark .text-green-800, html.theme-dark .text-green-900, html.theme-dark .text-emerald-600, html.theme-dark .text-emerald-700, html.theme-dark .text-emerald-800, html.theme-dark .text-emerald-900 { color: #34d399 !important; } html.theme-dark .text-red-600, html.theme-dark .text-red-700, html.theme-dark .text-red-800, html.theme-dark .text-red-900, html.theme-dark .text-rose-600, html.theme-dark .text-rose-700, html.theme-dark .text-rose-800, html.theme-dark .text-rose-900 { color: #f87171 !important; } html.theme-dark .text-amber-600, html.theme-dark .text-amber-700, html.theme-dark .text-amber-800, html.theme-dark .text-amber-900, html.theme-dark .text-yellow-600, html.theme-dark .text-yellow-700, html.theme-dark .text-yellow-800, html.theme-dark .text-yellow-900, html.theme-dark .text-orange-600, html.theme-dark .text-orange-700, html.theme-dark .text-orange-800, html.theme-dark .text-orange-900 { color: #fbbf24 !important; } html.theme-dark .text-blue-600, html.theme-dark .text-blue-700, html.theme-dark .text-blue-800, html.theme-dark .text-blue-900, html.theme-dark .text-sky-600, html.theme-dark .text-sky-700, html.theme-dark .text-sky-800, html.theme-dark .text-sky-900, html.theme-dark .text-indigo-600, html.theme-dark .text-indigo-700, html.theme-dark .text-indigo-800, html.theme-dark .text-indigo-900 { color: #60a5fa !important; } html.theme-dark .text-violet-600, html.theme-dark .text-violet-700, html.theme-dark .text-violet-800, html.theme-dark .text-violet-900, html.theme-dark .text-purple-600, html.theme-dark .text-purple-700, html.theme-dark .text-purple-800, html.theme-dark .text-purple-900, html.theme-dark .text-pink-600, html.theme-dark .text-pink-700, html.theme-dark .text-pink-800, html.theme-dark .text-pink-900 { color: #c084fc !important; } html.theme-dark .text-teal-600, html.theme-dark .text-teal-700, html.theme-dark .text-teal-800, html.theme-dark .text-teal-900, html.theme-dark .text-cyan-600, html.theme-dark .text-cyan-700, html.theme-dark .text-cyan-800, html.theme-dark .text-cyan-900 { color: #22d3ee !important; } /* Gradient utility backgrounds � flatten light gradients */ html.theme-dark .from-green-50, html.theme-dark .from-emerald-50, html.theme-dark .from-green-100, html.theme-dark .from-emerald-100 { --tw-gradient-from: rgba(16,185,129,0.10) !important; } html.theme-dark .to-green-50, html.theme-dark .to-emerald-50, html.theme-dark .to-green-100, html.theme-dark .to-emerald-100 { --tw-gradient-to: rgba(16,185,129,0.18) !important; } html.theme-dark .from-blue-50, html.theme-dark .from-sky-50, html.theme-dark .from-indigo-50 { --tw-gradient-from: rgba(59,130,246,0.10) !important; } html.theme-dark .to-blue-50, html.theme-dark .to-sky-50, html.theme-dark .to-indigo-50 { --tw-gradient-to: rgba(59,130,246,0.18) !important; } html.theme-dark .from-amber-50, html.theme-dark .from-yellow-50, html.theme-dark .from-orange-50 { --tw-gradient-from: rgba(245,158,11,0.10) !important; } html.theme-dark .to-amber-50, html.theme-dark .to-yellow-50, html.theme-dark .to-orange-50 { --tw-gradient-to: rgba(245,158,11,0.18) !important; } html.theme-dark .from-purple-50, html.theme-dark .from-violet-50, html.theme-dark .from-pink-50 { --tw-gradient-from: rgba(168,85,247,0.10) !important; } html.theme-dark .to-purple-50, html.theme-dark .to-violet-50, html.theme-dark .to-pink-50 { --tw-gradient-to: rgba(168,85,247,0.18) !important; } html.theme-dark .from-white { --tw-gradient-from: rgba(17,24,39,0.0) !important; } html.theme-dark .to-white { --tw-gradient-to: #111827 !important; } html.theme-dark .from-gray-50, html.theme-dark .from-slate-50 { --tw-gradient-from: rgba(15,23,42,0.0) !important; } html.theme-dark .to-gray-50, html.theme-dark .to-slate-50 { --tw-gradient-to: #0f172a !important; } html.theme-dark .from-gray-100, html.theme-dark .from-slate-100 { --tw-gradient-from: #111827 !important; } html.theme-dark .to-gray-100, html.theme-dark .to-slate-100 { --tw-gradient-to: #1f2937 !important; } /* Performance tracker row tints */ html.theme-dark .perf-table tbody tr.bg-green-50, html.theme-dark .perf-table tbody tr.bg-emerald-50 { background-color: rgba(16,185,129,0.08) !important; } html.theme-dark .perf-table tbody tr.bg-red-50 { background-color: rgba(239,68,68,0.08) !important; } /* --- In-nav theme toggle --------------------------------------- */ .cmm-theme-toggle-nav { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: none; background: transparent; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s ease; font-size: 16px; line-height: 1; } .cmm-theme-toggle-nav:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; transform: translateY(-1px); } .cmm-theme-toggle-nav:active { transform: scale(0.95); } .cmm-theme-toggle-nav .cmm-theme-icon { font-size: 16px; } body.cmm-theme-toggle-inline #chatmmmThemeToggle { display: none !important; } /* ============================================================ DARK MODE � User dropdown, watchlist cards, breaking news, subscription cards, and any remaining light surfaces. ============================================================ */ /* --- User dropdown menu ---------------------------------------- */ html.theme-dark .nav-user-menu-panel { background: rgba(17, 24, 39, 0.98) !important; border-color: rgba(148, 163, 184, 0.22) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 12px 26px rgba(0, 0, 0, 0.35) !important; } html.theme-dark .user-menu-profile { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(49, 46, 129, 0.55)) !important; border-bottom-color: rgba(148, 163, 184, 0.22) !important; } html.theme-dark .user-menu-profile-name { color: #f8fafc !important; } html.theme-dark .user-menu-profile-email { color: #cbd5e1 !important; } html.theme-dark .user-menu-item { color: #e2e8f0 !important; } html.theme-dark .user-menu-item:hover { background: rgba(99, 102, 241, 0.18) !important; color: #ffffff !important; } html.theme-dark .user-menu-item-accent { color: #a78bfa !important; } html.theme-dark .user-menu-item-upgrade { color: #34d399 !important; } html.theme-dark .user-menu-item-logout { color: #f87171 !important; } html.theme-dark .user-menu-item i { color: inherit !important; } /* --- Right sidebar cards (Market, Breaking Impact, Watchlist) -- */ html.theme-dark #marketDataPanel .bg-white, html.theme-dark #performancePanel .bg-white, html.theme-dark #rightSidebarContainer .bg-white, html.theme-dark .hub-left-sidebar .bg-white, html.theme-dark .hub-sidebar-card, html.theme-dark .hub-module { background-color: #111827 !important; border-color: rgba(148, 163, 184, 0.18) !important; color: #e5e7eb !important; } /* Watchlist + Breaking Impact items inside the left sidebar */ html.theme-dark .hub-left-sidebar .hub-position-card, html.theme-dark .hub-left-sidebar .hub-watchlist-card, html.theme-dark .hub-left-sidebar .hub-breaking-card, html.theme-dark .hub-left-sidebar [class*="rounded"], html.theme-dark .hub-watchlist-card, html.theme-dark .hub-breaking-card, html.theme-dark .hub-position-card { background: #182234 !important; border-color: rgba(148, 163, 184, 0.18) !important; color: #e5e7eb !important; } html.theme-dark .hub-watchlist-card *, html.theme-dark .hub-breaking-card *, html.theme-dark .hub-position-card * { color: inherit; } html.theme-dark .hub-watchlist-ticker, html.theme-dark .hub-breaking-ticker, html.theme-dark .hub-position-ticker { color: #f1f5f9 !important; } html.theme-dark .hub-watchlist-headline, html.theme-dark .hub-breaking-headline { color: #cbd5e1 !important; } html.theme-dark .hub-watchlist-no-analysis { color: #94a3b8 !important; } html.theme-dark .hub-breaking-time, html.theme-dark .hub-watchlist-time { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; } /* Market mini-table in the right sidebar */ html.theme-dark #rightSidebarStatsRegime, html.theme-dark #rightSidebarStatsRegime * { color: #e5e7eb; } html.theme-dark #rightSidebarStatsRegime .bg-white { background: #182234 !important; border-color: rgba(148, 163, 184, 0.18) !important; } /* Industry / signal hub middle column cards */ html.theme-dark .hub-signal-card, html.theme-dark .signal-card, html.theme-dark .industry-card, html.theme-dark .hub-industry-row-section, html.theme-dark [class*="signal-"][class*="card"] { background: #182234 !important; border-color: rgba(148, 163, 184, 0.18) !important; color: #e5e7eb !important; } /* "PRO" gold pill keeps its color but darker surrounding bg */ html.theme-dark .bg-amber-400, html.theme-dark .bg-amber-500 { color: #1f1306 !important; } /* --- Subscription / PRO Member success card (settings page) --- */ html.theme-dark .bg-emerald-50, html.theme-dark .bg-green-50, html.theme-dark .from-emerald-50, html.theme-dark .from-green-50, html.theme-dark [class*="bg-gradient"][class*="emerald"], html.theme-dark [class*="bg-gradient"][class*="green"] { --tw-gradient-from: rgba(16,185,129,0.10) !important; --tw-gradient-to: rgba(16,185,129,0.18) !important; } /* Status pill: ACTIVE/INACTIVE chips inside dark backgrounds */ html.theme-dark .status-active, html.theme-dark .badge-active, html.theme-dark [class*="bg-amber-100"] { color: #fbbf24 !important; } /* --- Force readable text inside common card wrappers ----------- */ html.theme-dark .bg-white > *, html.theme-dark .bg-white *:not(.text-green-500):not(.text-green-600):not(.text-green-700):not(.text-emerald-500):not(.text-emerald-600):not(.text-red-500):not(.text-red-600):not(.text-rose-500):not(.text-rose-600):not(.text-blue-500):not(.text-blue-600):not(.text-amber-500):not(.text-amber-600):not(.text-yellow-500):not(.text-yellow-600):not(.text-orange-500):not(.text-orange-600):not(.text-purple-500):not(.text-purple-600):not(.text-violet-500):not(.text-violet-600):not(.text-pink-500):not(.text-pink-600):not(.text-indigo-500):not(.text-indigo-600):not(.text-sky-500):not(.text-sky-600):not(.text-teal-500):not(.text-teal-600):not(.text-cyan-500):not(.text-cyan-600) { /* Default subtle lightening � only when no semantic color is set */ } /* Default body text inside dark cards */ html.theme-dark .bg-white, html.theme-dark .rounded-lg.bg-white, html.theme-dark .rounded-xl.bg-white, html.theme-dark .rounded-2xl.bg-white { color: #e5e7eb; } /* --- HR / dividers -------------------------------------------- */ html.theme-dark hr { border-color: rgba(148, 163, 184, 0.2) !important; } /* --- Buttons (generic Tailwind primary blue/indigo) ----------- */ html.theme-dark .bg-indigo-500, html.theme-dark .bg-indigo-600 { color: #ffffff !important; } html.theme-dark .bg-blue-500, html.theme-dark .bg-blue-600 { color: #ffffff !important; } /* --- Loading spinners / placeholder text ----------------------- */ html.theme-dark .text-gray-400 i.fa-spinner, html.theme-dark i.fa-spinner.text-gray-400 { color: #94a3b8 !important; } /* --- Modal/dialog overlays � make all white card backgrounds dark - */ html.theme-dark .modal, html.theme-dark .modal-content, html.theme-dark .modal-card, html.theme-dark [role="dialog"] .bg-white, html.theme-dark .fixed.inset-0 .bg-white, html.theme-dark dialog, html.theme-dark dialog .bg-white { background-color: #111827 !important; color: #f1f5f9 !important; border-color: rgba(148, 163, 184, 0.22) !important; } /* --- Hub left sidebar header backgrounds ----------------------- */ html.theme-dark .hub-module-header { background: transparent !important; border-color: rgba(148, 163, 184, 0.14) !important; } html.theme-dark .hub-industry-dropdown-toggle { color: #e5e7eb !important; } /* --- Performance tracker headers ------------------------------- */ html.theme-dark .perf-table thead th, html.theme-dark #topPerformers thead th { background: #0f172a !important; color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.18) !important; } html.theme-dark #performancePanel .text-xs, html.theme-dark #performancePanel .text-sm, html.theme-dark #performanceSummary, html.theme-dark #performanceSummary * { color: inherit; } /* --- Performance summary "snapshots / followed / move / peak" -- */ html.theme-dark #performanceSummary .bg-white { background: #182234 !important; } html.theme-dark #performanceSummary [class*="text-gray"] { color: #cbd5e1 !important; } /* --- Auth modals & forms in dark mode -------------------------- */ html.theme-dark .auth-modal-content, html.theme-dark .auth-modal-card, html.theme-dark .auth-modal-panel { background: #111827 !important; color: #f1f5f9 !important; border-color: rgba(148, 163, 184, 0.22) !important; } /* --- Make sure the navigation toggle icon stays bright --------- */ html.theme-dark .cmm-theme-toggle-nav { color: #e2e8f0; } html.theme-light .cmm-theme-toggle-nav { color: #cbd5e1; } /* ============================================================ FIXES: flatten performance summary gradients + ensure the topPerformers table wrapper is dark. ============================================================ */ /* Flatten the gradient stat cards in #performanceSummary (they use bg-gradient-to-br from-{color}-50 to-{color}-100). */ html.theme-dark #performanceSummary .bg-gradient-to-br, html.theme-dark #performanceSummary .bg-gradient-to-r, html.theme-dark #performanceSummary .bg-gradient-to-l, html.theme-dark #performanceSummary [class*="bg-gradient"] { background-image: none !important; background: #182234 !important; border: 1px solid rgba(148, 163, 184, 0.18); } /* Flatten the stats+regime banner at #rightSidebarStatsRegime which uses bg-gradient-to-r from-slate-50 via-white to-slate-50. */ html.theme-dark #rightSidebarStatsRegime > div, html.theme-dark #rightSidebarStatsRegime .bg-gradient-to-r, html.theme-dark #rightSidebarStatsRegime [class*="bg-gradient"] { background-image: none !important; background: #182234 !important; border-color: rgba(148, 163, 184, 0.18) !important; box-shadow: none !important; } html.theme-dark #rightSidebarStatsRegime .text-slate-900, html.theme-dark #rightSidebarStatsRegime .text-slate-800 { color: #f1f5f9 !important; } html.theme-dark #rightSidebarStatsRegime .text-slate-700, html.theme-dark #rightSidebarStatsRegime .text-slate-600 { color: #cbd5e1 !important; } html.theme-dark #rightSidebarStatsRegime .text-slate-500, html.theme-dark #rightSidebarStatsRegime .text-slate-400 { color: #94a3b8 !important; } html.theme-dark #rightSidebarStatsRegime .bg-slate-200, html.theme-dark #rightSidebarStatsRegime .bg-slate-300 { background: rgba(148,163,184,0.25) !important; } /* Stop transition flicker on the rerendered banner. The JS replaces innerHTML on every price tick; the `transition-all duration-300` class makes every paint visibly flash. */ html.theme-dark #rightSidebarStatsRegime *, html.theme-light #rightSidebarStatsRegime * { transition: none !important; animation: none !important; } /* Light mode: keep the stat cards flat and clean, not pastel gradients. */ html.theme-light #performanceSummary .bg-gradient-to-br, html.theme-light #performanceSummary .bg-gradient-to-r, html.theme-light #performanceSummary [class*="bg-gradient"] { background-image: none !important; background: #f8fafc !important; border: 1px solid #e5e7eb; } /* Force the table wrapper (bg-white rounded-lg border border-gray-200) inside #topPerformers to be dark, regardless of any conflicting rule. */ html.theme-dark #topPerformers .bg-white, html.theme-dark #topPerformers > .bg-white, html.theme-dark #topPerformers div.bg-white, /* The Performance Leaders List wrapper that CONTAINS #topPerformers */ html.theme-dark #performancePanel > .bg-white, html.theme-dark #performancePanel .bg-white:has(#topPerformers) { background-color: transparent !important; border-color: rgba(148, 163, 184, 0.22) !important; color: #e5e7eb !important; } /* THEAD gradient inside the perf table -- replace with a flat dark color */ html.theme-dark #topPerformers .perf-table thead, html.theme-dark .perf-table thead.bg-gradient-to-r, html.theme-dark .perf-table thead[class*="bg-gradient"] { background-image: none !important; background: #0f172a !important; border-color: rgba(148, 163, 184, 0.18) !important; } html.theme-dark .perf-table thead th { background: #0f172a !important; color: #cbd5e1 !important; border-color: rgba(148, 163, 184, 0.18) !important; } /* Sticky ticker column has `background: inherit` inline */ html.theme-dark .perf-table thead th.perf-sticky-col { background: #0f172a !important; } /* Sort controls bar above the table (bg-gray-50) */ html.theme-dark #topPerformers .bg-gray-50 { background-color: #182234 !important; color: #cbd5e1; } html.theme-dark #topPerformers .sort-btn { background: #1f2937 !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.25) !important; } html.theme-dark #topPerformers .sort-btn:hover { background: #273449 !important; } /* tbody divide colors */ html.theme-dark .perf-table tbody.divide-gray-100 > * + *, html.theme-dark .perf-table tbody.divide-gray-200 > * + * { border-color: rgba(148, 163, 184, 0.14) !important; } /* tbody rows -- dark background so rows visually sit on dark surface */ html.theme-dark .perf-table tbody tr { background-color: #111827 !important; } html.theme-dark .perf-table tbody tr:hover { background-color: rgba(148, 163, 184, 0.07) !important; } /* Position-row gradient overrides — replace light white stops with dark surface */ html.theme-dark .performance-row.position-active { background: linear-gradient(to right, rgba(34, 197, 94, 0.12) 0%, #111827 8%, #111827 100%) !important; } html.theme-dark .performance-row.position-active:hover { background: linear-gradient(to right, rgba(34, 197, 94, 0.20) 0%, #182234 8%, #182234 100%) !important; } html.theme-dark .performance-row.position-exited { background: linear-gradient(to right, rgba(59, 130, 246, 0.12) 0%, #111827 8%, #111827 100%) !important; } html.theme-dark .performance-row.position-exited:hover { background: linear-gradient(to right, rgba(59, 130, 246, 0.20) 0%, #182234 8%, #182234 100%) !important; } html.theme-dark .perf-table tbody tr td { color: #e5e7eb; } /* Watchlist container (bg-white rounded-lg border border-gray-200) */ html.theme-dark .watchlist-container.bg-white, html.theme-dark .watchlist-container { background-color: #111827 !important; border-color: rgba(148, 163, 184, 0.22) !important; color: #e5e7eb !important; } /* ── News card text: white in dark mode (matching Breaking Impact style) ── */ html.theme-dark .news-card .card-tldr-grid { background: #182234 !important; border-color: rgba(148, 163, 184, 0.14) !important; } html.theme-dark .news-card .card-tldr-grid:hover { background: #1e2d42 !important; } /* TL;DR description paragraph */ html.theme-dark .news-card .text-gray-600 { color: #e2e8f0 !important; } /* "Live" / "Peak" labels, time-ago, entry-price, "Since…" date */ html.theme-dark .news-card .text-gray-400 { color: #cbd5e1 !important; } html.theme-dark .news-card .text-gray-500 { color: #d1d5db !important; } /* Company ticker inside the companies panel */ html.theme-dark .news-card .text-gray-900 { color: #f1f5f9 !important; } /* ============================================================ V2 APP SHELL — DARK MODE These rules are UNLAYERED, so they win over shell.css (in @layer components) and over the generic `html.theme-dark a` accent. Goal: neutral sidebar/topbar chrome with a single light-violet accent (#a78bfa / #c4b5fd) — never sky-blue, and never dark-violet (#6d28d9/#7c3aed) foreground on a dark surface (illegible). Also fixes the few spots that paired a brand-tint background (now translucent violet) with dark --brand-700 text. ============================================================ */ /* ── Sidebar nav items ── */ html.theme-dark .cmm-nav-item { color: #aab4c4; } html.theme-dark .cmm-nav-item__icon { color: #7e8a9c; } html.theme-dark .cmm-nav-item:hover { background: rgba(148, 163, 184, 0.10); color: #e7ecf3; } html.theme-dark .cmm-nav-item:hover .cmm-nav-item__icon { color: #c4b5fd; } html.theme-dark .cmm-nav-item.is-active, html.theme-dark .cmm-nav-item[aria-current="page"] { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; } html.theme-dark .cmm-nav-item.is-active .cmm-nav-item__icon, html.theme-dark .cmm-nav-item[aria-current="page"] .cmm-nav-item__icon { color: #a78bfa; } html.theme-dark .cmm-nav-item__badge { background: rgba(139, 92, 246, 0.20); color: #c4b5fd; } /* ── Breadcrumbs ── */ html.theme-dark .cmm-breadcrumbs__crumb { color: var(--text-muted); } html.theme-dark .cmm-breadcrumbs__crumb:hover { color: #c4b5fd; } html.theme-dark .cmm-breadcrumbs__crumb.is-current { color: var(--text-primary); } /* ── Topbar icon buttons + user card hover (gentle lift, not dark-violet) ── */ html.theme-dark .cmm-icon-btn { color: var(--text-secondary); } html.theme-dark .cmm-icon-btn:hover { background: rgba(148, 163, 184, 0.10); color: #c4b5fd; } html.theme-dark .cmm-user-card:hover { background: rgba(148, 163, 184, 0.08); } /* ── Small brand accents that would otherwise be dark-violet on dark ── */ html.theme-dark .cmm-search-row__sym { color: #c4b5fd; } html.theme-dark .cmm-saved-popover__title i, html.theme-dark .cmm-saved-popover__all, html.theme-dark .cmm-learn-modal__title i, html.theme-dark .cmm-learn-modal__more a { color: #a78bfa; } /* ── Dashboard tags paired with a brand-tint background ── */ html.theme-dark .dash-card__tag[data-tag="watchlist-match"], html.theme-dark .dash-card__tag[data-tag="same-sector"] { color: #c4b5fd; } /* ── Feedback survey card (core/shell/feedback-survey.js) ── Unlayered on purpose: the global reset above forces `color: inherit` on p / label / h2 and beats the layered colors in shell.css. */ html.theme-dark .cmm-feedback-card { background: var(--surface-elevated, var(--bg-elevated, #1b2335)); color: var(--text-primary, #e7ecf3); border-color: var(--border-color, #2b3550); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } html.theme-dark .cmm-feedback-card__title, html.theme-dark .cmm-feedback-card__consent { color: var(--text-primary, #e7ecf3); } html.theme-dark .cmm-feedback-card__sub { color: var(--text-secondary, #aab4c4); } html.theme-dark .cmm-feedback-card__helper, html.theme-dark .cmm-feedback-card__count, html.theme-dark .cmm-feedback-card__close { color: var(--text-muted, #7e8a9c); } html.theme-dark .cmm-feedback-card__close:hover { background: rgba(148, 163, 184, 0.10); color: var(--text-primary, #e7ecf3); } html.theme-dark .cmm-feedback-card__choice, html.theme-dark .cmm-feedback-card__reason, html.theme-dark .cmm-feedback-card__text { background: rgba(148, 163, 184, 0.06); border-color: var(--border-color, #2b3550); color: var(--text-primary, #e7ecf3); } html.theme-dark .cmm-feedback-card__choice:hover, html.theme-dark .cmm-feedback-card__reason:hover { background: rgba(139, 92, 246, 0.16); border-color: rgba(167, 139, 250, 0.5); } html.theme-dark .cmm-feedback-card__choice[aria-checked="true"], html.theme-dark .cmm-feedback-card__reason[aria-checked="true"] { background: rgba(139, 92, 246, 0.22); border-color: #a78bfa; color: #ede9fe; } html.theme-dark .cmm-feedback-card__text:focus { border-color: #a78bfa; } html.theme-dark .cmm-feedback-btn--ghost { color: var(--text-secondary, #aab4c4); border-color: var(--border-color, #2b3550); } html.theme-dark .cmm-feedback-btn--ghost:hover:not(:disabled) { background: rgba(148, 163, 184, 0.10); color: var(--text-primary, #e7ecf3); border-color: rgba(167, 139, 250, 0.5); }