/* ============================================================ MyTrading — Design System (design language ported from MyClaimLedger) ============================================================ */ /* ── Design tokens: Light mode (default) ──────────────────── */ :root { /* Palette */ --bg: #f5f7fb; --surface: #f9fafb; --card-bg: #ffffff; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #dbeafe; --border: #e2e8f0; --border-light: #f1f5f9; /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; /* Status */ --status-open: #2563eb; --status-open-bg: #eff6ff; --status-inv: #f59e0b; --status-inv-bg: #fffbeb; --status-wait: #8b5cf6; --status-wait-bg: #f5f3ff; --status-closed: #22c55e; --status-closed-bg:#f0fdf4; --status-rej: #ef4444; --status-rej-bg: #fef2f2; /* Semantic colors */ --success: #22c55e; --warning: #f59e0b; --risk: #ef4444; /* Grade colors */ --grade-a: #22c55e; --grade-b: #3b82f6; --grade-c: #f59e0b; --grade-d: #ef4444; /* Spacing (8px grid) */ --sp1: 8px; --sp2: 16px; --sp3: 24px; --sp4: 32px; --sp5: 40px; /* Radius & shadow */ --radius: 12px; --radius-sm: 6px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 4px rgba(0, 0, 0, 0.06); /* Typography scale */ --font-symbol: 36px; --font-symbol-fw: 700; --font-company: 18px; --font-section: 16px; --font-body: 14px; --font-small: 12px; /* Layout */ --max-width: 1600px; --content-pad: var(--sp3); --card-pad: 20px; --card-gap: 16px; } /* ── Design tokens: Dark mode ─────────────────────────────── Activated via data-theme="dark" on or Default: dark (per design system "dark mode first") ──────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Palette — premium blue-black investment workstation */ --bg: #0B1220; --surface: #07101D; --card-bg: #111827; --topbar-bg: #07111F; --primary: #3B82F6; --primary-hover: #60a5fa; --primary-light: #1a2d4a; --border: #1a2a3d; --border-light: #131e2e; /* Text */ --text-primary: #E5E7EB; --text-secondary: #9CA3AF; --text-muted: #6b7280; /* Status */ --status-open: #3B82F6; --status-open-bg: #1e3a5f; --status-inv: #F59E0B; --status-inv-bg: #422006; --status-wait: #8b5cf6; --status-wait-bg: #2e1065; --status-closed: #22C55E; --status-closed-bg:#14532d; --status-rej: #EF4444; --status-rej-bg: #7f1d1d; /* Semantic colors */ --success: #22C55E; --warning: #F59E0B; --risk: #EF4444; /* Grade colors */ --grade-a: #22C55E; --grade-b: #3B82F6; --grade-c: #F59E0B; --grade-d: #EF4444; /* Radius & shadow — subtle elevation, no heavy shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } /* ── Reset / base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg); margin: 0; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text-primary); } /* ── App shell (column: header on top, body below) ─────────── */ .mcl-app-shell { display: flex; flex-direction: column; min-height: 100vh; background: radial-gradient(ellipse 80% 60% at 10% 10%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), var(--bg); } /* ── Body shell (sidebar + main, flex row below header) ───── */ .mcl-body-shell { display: flex; flex: 1; min-height: 0; } /* ── Sidebar ──────────────────────────────────────────────── */ .mcl-sidebar { width: 220px; flex-shrink: 0; background: radial-gradient(ellipse 100% 50% at 0% 10%, rgba(59, 130, 246, 0.04) 0%, transparent 60%), var(--surface); display: flex; flex-direction: column; position: sticky; top: 0; min-height: calc(100vh - 72px); z-index: 100; border-right: 1px solid rgba(255, 255, 255, 0.04); } .mcl-sidebar-nav { flex: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; } .mcl-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; position: relative; transition: background 0.15s, color 0.15s; border-left: 3px solid transparent; } .mcl-sidebar-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); text-decoration: none; } .mcl-sidebar-link--active { background: rgba(59, 130, 246, 0.10); color: var(--primary); font-weight: 600; border-left-color: var(--primary); } .mcl-sidebar-link--active:hover { background: rgba(59, 130, 246, 0.14); color: var(--primary); } .mcl-sidebar-link--disabled { color: var(--text-muted); pointer-events: none; cursor: default; } .mcl-sidebar-link i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; transition: color 0.15s; color: var(--text-muted); } .mcl-sidebar-link--active i { color: var(--primary); } .mcl-sidebar-footer { padding: var(--sp2); } .mcl-sidebar-theme-btn { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; } .mcl-sidebar-theme-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); } /* ── Sidebar group headers ──────────────────────────────────── */ .mcl-sidebar-group { margin-bottom: var(--sp1); } .mcl-sidebar-group-header { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); cursor: default; } .mcl-sidebar-group-header i { font-size: 14px; width: 20px; text-align: center; color: var(--text-muted); } .mcl-sidebar-group-children .mcl-sidebar-link { padding-left: 50px; font-size: 13px; } /* ── Main content wrapper ─────────────────────────────────── */ .mcl-main { flex: 1; min-width: 0; padding: var(--sp2) var(--sp4) var(--sp4); display: flex; flex-direction: column; } #page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* ── Full-width top header ──────────────────────────────────── */ .mcl-top-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 72px; padding: 0 16px; flex-shrink: 0; background: radial-gradient(ellipse 70% 80% at 5% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 50%), var(--topbar-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .mcl-header-left { grid-column: 1; display: flex; align-items: center; flex-shrink: 0; margin-right: var(--sp3); } .mcl-header-center { grid-column: 2; display: flex; align-items: center; justify-content: center; min-width: 0; } .mcl-header-right { grid-column: 3; display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: var(--sp3); } /* ── Header brand block ──────────────────────────────────── */ .mcl-header-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity 0.15s; } .mcl-header-brand:hover { opacity: 0.8; text-decoration: none; } .mcl-header-logo { width: 32px; height: 32px; flex-shrink: 0; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 36 36'%3E%3Crect x='2' y='18' width='8' height='18' rx='2' fill='%233B82F6' opacity='0.35'/%3E%3Crect x='14' y='8' width='8' height='28' rx='2' fill='%233B82F6'/%3E%3Crect x='26' y='13' width='8' height='23' rx='2' fill='%233B82F6' opacity='0.55'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; } .mcl-header-brand-text { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } /* ── Search ──────────────────────────────────────────────── */ .mcl-search-wrap { position: relative; width: clamp(520px, 38vw, 760px); min-width: 160px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; transition: border-color 0.15s; height: 44px; outline: none; } .mcl-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; z-index: 1; } .mcl-global-search { width: 100%; height: 100%; background: transparent; border: none; box-shadow: none; border-radius: 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; padding: 0 14px 0 38px; outline: none; } .mcl-global-search::placeholder { color: var(--text-muted); } .mcl-global-search:focus { background: rgba(255, 255, 255, 0.02); } /* ── Header indicators (Alerts, Portfolio, Cash) ─────────── */ .mcl-header-indicators { display: flex; align-items: center; gap: 4px; } .mcl-header-indicator { display: flex; align-items: center; gap: 6px; padding: 6px 10px; white-space: nowrap; border-radius: 6px; } .mcl-indicator-icon { font-size: 14px; color: var(--text-muted); flex-shrink: 0; } .mcl-indicator-text { display: flex; align-items: baseline; gap: 6px; } .mcl-indicator-label { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; } .mcl-indicator-value { font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; } .mcl-indicator-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; } /* ── Alert value tone (light orange) ─────────────────────── */ .mcl-indicator-value--alert { color: #D97706; } /* ── Market Open badge ────────────────────────────────────── */ .mcl-market-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 6px 10px; white-space: nowrap; border-radius: 6px; letter-spacing: 0.01em; } .mcl-market-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--success); box-shadow: 0 0 5px rgba(34, 197, 94, 0.35); } /* ── Header icon button (bell, etc.) ─────────────────────── */ .mcl-header-icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; transition: background 0.15s, color 0.15s; } .mcl-header-icon-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); } /* ── Avatar + dropdown ───────────────────────────────────── */ .mcl-header-avatar { display: flex; align-items: center; gap: 5px; padding: 0 4px; cursor: default; } .mcl-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; } .mcl-chevron { font-size: 11px; color: var(--text-muted); } /* ── Page header ──────────────────────────────────────────── */ .mcl-page-header { margin-bottom: var(--sp3); } .mcl-page-title { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px; } .mcl-page-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; } /* ── Nav-pills ────────────────────────────────────────────── */ .mcl-pills { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0 0 var(--sp3) 0; border-bottom: 1px solid var(--border); padding-bottom: 0; flex-wrap: wrap; } .mcl-pill { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); padding: var(--sp1) var(--sp2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s; } .mcl-pill:hover { color: var(--primary); text-decoration: none; } .mcl-pill--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } /* ── Cards ────────────────────────────────────────────────── */ .mcl-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--sp2); } .mcl-card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--card-pad); border-bottom: 1px solid var(--border); background: transparent; } .mcl-card-body { padding: var(--card-pad); } .mcl-section-title { font-size: var(--font-section); font-weight: 600; color: var(--text-primary); } /* ── Stat cards ───────────────────────────────────────────── */ .mcl-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp2); margin-bottom: var(--sp3); } .mcl-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp3); box-shadow: var(--shadow-sm); } .mcl-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 var(--sp1) 0; } .mcl-stat-value { font-size: 32px; font-weight: 700; line-height: 1; margin: 0; } /* ── Status badges ────────────────────────────────────────── */ .mcl-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } /* ── Financials card ────────────────────────────────────── */ .financials-grid-bottom { display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp3); margin-top: var(--sp2); } .financials-chart-wrap { margin-bottom: var(--sp2); } .financials-ai-card { background: var(--border-light); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp3); } .mcl-badge--open { background: var(--status-open-bg); color: var(--status-open); } .mcl-badge--inv { background: var(--status-inv-bg); color: var(--status-inv); } .mcl-badge--wait { background: var(--status-wait-bg); color: var(--status-wait); } .mcl-badge--closed { background: var(--status-closed-bg); color: var(--status-closed); } .mcl-badge--rejected { background: var(--status-rej-bg); color: var(--status-rej); } /* ── Favorite pill ──────────────────────────────────────────── */ .mcl-badge--favorite { background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; user-select: none; transition: all 0.15s ease; } .mcl-badge--favorite:hover { border-color: var(--text-muted); background: var(--border-light); } .mcl-badge--favorite.active { background: #fef9c3; color: #a16207; border-color: #facc15; } /* ── Dash DataTable overrides ─────────────────────────────── */ .dash-spreadsheet-container { margin: 0 !important; } .dash-spreadsheet td, .dash-spreadsheet th { font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif !important; font-size: 13px !important; padding: 10px 12px !important; border-color: var(--border-light) !important; vertical-align: middle !important; } .dash-spreadsheet th { background: var(--border-light) !important; font-weight: 600 !important; color: var(--text-secondary) !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: 0.05em !important; } .dash-spreadsheet tr:hover td { background: rgba(255,255,255,0.03) !important; } .dash-spreadsheet td.cell-markdown p { margin: 0 !important; padding: 0 !important; line-height: inherit !important; } .dash-spreadsheet td a, .dash-spreadsheet td.cell-markdown a { color: var(--primary) !important; text-decoration: none !important; } .dash-spreadsheet td a:hover, .dash-spreadsheet td.cell-markdown a:hover { text-decoration: underline !important; } /* ── KPI cards ────────────────────────────────────────────── */ .mcl-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); margin-bottom: var(--sp3); } .mcl-kpi-card { display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp3); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } button.mcl-kpi-card, a.mcl-kpi-card { cursor: pointer; } button.mcl-kpi-card:hover, a.mcl-kpi-card:hover { border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; color: inherit; } .mcl-kpi-card--active { border-color: var(--primary); box-shadow: var(--shadow); } button.mcl-kpi-card { width: 100%; font-family: inherit; font-size: inherit; text-align: left; } .mcl-kpi-value { font-size: 32px; font-weight: 700; line-height: 1; color: var(--text-primary); margin: 0 0 4px 0; } .mcl-kpi-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--sp1) 0; } .mcl-kpi-quality { font-size: 12px; color: var(--text-muted); margin: 0; } /* ── Financials: compact KPI strip (scoped, does not affect global cards) ── */ .fin-kpi-strip .mcl-kpi-card { flex: 1 1 0; min-width: 0; max-width: 200px; padding: 12px 16px; display: flex; flex-direction: column-reverse; /* label on top, value below — no ui.py change needed */ } .fin-kpi-strip .mcl-kpi-value { font-size: 22px; margin: 0; } .fin-kpi-strip .mcl-kpi-subtitle { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px 0; } /* ── Financials: main 70/30 content split ─────────────────── */ .fin-main-split { display: grid; grid-template-columns: 7fr 3fr; gap: var(--sp3); margin-bottom: var(--sp3); align-items: stretch; } @media (max-width: 900px) { .fin-main-split { grid-template-columns: 1fr; } } /* ── AI interpretation markdown (scoped) ─────────────────── */ .ai-interpretation-markdown { font-size: 14px; color: #475569; line-height: 1.55; } .ai-interpretation-markdown h2 { font-size: 13px; font-weight: 600; color: #1e293b; margin: 14px 0 4px 0; } .ai-interpretation-markdown h2:first-child { margin-top: 0; } .ai-interpretation-markdown ul { margin: 0 0 4px 0; padding-left: 18px; } .ai-interpretation-markdown li { margin-bottom: 3px; } .ai-interpretation-markdown p { margin: 0 0 6px 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1100px) { .mcl-search-wrap { width: clamp(320px, 30vw, 480px); } } @media (max-width: 900px) { .mcl-stat-grid { grid-template-columns: repeat(2, 1fr); } .mcl-kpi-grid { grid-template-columns: repeat(2, 1fr); } .mcl-main { padding: var(--sp1) var(--sp2) var(--sp3); } .mcl-top-header { height: 64px; padding: 0 var(--sp2); } .mcl-search-wrap { width: 220px; } .mcl-header-brand-text { display: none; } .mcl-sidebar { width: 56px; min-height: calc(100vh - 64px); } .mcl-sidebar-link span, .mcl-sidebar-theme-btn { display: none; } .mcl-sidebar-link { justify-content: center; padding: 10px 0; border-left: none; border-radius: var(--radius-sm); } .mcl-sidebar-link i { font-size: 20px; width: auto; } .mcl-sidebar-footer { padding: var(--sp1) 0; display: flex; justify-content: center; } } @media (max-width: 600px) { .mcl-search-wrap { width: 130px; } .mcl-indicator-label { display: none; } .mcl-market-badge span:last-child { display: none; } } @media (max-width: 480px) { .mcl-stat-grid { grid-template-columns: 1fr; } .mcl-kpi-grid { grid-template-columns: 1fr; } .mcl-header-indicators { display: none; } .mcl-market-badge { display: none; } } /* ── Form layout ──────────────────────────────────────────── */ .mcl-form-section { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); margin: var(--sp3) 0 var(--sp2) 0; padding: 6px var(--sp2); background: var(--border-light); border-radius: var(--radius-sm); } .mcl-form-section:first-child { margin-top: 0; } .mcl-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp3); row-gap: var(--sp2); } .mcl-field, .mcl-form-field { display: flex; flex-direction: column; gap: 6px; } .mcl-field-full { grid-column: 1 / -1; } .mcl-field-label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .mcl-form-grid input[type="text"], .mcl-form-grid input[type="number"], .mcl-form-grid input[type="password"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text-primary); background: #fff; box-sizing: border-box; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .mcl-form-grid input[type="text"]:focus, .mcl-form-grid input[type="number"]:focus, .mcl-form-grid input[type="password"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .mcl-form-grid textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text-primary); background: #fff; resize: vertical; box-sizing: border-box; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .mcl-form-grid textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .mcl-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp2); padding-top: var(--sp3); margin-top: var(--sp3); border-top: 1px solid var(--border-light); } /* ── Action bar ───────────────────────────────────────────── */ .mcl-action-bar { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp2); } /* ── Buttons ──────────────────────────────────────────────── */ .mcl-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; line-height: 1; } .mcl-btn:disabled { opacity: 0.55; cursor: not-allowed; } .mcl-btn-primary, .mcl-btn--primary { background: var(--primary); color: #fff; } .mcl-btn-primary:hover, .mcl-btn--primary:hover { background: var(--primary-hover); color: #fff; text-decoration: none; } .mcl-btn-secondary, .mcl-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .mcl-btn-secondary:hover, .mcl-btn--ghost:hover { background: var(--border-light); color: var(--text-primary); text-decoration: none; } .mcl-btn-danger { background: var(--status-rej); color: #fff; } .mcl-btn-danger:hover { background: #dc2626; color: #fff; text-decoration: none; } @media (max-width: 640px) { .mcl-form-grid { grid-template-columns: 1fr; } .mcl-field-full { grid-column: 1; } } /* Normalize markdown cells inside Dash DataTable */ .dash-table-container .dash-spreadsheet td div { margin: 0; padding: 0; } .dash-table-container .dash-spreadsheet td div p { margin: 0; padding: 0; } .dash-table-container .dash-spreadsheet td a { display: inline; line-height: 1.4; } /* ── DatePickerSingle ─────────────────────────────────────── */ .mcl-date-wrapper { position: relative; display: flex; align-items: center; width: 100%; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .mcl-date-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .mcl-date-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); font-size: 13px; line-height: 1; z-index: 1; } .mcl-date-wrapper .dash-datepicker { flex: 1; width: 100%; height: 100%; background: transparent !important; display: flex; align-items: center; } .mcl-date-wrapper .dash-datepicker-input-wrapper { width: 100% !important; height: 100% !important; border: none !important; background: transparent !important; padding: 0 32px 0 12px !important; box-shadow: none !important; outline: none !important; } .mcl-date-wrapper .dash-datepicker-input { font-size: 14px !important; font-family: inherit !important; color: var(--text-primary) !important; background: transparent !important; height: 100% !important; width: 100% !important; padding: 0 !important; } .mcl-date-wrapper .dash-datepicker-input::placeholder { color: var(--text-muted) !important; font-weight: 400 !important; } .mcl-date-wrapper .dash-datepicker-caret-icon { display: none !important; } .mcl-date-wrapper .dash-datepicker-clear { flex-shrink: 0; color: var(--text-muted) !important; } .mcl-date-wrapper .dash-datepicker-clear:hover { color: var(--text-secondary) !important; } .dash-datepicker-content { z-index: 9999 !important; } /* ── Review editable card headers ─────────────────────────── */ .rv-hdr { display: flex; justify-content: space-between; align-items: center; width: 100%; } .rv-action-area { min-width: 90px; display: flex; align-items: center; justify-content: flex-end; gap: 0; opacity: 0; transition: opacity 0.12s ease; } .rv-hdr:hover .rv-action-area { opacity: 1; } .rv-action-area--active { opacity: 1 !important; } .rv-action-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--primary); font-family: inherit; line-height: 1; text-decoration: none; } .rv-action-btn:hover { text-decoration: underline; } .rv-action-btn--muted { color: var(--text-secondary); } .rv-action-btn--muted:hover { text-decoration: underline; } .rv-action-sep { font-size: 12px; color: var(--border); margin: 0 8px; user-select: none; pointer-events: none; } /* ── Login page ───────────────────────────────────────────── */ .mcl-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .mcl-login-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp5); width: 100%; max-width: 380px; box-shadow: var(--shadow); } .mcl-login-brand { font-size: 20px; font-weight: 700; color: var(--primary); margin: 0 0 4px 0; } .mcl-login-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0 0 var(--sp3) 0; } .mcl-login-error { background: var(--status-rej-bg); border: 1px solid var(--status-rej); border-radius: var(--radius-sm); color: var(--status-rej); font-size: 13px; padding: var(--sp1) var(--sp2); margin-bottom: var(--sp2); } /* ── Assets page ──────────────────────────────────────────── */ /* Card header: title left, search+button right */ .assets-header-actions { display: flex; align-items: center; gap: var(--sp2); } /* Search input wrapper — anchors the floating dropdown */ .assets-search-wrap { position: relative; } /* Search text input */ .assets-search-input { width: 280px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--text-primary); background: #fff; outline: none; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .assets-search-input::placeholder { color: var(--text-muted); } .assets-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* Floating dropdown panel */ .assets-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: 360px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 200; max-height: 310px; overflow-y: auto; } /* One search result */ .assets-suggestion-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background 0.1s; } .assets-suggestion-item:last-child { border-bottom: none; } .assets-suggestion-item:hover { background: var(--bg); } /* Symbol + type pill row */ .assets-suggestion-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .assets-suggestion-symbol { font-weight: 700; font-size: 13px; color: var(--text-primary); } /* Asset type badge */ .assets-type-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--status-open-bg); color: var(--status-open); text-transform: lowercase; white-space: nowrap; } .assets-suggestion-name { font-size: 13px; color: var(--text-primary); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .assets-suggestion-meta { font-size: 12px; color: var(--text-muted); } .assets-suggestion-empty { padding: 12px 14px; font-size: 13px; color: var(--text-secondary); } /* Success notification above the table */ .assets-notification { font-size: 13px; } .assets-notification:not(:empty) { padding: 8px 16px; border-bottom: 1px solid var(--border-light); } .assets-notification-success { color: var(--status-closed); } /* ── Investment Universe (Assets page) ───────────────────── */ /* Page header with actions */ .assets-u-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp3); gap: var(--sp2); } .assets-u-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 4px; } .assets-u-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .assets-u-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.1); } .assets-u-btn--primary { background: var(--primary); color: #ffffff; border-color: var(--primary); } .assets-u-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } /* Filter row */ .assets-u-filters { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp2); flex-wrap: wrap; } .assets-u-tabs { display: flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 3px; } .assets-u-tab { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .assets-u-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); } .assets-u-tab--active { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); font-weight: 600; } /* Filter controls */ .assets-u-filter-select { padding: 5px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 12px; font-family: inherit; cursor: pointer; outline: none; } .assets-u-filter-search { width: 200px; padding: 5px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-size: 12px; font-family: inherit; outline: none; } .assets-u-filter-search::placeholder { color: var(--text-muted); } .assets-u-filter-btn { padding: 5px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 12px; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .assets-u-filter-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); } /* Dark table card */ .assets-u-table-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* KPI card compact variant for asset page */ .assets-u-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp2) var(--sp3); display: flex; flex-direction: column; gap: 2px; } .assets-u-kpi-value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; } .assets-u-kpi-label { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; text-transform: uppercase; } /* Dark-themed DataTable */ .assets-u-table-card .dash-table-container { background: transparent; } .assets-u-table-card table { background: transparent !important; border-collapse: collapse; } .assets-u-table-card td, .assets-u-table-card th { background: transparent !important; } /* Row-level background — never white */ .assets-u-table-card .dash-spreadsheet-inner tr { background: transparent !important; } .assets-u-table-card .dash-spreadsheet-container { background: transparent !important; } .assets-u-table-card .dash-spreadsheet-inner td { background: transparent !important; border-bottom: 1px solid var(--border-light) !important; padding: 10px 14px !important; font-family: inherit !important; } .assets-u-table-card .dash-spreadsheet-inner th { background: var(--card-bg) !important; border-bottom: 1px solid var(--border) !important; padding: 10px 14px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-family: inherit !important; } .assets-u-table-card .dash-spreadsheet-inner tr:hover td { background: rgba(59, 130, 246, 0.06) !important; } .assets-u-table-card .dash-spreadsheet-inner tr td:first-child { font-weight: 600; cursor: pointer; } /* ── Comprehensive dark-row state overrides ────────────────── Dash DataTable can introduce white/light backgrounds for hovered, selected, focused, and active cells. These overrides keep all interactive states dark. */ .assets-u-table-card .dash-spreadsheet-inner tr:hover td, .assets-u-table-card .dash-spreadsheet-inner tr td:hover { background: rgba(59, 130, 246, 0.06) !important; } .assets-u-table-card .dash-spreadsheet-inner tr td.focused, .assets-u-table-card .dash-spreadsheet-inner tr td[class*="focused"] { background: rgba(59, 130, 246, 0.08) !important; box-shadow: none !important; outline: none !important; } .assets-u-table-card .dash-spreadsheet-inner tr td[class*="active"], .assets-u-table-card .dash-spreadsheet-inner tr td.cell--selected, .assets-u-table-card .dash-spreadsheet-inner tr td.cell-highlight { background: rgba(59, 130, 246, 0.08) !important; box-shadow: none !important; outline: none !important; } .assets-u-table-card .dash-spreadsheet-inner tr.dash-row:hover td { background: rgba(59, 130, 246, 0.06) !important; } .assets-u-table-card .dash-spreadsheet-inner .dash-cell-value { background: transparent !important; } /* De-emphasize sort arrows */ .assets-u-table-card .column-header--sort svg { opacity: 0.3 !important; width: 10px !important; } .assets-u-table-card .column-header--sort:hover svg { opacity: 0.6 !important; } /* Remove any lingering DataTable border artifacts */ .assets-u-table-card .dash-spreadsheet-inner td { border-top: none !important; } /* Hide filter row — filter_action=custom with hidden UI */ .assets-u-table-card .dash-filter { display: none !important; } .assets-u-table-card .column-header--filter { display: none !important; } .assets-u-table-card input.dash-filter { display: none !important; } .assets-u-table-card .dash-filter--case { display: none !important; } .assets-u-table-card tr[class*="filter"] { display: none !important; } /* Ensure consistent app font inside DataTable */ .assets-u-table-card .dash-spreadsheet td, .assets-u-table-card .dash-spreadsheet th { font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif !important; } /* Asset symbol + name rendered via markdown */ .assets-u-symbol { font-weight: 600; color: var(--primary); } .assets-u-name { font-size: 12px; color: var(--text-muted); display: block; } /* Score badge styles */ .assets-u-score { font-weight: 600; font-size: 13px; } .assets-u-score--high { color: var(--success); } .assets-u-score--mid { color: #D97706; } .assets-u-score--low { color: var(--risk); } .assets-u-score--na { color: var(--text-muted); font-weight: 400; } /* Trend placeholder */ .assets-u-trend { font-size: 14px; } .assets-u-trend--up { color: var(--success); } .assets-u-trend--down { color: var(--risk); } .assets-u-trend--flat { color: var(--text-muted); } /* Notes tags */ .assets-u-notes { display: flex; flex-wrap: wrap; gap: 3px; } .assets-u-note-tag { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); white-space: nowrap; } /* Chevron column */ .assets-u-chevron { color: var(--text-muted); font-size: 12px; } /* Type badge */ .assets-u-type { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; } .assets-u-type--stock { background: rgba(59, 130, 246, 0.1); color: var(--primary); } .assets-u-type--etf { background: rgba(34, 197, 94, 0.1); color: var(--success); } .assets-u-type--benchmark { background: rgba(245, 158, 11, 0.1); color: #D97706; } /* Existing asset search styles preserved */ .assets-search-input { background: var(--card-bg) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ── Asset detail page ────────────────────────────────────── */ .asset-detail-back { display: inline-flex; align-items: center; font-size: 13px; color: var(--text-secondary); margin-bottom: var(--sp2); gap: 4px; } .asset-detail-back:hover { color: var(--primary); text-decoration: none; } .asset-detail-header { margin-bottom: var(--sp3); } /* Avatar + title in a flex row */ .asset-detail-top-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .asset-detail-avatar { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .asset-detail-avatar-letter { font-size: 22px; font-weight: 700; color: #ffffff; line-height: 1; } .asset-detail-title-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .asset-detail-symbol { font-size: 36px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .asset-detail-name { font-size: 16px; color: var(--text-secondary); font-weight: 400; margin: 0; } .asset-detail-meta-row { display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap; margin-bottom: 4px; } .asset-detail-meta { font-size: 13px; color: var(--text-muted); } .asset-detail-badges { display: flex; gap: var(--sp1); } /* "At close" row */ .asset-detail-close-row { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .asset-detail-close-label { font-weight: 400; } .asset-detail-close-value { font-weight: 500; color: var(--text-secondary); } /* ── Investment Assessment Banner ─────────────────────────── */ .ad-assessment-banner { display: flex; justify-content: space-between; align-items: stretch; gap: var(--sp3); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp3); margin-bottom: var(--sp2); } .ad-assessment-left { display: flex; flex-direction: column; gap: 8px; flex: 1; } .ad-assessment-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .ad-assessment-grade-row { display: flex; align-items: center; gap: var(--sp2); } .ad-assessment-grade { font-size: 48px; font-weight: 800; color: var(--text-muted); letter-spacing: -0.03em; line-height: 1; flex-shrink: 0; } .ad-assessment-summary { display: flex; flex-direction: column; gap: 2px; } .ad-assessment-status { font-size: 16px; font-weight: 600; color: var(--text-secondary); } .ad-assessment-desc { font-size: 12px; color: var(--text-muted); } .ad-assessment-right { display: flex; gap: 0; flex-shrink: 0; align-items: stretch; border-left: 1px solid var(--border-light); padding-left: var(--sp3); } .ad-assessment-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 var(--sp2); min-width: 80px; } .ad-assessment-metric-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .ad-assessment-metric-value { font-size: 15px; font-weight: 700; color: var(--text-secondary); } .ad-action-pending { color: var(--text-muted); font-weight: 600; } /* Price change colors */ .ad-change-up { color: #22C55E; } .ad-change-down { color: #EF4444; } /* ── Pillar Cards Row ─────────────────────────────────────── */ .ad-pillar-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp2); margin-bottom: var(--sp2); } .ad-pillar-card { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); padding: 14px 14px; transition: border-color 0.15s ease; } .ad-pillar-icon { font-size: 24px; color: var(--text-muted); flex-shrink: 0; width: 28px; text-align: center; transition: color 0.15s ease; } .ad-pillar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ad-pillar-grade { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .ad-pillar-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .ad-pillar-score { font-size: 13px; color: var(--text-muted); font-weight: 400; } /* Grade color variants */ .ad-grade-a { color: #22C55E; } .ad-grade-b { color: #5A9FD4; } .ad-grade-c { color: #D97706; } .ad-grade-d { color: #EF4444; } .ad-grade-na { color: var(--text-muted); } /* Pillar accent identity — subtle left border + icon tint */ .ad-pillar--financials { border-left-color: #22C55E; } .ad-pillar--financials .ad-pillar-icon { color: #22C55E; } .ad-pillar--technicals { border-left-color: #5A9FD4; } .ad-pillar--technicals .ad-pillar-icon { color: #5A9FD4; } .ad-pillar--benchmarks { border-left-color: #A78BFA; } .ad-pillar--benchmarks .ad-pillar-icon { color: #A78BFA; } .ad-pillar--valuation { border-left-color: #F59E0B; } .ad-pillar--valuation .ad-pillar-icon { color: #F59E0B; } .ad-pillar--risk { border-left-color: #EF4444; } .ad-pillar--risk .ad-pillar-icon { color: #EF4444; } .ad-pillar--overall { border-left-color: #FBBF24; } .ad-pillar--overall .ad-pillar-icon { color: #FBBF24; } /* ── Three-Column Overview Layout ─────────────────────────── */ .ad-overview-container { display: flex; flex-direction: column; gap: var(--sp2); } .ad-overview-columns { display: grid; grid-template-columns: 34% 26% 40%; gap: var(--sp2); align-items: start; } .ad-col-left, .ad-col-center, .ad-col-right { display: flex; flex-direction: column; gap: var(--sp2); } /* Overview cards */ .ad-ocard { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .ad-ocard-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); } .ad-ocard-icon { font-size: 15px; color: var(--text-muted); flex-shrink: 0; } .ad-ocard-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } .ad-ocard-body { padding: 12px 16px; } .ad-ocard--wide { grid-column: 1 / -1; } /* ── Price Performance KPI row ────────────────────────────── */ .ad-pp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin-bottom: 8px; } .ad-pp-kpi { display: flex; flex-direction: column; gap: 1px; } .ad-pp-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .ad-pp-kpi-value { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .ad-pp-change { font-size: 15px; } /* ── Chart area placeholder ────────────────────────────────── */ .ad-chart-periods { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 6px; } .ad-chart-period { font-size: 10px; font-weight: 500; color: var(--text-muted); padding: 2px 6px; border-radius: 4px; cursor: default; transition: none; } .ad-chart-period--active { color: var(--primary); background: rgba(37, 99, 235, 0.1); font-weight: 600; } .ad-chart-area { position: relative; height: 100px; background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; } .ad-chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0; } .ad-chart-gridline { height: 1px; background: rgba(148, 163, 184, 0.08); width: 100%; } .ad-chart-line-sketch { position: absolute; inset: 12px 8px; overflow: hidden; } .ad-chart-line-path { height: 100%; width: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.15) 10%, rgba(37, 99, 235, 0.25) 30%, rgba(37, 99, 235, 0.3) 50%, rgba(37, 99, 235, 0.2) 70%, rgba(37, 99, 235, 0.05) 90%, transparent 100% ); clip-path: polygon( 0% 70%, 5% 60%, 15% 65%, 25% 45%, 35% 50%, 45% 35%, 55% 40%, 65% 30%, 75% 35%, 85% 20%, 92% 25%, 100% 15%, 100% 100%, 0% 100% ); } .ad-chart-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(37, 99, 235, 0.06), transparent); pointer-events: none; } /* ── Key Metrics grid ──────────────────────────────────────── */ .ad-km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .ad-km-item { display: flex; flex-direction: column; gap: 1px; } .ad-km-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .ad-km-value { font-size: 14px; font-weight: 600; color: var(--text-primary); } /* Placeholder rows inside cards */ .ad-placeholder-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-light); } .ad-placeholder-row:last-child { border-bottom: none; } .ad-placeholder-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; } .ad-placeholder-value { font-size: 13px; color: var(--text-muted); font-weight: 400; } /* Highlights list */ .ad-highlights-list { display: flex; flex-direction: column; gap: 10px; } .ad-highlight-item { display: flex; align-items: flex-start; gap: 8px; } .ad-highlight-icon { flex-shrink: 0; margin-top: 2px; } .ad-highlight-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; } /* Strengths / Risks — two-column sub-layout */ .ad-sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ad-sr-col { display: flex; flex-direction: column; } .ad-sr-col-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .ad-sr-col-label--pos { color: #22C55E; } .ad-sr-col-label--neg { color: #EF4444; } .ad-sr-list { display: flex; flex-direction: column; gap: 4px; } .ad-sr-item { display: flex; align-items: flex-start; gap: 5px; } .ad-sr-bullet { font-size: 14px; font-weight: 700; flex-shrink: 0; line-height: 1.4; } .ad-sr-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } /* Suggested Action */ .ad-action-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp2) 0; text-align: center; } .ad-action-badge { display: inline-flex; align-items: center; justify-content: center; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; padding: 10px 24px; } .ad-action-main { font-size: 16px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; } .ad-action-note { font-size: 11px; color: var(--text-muted); font-weight: 400; line-height: 1.4; max-width: 220px; } /* ── Fundamentals top row (Business Verdict + Quality Summary) ── */ /* ── Top fundamentals 5-column grid (aligns with KPI row below) ── */ .top-fundamentals-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: 100%; margin-bottom: 0; align-items: stretch; } .tg-span-2 { grid-column: span 2; } .tg-span-1 { grid-column: span 1; } .tg-span-3 { grid-column: span 3; } /* Shared card shell for top cards */ .tg-card, .qs-card { background: var(--card-bg); border: 1px solid #1e3a5f; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); padding: 20px 20px 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; min-height: 230px; height: 100%; } .tg-card:hover, .qs-card:hover { border-color: #3B82F6 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } /* Top accent bar */ .tg-card-accent, .qs-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; } /* Header row (icon + label) */ .tg-card-header, .qs-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } /* ── Top card shared components ── */ .tg-card-header-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .tg-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .tg-card-body--gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; } .iv-gauge-img { max-width: 260px; width: 100%; height: auto; display: block; } .iv-verdict-title { font-size: 15px; font-weight: 700; text-align: center; margin-top: 2px; margin-bottom: 4px; } .iv-verdict-summary { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; margin: 0 0 4px 0; text-align: center; } .iv-gauge-img--small { max-width: 180px; width: 100%; height: auto; display: block; } /* ── Combined IV card (gauge left + thesis right) ─────────── */ .iv-combined-body { display: flex; flex: 1 1 auto; min-height: 0; gap: 0; } .iv-left { width: 48%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-right: 14px; } .iv-divider { width: 1px; flex-shrink: 0; background: #1a2a3d; } .iv-right { width: 52%; display: flex; flex-direction: column; padding-left: 14px; overflow: hidden; } .iv-right-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .iv-thesis-text { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .iv-rl-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; display: block; } .iv-rl-list { margin: 0 0 5px 0; padding-left: 12px; list-style: none; } .iv-rl-item { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 2px; position: relative; padding-left: 8px; } .iv-rl-item::before { content: "▸"; position: absolute; left: -5px; font-size: 9px; } .iv-rl-list:has(.iv-rl-item) .iv-rl-item::before { color: inherit; } .tg-card-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid #1a2a3d; } /* ── Strengths & Risks list styling ── */ .sr-list { margin: 0 0 10px 0; padding-left: 14px; list-style: none; } .sr-list li { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 3px; position: relative; padding-left: 10px; } .sr-list li::before { content: "▸"; position: absolute; left: -6px; font-size: 10px; } .sr-list--strengths li::before { color: #22C55E; } .sr-list--risks li::before { color: #EF4444; } .sr-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; display: block; } /* ── Investment Thesis card styling ── */ .thesis-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .thesis-spinner { width: 24px; height: 24px; border: 2.5px solid #1e3a5f; border-top-color: #3B82F6; border-radius: 50%; animation: thesis-spin 0.8s linear infinite; } @keyframes thesis-spin { to { transform: rotate(360deg); } } .tl-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; display: block; } .tl-list { margin: 0 0 7px 0; padding-left: 14px; list-style: none; } .tl-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 3px; position: relative; padding-left: 10px; } .tl-list li::before { content: "▸"; position: absolute; left: -5px; font-size: 10px; } .tl-list--strengths li::before { color: #22C55E; } .tl-list--risks li::before { color: #EF4444; } /* ── Quality Summary card ── */ .qs-header-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .qs-radar-container { position: relative; width: 240px; height: 240px; flex-shrink: 0; } .qs-radar-base, .qs-radar-hl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .qs-radar-base { opacity: 1; transition: opacity 0.15s ease; } .qs-radar-hl { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } /* ── Hover-linked row ↔ radar dot highlight using :has() ───── Only enlarges the matching dot — axis lines stay neutral. */ .qs-body:has(.qs-row-bq:hover) .qs-radar-hl-bq { opacity: 1; } .qs-body:has(.qs-row-mq:hover) .qs-radar-hl-mq { opacity: 1; } .qs-body:has(.qs-row-fs:hover) .qs-radar-hl-fs { opacity: 1; } .qs-body:has(.qs-row-cg:hover) .qs-radar-hl-cg { opacity: 1; } .qs-body:has(.qs-row-bt:hover) .qs-radar-hl-bt { opacity: 1; } /* ── Row hover highlighting ── */ .qs-metric-row { display: grid; grid-template-columns: 1fr 36px 78px; gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid rgba(26, 42, 61, 0.5); border-radius: 4px; transition: background 0.15s ease; cursor: default; } .qs-metric-row:hover { background: rgba(59, 130, 246, 0.06); } .qs-metric-row:last-child { border-bottom: none; } .qs-body { display: flex; gap: 16px; flex: 1 1 auto; align-items: stretch; } .qs-metrics { flex: 1 1 auto; min-width: 0; } /* ── Responsive: Fundamentals top row ── */ @media (max-width: 1200px) { .top-fundamentals-grid { grid-template-columns: 1fr 1fr; } .tg-span-1 { grid-column: span 2; } .tg-span-2 { grid-column: span 2; } } @media (max-width: 700px) { .top-fundamentals-grid { grid-template-columns: 1fr; } .tg-span-2 { grid-column: 1; } .tg-span-1 { grid-column: 1; } } /* ── Business Quality live badge (reused in compact card) ─── */ .bq-live-badge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #22C55E; padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(34, 197, 94, 0.3); background: none; margin-left: auto; } /* ── Fundamentals KPI cards (5-pillar row) ────────────────── */ /* LOCKED: Shared equal-height card layout for ALL KPI cards. Every card uses the exact same six-section vertical stack: fkpi-header → fkpi-hero → fkpi-verdict → fkpi-drivers → fkpi-trend → fkpi-footer Do NOT add per-card overrides for heights, padding, or section order. Do NOT change min-heights on individual section classes below. Chart SVGs must NOT use preserveAspectRatio="none" — use "xMinYMid meet". */ .fkpi-row { display: grid; gap: 16px; width: 100%; align-items: stretch; } .fkpi-row-5col { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fkpi-card { background: var(--card-bg); border: 1px solid #1e3a5f; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); padding: 24px 24px 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; min-height: 440px; height: 100%; } .fkpi-card:hover { border-color: #3B82F6 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } /* ── KPI card section classes (equal-height alignment) ─────── */ .fkpi-header { min-height: 40px; margin-bottom: 10px; flex-shrink: 0; } .fkpi-hero { min-height: 66px; margin-bottom: 6px; flex-shrink: 0; } .fkpi-verdict { min-height: 44px; flex-shrink: 0; } .fkpi-drivers { min-height: 112px; flex-shrink: 0; } /* LOCKED: trend section must NOT be resized per card. - min-height: 120px = ~14px title + 80px chart + 26px padding/margins - Chart SVG always uses preserveAspectRatio="xMinYMid meet" (no stretch) - "5-Year Score History" heading appears exactly once, here as the section label - Do NOT add a second heading or change the heading text per card. */ .fkpi-trend { min-height: 120px; flex-shrink: 0; } .fkpi-footer { margin-top: auto; min-height: 24px; padding-top: 12px; flex-shrink: 0; } /* ── Fundamentals KPI popover (hover overlay) ─────────────── */ .fkpi-popover { position: absolute; inset: 0; z-index: 10; background: #0d1b2a; border: 1px solid #253247; border-radius: var(--radius); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity 0.2s ease, transform 0.2s ease; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } .fkpi-card:hover .fkpi-popover, .tg-card:hover .fkpi-popover { opacity: 1; transform: translateY(0); } /* ── Tech risk popover tweaks ──────────────────────────────── */ .fkpi-popover--loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 140px; } .fkpi-popover--spinner { width: 28px; height: 28px; border: 3px solid #253247; border-top-color: #3B82F6; border-radius: 50%; animation: fkpi-spin 0.8s linear infinite; } @keyframes fkpi-spin { to { transform: rotate(360deg); } } .fkpi-popover--loading-text { font-size: 13px; color: #9CA3AF; font-weight: 500; } .fkpi-popover--explanation { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; margin: 0; } .fkpi-popover--label-red { display: inline-block; width: 12px; height: 3px; background: #EF4444; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .fkpi-popover--label-yellow { display: inline-block; width: 12px; height: 3px; background: #F59E0B; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .fkpi-popover--label-blue { display: inline-block; width: 12px; height: 3px; background: #3B82F6; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .fkpi-popover--label-green { display: inline-block; width: 12px; height: 3px; background: #22C55E; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .fkpi-popover--label-purple { display: inline-block; width: 12px; height: 3px; background: #8B5CF6; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .fkpi-popover-title { font-size: 15px; font-weight: 700; color: #E5E7EB; letter-spacing: -0.01em; } .fkpi-popover-question { font-size: 13px; font-weight: 400; color: #9CA3AF; font-style: italic; } .fkpi-popover-section { display: flex; flex-direction: column; gap: 3px; } .fkpi-popover-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; } .fkpi-popover-list { margin: 0; padding: 0 0 0 16px; list-style: none; } .fkpi-popover-item { font-size: 12.5px; font-weight: 400; color: var(--text-secondary); line-height: 1.55; padding: 1px 0; position: relative; } .fkpi-popover-item::before { content: "▸"; position: absolute; left: -15px; color: #3B82F6; font-size: 11px; line-height: 1.6; } .fkpi-popover-text { font-size: 12.5px; font-weight: 400; color: var(--text-secondary); line-height: 1.5; margin: 0; } /* ── Responsive: Fundamentals KPI row ─────────────────────── */ @media (max-width: 1400px) { .fkpi-row-5col { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .fkpi-row-5col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .fkpi-row-5col { grid-template-columns: 1fr; } } /* ── Asset detail subnavbar tabs ──────────────────────────── */ /* Make the tab-container (the bar) content-width, not full-width */ .asset-detail-tabs .tab-container { display: inline-flex !important; gap: 4px; border-bottom: 1px solid var(--border) !important; width: 100%; /* border spans full width */ box-sizing: border-box; } /* Each individual tab: auto-width, no stretching */ .asset-detail-tabs .tab-container .tab { flex: 0 0 auto !important; width: auto !important; min-width: unset !important; font-family: "Inter", system-ui, sans-serif !important; font-size: 14px !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; background: transparent !important; } /* Tab content area — match dark surface */ .asset-detail-tabs .tab-content { background: transparent !important; } /* ── Responsive: Asset Detail Overview ────────────────────── */ @media (max-width: 1200px) { .ad-pillar-row { grid-template-columns: repeat(3, 1fr); } .ad-overview-columns { grid-template-columns: 1fr 1fr; } .ad-ocard--wide { grid-column: auto; } .ad-sr-grid { grid-template-columns: 1fr; } } @media (max-width: 800px) { .ad-assessment-banner { flex-direction: column; gap: var(--sp2); } .ad-assessment-right { border-left: none; border-top: 1px solid var(--border-light); padding-left: 0; padding-top: var(--sp2); } .ad-pillar-row { grid-template-columns: repeat(2, 1fr); } .ad-overview-columns { grid-template-columns: 1fr; } .ad-km-grid { grid-template-columns: 1fr; } .ad-pp-kpis { grid-template-columns: 1fr; } } /* ── Valuation tab top row (Valuation Verdict + Valuation Summary) ── */ .top-valuation-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: 100%; margin-bottom: 0; align-items: stretch; } /* ── Valuation Verdict card (reuses tg-card patterns from Fundamentals) ── */ .tg-card-vv .vv-combined-body { display: flex; flex: 1 1 auto; min-height: 0; gap: 0; } .tg-card-vv .vv-left { width: 48%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-right: 14px; } .tg-card-vv .vv-divider { width: 1px; flex-shrink: 0; background: #1a2a3d; } .tg-card-vv .vv-right { width: 52%; display: flex; flex-direction: column; padding-left: 14px; overflow: hidden; } /* ── Valuation Summary card (reuses tg-card patterns) ── */ .tg-card-vs .tg-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ── Valuation KPI row (4-column) ── */ .fkpi-row-4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; align-items: stretch; } /* ── Responsive: Valuation KPI row ── */ @media (max-width: 1400px) { .fkpi-row-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .fkpi-row-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .fkpi-row-4col { grid-template-columns: 1fr; } .top-valuation-grid { grid-template-columns: 1fr; } } /* ── Technicals: 5-unit grid (1 unit = 1 KPI card width) ── */ .tech-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: 100%; align-items: stretch; } /* ── Technicals: main middle-section grid (2×2) ── */ .tech-main-grid { display: grid; grid-template-columns: 2fr 3fr; /* matches the 2:3 ratio of tech-grid-5 */ gap: 16px; width: 100%; align-items: stretch; } /* Make all direct children of the main grid fill their cell height */ .tech-chart-top, .tech-chart-bottom, .tech-insight-bottom, .tech-main-grid > .tech-kpi-grid { height: 100%; min-height: 0; } /* ── Technicals: 3-column KPI card grid ── */ .tech-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; align-items: stretch; } /* ── Technicals: 3-column insight card ── */ .tech-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; } /* ── Trend Pillar mini chart ── */ .tech-trend-chart { height: 90px; overflow: hidden; border-radius: 4px; } .tech-trend-chart .dash-graph { width: 100%; height: 100%; } /* ── Trend Strength bar ── */ .tech-strength-track { width: 100%; height: 5px; background: #1e293b; border-radius: 3px; overflow: hidden; } .tech-strength-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #22c55e); border-radius: 3px; transition: width 0.4s ease; } /* ── Technicals: responsive ── */ @media (max-width: 1400px) { .tech-grid-5 { grid-template-columns: 1fr; } .tech-main-grid { grid-template-columns: 1fr; } .tech-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .tech-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tech-kpi-grid, .tech-insight-grid { grid-template-columns: 1fr; } } /* ── Global search dropdown ───────────────────────────────── */ .global-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #0f1f33; border: 1px solid #253247; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 200; max-height: 380px; overflow-y: auto; } .gs-suggestion-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #1a2a3d; transition: background 0.1s; } .gs-suggestion-item:last-child { border-bottom: none; } .gs-suggestion-item:hover { background: rgba(59, 130, 246, 0.06); } .gs-suggestion-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .gs-suggestion-symbol { font-weight: 700; font-size: 13px; color: var(--text-primary); flex-shrink: 0; } .gs-suggestion-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .gs-type-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; text-transform: lowercase; white-space: nowrap; background: rgba(107, 114, 128, 0.12); color: #9CA3AF; flex-shrink: 0; } .gs-type-pill--stock { background: rgba(34, 197, 94, 0.12); color: #22C55E; } .gs-type-pill--etf { background: rgba(59, 130, 246, 0.12); color: #3B82F6; } .gs-type-pill--index { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; } .gs-type-pill--crypto{ background: rgba(234, 179, 8, 0.12); color: #EAB308; } .gs-type-pill--other { background: rgba(107, 114, 128, 0.12); color: #9CA3AF; } .gs-suggestion-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 1px; } .gs-suggestion-detail { font-size: 11px; color: var(--text-muted); opacity: 0.7; } .gs-suggestion-empty { padding: 12px 14px; font-size: 13px; color: var(--text-secondary); } /* ── Technicals overlay pills ──────────────────────────────── */ .tech-pill { font-size: 10px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 2px 8px; border: 1px solid #1e3a5f; border-radius: 4px; transition: color 0.1s, border-color 0.1s, background 0.1s; } .tech-pill:hover { border-color: #9CA3AF; color: #E5E7EB; } /* Default active — blue (price line) */ .tech-pill--active { background: rgba(59, 130, 246, 0.1); border-color: #3B82F6; color: #3B82F6; } /* Per-pill active colours */ .tech-pill--price.tech-pill--active { border-color: #3B82F6; color: #3B82F6; background: rgba(59,130,246,0.1); } .tech-pill--candles.tech-pill--active { border-color: #22C55E; color: #22C55E; background: rgba(34,197,94,0.1); } .tech-pill--ema20.tech-pill--active { border-color: #EC4899; color: #EC4899; background: rgba(236,72,153,0.1); } .tech-pill--ema50.tech-pill--active { border-color: #F59E0B; color: #F59E0B; background: rgba(245,158,11,0.1); } .tech-pill--ema200.tech-pill--active { border-color: #22C55E; color: #22C55E; background: rgba(34,197,94,0.1); } .tech-pill--bollinger.tech-pill--active { border-color: #94A3B8; color: #94A3B8; background: rgba(148,163,184,0.1); } /* ── Technicals chart range buttons ────────────────────────── */ .tech-range-btn { font-size: 10px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: color 0.1s, background 0.1s; } .tech-range-btn:hover { color: var(--text-primary); } .tech-range-btn--active { color: #3B82F6; } /* ── Technicals indicator tabs ─────────────────────────────── */ .tech-ind-tab { font-size: 10px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 3px 10px; border: 1px solid #1e3a5f; border-radius: 4px; transition: color 0.1s, border-color 0.1s, background 0.1s; } .tech-ind-tab:hover { border-color: #3B82F6; color: #3B82F6; } .tech-ind-tab--active { background: rgba(59, 130, 246, 0.1); border-color: #3B82F6; color: #3B82F6; } /* ── Initial Dash loading screen ────────────────────────────── */ ._dash-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0B1121; color: #6b7280; font-size: 14px; font-family: Inter, system-ui, sans-serif; } /* ════════════════════════════════════════════════════════════════ Portfolio Dashboard (Phase G.4) ════════════════════════════════════════════════════════════════ */ .portfolio-page { padding: var(--sp3); max-width: 1400px; } /* ── Top row ──────────────────────────────── */ .pf-top-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp3); gap: var(--sp3); flex-wrap: wrap; } .pf-page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .pf-top-right { display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap; } .pf-top-actions { display: flex; gap: 8px; } /* ── Buttons ──────────────────────────────── */ .pf-btn { padding: 6px 16px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; line-height: 1.4; } .pf-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .pf-btn-primary:hover { background: var(--primary-hover); } .pf-btn-secondary { background: transparent; color: var(--text-secondary); border-color: #334155; } .pf-btn-secondary:hover { background: #1E293B; color: var(--text-primary); } .pf-btn--disabled { opacity: 0.5; cursor: not-allowed; } /* ── Summary ──────────────────────────────── */ .pf-summary { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pf-last-eval { display: flex; align-items: center; gap: 4px; } /* ── Evaluation progress ──────────────────── */ .pf-eval-progress { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; } /* ── Main content area (table + drawer) ───── */ .pf-main { display: flex; gap: var(--sp3); align-items: flex-start; } .pf-table-area { flex: 1; min-width: 0; } .pf-table { border: 1px solid #1E293B; border-radius: 8px; overflow: hidden; } .pf-table-header { background: #0F172A; border-bottom: 1px solid #1E293B; } .pf-table-row { display: grid; gap: 4px; padding: 8px 12px; align-items: center; border-bottom: 1px solid #1a2332; transition: background 0.1s; } .pf-table-row:last-child { border-bottom: none; } .pf-table-row:hover { background: rgba(59, 130, 246, 0.04); } .pf-th { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .pf-td { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Empty state ──────────────────────────── */ .pf-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; border: 1px dashed #334155; border-radius: 12px; background: transparent; } /* ── Detail drawer (right side) ───────────── */ .pf-drawer { width: 360px; flex-shrink: 0; border: 1px solid #1E293B; border-radius: 8px; background: #0F172A; overflow-y: auto; max-height: calc(100vh - 200px); transition: all 0.2s; } .pf-drawer--hidden { display: none; } .pf-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #1E293B; } .pf-drawer-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; } .pf-drawer-close:hover { background: #1E293B; color: var(--text-primary); } .pf-drawer-body { padding: 12px 16px; } .pf-drawer-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #1E293B; } .pf-drawer-section:last-child { border-bottom: none; margin-bottom: 0; } .pf-drawer-section-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .pf-drawer-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .pf-drawer-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; } .pf-drawer-value { font-size: 12px; color: var(--text-secondary); } /* ── Responsive: drawer stacks below on narrow screens ── */ @media (max-width: 1100px) { .pf-main { flex-direction: column; } .pf-drawer { width: 100%; max-height: none; } } /* ── Portfolio Workspace (P190.2) ──────────────────────────────────── */ .portfolio-workspace { padding: 32px; width: 100%; } /* ── Header ────────────────────────────────────────────── */ .portfolio-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } .portfolio-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; } .portfolio-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; } .portfolio-header-actions { display: flex; gap: 12px; flex-shrink: 0; padding-top: 2px; } /* ── KPI Row ───────────────────────────────────────────── */ .portfolio-kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; } .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; } .kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .kpi-footer { font-size: 11px; color: var(--text-muted); text-align: right; } /* ── Insight Row ───────────────────────────────────────── */ .portfolio-insight-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .portfolio-insight-row .mcl-card { min-height: 220px; } .portfolio-insight-row .mcl-card-header { height: 56px; } /* ── Empty state inside insight cards ──────────────────── */ .pw-empty-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; text-align: center; padding: 24px; } .pw-empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } .pw-empty-desc { font-size: 12px; color: var(--text-muted); max-width: 260px; } /* ── Mini table inside insight card ────────────────────── */ .pw-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; } .pw-mini-table th { text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); } .pw-mini-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; } /* ── Portfolio Table Card ──────────────────────────────── */ .portfolio-table-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; } .portfolio-table-header { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--border); } .portfolio-table-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; white-space: nowrap; } .portfolio-table-controls { display: flex; align-items: center; gap: 8px; } .portfolio-table-body { padding: 0; } /* ── Dark input styling ────────────────────────────────── */ .pw-input { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; padding: 7px 12px; outline: none; transition: border-color 0.15s; } .pw-input:focus { border-color: var(--primary); } .pw-select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } /* ── Table empty state ─────────────────────────────────── */ .pw-table-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; } /* ── Portfolio Table ───────────────────────────────────── */ .pf-table-scroll { overflow-x: auto; } .pf-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pf-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); white-space: nowrap; } .pf-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } .pf-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } .pf-row td:first-child { font-weight: 500; color: var(--text-primary); } /* ── Status pill ───────────────────────────────────────── */ .pw-pill { display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: 11px; font-weight: 500; } /* ── Health badge ──────────────────────────────────────── */ .pf-health-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid; font-size: 12px; font-weight: 700; line-height: 1; } /* ── Actions ───────────────────────────────────────────── */ .pf-actions { white-space: nowrap; } .pf-action-icon { cursor: pointer; margin-right: 6px; font-size: 14px; opacity: 0.7; transition: opacity 0.1s; } .pf-action-icon:hover { opacity: 1; } /* ── Responsive KPI ────────────────────────────────────── */ /* ── Create Portfolio Modal ──────────────────────────── */ .pw-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; } .pw-modal-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } .pw-modal-visible { display: flex !important; visibility: visible !important; pointer-events: auto !important; } .pw-modal { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0; width: 480px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .pw-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; } .pw-modal-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; } .pw-modal-body { padding: 20px 24px; } .pw-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 20px; } .pw-field { margin-bottom: 16px; } .pw-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .pw-field .pw-input { width: 100%; } .pw-submit-error { color: var(--grade-d); font-size: 12px; padding: 8px 12px; background: rgba(239,68,68,0.1); border-radius: 6px; margin-top: 8px; } /* ── Responsive ─────────────────────────────────────── */ @media (max-width: 1399px) { .portfolio-kpi-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .portfolio-kpi-row { grid-template-columns: 1fr; } .portfolio-insight-row { grid-template-columns: 1fr; } .portfolio-table-header { flex-direction: column; height: auto; padding: 12px 20px; gap: 10px; } .portfolio-table-controls { width: 100%; flex-wrap: wrap; } .portfolio-table-controls .pw-input { flex: 1; min-width: 140px; } } /* ═════════════════════════════════════════════════════════════ Benchmarks Page — Benchmark Control Center Dark fintech dashboard, card-based, two-column workspace. ═════════════════════════════════════════════════════════════ */ /* ── Page container ──────────────────────────────────────── */ .benchmarks-page { padding: 24px; display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; } /* ── Header row ──────────────────────────────────────────── */ .benchmarks-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .benchmarks-title-block { display: flex; flex-direction: column; gap: 4px; } .benchmarks-title { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin: 0; line-height: 1.2; } .benchmarks-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; } .benchmarks-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; } /* ── KPI grid ────────────────────────────────────────────── */ .benchmarks-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .benchmark-kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 96px; } .benchmark-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .benchmark-kpi-value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; } .benchmark-kpi-subtext { font-size: 12px; color: var(--text-secondary); } .benchmark-kpi-healthy { border-left: 3px solid var(--success); } .benchmark-kpi-healthy .benchmark-kpi-value { color: var(--success); } .benchmark-kpi-warning { border-left: 3px solid var(--warning); } .benchmark-kpi-warning .benchmark-kpi-value { color: var(--warning); } .benchmark-kpi-info { border-left: 3px solid var(--primary); } .benchmark-kpi-info .benchmark-kpi-value { color: var(--primary); } /* ── Filter toolbar ──────────────────────────────────────── */ .benchmark-filter-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; } .benchmark-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 360px; } .bm-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; z-index: 1; } .benchmark-search-input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.15s; } .benchmark-search-input::placeholder { color: var(--text-muted); } .benchmark-search-input:focus { border-color: var(--primary); } .benchmark-filter-select { height: 36px; padding: 0 10px; border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 12px; font-family: inherit; cursor: pointer; outline: none; min-width: 120px; transition: border-color 0.15s; } .benchmark-filter-select:hover { border-color: var(--border); } .benchmark-filter-select:focus { border-color: var(--primary); } .benchmark-filter-clear-btn { height: 36px; padding: 0 14px; border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 12px; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .benchmark-filter-clear-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); } /* ── Main workspace (two-column grid) ────────────────────── */ .benchmark-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(420px, 1fr) minmax(500px, 0.9fr); gap: 20px; align-items: stretch; } /* ── Benchmark list panel ────────────────────────────────── */ .benchmark-list-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .benchmark-list-header { padding: 14px 18px; border-bottom: 1px solid var(--border-light); } .benchmark-list-count { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .benchmark-list-body { flex: 1; overflow-y: auto; min-height: 0; } /* ── Benchmark row (clickable) ───────────────────────────── */ .benchmark-row { display: block; width: 100%; padding: 0; border: none; border-bottom: 1px solid var(--border-light); background: transparent; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.12s; outline: none; } .benchmark-row:hover { background: rgba(59, 130, 246, 0.04); } .benchmark-row:last-child { border-bottom: none; } .benchmark-row-selected { background: rgba(59, 130, 246, 0.08); box-shadow: inset 3px 0 0 var(--primary); } .benchmark-row-selected:hover { background: rgba(59, 130, 246, 0.10); } .benchmark-row-main { display: flex; align-items: center; gap: 12px; padding: 14px 18px; } .benchmark-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .benchmark-row-title { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .benchmark-row-subtitle { font-size: 12px; color: var(--text-muted); } .benchmark-row-badges { display: flex; gap: 4px; flex-shrink: 0; } .benchmark-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.4; } .benchmark-badge-generated { background: rgba(139, 92, 246, 0.15); color: #A78BFA; } .benchmark-badge-manual { background: rgba(59, 130, 246, 0.15); color: var(--primary); } .benchmark-badge-index { background: rgba(34, 197, 94, 0.15); color: var(--success); } .benchmark-badge-industry { background: rgba(245, 158, 11, 0.15); color: var(--warning); } .benchmark-badge-theme { background: rgba(236, 72, 153, 0.15); color: #EC4899; } .benchmark-row-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .benchmark-row-holdings { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .benchmark-health-score { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; min-width: 40px; justify-content: center; } .benchmark-health-healthy { background: rgba(34, 197, 94, 0.15); color: var(--success); } .benchmark-health-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); } .benchmark-health-critical { background: rgba(239, 68, 68, 0.15); color: var(--risk); } .benchmark-row-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .benchmark-row-chevron { font-size: 12px; color: var(--text-muted); flex-shrink: 0; } /* ── List footer + pagination ────────────────────────────── */ .benchmark-list-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-muted); } .benchmark-pagination { display: flex; align-items: center; gap: 2px; } .bm-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-light); border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 12px; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .bm-page-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); } .bm-page-btn:disabled { opacity: 0.4; cursor: default; } .bm-page-btn--active { background: var(--primary); color: #fff; border-color: var(--primary); } .bm-page-btn--active:hover { background: var(--primary-hover); color: #fff; } /* ── Detail panel ──────────────────────────────────────────── */ .benchmark-detail-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .benchmark-detail-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-light); } .benchmark-detail-header-left { display: flex; flex-direction: column; gap: 6px; } .benchmark-detail-title { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .benchmark-detail-header-badges { display: flex; gap: 6px; flex-wrap: wrap; } .benchmark-detail-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .bm-header-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit; font-size: 14px; } .bm-header-icon-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); } /* ── Detail tabs ───────────────────────────────────────────── */ .benchmark-detail-tabs { display: flex; align-items: center; gap: 0; padding: 0 20px; border-bottom: 1px solid var(--border-light); overflow-x: auto; } .benchmark-detail-tab { padding: 10px 14px; border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; } .benchmark-detail-tab:hover { color: var(--text-secondary); } .benchmark-detail-tab-active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); } /* ── Detail content area ───────────────────────────────────── */ .benchmark-detail-content { flex: 1; overflow-y: auto; min-height: 0; } .benchmark-detail-empty, .benchmark-detail-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; } /* ── Overview tab — status cards grid ─────────────────────── */ .benchmark-overview-content { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 20px; } .benchmark-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .benchmark-stat-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .benchmark-stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .benchmark-stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.1; } .benchmark-stat-subnote { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ── Progress bar ─────────────────────────────────────────── */ .benchmark-progress-bar { width: 100%; height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; margin-top: 2px; } .benchmark-progress-fill { height: 100%; border-radius: 3px; background: var(--success); transition: width 0.3s ease; } .benchmark-progress-fill--blue { background: var(--primary); } .benchmark-health-healthy .benchmark-progress-fill { background: var(--success); } .benchmark-health-warning .benchmark-progress-fill { background: var(--warning); } .benchmark-health-critical .benchmark-progress-fill { background: var(--risk); } /* ── Metadata grid ──────────────────────────────────────────── */ .benchmark-metadata-section { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px 16px; } .benchmark-metadata-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; align-items: baseline; } .bm-meta-key { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .bm-meta-val { font-size: 13px; font-weight: 500; color: var(--text-secondary); } /* ── Holdings preview ──────────────────────────────────────── */ .benchmark-holdings-preview { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; } .benchmark-holdings-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-light); } .benchmark-holdings-title { font-size: 13px; font-weight: 600; color: var(--text-primary); } .benchmark-holdings-view-all { font-size: 12px; color: var(--primary); cursor: pointer; text-decoration: none; } .benchmark-holdings-view-all:hover { text-decoration: underline; } .benchmark-holdings-preview-body { padding: 4px 0; } .benchmark-holding-row { display: grid; grid-template-columns: 60px 1fr 70px; gap: 10px; align-items: center; padding: 7px 16px; transition: background 0.1s; } .benchmark-holding-row:hover { background: rgba(255, 255, 255, 0.02); } .benchmark-holding-symbol { font-size: 13px; font-weight: 600; color: var(--primary); } .benchmark-holding-name { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .benchmark-holding-weight { font-size: 12px; font-weight: 600; color: var(--text-primary); text-align: right; } /* ── Detail action buttons ────────────────────────────────── */ .benchmark-detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1400px) { .benchmarks-kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .benchmark-workspace { grid-template-columns: 1fr; } .benchmarks-kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .benchmarks-header { flex-direction: column; } .benchmarks-kpi-grid { grid-template-columns: repeat(2, 1fr); } .benchmark-filter-bar { flex-direction: column; align-items: stretch; } .benchmark-search-wrap { max-width: none; } .benchmark-overview-grid { grid-template-columns: 1fr; } } /* ── Holdings tab ──────────────────────────────────────────── */ .benchmark-holdings-tab { padding: 18px 20px; } .benchmark-holdings-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .benchmark-holdings-header-left { display: flex; align-items: baseline; gap: 10px; } .benchmark-holdings-title { font-size: 16px; font-weight: 700; color: var(--text-primary); } .benchmark-holdings-subtitle { font-size: 12px; color: var(--text-muted); } .benchmark-holdings-count-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(59, 130, 246, 0.15); color: var(--primary); } /* ── Holdings table (full tab version) ──────────────────────── */ .benchmark-holdings-table { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; } .benchmark-holdings-table-header { display: grid; grid-template-columns: 60px 1fr 70px; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.02); } .benchmark-holdings-table-header-cell { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .benchmark-holdings-table-header-cell--right { text-align: right; } .benchmark-holdings-table-body { padding: 2px 0; } .benchmark-holdings-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; } .benchmark-holdings-footer-text { font-size: 12px; color: var(--text-muted); } .benchmark-holdings-footer-actions { display: flex; align-items: center; gap: 8px; } /* ── Empty state ────────────────────────────────────────────── */ .benchmark-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; } .benchmark-empty-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-top: 12px; } .benchmark-empty-text { font-size: 13px; color: var(--text-muted); margin-top: 4px; max-width: 340px; line-height: 1.45; } /* ═════════════════════════════════════════════════════════════ Benchmark Health Tab ═════════════════════════════════════════════════════════════ */ .benchmark-health-tab { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; } .benchmark-health-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; } .benchmark-health-header-title { font-size: 16px; font-weight: 700; color: var(--text-primary); } .benchmark-health-header-subtitle { font-size: 12px; color: var(--text-muted); } /* ── Section cards ──────────────────────────────────────── */ .benchmark-health-section-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px 16px; } .benchmark-health-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; } .benchmark-health-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .benchmark-health-count-label { font-size: 12px; font-weight: 500; color: var(--text-muted); } /* ── Coverage section ───────────────────────────────────── */ .benchmark-health-coverage-row { display: flex; align-items: center; gap: 12px; } .benchmark-health-coverage-bar-wrap { flex: 1; } .benchmark-health-coverage-bar { height: 8px !important; } .benchmark-health-coverage-pct { font-size: 20px; font-weight: 700; color: var(--text-primary); flex-shrink: 0; } /* ── Warnings section ───────────────────────────────────── */ .benchmark-health-warnings-body { display: flex; flex-direction: column; gap: 6px; } .benchmark-health-no-warnings { display: flex; align-items: center; gap: 8px; } .benchmark-health-warning-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(255, 255, 255, 0.02); border-radius: 6px; } .benchmark-health-warning-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; flex-shrink: 0; } .benchmark-health-warning-text { font-size: 13px; color: var(--text-secondary); } /* ── Metric coverage table ──────────────────────────────── */ .benchmark-health-metric-table { display: flex; flex-direction: column; } .benchmark-health-metric-header { display: grid; grid-template-columns: 80px 1fr 70px 70px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border-light); } .benchmark-health-metric-cell { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .benchmark-health-metric-cell--right { text-align: right; } .benchmark-health-metric-row { display: grid; grid-template-columns: 80px 1fr 70px 70px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border-light); transition: background 0.1s; } .benchmark-health-metric-row:last-child { border-bottom: none; } .benchmark-health-metric-row:hover { background: rgba(255, 255, 255, 0.02); } .benchmark-health-metric-name { font-size: 13px; font-weight: 600; color: var(--primary); } .benchmark-health-metric-coverage { display: flex; align-items: center; gap: 8px; } .benchmark-health-metric-bar { flex: 1; max-width: 100px; } .benchmark-health-metric-pct { font-size: 12px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; min-width: 36px; text-align: right; } .benchmark-health-metric-num { font-size: 13px; font-weight: 500; color: var(--text-secondary); text-align: right; } /* ── Health summary card ────────────────────────────────── */ .benchmark-health-summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 10px; border: 1px solid; } .benchmark-health-summary.benchmark-health-healthy { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.2); color: var(--success); } .benchmark-health-summary.benchmark-health-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); color: var(--warning); } .benchmark-health-summary.benchmark-health-critical { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); color: var(--risk); } .benchmark-health-summary i { font-size: 20px; flex-shrink: 0; } .benchmark-health-summary-text { font-size: 13px; font-weight: 500; color: var(--text-secondary); } /* ── Health spinner ─────────────────────────────────────── */ .benchmark-health-spinner { display: flex; align-items: center; justify-content: center; } .benchmark-health-spinner i { animation: bm-spin 1s linear infinite; } @keyframes bm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ════════════════════════════════════════════════════════════════ Benchmark Editor Drawer — slide-over panel ════════════════════════════════════════════════════════════════ */ /* Container wraps overlay + drawer; always fixed full-screen. Closed: pointer-events disabled so clicks pass through. Open: pointer-events re-enabled, overlay+c Drawer animate in. */ .bm-editor-container { position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .bm-editor-container--open { pointer-events: auto; } /* ── Overlay backdrop ─────────────────────────────────────── */ .bm-editor-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.25s ease; } .bm-editor-container--open .bm-editor-overlay { opacity: 1; } /* ── Drawer panel ─────────────────────────────────────────── */ .bm-editor-drawer { position: absolute; top: 0; right: 0; width: 460px; height: 100vh; display: flex; flex-direction: column; background: var(--card-bg); border-left: 1px solid var(--border); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .bm-editor-container--open .bm-editor-drawer { transform: translateX(0); } /* ── Header ───────────────────────────────────────────────── */ .bm-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp2); padding: var(--sp3) var(--sp3) var(--sp2); border-bottom: 1px solid var(--border); flex-shrink: 0; } .bm-editor-header-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bm-editor-title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .bm-editor-subtitle { font-size: 13px; color: var(--text-secondary); } .bm-editor-close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .bm-editor-close-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); } /* ── Body / form fields ───────────────────────────────────── */ .bm-editor-body { flex: 1; overflow-y: auto; padding: var(--sp2) var(--sp3); display: flex; flex-direction: column; gap: var(--sp2); } .bm-editor-field { display: flex; flex-direction: column; gap: 6px; } .bm-editor-label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .bm-editor-input, .bm-editor-select, .bm-editor-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text-primary); background: rgba(255, 255, 255, 0.03); outline: none; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .bm-editor-input:focus, .bm-editor-select:focus, .bm-editor-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .bm-editor-input::placeholder, .bm-editor-textarea::placeholder { color: var(--text-muted); } .bm-editor-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } .bm-editor-textarea { min-height: 80px; resize: vertical; } /* ── Checkbox field ───────────────────────────────────────── */ .bm-editor-field--checkbox { flex-direction: row; align-items: center; gap: 8px; padding-top: 4px; } .bm-editor-checkbox { display: flex; align-items: center; } .bm-editor-checkbox-input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; } .bm-editor-checkbox-label { font-size: 14px; font-weight: 500; color: var(--text-primary); cursor: pointer; user-select: none; } /* ── Footer ───────────────────────────────────────────────── */ .bm-editor-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp2); padding: var(--sp2) var(--sp3); border-top: 1px solid var(--border); flex-shrink: 0; } /* ── Editor error banner ─────────────────────────────────── */ .bm-editor-error { min-height: 0; } .bm-editor-error-text { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); color: var(--risk); font-size: 13px; font-weight: 500; line-height: 1.4; margin-bottom: var(--sp2); } .bm-editor-error-row { display: flex; align-items: flex-start; gap: 6px; } /* ════════════════════════════════════════════════════════════ Holdings Editor ════════════════════════════════════════════════════════════ */ .bm-holdings-tab { padding: 18px 20px; } .bm-holdings-search-area { margin-bottom: 14px; } .bm-holdings-search-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; outline: none; box-sizing: border-box; } .bm-holdings-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } .bm-holdings-search-results { margin-top: 4px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg); max-height: 200px; overflow-y: auto; } .bm-holdings-search-result { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--border-light); font-size: 12px; } .bm-holdings-search-result:last-child { border-bottom: none; } .bm-holdings-search-result:hover { background: rgba(255, 255, 255, 0.03); } .bm-holdings-search-result-text { color: var(--text-primary); font-weight: 500; } .bm-holdings-search-no-results { padding: 8px; font-size: 12px; color: var(--text-muted); } /* ── Editor table ─────────────────────────────────────────── */ .bm-holdings-editor-table { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; } .bm-holdings-editor-header { display: grid; grid-template-columns: 80px 1fr 80px 70px 40px; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.02); } .bm-holdings-editor-hc { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .bm-holdings-editor-hc--right { text-align: right; } .bm-holdings-editor-hc--action { text-align: center; } /* ── Holding row ──────────────────────────────────────────── */ .bm-holding-row { display: grid; grid-template-columns: 80px 1fr 80px 70px 40px; gap: 8px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--border-light); } .bm-holding-row:last-child { border-bottom: none; } .bm-holding-row:hover { background: rgba(255, 255, 255, 0.02); } .bm-holding-cell { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bm-holding-cell-symbol { font-weight: 600; font-family: var(--font-mono, monospace); } .bm-holding-cell-name { color: var(--text-secondary); } .bm-holding-cell-weight { text-align: right; } .bm-holding-cell-source { font-size: 11px; color: var(--text-muted); text-align: center; } .bm-holding-cell-action { text-align: center; } .bm-hw-input { width: 68px; padding: 3px 6px; border: 1px solid var(--border-light); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); font-size: 12px; text-align: right; outline: none; } .bm-hw-input:focus { border-color: var(--primary); } .bm-holding-remove-btn { background: none; border: none; color: var(--danger, #ef4444); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; } .bm-holding-remove-btn:hover { background: rgba(239, 68, 68, 0.1); } /* ── Action buttons ───────────────────────────────────────── */ .bm-holdings-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .bm-holdings-message { margin-top: 10px; padding: 6px 12px; border-radius: 6px; font-size: 12px; color: var(--text-secondary); background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.15); } .bm-holdings-message:empty { display: none; } /* ════════════════════════════════════════════════════════════════ Delete Confirmation Overlay — centered modal card Static top-level overlay, never touched by render_detail_content. ════════════════════════════════════════════════════════════════ */ .bm-delete-confirm-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; pointer-events: none; } .bm-delete-confirm-overlay--open { pointer-events: auto; } /* ── Card ──────────────────────────────────────────────────── */ .bm-delete-confirm-card { position: relative; background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #2d2d3d); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); width: 400px; max-width: 90vw; padding: 24px; display: flex; flex-direction: column; gap: 16px; } .bm-delete-confirm-overlay--open .bm-delete-confirm-card { animation: bm-delete-fade-in 0.15s ease-out; } @keyframes bm-delete-fade-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* ── Title ─────────────────────────────────────────────────── */ .bm-delete-confirm-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #f0f0f0); line-height: 1.3; } /* ── Text ──────────────────────────────────────────────────── */ .bm-delete-confirm-text { font-size: 13px; color: var(--text-secondary, #a0a0b0); line-height: 1.5; } .bm-delete-confirm-name { color: var(--text-primary, #f0f0f0); } /* ── Error ─────────────────────────────────────────────────── */ .bm-delete-error { margin: 0; } .bm-delete-error-text { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.15); } .bm-delete-error:empty { display: none; } /* ── Actions ───────────────────────────────────────────────── */ .bm-delete-confirm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }