/* Theme variables: dark is the default (no data-theme attribute set); [data-theme="light"] overrides. A clientside callback in dash_app.py (right after app.layout) sets that attribute on from the persisted theme-store value. Python-side style dicts reference these by name (e.g. "var(--header)") instead of literal hex so the whole page -- backgrounds, headers, nav pills, table card backgrounds -- switches live with no page reload. Plotly chart colors can't follow a CSS variable at render time, so those are handled separately: build_price_figure/build_compare_price_figure/build_dcf_chart take an explicit theme=("dark"|"light") argument and pick their own palette (see _CHART_THEMES/_chart_colors in dash_app.py). */ :root { --bg: #000000; --text: #e0e0e0; --header: #3a3a3a; /* Section-heading TEXT (e.g. "DCF Assumptions", "Filters") -- kept separate from --header, which is a BACKGROUND (nav pills, the "Filters" label's own container isn't one of these) and stays the same dark grey in both themes; grey text at that same value is illegible against a near-black page, so this is white here and --header's grey again in light mode, where it already reads fine on white. */ --header-text: #ffffff; --body-text: #cfcfcf; /* The original theme-blue accent, kept here even after the rest of the theme moved to grey -- a brighter tint tuned to read on the dark card background each table's first column sits on. */ --security-text: #5DADE2; --card-bg: #1c1c1c; --card-bg-2: #161616; --border: #333333; --table-header-bg: #f4f4f4; } :root[data-theme="light"] { --bg: #ffffff; --text: #1a1a1a; --header: #3a3a3a; --header-text: #3a3a3a; --body-text: #44464a; /* Same original theme-blue accent as dark mode, but the deeper original header shade -- the brighter dark-mode tint is too pale to read against a white card. */ --security-text: #2874a6; --card-bg: #f0f0f0; --card-bg-2: #e8e8e8; --border: #d6d6d6; /* Darker than --card-bg so a table's header row still stands out against both its own white cell background and the now-light page -- --table-header-bg's dark-mode value already contrasts fine against a black page without needing to change. */ --table-header-bg: #d0d0d0; } /* App theme: page background/default text so unstyled elements (labels, etc.) stay readable — section headers and body copy override this per-element from Python where they need a specific color. */ html, body { background-color: var(--bg); color: var(--text); margin: 0; } /* Ticker search typeahead: show the suggestions dropdown only while focus is somewhere inside its wrapper (the input itself, or a suggestion button mid-click) — hides on click-away, reappears on refocus, with no JS needed. */ .ticker-search-wrap #company-suggestions { display: none; } .ticker-search-wrap:focus-within #company-suggestions { display: block; } .manager-search-wrap #manager-suggestions { display: none; } .manager-search-wrap:focus-within #manager-suggestions { display: block; } /* Politician Tracker's two cross-chamber summary tables: the Member column is click-to-select (see select_member_from_summary in dash_app.py), which clears its own active-cell state right after handling the click rather than leaving dash_table's default highlight box in place -- this is the only visual affordance for "this is clickable", so it needs to read as inviting on its own. */ #recent-trades-table .dash-cell.column-0:hover, #congress-leaderboard-table .dash-cell.column-0:hover { font-weight: bold; cursor: pointer; /* !important: Dash sets the member column's blue via an inline style (style_cell_conditional), which otherwise beats any class-based hover rule on specificity alone. */ color: #ffffff !important; }