/** * PriceDepth Dark Mode — css/dark-mode.css * * Overrides :root custom properties when [data-theme="dark"] is set on . * Light mode remains the default. All transitions are smooth (200ms). */ /* ── Transition layer — smooth color changes on theme flip ── */ html[data-theme] body, html[data-theme] .card, html[data-theme] .nav, html[data-theme] .tp-shell, html[data-theme] .sidebar, html[data-theme] input, html[data-theme] textarea, html[data-theme] select, html[data-theme] button, html[data-theme] .tp-shell-drawer, html[data-theme] .tp-shell-menu { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* ── Dark Theme Custom Properties ────────────────────────────────────────── */ html[data-theme="dark"] { /* Brand Colors — primary shifts to lighter green for contrast */ --color-primary: #1a8a6e; --color-primary-dark: #0F766E; /* Accent — gold stays the same, works on dark */ --color-accent: #d4a853; --color-accent-light: #e0be78; --color-accent-border: rgba(212,168,83,0.3); --color-accent-bg: rgba(212,168,83,0.08); /* Neutrals — inverted */ --color-text: #c9d1d9; --color-text-secondary: #b1bac4; --color-text-muted: #8b949e; --color-text-faint: #6e7681; --color-bg: #0d1117; --color-bg-alt: #0d1117; --color-bg-dark: #010409; --color-border: #30363d; --color-border-light: #21262d; /* Semantic — brighter for dark bg contrast (WCAG AA on #0d1117) */ --color-success: #3fb950; --color-danger: #f85149; --color-danger-light: #ff7b72; /* Gold Accent System */ --color-gold: #d4a853; --color-gold-light: #e0be78; --color-gold-dark: #b8903f; --color-gold-bg: rgba(212,168,83,0.1); --color-gold-border: rgba(212,168,83,0.35); /* Shadows — deeper for dark mode */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); --shadow-primary: 0 4px 14px rgba(26,138,110,0.25); --shadow-primary-hover: 0 6px 20px rgba(26,138,110,0.35); color-scheme: dark; } /* ── Body ── */ html[data-theme="dark"] body { background: #0d1117; color: #c9d1d9; } /* ── Nav (old .nav class — fallback for pages not yet on shell.js) ── */ html[data-theme="dark"] .nav { background: rgba(13,17,23,0.92); border-color: #21262d; } html[data-theme="dark"] .nav-logo { color: #f0f6fc; } html[data-theme="dark"] .nav-logo span { color: #1a8a6e; } html[data-theme="dark"] .nav-links a { color: #8b949e; } html[data-theme="dark"] .nav-links a:hover { color: #f0f6fc; } html[data-theme="dark"] .nav-links a.active { color: #1a8a6e; } /* ── Shell (tp-shell) ── */ html[data-theme="dark"] .tp-shell { background: rgba(13,17,23,0.94); border-color: #21262d; } html[data-theme="dark"] .tp-shell-logo { color: #f0f6fc; } html[data-theme="dark"] .tp-shell-logo span { color: #1a8a6e; } html[data-theme="dark"] .tp-shell-links a { color: #8b949e; } html[data-theme="dark"] .tp-shell-links a:hover { color: #f0f6fc; } html[data-theme="dark"] .tp-shell-links a.active { color: #1a8a6e; border-color: #1a8a6e; } html[data-theme="dark"] .tp-shell-signin { background: #1a8a6e; color: #fff; } html[data-theme="dark"] .tp-shell-signin:hover { background: #0F766E; } html[data-theme="dark"] .tp-shell-avatar-btn { background: #1a8a6e; color: #fff; } /* Shell search */ html[data-theme="dark"] .tp-shell-search-input { background: #161b22; color: #f0f6fc; border-color: #30363d; } html[data-theme="dark"] .tp-shell-search-input::placeholder { color: #6e7681; } html[data-theme="dark"] .tp-shell-search-input:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.15); } html[data-theme="dark"] .tp-shell-search-btn { color: #6e7681; } html[data-theme="dark"] .tp-shell-search-btn:hover { color: #1a8a6e; background: rgba(26,138,110,0.1); } /* Shell hamburger */ html[data-theme="dark"] .tp-shell-hamburger span { background: #f0f6fc; } /* Shell drawer (mobile) */ html[data-theme="dark"] .tp-shell-drawer { background: #161b22; } html[data-theme="dark"] .tp-shell-drawer a { color: #8b949e; border-color: #21262d; } html[data-theme="dark"] .tp-shell-drawer a.active { color: #1a8a6e; } html[data-theme="dark"] .tp-shell-drawer-search input { background: #0d1117; color: #f0f6fc; border-color: #30363d; } html[data-theme="dark"] .tp-shell-drawer-search input::placeholder { color: #6e7681; } html[data-theme="dark"] .tp-shell-drawer-search input:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.15); } html[data-theme="dark"] .tp-shell-drawer-search button { color: #6e7681; } html[data-theme="dark"] .tp-shell-drawer-search button:hover { color: #1a8a6e; } html[data-theme="dark"] .tp-shell-overlay { background: rgba(0,0,0,0.6); } /* Shell dropdown menu */ html[data-theme="dark"] .tp-shell-menu { background: #161b22; border-color: #30363d; box-shadow: 0 20px 40px rgba(0,0,0,0.4); } html[data-theme="dark"] .tp-shell-menu-header { border-color: #21262d; } html[data-theme="dark"] .tp-shell-menu-name { color: #f0f6fc; } html[data-theme="dark"] .tp-shell-menu-email { color: #8b949e; } html[data-theme="dark"] .tp-shell-menu button { color: #c9d1d9; } html[data-theme="dark"] .tp-shell-menu button:hover { background: #21262d; color: #f0f6fc; } html[data-theme="dark"] .tp-shell-menu button.danger:hover { background: rgba(248,81,73,0.1); color: #f85149; } /* ── Cards (shared .card component) ── */ html[data-theme="dark"] .card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .card:hover { border-color: #d4a853; box-shadow: 0 12px 40px rgba(0,0,0,0.3); } /* ── Buttons ── */ html[data-theme="dark"] .btn-outline { color: #1a8a6e; border-color: #30363d; } html[data-theme="dark"] .btn-outline:hover { border-color: #1a8a6e; background: rgba(26,138,110,0.08); } /* ── Footer ── */ html[data-theme="dark"] .footer { background: #010409; color: #6e7681; } /* ── Forms & Inputs ── */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #161b22; color: #c9d1d9; border-color: #30363d; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6e7681; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.15); } /* ── Price Up/Down — high contrast on dark ── */ html[data-theme="dark"] .price-up { color: #3fb950; } html[data-theme="dark"] .price-down { color: #f85149; } /* ── Tables ── */ html[data-theme="dark"] table { border-color: #21262d; } html[data-theme="dark"] th { background: #161b22; color: #8b949e; border-color: #21262d; } html[data-theme="dark"] td { border-color: #21262d; } html[data-theme="dark"] tr:hover td { background: rgba(22,27,34,0.5); } /* ── Code blocks ── */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #161b22; color: #c9d1d9; border-color: #30363d; } /* ── Scrollbars (Webkit) ── */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; } /* ── Skeleton loaders ── */ html[data-theme="dark"] .skeleton, html[data-theme="dark"] [class*="skeleton"] { background: #21262d; } html[data-theme="dark"] .skeleton::after, html[data-theme="dark"] [class*="skeleton"]::after { background: linear-gradient(90deg, transparent, rgba(48,54,61,0.6), transparent); } /* ── Global search dropdown ── */ html[data-theme="dark"] .gs-dropdown { background: #161b22; border-color: #30363d; box-shadow: 0 12px 40px rgba(0,0,0,0.4); } html[data-theme="dark"] .gs-item:hover, html[data-theme="dark"] .gs-item.active { background: #21262d; } html[data-theme="dark"] .gs-item-name { color: #f0f6fc; } html[data-theme="dark"] .gs-item-meta { color: #8b949e; } /* ── Modal ── */ html[data-theme="dark"] .pd-modal-overlay { background: rgba(0,0,0,0.7); } html[data-theme="dark"] .pd-modal { background: #161b22; border-color: #30363d; box-shadow: 0 24px 64px rgba(0,0,0,0.5); } html[data-theme="dark"] .pd-modal-header { border-color: #21262d; color: #f0f6fc; } html[data-theme="dark"] .pd-modal-close { color: #8b949e; } html[data-theme="dark"] .pd-modal-close:hover { color: #f0f6fc; } /* ── Dashboard sidebar ── */ html[data-theme="dark"] .sidebar { background: #0d1117; border-color: #21262d; } /* ── Dashboard stat cards / hero ── */ html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stat-strip, html[data-theme="dark"] .metric-card { background: #161b22; border-color: #30363d; color: #c9d1d9; } /* ── Badge styles ── */ html[data-theme="dark"] .badge { background: #21262d; color: #c9d1d9; } html[data-theme="dark"] .badge-premium { background: rgba(212,168,83,0.15); color: #d4a853; } /* ── Gold accent system — stays consistent ── */ html[data-theme="dark"] .accent-gold { color: #d4a853; } html[data-theme="dark"] .shimmer-gold { background: linear-gradient(90deg, #d4a853, #e0be78, #d4a853); } /* ── Tooltip (chart-utils custom tooltip) ── */ html[data-theme="dark"] .tp-tooltip { background: #161b22; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } /* ── Bottom tabs (mobile dashboard) ── */ html[data-theme="dark"] .tp-bottom-tabs { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .tp-bottom-tab { color: #6e7681; } html[data-theme="dark"] .tp-bottom-tab.active { color: #d4a853; } /* ── Theme Toggle Button ── */ .tp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; background: transparent; color: var(--color-text-muted, #64748b); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } .tp-theme-toggle:hover { background: var(--color-accent-bg, rgba(201,162,75,0.08)); color: var(--color-accent, #C9A24B); border-color: var(--color-accent-border, rgba(201,162,75,0.3)); } .tp-theme-toggle:focus-visible { outline: 2px solid var(--color-primary, #0F3D2E); outline-offset: 2px; } .tp-theme-toggle svg { width: 18px; height: 18px; } .tp-theme-icon-moon { display: none; } html[data-theme="dark"] .tp-theme-toggle { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .tp-theme-toggle:hover { background: rgba(212,168,83,0.1); color: #d4a853; border-color: rgba(212,168,83,0.35); } /* ── Docs page specifics ── */ html[data-theme="dark"] .docs-sidebar { background: #0d1117; border-color: #21262d; } html[data-theme="dark"] .docs-sidebar a { color: #8b949e; } html[data-theme="dark"] .docs-sidebar a:hover { color: #f0f6fc; } html[data-theme="dark"] .docs-sidebar a.active { color: #d4a853; background: rgba(212,168,83,0.08); } html[data-theme="dark"] .endpoint-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .method-badge { opacity: 0.9; } /* ── Compare page ── */ html[data-theme="dark"] .compare-table th { background: #161b22; } /* ── Developer page ── */ html[data-theme="dark"] .dev-card { background: #161b22; border-color: #30363d; } /* ── Items page (already dark-native, ensure consistency) ── */ html[data-theme="dark"] .item-image-wrap { background: #161b22; } html[data-theme="dark"] .source-row { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .source-row:hover { background: #1c2128; } /* ── Ask AI page ── */ html[data-theme="dark"] .ask-input-wrap { background: #161b22; border-color: #30363d; } /* ── Onboarding checklist ── */ html[data-theme="dark"] .onboarding-panel { background: #161b22; border-color: #30363d; } /* ── Portal page ── */ html[data-theme="dark"] .portal-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .portal-input { background: #0d1117; border-color: #30363d; color: #c9d1d9; } /* ── Pricing page tiers ── */ html[data-theme="dark"] .tier-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .tier-card:hover { border-color: #d4a853; } html[data-theme="dark"] .tier-card.featured { border-color: #d4a853; box-shadow: 0 0 0 1px #d4a853; } /* ══════════════════════════════════════════════════════════════════════ DASHBOARD — Topbar ══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .topbar { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .topbar-greeting h1 { color: #f0f6fc; } html[data-theme="dark"] .topbar-greeting p { color: #8b949e; } html[data-theme="dark"] .btn-settings { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-settings:hover { border-color: #1a8a6e; color: #1a8a6e; } /* ── Explore Panel ── */ html[data-theme="dark"] .explore-panel .search-hero h1 { color: #f0f6fc; } html[data-theme="dark"] .explore-panel .search-hero p { color: #8b949e; } html[data-theme="dark"] .explore-panel .search-bar input { background: #161b22; border-color: #30363d; color: #f0f6fc; } html[data-theme="dark"] .explore-panel .search-bar input:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.15); } html[data-theme="dark"] .explore-panel .v-pill { background: #161b22; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .explore-panel .v-pill.active, html[data-theme="dark"] .explore-panel .v-pill:hover { background: #1a8a6e; color: #fff; border-color: #1a8a6e; } html[data-theme="dark"] .explore-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .explore-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } html[data-theme="dark"] .explore-card img { background: #21262d; } html[data-theme="dark"] .explore-card-meta { color: #8b949e; } html[data-theme="dark"] .explore-card-price { color: #1a8a6e; } html[data-theme="dark"] .explore-empty { color: #8b949e; } /* ── Portfolio Chart Area ── */ html[data-theme="dark"] .portfolio-chart-wrap { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .chart-wrap-title { color: #f0f6fc; } html[data-theme="dark"] .hero-period-btn { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .hero-period-btn:hover { border-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .hero-period-btn.active { background: #1a8a6e; color: #fff; border-color: #1a8a6e; } /* ── Top Movers Section ── */ html[data-theme="dark"] .top-movers-section { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .top-movers-header h3 { color: #f0f6fc; } html[data-theme="dark"] .top-movers-header .movers-badge { color: #8b949e; background: #21262d; } html[data-theme="dark"] .mover-card { border-color: #30363d; } html[data-theme="dark"] .mover-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } html[data-theme="dark"] .mover-card img { background: #21262d; } html[data-theme="dark"] .mover-card .mover-placeholder { background: #21262d; } html[data-theme="dark"] .mover-card-name { color: #f0f6fc; } html[data-theme="dark"] .mover-card-grade { color: #8b949e; } html[data-theme="dark"] .mover-card-price { color: #f0f6fc; } html[data-theme="dark"] .mover-card-change.up { color: #3fb950; } html[data-theme="dark"] .mover-card-change.down { color: #f85149; } /* ── Holdings Section (Overview) ── */ html[data-theme="dark"] .overview-holdings-section { border-color: #21262d; } html[data-theme="dark"] .section-header h3 { color: #f0f6fc; } html[data-theme="dark"] .section-link { color: #1a8a6e; } html[data-theme="dark"] .holdings-card-row { border-color: #21262d; } html[data-theme="dark"] .holdings-card-row:hover { background: #21262d; } html[data-theme="dark"] .holdings-thumb { background: #21262d; } html[data-theme="dark"] .holdings-meta { color: #8b949e; } html[data-theme="dark"] .btn-ask-ai { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-ask-ai:hover { border-color: #1a8a6e; color: #1a8a6e; background: rgba(26,138,110,0.08); } /* ── Watchlist Section (Overview) ── */ html[data-theme="dark"] .overview-watchlist-section { background: #0d1117; border-color: #21262d; } html[data-theme="dark"] .wl-panel-row { border-color: #21262d; } html[data-theme="dark"] .wl-panel-row:hover { background: #21262d; } html[data-theme="dark"] .wl-panel-thumb { background: #21262d; } html[data-theme="dark"] .wl-panel-thumb-placeholder { background: #21262d; color: #6e7681; } html[data-theme="dark"] .wl-panel-name { color: #f0f6fc; } html[data-theme="dark"] .wl-panel-set { color: #8b949e; } html[data-theme="dark"] .wl-panel-price { color: #f0f6fc; } html[data-theme="dark"] .wl-panel-change.up { color: #3fb950; } html[data-theme="dark"] .wl-panel-change.down { color: #f85149; } html[data-theme="dark"] .wl-panel-change.neutral { color: #8b949e; } html[data-theme="dark"] .wl-panel-remove { color: #6e7681; } html[data-theme="dark"] .wl-panel-remove:hover { color: #f85149; background: rgba(248,81,73,0.1); } html[data-theme="dark"] .wl-panel-empty { color: #8b949e; } html[data-theme="dark"] .wl-panel-empty a { color: #1a8a6e; } /* ── Widget Cards ── */ html[data-theme="dark"] .widget-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .widget-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } html[data-theme="dark"] .widget-header { color: #f0f6fc; border-color: #21262d; } html[data-theme="dark"] .widget-header svg { color: #1a8a6e; } html[data-theme="dark"] .widget-empty { color: #8b949e; } html[data-theme="dark"] .portfolio-value { color: #f0f6fc; } html[data-theme="dark"] .change-positive { color: #3fb950; background: rgba(63,185,80,0.15); } html[data-theme="dark"] .change-negative { color: #f85149; background: rgba(248,81,73,0.15); } html[data-theme="dark"] .portfolio-meta { color: #8b949e; } /* ── Market Pulse Widget ── */ html[data-theme="dark"] .pulse-stat { background: #21262d; } html[data-theme="dark"] .pulse-label { color: #8b949e; } html[data-theme="dark"] .pulse-value { color: #f0f6fc; } html[data-theme="dark"] .pulse-categories h4 { color: #8b949e; } html[data-theme="dark"] .pulse-cat-value { color: #1a8a6e; } /* ── Activity Widget ── */ html[data-theme="dark"] .activity-item { border-color: #21262d; } html[data-theme="dark"] .activity-icon { background: rgba(26,138,110,0.1); } html[data-theme="dark"] .activity-icon svg { color: #1a8a6e; } html[data-theme="dark"] .activity-set { color: #8b949e; } html[data-theme="dark"] .activity-time { color: #8b949e; } /* ── Movers Grid Widget ── */ html[data-theme="dark"] .movers-column.gainers h4 { color: #3fb950; } html[data-theme="dark"] .movers-column.losers h4 { color: #f85149; } html[data-theme="dark"] .mover-row { border-color: #21262d; } html[data-theme="dark"] .mover-thumb { background: #21262d; } html[data-theme="dark"] .mover-thumb-placeholder { background: #21262d; } html[data-theme="dark"] .mover-price { color: #8b949e; } /* ── Watchlist Widget ── */ html[data-theme="dark"] .watchlist-item { border-color: #21262d; } html[data-theme="dark"] .watchlist-set { color: #8b949e; } html[data-theme="dark"] .watchlist-target { color: #8b949e; } html[data-theme="dark"] .watchlist-actions button { color: #8b949e; } html[data-theme="dark"] .watchlist-actions button:hover { color: #f85149; background: rgba(248,81,73,0.1); } html[data-theme="dark"] .btn-watchlist-add { color: #1a8a6e; border-color: #1a8a6e; } html[data-theme="dark"] .btn-watchlist-add:hover { background: rgba(26,138,110,0.08); } /* ── Set EV Table Widget ── */ html[data-theme="dark"] .set-ev-table thead th { color: #8b949e; border-color: #21262d; } html[data-theme="dark"] .set-ev-table tbody td { border-color: #21262d; } html[data-theme="dark"] .set-ev-table tbody tr:hover { background: #21262d; } html[data-theme="dark"] .set-ev-name { color: #f0f6fc; } html[data-theme="dark"] .set-ev-cards { color: #8b949e; } html[data-theme="dark"] .set-ev-total { color: #f0f6fc; } html[data-theme="dark"] .set-ev-avg { color: #8b949e; } html[data-theme="dark"] .set-ev-top-card { color: #8b949e; } html[data-theme="dark"] .set-ev-coverage-bar { background: #30363d; } html[data-theme="dark"] .set-ev-coverage-fill { background: #1a8a6e; } html[data-theme="dark"] .set-ev-coverage-pct { color: #8b949e; } html[data-theme="dark"] .set-ev-subtitle { color: #8b949e; } /* ── Price Movers Widget ── */ html[data-theme="dark"] .price-movers-col.col-gainers h4 { color: #3fb950; } html[data-theme="dark"] .price-movers-col.col-losers h4 { color: #f85149; } html[data-theme="dark"] .price-movers-row { border-color: #21262d; } html[data-theme="dark"] .price-movers-thumb { background: #21262d; } html[data-theme="dark"] .price-movers-thumb-placeholder { background: #21262d; } html[data-theme="dark"] .price-movers-name { color: #f0f6fc; } html[data-theme="dark"] .price-movers-name a:hover { color: #1a8a6e; } html[data-theme="dark"] .price-movers-meta { color: #8b949e; } html[data-theme="dark"] .price-movers-current { color: #f0f6fc; } html[data-theme="dark"] .price-movers-rank { color: #8b949e; } /* ── Sub-Collection Section (Holdings Tab) ── */ html[data-theme="dark"] .sub-collection-section { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .sub-collection-header span { color: #8b949e; } html[data-theme="dark"] .sub-collection-header button { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .sub-collection-header button:hover { color: #f0f6fc; border-color: #1a8a6e; } html[data-theme="dark"] .sub-col-item { background: #21262d; color: #c9d1d9; } html[data-theme="dark"] .sub-col-item:hover { background: #30363d; } html[data-theme="dark"] .sub-col-item.active { background: #1a8a6e; color: #fff; } html[data-theme="dark"] .sub-col-count { color: #8b949e; background: rgba(255,255,255,0.06); } html[data-theme="dark"] .sub-col-context-menu { background: #161b22; border-color: #30363d; box-shadow: 0 10px 30px rgba(0,0,0,0.4); } html[data-theme="dark"] .sub-col-context-menu button { color: #c9d1d9; } html[data-theme="dark"] .sub-col-context-menu button:hover { background: #21262d; } /* ── Spinner / Loading States ── */ html[data-theme="dark"] .spinner { border-color: #30363d; border-top-color: #1a8a6e; } html[data-theme="dark"] .page-loading { color: #8b949e; } html[data-theme="dark"] .loading { color: #8b949e; } /* ── Confidence Signal ── */ html[data-theme="dark"] .confidence-signal-inline .bar { background: #30363d; } html[data-theme="dark"] .confidence-signal-inline .conf-label { color: #8b949e; } /* ── Cost Basis Indicator ── */ html[data-theme="dark"] .cost-basis-indicator { background: rgba(59,130,246,0.1); color: #58a6ff; } html[data-theme="dark"] .cost-basis-bar { background: #21262d; } /* ── Holdings Toolbar ── */ html[data-theme="dark"] .holdings-toolbar { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .holdings-toolbar .topbar-search input { background: #0d1117; border-color: #30363d; color: #f0f6fc; } html[data-theme="dark"] .holdings-toolbar .topbar-search input:focus { border-color: #1a8a6e; } html[data-theme="dark"] .holdings-toolbar .topbar-search svg { color: #8b949e; } html[data-theme="dark"] .holdings-toolbar .result-count { color: #8b949e; } html[data-theme="dark"] .holdings-toolbar select { background: #161b22; border-color: #30363d; color: #c9d1d9; } html[data-theme="dark"] .btn-export { background: #161b22; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-export:hover { border-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .btn-import { background: #161b22; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-import:hover { border-color: #1a8a6e; color: #1a8a6e; } /* ── Chart Section ── */ html[data-theme="dark"] .chart-section { background: #161b22; border-color: #21262d; } html[data-theme="dark"] .chart-header h3 { color: #f0f6fc; } html[data-theme="dark"] .chart-period-btn { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .chart-period-btn:hover { border-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .chart-period-btn.active { background: #1a8a6e; color: #fff; border-color: #1a8a6e; } /* ── Stats Row ── */ html[data-theme="dark"] .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); } html[data-theme="dark"] .stat-icon { background: rgba(26,138,110,0.1); } html[data-theme="dark"] .stat-icon svg { color: #1a8a6e; } html[data-theme="dark"] .stat-label { color: #8b949e; } html[data-theme="dark"] .stat-value { color: #f0f6fc; } html[data-theme="dark"] .stat-sub { color: #8b949e; } html[data-theme="dark"] .analytics-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .analytics-title { color: #f0f6fc; } html[data-theme="dark"] .summary-card { background: #161b22; border-color: #30363d; } /* ── Card List (Holdings) ── */ html[data-theme="dark"] .card-row { border-color: #21262d; } html[data-theme="dark"] .card-row:hover { background: #161b22; } html[data-theme="dark"] .card-thumb { background: #21262d; } html[data-theme="dark"] .card-thumb-placeholder { background: #21262d; } html[data-theme="dark"] .card-set { color: #8b949e; } html[data-theme="dark"] .card-name { color: #f0f6fc; } html[data-theme="dark"] .card-number { color: #8b949e; } html[data-theme="dark"] .card-daily { color: #8b949e; } html[data-theme="dark"] .grade-badge.grade-other { background: #21262d; color: #8b949e; } html[data-theme="dark"] .btn-edit { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-edit:hover { border-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .btn-sell { border-color: #30363d; color: #1a8a6e; } html[data-theme="dark"] .btn-sell:hover { border-color: #1a8a6e; background: rgba(26,138,110,0.08); } html[data-theme="dark"] .btn-remove { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-remove:hover { border-color: #f85149; color: #f85149; } /* ── Sold Tab ── */ html[data-theme="dark"] .sold-summary-stat { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .sold-summary-label { color: #8b949e; } html[data-theme="dark"] .sold-summary-value { color: #f0f6fc; } /* ── Settings Tab ── */ html[data-theme="dark"] .settings-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .settings-card h3 { color: #f0f6fc; } html[data-theme="dark"] .settings-row { border-color: #21262d; } html[data-theme="dark"] .settings-label { color: #8b949e; } html[data-theme="dark"] .settings-value { color: #f0f6fc; } /* ── Panel shared classes ── */ html[data-theme="dark"] .panel-heading { color: #f0f6fc; } html[data-theme="dark"] .panel-subtext { color: #8b949e; } html[data-theme="dark"] .panel-list-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .achievements-hint { color: #1a8a6e; } html[data-theme="dark"] .progress-track { background: #21262d; } html[data-theme="dark"] .progress-fill { background: linear-gradient(90deg, #1a8a6e, #3fb950); } /* ── Achievements Tab ── */ html[data-theme="dark"] .achievement-badge { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .achievement-badge:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } html[data-theme="dark"] .achievement-badge.earned { border-color: #d4a853; background: linear-gradient(135deg, rgba(212,168,83,0.1) 0%, rgba(212,168,83,0.05) 100%); } html[data-theme="dark"] .achievement-badge .badge-name { color: #f0f6fc; } html[data-theme="dark"] .achievement-badge .badge-desc { color: #8b949e; } html[data-theme="dark"] .achievement-badge .badge-date { color: #d4a853; } /* ── Toast Notification ── */ html[data-theme="dark"] .toast-notification { background: #161b22; border: 1px solid #30363d; color: #f0f6fc; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } /* ── Dashboard Modal System ── */ html[data-theme="dark"] .modal { background: #161b22; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } html[data-theme="dark"] .modal-header { border-color: #21262d; } html[data-theme="dark"] .modal-header h3 { color: #f0f6fc; } html[data-theme="dark"] .modal-close { color: #8b949e; } html[data-theme="dark"] .modal-close:hover { color: #f0f6fc; } html[data-theme="dark"] .modal-search { background: #0d1117; border-color: #30363d; color: #f0f6fc; } html[data-theme="dark"] .modal-search:focus { border-color: #1a8a6e; } html[data-theme="dark"] .search-result-item:hover { background: #21262d; } html[data-theme="dark"] .search-result-item img { background: #21262d; } html[data-theme="dark"] .search-result-set { color: #8b949e; } html[data-theme="dark"] .search-hint { color: #8b949e; } html[data-theme="dark"] .modal-footer { border-color: #21262d; } html[data-theme="dark"] .btn-cancel { background: #21262d; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .btn-cancel:hover { background: #30363d; } html[data-theme="dark"] .selected-card-preview { background: #21262d; } /* ── Watchlist Add Modal ── */ html[data-theme="dark"] .wl-modal { background: #161b22; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } html[data-theme="dark"] .wl-modal-header { border-color: #21262d; } html[data-theme="dark"] .wl-modal-header h3 { color: #f0f6fc; } html[data-theme="dark"] .wl-modal-close { color: #8b949e; } html[data-theme="dark"] .wl-modal-close:hover { color: #f0f6fc; } html[data-theme="dark"] .wl-search-input { background: #0d1117; border-color: #30363d; color: #f0f6fc; } html[data-theme="dark"] .wl-search-input:focus { border-color: #1a8a6e; } html[data-theme="dark"] .wl-search-item:hover { background: #21262d; } html[data-theme="dark"] .wl-search-item-set { color: #8b949e; } html[data-theme="dark"] .wl-selected-card { background: #21262d; } html[data-theme="dark"] .wl-selected-card-set { color: #8b949e; } html[data-theme="dark"] .wl-form-group label { color: #8b949e; } html[data-theme="dark"] .wl-form-group input, html[data-theme="dark"] .wl-form-group textarea { background: #0d1117; border-color: #30363d; color: #c9d1d9; } html[data-theme="dark"] .wl-form-group input:focus, html[data-theme="dark"] .wl-form-group textarea:focus { border-color: #1a8a6e; } html[data-theme="dark"] .wl-modal-footer { border-color: #21262d; } html[data-theme="dark"] .wl-btn { background: #21262d; border-color: #30363d; color: #8b949e; } /* ── CSV Import Modal ── */ html[data-theme="dark"] .csv-drop-zone { border-color: #30363d; } html[data-theme="dark"] .csv-drop-zone:hover, html[data-theme="dark"] .csv-drop-zone.dragover { border-color: #1a8a6e; background: rgba(26,138,110,0.04); } html[data-theme="dark"] .csv-drop-zone svg { color: #8b949e; } html[data-theme="dark"] .csv-drop-zone p { color: #8b949e; } html[data-theme="dark"] .csv-filename { color: #1a8a6e; } html[data-theme="dark"] .csv-preview-table th { background: #21262d; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .csv-preview-table td { border-color: #21262d; color: #c9d1d9; } /* ── Config/Toggle Modal ── */ html[data-theme="dark"] .config-widget { border-color: #21262d; } html[data-theme="dark"] .config-label { color: #c9d1d9; } html[data-theme="dark"] .config-slider { background: #30363d; } html[data-theme="dark"] .config-toggle input:checked + .config-slider { background: #1a8a6e; } /* ── Onboarding Wizard ── */ html[data-theme="dark"] .onboarding-progress .ob-dot { background: #30363d; } html[data-theme="dark"] .onboarding-progress .ob-dot.active, html[data-theme="dark"] .onboarding-progress .ob-dot.done { background: #1a8a6e; } html[data-theme="dark"] .ob-step h2 { color: #f0f6fc; } html[data-theme="dark"] .ob-step p { color: #8b949e; } html[data-theme="dark"] .ob-checkbox-item { border-color: #30363d; color: #c9d1d9; } html[data-theme="dark"] .ob-checkbox-item.selected { border-color: #1a8a6e; background: rgba(26,138,110,0.08); color: #1a8a6e; } html[data-theme="dark"] .ob-popular-card { border-color: #30363d; } html[data-theme="dark"] .ob-popular-card:hover { border-color: #1a8a6e; background: rgba(26,138,110,0.04); } html[data-theme="dark"] .ob-popular-card.added { border-color: #3fb950; background: rgba(63,185,80,0.1); } html[data-theme="dark"] .ob-popular-card img { background: #21262d; } html[data-theme="dark"] .ob-popular-card-meta { color: #8b949e; } html[data-theme="dark"] .ob-hero-value-animate { color: #f0f6fc; } html[data-theme="dark"] .ob-btn-secondary { border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .ob-btn-secondary:hover { border-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .onboarding-title { color: #f0f6fc; } html[data-theme="dark"] .onboarding-subtitle { color: #8b949e; } html[data-theme="dark"] .onboarding-step { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .onboarding-step-title { color: #f0f6fc; } html[data-theme="dark"] .onboarding-step-desc { color: #8b949e; } /* ── Sell Preview ── */ html[data-theme="dark"] .sell-preview-box { background: #21262d; border-color: #30363d; } html[data-theme="dark"] .sell-preview-box.val-positive { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.3); } html[data-theme="dark"] .sell-preview-box.val-negative { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.3); } html[data-theme="dark"] .sell-preview-label { color: #8b949e; } /* ── Morning Briefing Banner ── */ html[data-theme="dark"] .pd-briefing { background: linear-gradient(135deg, rgba(63,185,80,0.08), rgba(63,185,80,0.04)); border-color: rgba(63,185,80,0.2); color: #c9d1d9; } html[data-theme="dark"] .pd-briefing-dismiss { color: #8b949e; } html[data-theme="dark"] .pd-briefing-dismiss:hover { color: #f0f6fc; } /* ── Setup Progress Bar ── */ html[data-theme="dark"] .pd-setup-bar { background: #161b22; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .pd-setup-track { background: #30363d; } html[data-theme="dark"] .pd-setup-fill { background: #1a8a6e; } html[data-theme="dark"] .pd-setup-dismiss { color: #6e7681; } html[data-theme="dark"] .pd-setup-dismiss:hover { color: #8b949e; } /* ── Disclaimer Banner ── */ html[data-theme="dark"] .disclaimer-banner { background: rgba(212,168,83,0.08); border-color: rgba(212,168,83,0.2); color: #d4a853; } html[data-theme="dark"] .disclaimer-banner .disclaimer-text a { color: #d4a853; } html[data-theme="dark"] .disclaimer-banner .disclaimer-dismiss { color: #d4a853; } html[data-theme="dark"] .disclaimer-banner .disclaimer-dismiss:hover { background: rgba(212,168,83,0.1); } /* ── Empty States ── */ html[data-theme="dark"] .empty-state { color: #8b949e; } html[data-theme="dark"] .onboarding-illustration { background: linear-gradient(135deg, rgba(26,138,110,0.15), rgba(212,168,83,0.1)); } /* ══════════════════════════════════════════════════════════════════════ PORTAL PAGE — Login & Dashboard ══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .login-card { background: #161b22; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } html[data-theme="dark"] .login-card h1 { color: #f0f6fc; } html[data-theme="dark"] .login-card p { color: #8b949e; } /* Global form-group dark mode (design system) */ html[data-theme="dark"] .form-group label { color: #c9d1d9; } html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group select, html[data-theme="dark"] .form-group textarea { background: #0d1117; border-color: #30363d; color: #c9d1d9; } html[data-theme="dark"] .form-group input:focus, html[data-theme="dark"] .form-group select:focus, html[data-theme="dark"] .form-group textarea:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.2); } html[data-theme="dark"] .form-group input::placeholder, html[data-theme="dark"] .form-group textarea::placeholder { color: #484f58; } html[data-theme="dark"] .divider { color: #8b949e; } html[data-theme="dark"] .divider::before, html[data-theme="dark"] .divider::after { background: #30363d; } html[data-theme="dark"] .oauth-btn { border-color: #30363d; background: #161b22; color: #c9d1d9; } html[data-theme="dark"] .oauth-btn:hover { border-color: #484f58; background: #21262d; } html[data-theme="dark"] .oauth-btn-google { border-color: #1a8a6e; } /* Login action links */ html[data-theme="dark"] #forgot-password-btn, html[data-theme="dark"] #magic-link-toggle, html[data-theme="dark"] #confirm-sent-back-btn, html[data-theme="dark"] #confirm-sent-email { color: #1a8a6e; } html[data-theme="dark"] #resend-confirm-btn, html[data-theme="dark"] #auth-toggle-btn, html[data-theme="dark"] #confirm-sent-wrong-email-btn, html[data-theme="dark"] #developer-link { color: #8b949e; } html[data-theme="dark"] .confirm-sent-icon { background: rgba(26,138,110,0.15); } /* Search dropdowns & selected pills */ html[data-theme="dark"] #ac-search-results, html[data-theme="dark"] #al-search-results { background: #161b22; border-color: #30363d; } html[data-theme="dark"] #ac-selected-card, html[data-theme="dark"] #al-selected-card { background: rgba(26,138,110,0.1); border-color: rgba(26,138,110,0.3); color: #3fb950; } html[data-theme="dark"] #ac-clear-card { color: #f85149; } html[data-theme="dark"] #al-type { background: #0d1117; border-color: #30363d; color: #c9d1d9; } /* Portal dashboard elements */ html[data-theme="dark"] .empty-state { background: #161b22; } html[data-theme="dark"] .empty-state h3 { color: #f0f6fc; } html[data-theme="dark"] .empty-state p { color: #8b949e; } html[data-theme="dark"] .empty-state svg { color: #484f58; } html[data-theme="dark"] .modal-card { background: #161b22; } html[data-theme="dark"] .modal-card h2 { color: #f0f6fc; } html[data-theme="dark"] .modal-overlay { background: rgba(1,4,9,0.7); } html[data-theme="dark"] .report-card { background: #161b22; } html[data-theme="dark"] .report-card h3 { color: #f0f6fc; } html[data-theme="dark"] .report-card p { color: #8b949e; } html[data-theme="dark"] .search-result-item { border-color: #21262d; } html[data-theme="dark"] .search-result-item:hover, html[data-theme="dark"] .search-result-item:focus { background: rgba(26,138,110,0.1); } html[data-theme="dark"] .search-result-name { color: #f0f6fc; } html[data-theme="dark"] .search-result-meta { color: #8b949e; } html[data-theme="dark"] .search-no-results { color: #8b949e; } html[data-theme="dark"] .badge-above { background: rgba(63,185,80,0.1); color: #3fb950; } html[data-theme="dark"] .badge-below { background: rgba(248,81,73,0.1); color: #f85149; } html[data-theme="dark"] .badge-percent { background: rgba(56,139,253,0.1); color: #58a6ff; } html[data-theme="dark"] .badge-active { background: rgba(63,185,80,0.1); color: #3fb950; } html[data-theme="dark"] .badge-inactive { background: #21262d; color: #8b949e; } html[data-theme="dark"] .btn-danger { background: rgba(248,81,73,0.1); color: #f85149; border-color: rgba(248,81,73,0.3); } html[data-theme="dark"] .btn-danger:hover { background: rgba(248,81,73,0.2); border-color: #f85149; } html[data-theme="dark"] .message.success { background: rgba(63,185,80,0.1); color: #3fb950; border-color: rgba(63,185,80,0.3); } html[data-theme="dark"] .message.error { background: rgba(248,81,73,0.1); color: #f85149; border-color: rgba(248,81,73,0.3); } html[data-theme="dark"] .portal-main { background: #0d1117; } html[data-theme="dark"] .portal-tabs { border-color: #21262d; } html[data-theme="dark"] .portal-tabs button { color: #8b949e; } html[data-theme="dark"] .portal-tabs button:hover { color: #f0f6fc; } html[data-theme="dark"] .portal-tabs button.active { border-bottom-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .stat-card .stat-label { color: #8b949e; } html[data-theme="dark"] .stat-card .stat-value { color: #f0f6fc; } html[data-theme="dark"] .chart-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .chart-card-header h3 { color: #f0f6fc; } html[data-theme="dark"] .chart-pill { background: #21262d; color: #8b949e; } html[data-theme="dark"] .chart-pill.active { background: #1a8a6e; color: #fff; } html[data-theme="dark"] .chart-empty { color: #8b949e; } /* ══════════════════════════════════════════════════════════════════════ PLAYER / PLAYERS PAGES ══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .player-hero { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .player-info h1 { color: #f0f6fc; } html[data-theme="dark"] .player-subtitle { color: #8b949e; } html[data-theme="dark"] .player-photo { background: #21262d; } html[data-theme="dark"] .player-photo-placeholder, html[data-theme="dark"] .player-photo-initials { background: #21262d; color: #6e7681; } html[data-theme="dark"] .stat-pill { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .stat-pill-label { color: #8b949e; } html[data-theme="dark"] .stat-pill-value { color: #f0f6fc; } html[data-theme="dark"] .tab-bar { background: #161b22; } html[data-theme="dark"] .tab-btn { color: #8b949e; } html[data-theme="dark"] .tab-btn:hover { color: #f0f6fc; } html[data-theme="dark"] .tab-btn.active { background: #21262d; color: #1a8a6e; } html[data-theme="dark"] .card-tile { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .card-tile:hover { border-color: #1a8a6e; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } html[data-theme="dark"] .card-tile-img { background: #21262d; } html[data-theme="dark"] .card-tile-name { color: #f0f6fc; } html[data-theme="dark"] .card-tile-meta { color: #8b949e; } html[data-theme="dark"] .player-card { background: #161b22; border-color: #30363d; } html[data-theme="dark"] .player-card:hover { border-color: #1a8a6e; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } html[data-theme="dark"] .player-name { color: #f0f6fc; } html[data-theme="dark"] .player-meta { color: #8b949e; } html[data-theme="dark"] .player-card-count { color: #8b949e; } html[data-theme="dark"] .search-hero h1 { color: #f0f6fc; } html[data-theme="dark"] .search-hero p { color: #8b949e; } html[data-theme="dark"] .search-bar input { background: #161b22; border-color: #30363d; color: #f0f6fc; } html[data-theme="dark"] .search-bar input:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.15); } html[data-theme="dark"] .sport-pill { background: #161b22; border-color: #30363d; color: #8b949e; } html[data-theme="dark"] .sport-pill:hover { border-color: #1a8a6e; color: #1a8a6e; } html[data-theme="dark"] .sport-pill.active { background: #1a8a6e; color: #fff; border-color: #1a8a6e; } html[data-theme="dark"] .sort-bar label { color: #8b949e; } html[data-theme="dark"] .sort-bar select { background: #161b22; border-color: #30363d; color: #c9d1d9; } html[data-theme="dark"] .sort-bar select:focus { border-color: #1a8a6e; } html[data-theme="dark"] .result-count { color: #8b949e; } html[data-theme="dark"] #load-more { background: transparent; color: #1a8a6e; border-color: #1a8a6e; } html[data-theme="dark"] #load-more:hover { background: #1a8a6e; color: #fff; } /* ══════════════════════════════════════════════════════════════════════ GLOBAL SEARCH — html[data-theme="dark"] overrides ══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .pd-gs-input { background: #161b22; border-color: #30363d; color: #f0f6fc; } html[data-theme="dark"] .pd-gs-input:focus { border-color: #1a8a6e; box-shadow: 0 0 0 3px rgba(26,138,110,0.15); background: #161b22; } html[data-theme="dark"] .pd-gs-dropdown { background: #161b22; border-color: #30363d; box-shadow: 0 12px 40px rgba(0,0,0,0.4); } html[data-theme="dark"] .pd-gs-result:hover, html[data-theme="dark"] .pd-gs-result.pd-gs-active { background: #21262d; } html[data-theme="dark"] .pd-gs-name { color: #f0f6fc; } html[data-theme="dark"] .pd-gs-price { color: #1a8a6e; } html[data-theme="dark"] .pd-gs-thumb-placeholder { background: #21262d; } html[data-theme="dark"] .pd-gs-thumb { background: #21262d; } html[data-theme="dark"] .pd-gs-view-all { color: #1a8a6e; border-color: #21262d; } html[data-theme="dark"] .pd-gs-view-all:hover { background: #21262d; } html[data-theme="dark"] .pd-gs-empty { color: #8b949e; } html[data-theme="dark"] .pd-gs-meta { color: #8b949e; }