/* ═══════════════════════════════════════════════════════════════════════ BWT Strong Elevation — Portal-wide (Phase 2 rollout) Originally scoped to .bwt-dash for the /dashboard-only Phase 1. Promoted to global selectors here per the sequencing this file always intended ("Dashboard first, then roll out to the rest of the portal" — see docs/superpowers/specs/2026-07-30-traderportal-dashboard-modernization-design.md). Every bare `.card` in the portal now gets the same gradient/bevel/glow treatment Dashboard shipped with; `.bwt-dash`/`.bwt-dash-card` selectors are kept alongside `.card` purely so Dashboard.razor's existing markup needs zero changes — they are no longer doing any scoping work. ═══════════════════════════════════════════════════════════════════════ */ :root, .bwt-dash { /* ── Semantic accents. --*-rgb triples feed rgba() glows below. ──── */ --bwt-accent-pos: #0f9d72; --bwt-accent-pos-rgb: 15, 157, 114; --bwt-accent-info: #0353A3; --bwt-accent-info-rgb: 3, 83, 163; --bwt-accent-alt: #7c4fc7; --bwt-accent-alt-rgb: 124, 79, 199; --bwt-accent-neg: #d1384a; --bwt-accent-neg-rgb: 209, 56, 74; /* ── Chart series colors (consumed by the SVG components) ───────── */ --bwt-chart-pos: var(--bwt-accent-pos); --bwt-chart-neg: var(--bwt-accent-neg); --bwt-chart-warn: #b8860b; --bwt-chart-line: var(--bwt-accent-info); --bwt-chart-fill: rgba(3, 83, 163, 0.25); --bwt-chart-grid: rgba(20, 30, 60, 0.12); --bwt-chart-label: #5c6b8a; --bwt-chart-glow: 0; /* light mode: no glow, elevation carries depth */ /* BwtRadarChart (BWT Score / Performance / Discipline) ships override hooks for these that were never wired up, so its axis labels/values fell back to generic body/muted text with poor contrast against the card gradient. */ --bwt-radar-label: #1e2a3f; --bwt-radar-value: var(--bwt-accent-alt); /* ── Card surface (light) ───────────────────────────────────────── */ --bwt-dash-card-bg: linear-gradient(160deg, #ffffff, #eef2f9); --bwt-dash-card-bevel: rgba(255, 255, 255, 0.90); --bwt-dash-card-ambient: 0 16px 32px -10px rgba(20, 30, 60, 0.22); --bwt-dash-card-contact: 0 4px 8px -2px rgba(20, 30, 60, 0.14); --bwt-dash-glow-rest: 0.30; --bwt-dash-glow-hover: 0.48; } /* Must directly target .bwt-dash too, not just [data-bs-theme="dark"] on — a CSS custom property's value declared directly on an element (the light values above, via ":root, .bwt-dash") always wins over a value the element would otherwise inherit from an ancestor, regardless of that ancestor rule's specificity. Without ".bwt-dash" here, every card on the one page that has a .bwt-dash wrapper (Dashboard) was silently stuck on the light gradient/accent set even with data-bs-theme="dark" on — confirmed live: --bwt-dash-card-bg resolved to the light gradient on a fresh dark-mode Dashboard load before this fix. */ [data-bs-theme="dark"], [data-bs-theme="dark"] .bwt-dash { --bwt-accent-pos: #22d3a8; --bwt-accent-pos-rgb: 34, 211, 168; --bwt-accent-info: #3ec6ff; --bwt-accent-info-rgb: 62, 198, 255; --bwt-accent-alt: #b98af0; --bwt-accent-alt-rgb: 185, 138, 240; --bwt-accent-neg: #ef5b6b; --bwt-accent-neg-rgb: 239, 91, 107; --bwt-chart-warn: #fbbf24; --bwt-chart-fill: rgba(62, 198, 255, 0.28); --bwt-chart-grid: rgba(255, 255, 255, 0.10); --bwt-chart-label: #8fa3cc; --bwt-chart-glow: 1; /* dark mode: glow reads, so enable it */ --bwt-radar-label: #f1f5fb; --bwt-radar-value: var(--bwt-accent-alt); --bwt-dash-card-bg: linear-gradient(160deg, #1d2f5c, #0f1c3d); --bwt-dash-card-bevel: rgba(255, 255, 255, 0.14); --bwt-dash-card-ambient: 0 18px 40px -8px rgba(0, 0, 0, 0.75); --bwt-dash-card-contact: 0 4px 12px -2px rgba(0, 0, 0, 0.60); --bwt-dash-glow-rest: 0.42; --bwt-dash-glow-hover: 0.70; } /* ── Strong Elevation card shell ───────────────────────────────────── Layered depth: inset top bevel (light from above) + ambient shadow + contact shadow + an accent-tinted glow. Defaults to the info accent; a .bwt-accent-* modifier re-tints both the glow and the left border. `.card` is the portal's own Bootstrap card selector — every existing card sitewide (KPI tiles, grid wrapper cards, settings panels, list cards) picks this up with no markup changes required. `.bwt-flat` opts a specific card back out (see below) for the rare case where the gradient/bevel would fight with dense tabular content. */ .card, .bwt-dash-card { --bwt-dash-accent: var(--bwt-accent-info); --bwt-dash-accent-rgb: var(--bwt-accent-info-rgb); background: var(--bwt-dash-card-bg); border: 1px solid rgba(var(--bwt-dash-accent-rgb), 0.28); border-left: 4px solid var(--bwt-dash-accent); border-radius: var(--radius-lg); /* Flush content (card-body.p-0 tables/lists, common on config/list pages) is a plain rectangle with square corners. Against the old flat card that mismatch was invisible; the new ambient/contact shadow makes the card's rounded silhouette prominent enough that a square-cornered last row visibly pokes past it — reads as the row being "cut off". Clipping to the card's own radius fixes it everywhere at once. */ overflow: hidden; /* !important: Bootstrap's .shadow-sm utility (the portal's conventional card-elevation class, present on nearly every non-Dashboard card) ships its own box-shadow as !important, and beats a plain declaration here regardless of stylesheet order. See live-verify note in rollout doc. */ box-shadow: inset 0 1px 0 var(--bwt-dash-card-bevel), var(--bwt-dash-card-ambient), var(--bwt-dash-card-contact), 0 0 26px -6px rgba(var(--bwt-dash-accent-rgb), var(--bwt-dash-glow-rest)) !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .card:hover, .bwt-dash-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--bwt-dash-card-bevel), var(--bwt-dash-card-ambient), var(--bwt-dash-card-contact), 0 0 40px -4px rgba(var(--bwt-dash-accent-rgb), var(--bwt-dash-glow-hover)) !important; } /* Respect reduced-motion: keep the depth, drop the movement. */ @media (prefers-reduced-motion: reduce) { .card, .card:hover, .bwt-dash-card, .bwt-dash-card:hover { transition: none; transform: none; } } /* Opt-out for cards whose content is a dense grid/table — the gradient background and bevel reduce row/column legibility more than they add. Keeps the ambient/contact elevation (still "pops") but drops the gradient fill and glow. Used sparingly; see rollout notes. */ .card.bwt-flat { background: var(--bwt-body-bg, var(--bs-body-bg)); box-shadow: var(--bwt-dash-card-ambient), var(--bwt-dash-card-contact) !important; /* .bwt-flat's one consumer (AnalyticsDashboard's embedded DxDashboard designer) renders its own overlays/menus as DOM descendants of this card; clipping them would break the designer, so this specific variant opts back out of the base .card rule's overflow:hidden. */ overflow: visible; } .card.bwt-flat:hover { transform: none; box-shadow: var(--bwt-dash-card-ambient), var(--bwt-dash-card-contact) !important; } /* ── Accent modifiers ────────────────────────────────────────────────── */ .bwt-accent-pos { --bwt-dash-accent: var(--bwt-accent-pos); --bwt-dash-accent-rgb: var(--bwt-accent-pos-rgb); } .bwt-accent-info { --bwt-dash-accent: var(--bwt-accent-info); --bwt-dash-accent-rgb: var(--bwt-accent-info-rgb); } .bwt-accent-alt { --bwt-dash-accent: var(--bwt-accent-alt); --bwt-dash-accent-rgb: var(--bwt-accent-alt-rgb); } .bwt-accent-neg { --bwt-dash-accent: var(--bwt-accent-neg); --bwt-dash-accent-rgb: var(--bwt-accent-neg-rgb); } /* Neutral utility container (filter bars, toolbars) — same depth, no semantic color bar. Was Dashboard-only (.bwt-dash-filters); promoted unscoped so any page's filter/toolbar card can opt in. */ .bwt-flat-accent { border-left-color: transparent; } /* ── Chart plumbing ──────────────────────────────────────────────────── */ .bwt-dash .bwt-chart-svg { display: block; width: 100%; height: auto; overflow: visible; } /* Horizontal scroll container for Scroll-overflow bar charts. */ .bwt-dash .bwt-chart-scroll { overflow-x: auto; overflow-y: hidden; } /* Glow on the equity line only where it reads (dark). Multiplying by --bwt-chart-glow lets the same markup no-op in light mode. */ .bwt-dash .bwt-chart-glowline { filter: drop-shadow(0 0 calc(6px * var(--bwt-chart-glow)) var(--bwt-chart-line)); } .bwt-dash .bwt-chart-hit { fill: transparent; cursor: crosshair; } .bwt-dash .bwt-chart-hit:hover { fill: rgba(127, 127, 127, 0.10); } /* ── Filter bar — keeps the same boxed-card shape used for filter rows across the rest of the portal (Sessions, TradeHistory, etc.) for visual consistency with those pages, but picks up the same gradient/shadow/glow depth as the other Strong Elevation cards instead of flat `shadow-sm`. No left accent bar — it's a neutral utility container, not tied to a P&L semantic like the KPI/chart cards. ─────────────────────────────── */ .bwt-dash-filters { background: var(--bwt-dash-card-bg); border: 1px solid rgba(var(--bwt-accent-info-rgb), 0.20); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--bwt-dash-card-bevel), var(--bwt-dash-card-ambient), var(--bwt-dash-card-contact), 0 0 22px -8px rgba(var(--bwt-accent-info-rgb), var(--bwt-dash-glow-rest)); } /* ── Legibility: BwtScoreGauge legend ────────────────────────────────── Dashboard-only (BwtScoreGauge has no other consumer), scoped here. The related streak-pill and badge-date caption classes got the same size bump in app.css, unscoped, since they're shared with Achievements.razor. (This comment previously embedded a stray comment-close token and silently dropped the rule below — fixed; avoid writing an asterisk immediately followed by a slash in any comment in this file.) */ .bwt-dash .bwt-gauge-legend { font-size: 0.95rem; font-weight: 600; } /* ── Stats tabs — underline-active ───────────────────────────────────── */ .bwt-dash .bwt-stats-tabs .nav-link { border: none; color: var(--bwt-chart-label); border-bottom: 2px solid transparent; } .bwt-dash .bwt-stats-tabs .nav-link.active { background: transparent; color: var(--bwt-accent-info); border-bottom-color: var(--bwt-accent-info); }