/* Site overrides. The AspStudio theme's own stylesheets (vendor.min.css, app.min.css) are build output from src/scss and would be overwritten by a theme update, so site-specific tweaks belong here instead. This file is loaded after the theme, so plain selectors of equal specificity win. */ /* The theme hides the whole .brand block below 768px, which takes the logo with it. There is room for it long before that: the header only holds the sidebar toggle, a 148x40 logo, a small switch and a user menu that already collapses to an icon. Un-hiding .brand is safe -- the .desktop-toggler inside it has its own rule hiding it below 992px, so this does not bring back a second toggle button alongside the mobile one. */ @media (max-width: 767.98px) { .app-header .brand { display: flex; width: auto; } } /* On genuinely narrow phones let the logo scale down rather than push the user menu off the edge. */ @media (max-width: 400px) { .app-header .brand .brand-logo img { max-width: 30vw; width: auto; height: auto; max-height: 2.5rem; } } /* Header logo follows the dark mode switch. The theme's switch sets data-bs-theme="dark" on (and restores it from a cookie on load), so both logos sit in the page and CSS picks the matching one. Doing it this way rather than swapping the src in JavaScript means the change is instant, survives enhanced navigation, and needs no hook into the theme's own toggle handler. */ .app-header .brand-logo .brand-logo-dark { display: none; } [data-bs-theme="dark"] .app-header .brand-logo .brand-logo-light { display: none; } [data-bs-theme="dark"] .app-header .brand-logo .brand-logo-dark { display: inline-block; } /* Chart palette. Kept in CSS so the chart picks up the theme's light/dark switch for free, and so the dark steps are deliberately chosen rather than an automatic inversion of the light ones. Series colours are a fixed order -- a chart with fewer series uses the first N, it never cycles or reshuffles, so a given entity keeps its colour when a filter changes the series count. Single-series charts use --chart-series-1 alone: one hue carrying magnitude. */ :root { --chart-series-1: #2a78d6; --chart-series-2: #d97706; --chart-series-3: #059669; --chart-series-4: #7c3aed; --chart-series-5: #db2777; --chart-series-6: #0891b2; --chart-grid: #e6e6e3; --chart-ink: #3f3f46; --chart-ink-muted: #71717a; --chart-surface: #ffffff; } [data-bs-theme="dark"] { /* Lighter steps of the same hues: chosen against the dark surface, not flipped. */ --chart-series-1: #5598e7; --chart-series-2: #f0a13a; --chart-series-3: #34d399; --chart-series-4: #a78bfa; --chart-series-5: #f472b6; --chart-series-6: #22d3ee; --chart-grid: #3a3a38; --chart-ink: #e4e4e7; --chart-ink-muted: #a1a1aa; --chart-surface: #1a1a19; } .vantage-chart { min-height: 4rem; }