/* ============================================================ Fidelity ETRM — Design System (dark default + light theme) Palette inspired by JetBrains Rider (IntelliJ "Int UI"): graphite surfaces, crisp 1px borders, JetBrains blue accent. :root holds the dark defaults; [data-theme="light"] overrides tokens only. Rules below the token blocks must use var(--*) — never raw hex/rgba — so both themes stay in lock-step. ============================================================ */ /* Fonts loaded via App.razor — Inter + JetBrains Mono */ /* --- Custom Properties --- */ :root { /* Background layers — Rider graphite scale, darkest at the base */ --bg-base: #1E1F22; --bg-surface: #26282B; --bg-raised: #2E3034; --bg-overlay: #35373C; --bg-hover: #33353A; /* Borders — solid and crisp, the Rider signature */ --border-default: #393B40; --border-hover: #45474D; --border-active: #54575E; /* Text — Int UI gray scale */ --text-primary: #DFE1E5; --text-secondary: #9DA0A8; --text-tertiary: #6F737A; /* Accent — JetBrains blue */ --accent: #3574F0; --accent-light: #548AF7; --accent-soft: rgba(53, 116, 240, 0.15); --accent-glow: rgba(53, 116, 240, 0.30); /* Semantic — Rider status hues */ --success: #5FAD65; --success-soft: rgba(95, 173, 101, 0.14); --error: #E55765; --error-soft: rgba(229, 87, 101, 0.14); --warning: #D6AE58; --warning-soft: rgba(214, 174, 88, 0.14); --info: #548AF7; --info-soft: rgba(84, 138, 247, 0.14); /* Chart series — fixed categorical order, CVD-validated on both --bg-base and --bg-surface. Assign by entity, never re-cycle. */ --chart-1: #548AF7; /* blue — Gas */ --chart-2: #C9764A; /* orange — Power */ --chart-3: #9D74E8; /* purple */ --chart-4: #2FA3AE; /* teal */ --chart-5: #B08A2E; /* gold */ --chart-6: #C75290; /* magenta */ /* Radii — tighter than before; Rider is crisp, not bubbly */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; /* Motion — spring-like easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 0.15s; --duration-normal: 0.25s; --duration-slow: 0.4s; --duration-enter: 0.5s; /* Legacy aliases (referenced in Razor files) */ --etrm-bg: var(--bg-base); --etrm-surface: var(--bg-surface); --etrm-surface-raised: var(--bg-raised); --etrm-border: var(--border-default); --etrm-text: var(--text-primary); --etrm-text-muted: var(--text-secondary); --etrm-primary: var(--accent); --etrm-primary-soft: var(--accent-soft); --etrm-success: var(--success); --etrm-success-soft: var(--success-soft); --etrm-error: var(--error); --etrm-error-soft: var(--error-soft); --etrm-warning: var(--warning); --etrm-warning-soft: var(--warning-soft); --etrm-radius: var(--radius-md); --etrm-radius-sm: var(--radius-sm); --etrm-radius-lg: var(--radius-lg); /* Shadows — restrained; borders do the separating, shadows add depth */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px -6px var(--accent-glow); /* Commodity accents — blue flame for gas, amber bolt for power. Same hues as chart series 1 & 2 so identity carries across the app. */ --gas: #548AF7; --gas-soft: rgba(84, 138, 247, 0.14); --power: #C9764A; --power-soft: rgba(201, 118, 74, 0.15); /* Card depth — a faint top light on a flat surface */ --card-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 52%); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-card-hover: 0 6px 20px -8px rgba(0, 0, 0, 0.55); /* Emphasis hue variants — chip text and gradient highlights. Lighter than their base hue on dark, darker on light, so they always pull away from the page background. */ --purple: #9D74E8; --purple-strong: #B189F5; --success-strong: #7BC581; --error-strong: #F0756F; --warning-strong: #E5C46E; --power-strong: #E08855; /* KPI accent tints — the faint wash behind accented KPI cards */ --accent-tint: rgba(53, 116, 240, 0.05); --success-tint: rgba(95, 173, 101, 0.05); --power-tint: rgba(201, 118, 74, 0.05); --error-tint: rgba(229, 87, 101, 0.05); --purple-tint: rgba(157, 116, 232, 0.05); /* Chrome that cannot be derived from the layer tokens above */ --body-glow: rgba(53, 116, 240, 0.07); --appbar-bg: rgba(30, 31, 34, 0.88); --glass-bg: rgba(38, 40, 43, 0.6); --login-glow-1: rgba(53, 116, 240, 0.09); --login-glow-2: rgba(157, 116, 232, 0.05); --accent-glow-strong: rgba(53, 116, 240, 0.4); /* Scrollbars — neutral thumbs flip polarity with the theme */ --scrollbar-thumb: rgba(255, 255, 255, 0.16); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28); --scrollbar-thumb-ff: rgba(255, 255, 255, 0.18); --scrollbar-accent: rgba(53, 116, 240, 0.4); } /* ============================================================ LIGHT THEME — additive overrides only; :root above stays the dark default (nothing changes for anyone who never toggles). Activated by : stamped during static SSR in App.razor from the etrm-theme cookie, and live on toggle by wwwroot/js/theme.js. Values mirror EtrmTheme.PaletteLight and ChartPalette.Light — keep the three tables in sync. ============================================================ */ [data-theme="light"] { /* Background layers — Int UI light: white surfaces on a cool gray base */ --bg-base: #F7F8FA; --bg-surface: #FFFFFF; --bg-raised: #F2F3F5; --bg-overlay: #FFFFFF; --bg-hover: #EBECF0; /* Borders */ --border-default: #D3D5DB; --border-hover: #C2C5CC; --border-active: #A8ACB5; /* Text — Int UI light gray scale */ --text-primary: #27282E; --text-secondary: #6C707E; --text-tertiary: #818594; /* Accent — same JetBrains blue; the "light" variant darkens instead so accent-on-soft text keeps >= 4.5:1 on white */ --accent-light: #2E63CE; --accent-soft: rgba(53, 116, 240, 0.12); --accent-glow: rgba(53, 116, 240, 0.22); /* Semantic — darkened for >= 4.5:1 on white */ --success: #1F7536; --success-soft: rgba(31, 117, 54, 0.12); --error: #C4404E; --error-soft: rgba(196, 64, 78, 0.12); --warning: #9A6700; --warning-soft: rgba(154, 103, 0, 0.12); --info: #2E63CE; --info-soft: rgba(53, 116, 240, 0.12); /* Chart series — same table as ChartPalette.Light. The dark hues were CVD-validated on dark surfaces only; all six darken here, with gold (chart-5) and orange (chart-2) darkened hardest (~15-20%) — they are the two that washed out on white. */ --chart-1: #3667C9; /* blue — Gas */ --chart-2: #A85B2F; /* orange — Power */ --chart-3: #7B52C7; /* purple */ --chart-4: #1F7E88; /* teal */ --chart-5: #8A6B14; /* gold */ --chart-6: #A93A74; /* magenta */ /* Shadows — far softer; light UIs separate with borders, not depth */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.16); /* Commodity accents — track chart series 1 & 2 */ --gas: #3667C9; --gas-soft: rgba(54, 103, 201, 0.12); --power: #A85B2F; --power-soft: rgba(168, 91, 47, 0.13); /* Card depth — a whisper of gray at the top instead of a top light */ --card-gradient: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0) 52%); --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-card-hover: 0 6px 20px -8px rgba(15, 23, 42, 0.20); /* Emphasis hue variants — darker than base on light */ --purple: #7B52C7; --purple-strong: #6A45B5; --success-strong: #1B6B31; --error-strong: #A83641; --warning-strong: #8A5A00; --power-strong: #8F4C26; /* KPI accent tints — light hues at the same whisper alpha */ --accent-tint: rgba(53, 116, 240, 0.05); --success-tint: rgba(31, 117, 54, 0.05); --power-tint: rgba(168, 91, 47, 0.05); --error-tint: rgba(196, 64, 78, 0.05); --purple-tint: rgba(123, 82, 199, 0.05); /* Chrome */ --body-glow: rgba(53, 116, 240, 0.05); --appbar-bg: rgba(255, 255, 255, 0.85); --glass-bg: rgba(255, 255, 255, 0.65); --login-glow-1: rgba(53, 116, 240, 0.07); --login-glow-2: rgba(123, 82, 199, 0.05); --accent-glow-strong: rgba(53, 116, 240, 0.30); /* Scrollbars — dark thumbs on light surfaces */ --scrollbar-thumb: rgba(0, 0, 0, 0.18); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.32); --scrollbar-thumb-ff: rgba(0, 0, 0, 0.20); } /* --- Base --- */ html, body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background-color: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; line-height: 1.6; font-feature-settings: 'cv05' 1, 'cv11' 1; /* Inter: open digits + curved l */ } /* App-wide depth — one faint blue glow up top so surfaces read as layered panels rather than one flat sheet. Quieter than before: Rider is calm. */ body { background-image: radial-gradient(1000px 520px at 12% -10%, var(--body-glow), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } /* Let the body gradient show through MudBlazor's shell */ .mud-layout, .mud-main-content { background: transparent !important; } /* Override MudBlazor font everywhere */ .mud-typography, .mud-input, .mud-button-root, .mud-chip, .mud-tab, .mud-table, .mud-select, .mud-menu, .mud-dialog, .mud-alert, .mud-navmenu, .mud-nav-link, .mud-appbar { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } /* Content container — stops ultra-wide monitors stretching pages thin. Pages centre inside it; padding comes from MainLayout. */ .page-container { width: 100%; max-width: 1560px; margin: 0 auto; } /* --- Scrollbar --- */ /* Visible enough to be discoverable — the old 5px near-invisible bar hid horizontally-scrolling table content from users. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; border: 2px solid transparent; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-ff) transparent; } /* A table that can scroll sideways advertises it with a thin accent bar */ .table-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-accent); background-clip: padding-box; border: 2px solid transparent; } /* --- Mono for financial data --- */ .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-variant-numeric: tabular-nums; font-size: 0.8125rem; letter-spacing: 0; } /* --- Semantic value colours --- */ .value-positive { color: var(--success) !important; } .value-negative { color: var(--error) !important; } .value-neutral { color: var(--text-secondary) !important; } .risk-green { color: var(--success); } .risk-amber { color: var(--warning); } .risk-red { color: var(--error); } /* ============================================================ CARDS — the core building block ============================================================ */ .card-elevated { background: var(--card-gradient), var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card); transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } .card-elevated:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-card-hover); } .card-interactive { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; transition: all var(--duration-normal) var(--ease-out); cursor: pointer; } .card-interactive:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-glow); transform: translateY(-2px); } /* --- KPI Cards --- */ .kpi-card { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card); transition: all var(--duration-normal) var(--ease-out); position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); z-index: 1; } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--border-hover) !important; } .kpi-card:hover::before { opacity: 1; } /* Accent bars — always visible. Hues from the validated chart set. */ .kpi-card.accent-blue::before { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 40%, transparent 100%); opacity: 1; } .kpi-card.accent-green::before { background: linear-gradient(90deg, var(--success) 0%, var(--success-strong) 40%, transparent 100%); opacity: 1; } .kpi-card.accent-orange::before { background: linear-gradient(90deg, var(--power) 0%, var(--power-strong) 40%, transparent 100%); opacity: 1; } .kpi-card.accent-red::before { background: linear-gradient(90deg, var(--error) 0%, var(--error-strong) 40%, transparent 100%); opacity: 1; } .kpi-card.accent-purple::before { background: linear-gradient(90deg, var(--purple) 0%, var(--purple-strong) 40%, transparent 100%); opacity: 1; } /* Subtle inner glow matching accent */ .kpi-card.accent-blue { background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-green { background: linear-gradient(180deg, var(--success-tint) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-orange { background: linear-gradient(180deg, var(--power-tint) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-red { background: linear-gradient(180deg, var(--error-tint) 0%, var(--bg-surface) 50%) !important; } .kpi-card.accent-purple { background: linear-gradient(180deg, var(--purple-tint) 0%, var(--bg-surface) 50%) !important; } /* KPI internals — consistent label / figure / meta rhythm */ .kpi-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .kpi-value { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-top: 6px; color: var(--text-primary); } .kpi-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; } /* ============================================================ ANIMATIONS — smooth, spring-like motion ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } /* Staggered entrance classes */ .animate-in { animation: fadeInUp var(--duration-enter) var(--ease-out) both; } .animate-in-delay-1 { animation-delay: 0.05s; } .animate-in-delay-2 { animation-delay: 0.10s; } .animate-in-delay-3 { animation-delay: 0.15s; } .animate-in-delay-4 { animation-delay: 0.20s; } .animate-in-delay-5 { animation-delay: 0.25s; } .animate-fade { animation: fadeIn var(--duration-slow) var(--ease-out) both; } .animate-slide-left { animation: slideInLeft var(--duration-slow) var(--ease-out) both; } .page-enter { animation: fadeInUp var(--duration-enter) var(--ease-out) both; } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { .animate-in, .animate-fade, .animate-slide-left, .page-enter, .skeleton { animation: none !important; } * { transition-duration: 0.01ms !important; } } /* ============================================================ SKELETON LOADERS ============================================================ */ .skeleton { background: linear-gradient( 90deg, var(--bg-surface) 25%, var(--bg-raised) 50%, var(--bg-surface) 75% ); background-size: 400% 100%; animation: shimmer 2s ease-in-out infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; } .skeleton-text:last-child { width: 60%; } .skeleton-card { height: 100px; border-radius: var(--radius-md); } /* ============================================================ TABLES — clean, spacious ============================================================ */ /* Tables flow in the page and paginate — no fixed-height internal scroll that clips rows. Wide tables scroll HORIZONTALLY within the card instead of being clipped (the old overflow:hidden hid columns with no way to reach them). */ .mud-table-container { border-radius: var(--radius-lg); border: 1px solid var(--border-default); overflow-x: auto; } /* Horizontal table scrollbar uses the accent tint so it reads as "scroll me" */ .mud-table-container::-webkit-scrollbar-thumb { background: var(--scrollbar-accent); background-clip: padding-box; border: 2px solid transparent; border-radius: 10px; } .mud-table { background: var(--bg-surface) !important; } .mud-table .mud-table-head .mud-table-cell { font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding: 12px 16px; border-bottom: 1px solid var(--border-default) !important; background: var(--bg-raised) !important; white-space: nowrap; } .mud-table .mud-table-body .mud-table-row { transition: background-color var(--duration-fast) var(--ease-out); } .mud-table .mud-table-body .mud-table-row:hover { background: var(--bg-hover) !important; } .mud-table .mud-table-body .mud-table-cell { padding: 12px 16px; border-bottom: 1px solid var(--border-default) !important; font-size: 0.8125rem; } /* Figures line up cleanly column-to-column */ .mud-data-grid .mud-table-cell, .mud-table .mono { font-variant-numeric: tabular-nums; } /* DataGrid overrides */ .mud-data-grid .mud-table-head .mud-table-cell { background: var(--bg-raised) !important; } /* Pager sits on the raised surface, comfortably spaced */ .mud-table-pagination { border-top: 1px solid var(--border-default) !important; } /* Dense tables mean it: tighter cells so data-heavy grids (Trade Book, compliance, audit) fit their columns without horizontal scroll. */ .mud-table.mud-table-dense .mud-table-head .mud-table-cell { padding: 8px 10px; } .mud-table.mud-table-dense .mud-table-body .mud-table-cell { padding: 8px 10px; } /* MudDataGrid reserves ~34px per header for the sort arrow even when idle — let the icon overlap the label gap instead of widening every column. */ .mud-table-cell .mud-table-sort-label .mud-icon-root { margin: 0 !important; } /* Plain MudSimpleTable inside cards — align with main table styling */ .mud-simple-table table thead th { font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default) !important; white-space: nowrap; } .mud-simple-table table tbody td { border-bottom: 1px solid var(--border-default) !important; font-size: 0.8125rem; } .mud-simple-table table tbody tr:last-child td { border-bottom: none !important; } /* ============================================================ PAGE HEADER + TOOLBARS — consistent, responsive, wrapping. ============================================================ */ /* Page title row — title/subtitle on the left, actions on the right. Wraps cleanly instead of overflowing on narrow viewports. */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; } .page-header-titles { min-width: 0; } /* Larger, bolder page title — clearer top-of-page hierarchy */ .page-header-titles > :first-child { font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; } .page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Filter bar — a compact, horizontal, wrapping row of inputs with optional right-aligned actions. Use instead of MudPaper + MudGrid for filters. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .filter-bar-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; } /* Each field gets a sensible default width and wraps as space runs out */ .filter-bar-fields > * { flex: 0 1 220px; min-width: 168px; } /* Opt-in: a wider field (e.g. a search box) */ .filter-bar-fields > .filter-grow { flex: 1 1 260px; } .filter-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } /* Lightweight inline control row (toggles, chips, secondary actions) that wraps gracefully — used for granularity / period / view switches. */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .toolbar .toolbar-spacer { flex: 1 1 auto; } /* Small uppercase label that introduces a toolbar control */ .toolbar-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; } /* On phones, action clusters go full width and align left */ @media (max-width: 600px) { .page-header-actions, .filter-bar-actions { width: 100%; margin-left: 0; } .filter-bar-fields > * { flex-basis: 100%; } } /* ============================================================ STATUS INDICATORS ============================================================ */ .status-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; } /* MudBlazor ships bare .green/.amber/.red/.blue background utilities that collide with our modifier classes and paint the whole span as a solid square. Neutralise them here — the coloured dot lives on ::before, the text stays in text tokens. */ .status-dot.green, .status-dot.amber, .status-dot.red, .status-dot.blue { background: transparent; color: var(--text-primary); padding: 0; } .status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-dot.green::before { background: var(--success); box-shadow: 0 0 8px var(--success-soft); } .status-dot.amber::before { background: var(--warning); box-shadow: 0 0 8px var(--warning-soft); } .status-dot.red::before { background: var(--error); box-shadow: 0 0 8px var(--error-soft); } .status-dot.blue::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); } /* Static variant (no animation) */ .status-dot.static::before { animation: none; } /* ============================================================ NAVIGATION — grouped sections with labels ============================================================ */ .mud-nav-link { border-radius: var(--radius-sm) !important; margin: 1px 10px !important; padding: 7px 10px !important; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out) !important; position: relative; font-weight: 500 !important; font-size: 0.8125rem !important; color: var(--text-secondary) !important; } .mud-nav-link:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } .mud-nav-link.active { background: var(--accent-soft) !important; color: var(--accent-light) !important; } .mud-nav-link.active .mud-nav-link-icon { color: var(--accent-light) !important; } .mud-nav-link .mud-nav-link-icon { color: var(--text-tertiary); font-size: 1.25rem !important; transition: color var(--duration-fast) var(--ease-out) !important; } /* Section label between nav groups */ .nav-section-label { display: block; padding: 16px 22px 4px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary); user-select: none; white-space: nowrap; overflow: hidden; } /* Drawer styling */ .mud-drawer { background: var(--bg-base) !important; border-right: 1px solid var(--border-default) !important; } /* In mini (collapsed) state the labels would clip mid-letter — hide them */ .mud-drawer--closed .nav-section-label, .mud-drawer-mini .nav-section-label { visibility: hidden; padding: 8px 0 0; height: 12px; } /* ============================================================ BUTTONS — flat, crisp, no gradients ============================================================ */ .mud-button-root { transition: all var(--duration-fast) var(--ease-out) !important; font-weight: 600 !important; letter-spacing: -0.006em !important; text-transform: none !important; border-radius: var(--radius-sm) !important; } .mud-button-root:active { transform: scale(0.98); } /* Filled primary — flat JetBrains blue, brightens on hover */ .mud-button-filled.mud-button-primary { background: var(--accent) !important; box-shadow: none !important; } .mud-button-filled.mud-button-primary:hover { background: var(--accent-light) !important; box-shadow: var(--shadow-glow) !important; } /* NOTE: MudToggleGroup (segmented controls) is intentionally left on MudBlazor's own styling. A custom restyle here broke item rendering (buttons vanished), so any future tweak must be verified against the running app first. */ /* Outlined buttons */ .mud-button-outlined { border-color: var(--border-default) !important; } .mud-button-outlined:hover { border-color: var(--border-hover) !important; background: var(--bg-hover) !important; } /* ============================================================ CHIPS / BADGES ============================================================ */ .chip-soft-blue { background: var(--accent-soft) !important; color: var(--accent-light) !important; font-weight: 500 !important; border: none !important; } .chip-soft-green { background: var(--success-soft) !important; color: var(--success-strong) !important; font-weight: 500 !important; border: none !important; } .chip-soft-red { background: var(--error-soft) !important; color: var(--error-strong) !important; font-weight: 500 !important; border: none !important; } .chip-soft-orange { background: var(--warning-soft) !important; color: var(--warning-strong) !important; font-weight: 500 !important; border: none !important; } .mud-chip { font-weight: 500 !important; border-radius: 5px !important; } /* ============================================================ APPBAR ============================================================ */ .mud-appbar { background: var(--appbar-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-default) !important; } /* Live market-price pill in the app bar */ .ticker-pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid var(--border-default); } /* Live market-price pills crowd the brand/title on small screens — hide them there (the full prices are always on the Market Data page). */ @media (max-width: 768px) { .market-ticker { display: none !important; } } /* Ensure popovers/menus render above everything */ .mud-popover-provider { z-index: 10000 !important; } /* Custom appbar dropdowns */ .appbar-dropdown { position: fixed; top: 68px; z-index: 9999; background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); overflow: hidden; animation: scaleIn var(--duration-normal) var(--ease-out) both; } .dropdown-item { display: block; padding: 9px 16px; font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; transition: all var(--duration-fast) var(--ease-out); } .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); } /* ============================================================ DIALOGS ============================================================ */ .mud-dialog { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; animation: scaleIn var(--duration-normal) var(--ease-out) both; } .mud-dialog .mud-dialog-title { font-size: 1.0625rem !important; font-weight: 600 !important; padding: 20px 24px 12px !important; } .mud-dialog .mud-dialog-content { padding: 12px 24px !important; } .mud-dialog .mud-dialog-actions { padding: 12px 24px 20px !important; gap: 8px; } .mud-overlay-dialog { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ============================================================ TABS ============================================================ */ .mud-tabs { border-radius: var(--radius-md) !important; } .mud-tab { font-weight: 600 !important; font-size: 0.8125rem !important; letter-spacing: -0.006em !important; text-transform: none !important; transition: all var(--duration-normal) var(--ease-out) !important; } /* ============================================================ INPUTS ============================================================ */ .mud-input-outlined .mud-input-outlined-border { border-color: var(--border-default) !important; border-radius: var(--radius-sm) !important; transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out) !important; } .mud-input.mud-input-underline::after { border-color: var(--accent) !important; } .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } /* ============================================================ ALERTS ============================================================ */ .mud-alert { border-radius: var(--radius-sm) !important; } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; animation: fadeIn var(--duration-slow) var(--ease-out) both; } .empty-state-icon { font-size: 3rem; color: var(--text-tertiary); margin-bottom: 16px; opacity: 0.5; } .empty-state-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); margin-bottom: 4px; } .empty-state-subtitle { font-size: 0.8125rem; color: var(--text-secondary); max-width: 300px; line-height: 1.5; } /* ============================================================ LOGIN ============================================================ */ .login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-base); background-image: radial-gradient(ellipse at 20% 40%, var(--login-glow-1), transparent 50%), radial-gradient(ellipse at 80% 60%, var(--login-glow-2), transparent 50%); } .login-card { width: 100%; max-width: 400px; padding: 44px 36px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); animation: fadeInUp 0.6s var(--ease-out) both; } .login-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: -0.006em; } .login-input { width: 100%; padding: 11px 14px; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.875rem; font-family: 'Inter', system-ui, sans-serif; outline: none; transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .login-input::placeholder { color: var(--text-tertiary); } .login-input:hover { border-color: var(--border-hover); background: var(--bg-raised); } .login-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-base); } .login-button { width: 100%; padding: 12px 20px; border: none; border-radius: var(--radius-sm); background: var(--accent); color: white; font-family: 'Inter', system-ui, sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.006em; cursor: pointer; transition: all var(--duration-normal) var(--ease-out); box-shadow: 0 2px 8px var(--accent-glow); text-align: center; } .login-button:hover { background: var(--accent-light); box-shadow: 0 4px 16px var(--accent-glow-strong); transform: translateY(-1px); } .login-button:active { transform: translateY(0) scale(0.98); } .login-link { font-size: 0.8125rem; color: var(--text-tertiary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .login-link:hover { color: var(--text-secondary); } /* ============================================================ GLASSMORPHISM ============================================================ */ .glass { background: var(--glass-bg) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--border-default) !important; } /* ============================================================ SNACKBAR / TOAST ============================================================ */ .mud-snackbar { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-lg) !important; font-weight: 500 !important; } /* ============================================================ PROGRESS / CIRCULAR ============================================================ */ .mud-progress-circular svg circle:last-child { transition: stroke-dashoffset var(--duration-slow) var(--ease-out); } /* ============================================================ TOOLTIP ============================================================ */ .mud-tooltip { border-radius: var(--radius-sm) !important; font-size: 0.75rem !important; font-weight: 500 !important; } /* ApexCharts tooltip — match the app's overlay surfaces */ .apexcharts-tooltip { background: var(--bg-overlay) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-primary) !important; } .apexcharts-tooltip-title { background: var(--bg-raised) !important; border-bottom: 1px solid var(--border-default) !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; } .apexcharts-xaxistooltip, .apexcharts-yaxistooltip { background: var(--bg-overlay) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; } /* ============================================================ SELECTION COLOURS ============================================================ */ ::selection { background: var(--accent-soft); color: var(--text-primary); } /* ============================================================ PRINT ============================================================ */ @media print { .mud-drawer, .mud-appbar, .no-print { display: none !important; } .mud-main-content { margin: 0 !important; padding: 0 !important; } body { background-color: white !important; color: black !important; } }