/* ── VRP theme palette (indigo on cool slate — deliberately distinct from the PA teal-on-black) ── Everything references these vars, so the whole look retunes from this one block. */ :root { /* surfaces */ --vrp-bg: #0e1118; --vrp-elevated: #141a26; --vrp-surface: #1a2130; --vrp-chip: #232c40; --vrp-border: #2c3447; /* brand + semantic accents */ --vrp-primary: #7b86ff; --vrp-primary-hover: #9aa2ff; --vrp-on-primary: #0c1030; --vrp-primary-soft: #7b86ff2e; --vrp-primary-bg: #1c2154; --vrp-success: #34d399; --vrp-amber: #f5b14b; --vrp-amber-soft: #f5b14b55; --vrp-error: #fb7185; --vrp-error-soft: #fb718555; --vrp-error-bg: #3a1620; --vrp-info: #60a5fa; /* text ramp */ --vrp-text: #eceef6; --vrp-text-bright: #c4cbdc; --vrp-text2: #939db8; --vrp-muted: #677194; --vrp-dim: #515a76; } html, body { background: var(--vrp-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* The closed .vrp-rail sits off-screen via translateX(100%) — Chromium still counts a fixed element's transformed visual bounds toward scrollable overflow, so without this the whole page gains a horizontal scrollbar reaching out to the hidden rail. Use `clip`, NOT `hidden`: `overflow-x: hidden` forces `overflow-y` to compute to `auto`, turning / into a scroll container and silently breaking any `position: sticky` descendant that sticks to the page (the landing page hit exactly this). `clip` suppresses the phantom scrollbar identically without creating a scroll container, so page-level sticky keeps working. */ overflow-x: clip; } /* ── Shared design system ───────────────────────────────────────────────────────────────────── One vocabulary for every page: cards, text ramp, section labels, chips. Pages reference these classes instead of repeating inline styles. Keep in sync with the landing page (landing.css), which uses the same palette + card language. */ /* Card: the standard content panel. Subtle top highlight + soft shadow give depth without noise. */ .vrp-card { background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0) 46px), var(--vrp-surface); border: 1px solid var(--vrp-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.22); } /* Clickable/navigation card — lifts on hover. */ .vrp-card-link { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .vrp-card-link:hover { border-color: var(--vrp-primary-soft); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.32); } /* Text ramp utilities (match the --vrp-* palette). */ .vrp-text-primary { color: var(--vrp-primary) !important; } .vrp-text-bright { color: var(--vrp-text-bright) !important; } .vrp-text-2 { color: var(--vrp-text2) !important; } .vrp-text-muted { color: var(--vrp-muted) !important; } .vrp-text-dim { color: var(--vrp-dim) !important; } .vrp-text-amber { color: var(--vrp-amber) !important; } .vrp-text-success { color: var(--vrp-success) !important; } .vrp-text-error { color: var(--vrp-error) !important; } /* Page header block. */ .vrp-page-title { font-weight: 700; letter-spacing: -.01em; } /* Uppercase terminal-style variant (SCANNER, MANAGE USERS, …). */ .vrp-page-title-caps { font-weight: 700; letter-spacing: .05em; } .vrp-page-sub { color: var(--vrp-text2); } /* Big stat number (usage dashboards, KPI values). */ .vrp-stat-value { font-weight: 700; font-variant-numeric: tabular-nums; } /* Small uppercase section label (nav groups, card eyebrows, rail heads). */ .vrp-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vrp-muted); } .vrp-label-dim { color: var(--vrp-dim); } /* Ticker chip (clickable). */ .vrp-chip-btn { background: var(--vrp-chip) !important; color: var(--vrp-primary) !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer; border: 1px solid transparent !important; transition: border-color .15s ease, color .15s ease; } .vrp-chip-btn:hover { border-color: var(--vrp-primary-soft) !important; color: var(--vrp-primary-hover) !important; } /* App chrome: translucent blurred appbar, faint indigo glow at the top of the content area — the same atmosphere as the landing page, toned down for daily work. */ .vrp-appbar { background: rgba(20,26,38,.86) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--vrp-border); } .vrp-main { background: radial-gradient(1100px 420px at 72% -120px, rgba(123,134,255,.07), transparent 60%), var(--vrp-bg); min-height: 100vh; } /* Global ticker search sits in the app bar; width here so it can shrink/hide on small screens. */ .vrp-global-search { width: 210px; } /* ── Mobile / tablet: the app bar and page padding are desktop-sized by default (MudBlazor ships no responsive rules for our chrome). Below Md, declutter the bar so it stops overflowing: the hamburger opens the (now temporary) drawer for navigation, so the always-on search box and the "Last Updated" stamp can drop out, and the content gutter tightens. */ .vrp-only-mobile { display: none; } @media (max-width: 959.98px) { .vrp-appbar-search { display: none !important; } .vrp-appbar-updated { display: none !important; } .vrp-appbar-signin { display: none !important; } .vrp-hide-mobile { display: none; } .vrp-only-mobile { display: inline; } .vrp-main > div { padding: 12px 14px !important; } } /* Financial data reads better with tabular figures — tables, KPIs, HUD-style numbers. */ .mud-table, .vrp-kpi, .vrp-tnum { font-variant-numeric: tabular-nums; } /* Slim, on-theme scrollbars (a small but recognisably-not-PA touch) */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--vrp-border); border-radius: 6px; } *::-webkit-scrollbar-thumb:hover { background: #3a4459; } *::-webkit-scrollbar-track { background: transparent; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── Right-side collapsible rail (recently viewed + watchlists + tickers) ───────────────────── */ .vrp-rail { position: fixed; top: 48px; right: 0; bottom: 0; width: 290px; z-index: 1190; background: var(--vrp-elevated); border-left: 1px solid var(--vrp-border); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; } .vrp-rail.open { transform: translateX(0); } .vrp-rail-handle { position: absolute; left: -30px; top: 18px; width: 30px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--vrp-elevated); border: 1px solid var(--vrp-border); border-right: none; border-radius: 7px 0 0 7px; color: var(--vrp-primary); cursor: pointer; padding: 0; } .vrp-rail-handle:hover { color: var(--vrp-primary-hover); } .vrp-rail-body { display: flex; flex-direction: column; height: 100%; padding: 12px 14px; overflow: hidden; gap: 14px; } .rail-section { display: flex; flex-direction: column; min-height: 0; } .rail-section.rail-grow { flex: 1 1 auto; min-height: 60px; } .rail-head { display: flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vrp-muted); margin-bottom: 8px; } .rail-empty { font-size: 12px; color: var(--vrp-dim); padding: 2px 0; } .rail-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rail-chip { background: var(--vrp-chip); color: var(--vrp-primary); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; } .rail-chip:hover { border-color: var(--vrp-primary-soft); color: var(--vrp-primary-hover); } .rail-scroll { overflow-y: auto; } /* Watchlists: only room for ~3 rows, then scroll. */ .wl-scroll { max-height: 108px; } .tickers-scroll { flex: 1 1 auto; min-height: 0; } .wl-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--vrp-text-bright); border: 1px solid transparent; } .wl-row:hover { background: var(--vrp-surface); } .wl-row.active { background: var(--vrp-primary-bg); border-color: var(--vrp-primary-soft); color: var(--vrp-text); } .wl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wl-count { font-size: 11px; color: var(--vrp-muted); background: var(--vrp-chip); border-radius: 10px; padding: 1px 7px; margin-left: 8px; } .ticker-row { padding: 6px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--vrp-primary); border: 1px solid transparent; } .ticker-row:hover { background: var(--vrp-surface); color: var(--vrp-primary-hover); } /* Slim scrollbars inside the rail. */ .rail-scroll::-webkit-scrollbar { width: 7px; } .rail-scroll::-webkit-scrollbar-thumb { background: var(--vrp-border); border-radius: 4px; } .rail-scroll::-webkit-scrollbar-track { background: transparent; } /* When the right rail is open, reserve space so the main content resizes instead of being overlapped. padding-right (not margin) because MudBlazor gives the main content an explicit width, which makes margin-right a no-op (over-constrained block). With box-sizing:border-box, padding reflows the content inward, leaving the rightmost 290px clear for the panel. */ .mud-main-content { transition: padding-right .22s ease; } body.vrp-rail-open .mud-main-content { padding-right: 290px !important; }