/* EVO TrustGuard — shared themes * * User-selectable dark/light mode toggle (C37 Dark Mode sprint). * * Theme model: * - Default / [data-theme="light"] → preserves the existing portal palette * from css/shared.css exactly. Do not alter light-mode values here — * the project's existing look is the source of truth. * - [data-theme="dark"] → near-black backdrop (#0a0a0a), elevated * surfaces (#141414 / #1c1c1c), muted borders (#2a2a2a), brand red * shifted to the more legible dark-mode value (#e5342e) per the * approved dark-mode mockups. * * Loading order on every portal page: * * * * shared-themes.css must come AFTER css/shared.css so its dark-mode * overrides win the cascade. * * Semantic overload note: * Existing portal pages use var(--white) both as a "brand white" token * (white text on red buttons, avatar fg, push-banner copy) AND as a * generic "card surface" background. Swapping --white globally would * break the text-on-red usage. So this stylesheet: * 1. Keeps --white == #ffffff in every theme. * 2. Adds selector-based overrides for surfaces that must go dark * (cards, tiles, bottom nav, sheets, filter bars, etc.). * 3. Explicitly pins the EVO TrustGuard white logo header * (.dash-nav, .top-bar) to white in both themes, and scopes * the nav interior to light-mode CSS variables via a nested * cascade so avatar/back-button/title contrast stays correct * against the white header background. * * EVO TrustGuard logo header is white in BOTH themes by product decision * — do NOT generalize the dark card override to .dash-nav or .top-bar. */ /* ── Default / light theme ───────────────────────────────────────────── */ :root, :root[data-theme="light"] { /* Additional semantic aliases that newer mockups reference. * Light-mode values picked to match existing shared.css tokens so that * any future code can use the semantic name without changing visuals. */ --surface: #ffffff; --surface-elevated: #fafafa; --border-strong: #d0d0d0; --text: #1a1a1a; --text-muted: #666666; --text-dim: #999999; --purple: #7c3aed; --red-dim: #f9e8e8; } /* ── Dark theme ──────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Swap of the 11 core tokens defined in css/shared.css. --white is * intentionally NOT swapped (see header comment). */ --bg: #0a0a0a; --dark: #f5f5f5; --mid: #cccccc; --light: #9a9a9a; --border: #2a2a2a; --red: #e5342e; --red-hover: #c72a25; --red-light: rgba(229, 52, 46, 0.12); --green: #22c55e; --amber: #f59e0b; /* New semantic aliases */ --surface: #141414; --surface-elevated: #1c1c1c; --border-strong: #3a3a3a; --text: #f5f5f5; --text-muted: #9a9a9a; --text-dim: #6a6a6a; --purple: #8b5cf6; --red-dim: rgba(229, 52, 46, 0.12); } /* ── Dark-mode surface overrides ─────────────────────────────────────── * * Target class names known to render card / surface backgrounds across * portal pages. Kept narrow so we don't accidentally repaint elements * that are meant to be red (buttons), dark (avatars, toasts), or * transparent (layout containers). */ [data-theme="dark"] body { background: var(--bg); color: var(--dark); } /* Cards, tiles, lead cards, client cards, skeletons, sheets, filter * surfaces, load-more, bottom nav, filter selects/chips, menus, tab * strips, and the sticky detail topbars. Any surface that uses * `background: var(--white)` OR a hardcoded `#ffffff` for its card fill * should be in this list. */ [data-theme="dark"] .card, [data-theme="dark"] .tile, [data-theme="dark"] .lead-card, [data-theme="dark"] .client-card, [data-theme="dark"] .skeleton-card, [data-theme="dark"] .sheet, [data-theme="dark"] .bottom-nav, [data-theme="dark"] .filter-bar, [data-theme="dark"] .filter-row, [data-theme="dark"] .filter-tabs, [data-theme="dark"] .title-row, [data-theme="dark"] .filter-select, [data-theme="dark"] .filter-chip, [data-theme="dark"] .filter-tab, [data-theme="dark"] .filter-menu, [data-theme="dark"] .load-more-btn, [data-theme="dark"] .detail-topbar, [data-theme="dark"] .card-topbar, [data-theme="dark"] .doc-action, [data-theme="dark"] .card-pass, [data-theme="dark"] .skeleton-line, [data-theme="dark"] .quote-field textarea, [data-theme="dark"] .sheet-field input, [data-theme="dark"] .sheet-field select, [data-theme="dark"] .sheet-field textarea { background: var(--surface); border-color: var(--border); color: var(--text); } /* Dashboard tile left-border red accent — the bulk `border-color` override * above would otherwise repaint the red accent to var(--border) in dark * mode. Re-pin so the accent stays persistent idle AND hover, matching * light-mode behavior. */ [data-theme="dark"] .tile { border-left-color: var(--red); } /* Muted / "Coming soon" tile on dashboard — elevated surface, not the * primary surface, so it reads as a disabled state against neighbors. */ [data-theme="dark"] .tile-muted { background: var(--surface-elevated); border-left-color: var(--red); } /* Tile icon chip — shared light-gray chip behind a 20px svg. In dark * mode this needs to lift above the card surface. */ [data-theme="dark"] .tile .tile-icon { background: var(--surface-elevated); color: var(--text); } [data-theme="dark"] .tile-priority .tile-icon { background: var(--red-dim); color: var(--red); } [data-theme="dark"] .tile-muted .tile-icon { background: #222222; color: var(--text-dim); } [data-theme="dark"] .tile-coming { background: #222222; color: var(--text-dim); } [data-theme="dark"] .tile-muted .tile-label { color: var(--text-muted); } [data-theme="dark"] .tile-muted .tile-subtitle { color: var(--text-dim); } /* Lead-card / client-card internal chrome — the top bar area that uses * hardcoded #f8f8f8 across marketplace, my-leads, lead-detail. */ [data-theme="dark"] .card-topbar { background: var(--surface-elevated); border-bottom-color: var(--border); } /* Purchased-lead / client-detail round icon buttons (40×40 #f4f4f4). */ [data-theme="dark"] .icon-btn { background: var(--surface-elevated); border-color: var(--border); color: var(--text); } /* Filter menu items (my-leads dropdown) — hover uses hardcoded #f5f5f5. */ [data-theme="dark"] .filter-menu-item { color: var(--text); } [data-theme="dark"] .filter-menu-item:hover { background: var(--surface-elevated); } /* Dashboard greeting subtitle pins to a visible gray — hardcoded #a8a8a8 * in light mode was chosen against the dark body backdrop, which still * applies in dark mode, so leave it alone unless the author explicitly * overrides it. No rule needed. */ /* ── EVO TrustGuard header — theme-adaptive ──────────────────────────── * * Header surface now follows the active theme. In light mode it inherits * the page-level white from the page's own .dash-nav / .top-bar rule; in * dark mode we repaint it to the elevated surface token so it reads as a * raised container against the near-black body. The logo itself swaps * its text-color fills via CSS variables (see .brand-evo / * .brand-trustguard below) so EVO stays red and "TrustGuard" flips from * dark-grey (light theme) to light-grey (dark theme). */ [data-theme="dark"] .dash-nav, [data-theme="dark"] .top-bar { background: var(--surface); border-bottom-color: var(--border); } /* ── Theme toggle button (appears in the top nav) ────────────────────── * * Circular, ghost-style, matching the rhythm of the nav avatar / back * button. Same size on both desktop and mobile. Sun icon shows when * the current theme is DARK (so clicking switches back to light); moon * icon shows when the current theme is LIGHT. */ .nav-theme-toggle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 10px; background: transparent; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dark); transition: background 0.15s ease, color 0.15s ease; font-family: inherit; flex-shrink: 0; } .nav-theme-toggle:hover { background: var(--border); color: var(--dark); } .nav-theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .nav-theme-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; } .nav-theme-toggle .theme-icon-sun { display: none; } .nav-theme-toggle .theme-icon-moon { display: block; } :root[data-theme="dark"] .nav-theme-toggle .theme-icon-sun { display: block; } :root[data-theme="dark"] .nav-theme-toggle .theme-icon-moon { display: none; } /* ── Appearance card (Profile & Settings → Appearance section) ───────── * * Segmented Light / Dark control rendered by profile.html. Layout * matches the other `.card-body` rows on the Profile page (padding 14px * 18px 18px, gap 10px). */ .appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; } .appearance-label { font-size: 14px; color: var(--dark); font-weight: 500; } .appearance-options { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); } .appearance-opt { appearance: none; border: none; background: transparent; padding: 8px 14px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--light); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; } .appearance-opt + .appearance-opt { border-left: 1px solid var(--border); } .appearance-opt:hover { color: var(--dark); } .appearance-opt.is-active { background: var(--red); color: #ffffff; } .appearance-opt.is-active:hover { color: #ffffff; } .appearance-opt svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .appearance-helper { font-size: 12px; color: var(--light); margin-top: 10px; line-height: 1.45; } /* ── Detail-page surfaces (lead-detail, purchased-lead, client-detail) ─ * * These pages render their content in cards that hardcode * `background: var(--white)` across their inline