/* ═══════════════════════════════════════════════════════════
TrackFundAI — v5 Professional Design System
Inter font, institutional dark theme, sidebar + top-nav layout
Closely mirrors TrackFundAI_Dashboard_v5.html aesthetic
═══════════════════════════════════════════════════════════ */
/* ── CSS Variables ──────────────────────────────────────── */
:root {
/* Background palette */
--bg: #0a0f1e;
--bg2: #0d1426;
--card: #111827;
--card2: #162033;
--border: #1e2d4a;
/* Accent colors */
--accent: #2563eb;
--accent2: #3b82f6;
--accent3: #60a5fa;
--gold: #f59e0b;
--green: #10b981;
--red: #ef4444;
--purple: #8b5cf6;
--cyan: #06b6d4;
--orange: #f97316;
/* Text */
--text: #e2e8f0;
--text2: #94a3b8;
--text3: #64748b;
--white: #ffffff;
/* Sizing */
--nav-h: 56px;
--sidebar-w: 220px;
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 6px;
/* Fonts */
--font: 'Inter', system-ui, sans-serif;
/* ── Backward-compat aliases (for old page-specific CSS files) ── */
--bg-void: var(--bg);
--bg-surface: var(--bg2);
--bg-card: var(--card);
--bg-card-hover: var(--card2);
--text-primary: var(--text);
--text-secondary:var(--text2);
--text-muted: var(--text3);
--accent-blue: var(--accent2);
--accent-cyan: var(--cyan);
--accent-green: var(--green);
--accent-red: var(--red);
--accent-gold: var(--gold);
--accent-amber: var(--gold);
--accent-purple: var(--purple);
--border-subtle: var(--border);
--border-glow: var(--accent2);
--font-sans: var(--font);
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
--radius-card: var(--radius);
--shadow-card: 0 4px 24px rgba(0,0,0,0.25);
--transition: 0.15s ease;
}
/* ── Light Theme Override ───────────────────────────────── */
[data-theme="light"] {
--bg: #f1f5f9;
--bg2: #e8edf5;
--card: #ffffff;
--card2: #f0f4f8;
--border: #d1dae8;
--accent: #2563eb;
--accent3: #1d4ed8;
--text: #1e293b;
--text2: #475569;
--text3: #94a3b8;
--white: #1e293b;
--shadow-card: 0 2px 12px rgba(0,0,0,0.08);
}
/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 13px; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.5;
min-height: 100vh;
overflow-x: hidden;
}
/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
/* ═══ TOP NAVBAR ════════════════════════════════════════════ */
.v5-navbar {
background: rgba(10,15,30,0.96);
border-bottom: 1px solid var(--border);
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
gap: 12px;
}
[data-theme="light"] .v5-navbar {
background: rgba(255,255,255,0.95);
border-bottom-color: var(--border);
}
/* Logo */
.v5-logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
text-decoration: none;
}
.v5-logo-icon {
width: 32px; height: 32px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 13px;
color: #fff;
flex-shrink: 0;
}
.v5-logo-text {
font-size: 16px;
font-weight: 700;
color: var(--white);
line-height: 1.1;
}
.v5-logo-text span { color: var(--accent3); }
.v5-logo-sub {
font-size: 9px;
color: var(--text3);
margin-top: 1px;
}
/* Nav tabs */
.v5-nav-tabs {
display: flex;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
flex: 1;
min-width: 0;
}
.v5-nav-tabs::-webkit-scrollbar { display: none; }
.v5-nav-tab {
padding: 6px 12px;
border-radius: var(--radius-xs);
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: var(--text2);
border: none;
background: none;
font-family: var(--font);
white-space: nowrap;
transition: all 0.15s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
.v5-nav-tab:hover { background: rgba(37,99,235,0.1); color: var(--text); }
.v5-nav-tab.active { background: var(--accent); color: #fff; }
/* Two-line modifier — used by tabs whose label is intentionally wrapped
over two rows (e.g. "Fund\nPerformance", "LP\nManagement"). Keeps the
navbar's vertical rhythm tight while permitting the inner
. */
.v5-nav-tab-2line {
white-space: normal;
line-height: 1.05;
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
}
.v5-nav-tab-2line .nav-tab-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
}
/* Nav right actions */
.v5-nav-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.v5-fund-selector {
background: var(--card2);
border: 1px solid var(--border);
color: var(--text);
padding: 5px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-family: var(--font);
cursor: pointer;
min-width: 180px;
max-width: 240px;
outline: none;
}
.v5-fund-selector option { background: var(--card2); }
.v5-chip-live {
background: rgba(16,185,129,0.12);
color: #34d399;
font-size: 10px;
padding: 3px 8px;
border-radius: 10px;
font-weight: 600;
white-space: nowrap;
}
.v5-nav-icon-btn {
background: var(--card2);
border: 1px solid var(--border);
color: var(--text2);
padding: 5px 9px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 14px;
transition: all 0.15s;
display: flex;
align-items: center;
line-height: 1;
}
.v5-nav-icon-btn:hover { color: var(--text); border-color: var(--accent); }
/* ── Alert strip ── */
.v5-alert-strip {
background: rgba(245,158,11,0.08);
border-bottom: 1px solid rgba(245,158,11,0.18);
padding: 7px 16px;
font-size: 11px;
color: #fbbf24;
display: flex;
align-items: center;
gap: 8px;
position: fixed;
top: var(--nav-h);
left: var(--sidebar-w);
right: 0;
z-index: 150;
}
.v5-alert-strip.hidden { display: none; }
/* ═══ LAYOUT ════════════════════════════════════════════════ */
.v5-layout {
display: flex;
height: calc(100vh - var(--nav-h));
margin-top: var(--nav-h);
}
/* ═══ SIDEBAR ════════════════════════════════════════════════ */
.v5-sidebar {
width: var(--sidebar-w);
background: var(--bg2);
border-right: 1px solid var(--border);
overflow-y: auto;
flex-shrink: 0;
position: fixed;
top: var(--nav-h);
bottom: 0;
left: 0;
z-index: 100;
}
.v5-sidebar-section { padding: 14px 0 6px; }
.v5-sidebar-label {
font-size: 9px;
font-weight: 700;
color: var(--text3);
padding: 0 14px 6px;
text-transform: uppercase;
letter-spacing: 0.1em;
/* Honor literal newlines in the label string so multi-line section
names render as two lines (e.g. "Fund\nPerformance"). */
white-space: pre-line;
}
.v5-sidebar-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 14px;
cursor: pointer;
color: var(--text2);
font-size: 12px;
font-weight: 500;
border-left: 2px solid transparent;
transition: all 0.15s;
text-decoration: none;
border-radius: 0;
}
.v5-sidebar-item .s-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.v5-sidebar-item .s-count {
margin-left: auto;
background: var(--card2);
font-size: 9px;
padding: 1px 5px;
border-radius: 8px;
color: var(--text3);
}
.v5-sidebar-item:hover,
.v5-sidebar-item.active {
color: var(--text);
background: rgba(37,99,235,0.08);
border-left-color: var(--accent);
}
.v5-sidebar-item.active { color: var(--accent3); }
/* Sidebar fund selector */
.sidebar-fund-section {
padding: 12px 10px 8px;
border-bottom: 1px solid var(--border);
}
.sidebar-fund-selector {
width: 100%;
max-width: 100%;
min-width: unset;
padding: 7px 10px;
font-size: 12px;
font-weight: 600;
}
/* Dynamic sub-tabs section */
#sidebar-dynamic {
border-bottom: 1px solid var(--border);
}
#sidebar-dynamic:empty {
display: none;
border-bottom: none;
}
/* ═══ MAIN CONTENT ═══════════════════════════════════════════ */
.v5-main {
flex: 1;
overflow-y: auto;
background: var(--bg);
margin-left: var(--sidebar-w);
}
/* ═══ CONTENT AREA ═══════════════════════════════════════════ */
.v5-content { padding: 20px 22px; }
/* ═══ PAGE HEADER ════════════════════════════════════════════ */
.v5-page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 18px;
gap: 12px;
}
.v5-page-title { font-size: 18px; font-weight: 700; color: var(--white); }
.v5-page-subtitle { font-size: 11px; color: var(--text3); margin-top: 2px; }
.v5-header-actions { display: flex; gap: 7px; flex-wrap: wrap; }
/* ═══ BUTTONS ════════════════════════════════════════════════ */
.v5-btn {
padding: 6px 14px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 12px;
font-weight: 600;
font-family: var(--font);
display: inline-flex;
align-items: center;
gap: 5px;
border: none;
transition: all 0.15s;
text-decoration: none;
white-space: nowrap;
}
.v5-btn-primary {
background: var(--accent);
color: #fff;
}
.v5-btn-primary:hover { background: #1d4ed8; }
.v5-btn-ghost {
background: var(--card2);
border: 1px solid var(--border);
color: var(--text2);
}
.v5-btn-ghost:hover { color: var(--text); border-color: var(--accent3); }
/* ═══ KPI GRID ═══════════════════════════════════════════════ */
.v5-kpi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 18px;
}
@media (max-width: 1400px) { .v5-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .v5-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.v5-kpi-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
position: relative;
overflow: hidden;
transition: transform 0.15s, border-color 0.15s;
cursor: default;
}
.v5-kpi-card:hover { transform: translateY(-1px); border-color: var(--accent); }
/* Color top border stripe */
.v5-kpi-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.v5-kpi-card.blue::before { background: linear-gradient(90deg,#2563eb,#3b82f6); }
.v5-kpi-card.green::before { background: linear-gradient(90deg,#10b981,#34d399); }
.v5-kpi-card.gold::before { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.v5-kpi-card.purple::before { background: linear-gradient(90deg,#8b5cf6,#a78bfa); }
.v5-kpi-card.red::before { background: linear-gradient(90deg,#ef4444,#f87171); }
.v5-kpi-card.cyan::before { background: linear-gradient(90deg,#06b6d4,#22d3ee); }
.v5-kpi-card.orange::before { background: linear-gradient(90deg,#f97316,#fb923c); }
.v5-kpi-icon { font-size: 18px; margin-bottom: 6px; }
.v5-kpi-label {
font-size: 9px;
color: var(--text3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 3px;
}
.v5-kpi-value {
font-size: 20px;
font-weight: 800;
color: var(--white);
line-height: 1;
}
.v5-kpi-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }
.v5-kpi-trend { font-size: 10px; font-weight: 600; margin-top: 5px; }
.v5-kpi-trend.up { color: var(--green); }
.v5-kpi-trend.down { color: var(--red); }
/* ═══ SECTION GRID ═══════════════════════════════════════════ */
.v5-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.v5-grid.two { grid-template-columns: 1fr 1fr; }
.v5-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.v5-grid.four { grid-template-columns: repeat(4,1fr); }
.v5-grid.five { grid-template-columns: repeat(5,1fr); }
.v5-grid.six { grid-template-columns: repeat(6,1fr); }
.v5-grid.wide-narrow { grid-template-columns: 2fr 1fr; }
.v5-grid.narrow-wide { grid-template-columns: 1fr 2fr; }
.v5-grid.wide-medium { grid-template-columns: 3fr 2fr; }
@media (max-width: 1100px) {
.v5-grid.two, .v5-grid.three, .v5-grid.four,
.v5-grid.wide-narrow, .v5-grid.narrow-wide, .v5-grid.wide-medium {
grid-template-columns: 1fr;
}
.v5-grid.five, .v5-grid.six { grid-template-columns: repeat(3,1fr); }
}
/* ═══ PANEL ══════════════════════════════════════════════════ */
.v5-panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.v5-panel-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.v5-panel-title { font-size: 12px; font-weight: 700; color: var(--white); }
.v5-panel-subtitle { font-size: 10px; color: var(--text3); margin-top: 1px; }
.v5-panel-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.v5-panel-btn {
font-size: 10px;
color: var(--text3);
background: var(--card2);
border: 1px solid var(--border);
padding: 3px 8px;
border-radius: var(--radius-xs);
cursor: pointer;
font-family: var(--font);
transition: color 0.15s;
}
.v5-panel-btn:hover { color: var(--text); }
.v5-panel-btn.active { color: var(--accent3); border-color: var(--accent); }
.v5-panel-body { padding: 14px 16px; }
/* ═══ TABLE ══════════════════════════════════════════════════ */
.v5-table-wrap { overflow-x: auto; }
.v5-table-scroll { max-height: 280px; overflow-y: auto; }
.v5-table-max { max-height: 360px; overflow-y: auto; }
.v5-table-max2 { max-height: 520px; overflow-y: auto; }
table.v5-table { width: 100%; border-collapse: collapse; }
.v5-table thead tr { background: var(--bg2); }
.v5-table th {
font-size: 9px;
font-weight: 600;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 7px 10px;
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--bg2);
z-index: 1;
}
.v5-table td {
padding: 8px 10px;
border-bottom: 1px solid rgba(30,45,74,0.4);
color: var(--text);
font-size: 12px;
white-space: nowrap;
}
.v5-table tr:hover td { background: rgba(37,99,235,0.04); }
.v5-table .td-bold { font-weight: 600; color: var(--white); }
.v5-table .td-right { text-align: right; }
.v5-table .td-center { text-align: center; }
.v5-table .td-green { color: #34d399; }
.v5-table .td-red { color: #f87171; }
.v5-table .td-gold { color: #fbbf24; }
.v5-table .td-blue { color: var(--accent3); }
.v5-table .td-muted { color: var(--text3); }
/* ═══ STATUS BADGES ══════════════════════════════════════════ */
.v5-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.v5-status.active { background: rgba(16,185,129,.12); color: #34d399; }
.v5-status.exited { background: rgba(96,165,250,.12); color: var(--accent3); }
.v5-status.writeoff { background: rgba(239,68,68,.12); color: #f87171; }
.v5-status.pending { background: rgba(245,158,11,.12); color: #fbbf24; }
.v5-status.funded { background: rgba(16,185,129,.12); color: #34d399; }
.v5-status.approved { background: rgba(16,185,129,.12); color: #34d399; }
.v5-status.rejected { background: rgba(239,68,68,.12); color: #f87171; }
.v5-status.review { background: rgba(245,158,11,.12); color: #fbbf24; }
.v5-status.critical { background: rgba(239,68,68,.18); color: #f87171; }
.v5-status.high { background: rgba(249,115,22,.18); color: #fb923c; }
.v5-status.medium { background: rgba(245,158,11,.12); color: #fbbf24; }
.v5-status.low { background: rgba(16,185,129,.10); color: #34d399; }
.v5-status.overdue { background: rgba(239,68,68,.14); color: #f87171; }
.v5-status.upcoming { background: rgba(245,158,11,.10); color: #fbbf24; }
.v5-status.complete { background: rgba(16,185,129,.12); color: #34d399; }
/* ═══ TABS (subtabs) ═════════════════════════════════════════ */
.v5-subtab-bar {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
overflow-x: auto;
scrollbar-width: none;
}
.v5-subtab-bar::-webkit-scrollbar { display: none; }
.v5-subtab {
padding: 7px 13px;
font-size: 11px;
color: var(--text3);
cursor: pointer;
border: none;
background: none;
font-family: var(--font);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s;
white-space: nowrap;
font-weight: 500;
}
.v5-subtab:hover { color: var(--text2); }
.v5-subtab.active { color: var(--accent3); border-bottom-color: var(--accent); }
/* Sub-panes */
.v5-subpane { display: none; }
.v5-subpane.active { display: block; }
/* Inner tabs (panel-level) */
.v5-tab-bar {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.v5-tab {
padding: 6px 12px;
font-size: 11px;
cursor: pointer;
color: var(--text3);
border-bottom: 2px solid transparent;
font-weight: 500;
transition: all 0.15s;
}
.v5-tab:hover { color: var(--text2); }
.v5-tab.active { color: var(--accent3); border-bottom-color: var(--accent); }
.v5-tab-content { display: none; }
.v5-tab-content.active { display: block; }
/* ═══ SECTOR BARS ════════════════════════════════════════════ */
.v5-sector-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 9px;
}
.v5-sector-name { font-size: 11px; color: var(--text2); width: 130px; flex-shrink: 0; }
.v5-sector-track { flex: 1; background: var(--bg2); border-radius: 3px; height: 5px; overflow: hidden; }
.v5-sector-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.v5-sector-pct { font-size: 10px; color: var(--text3); width: 34px; text-align: right; }
.v5-sector-val { font-size: 10px; color: var(--text2); width: 65px; text-align: right; }
.v5-sector-arrow { font-size: 11px; color: var(--text3); width: 14px; text-align: right; opacity: 0; transition: opacity 0.15s, color 0.15s; }
.v5-sector-bar-clickable {
cursor: pointer;
border-radius: var(--radius-xs);
padding: 4px 6px;
margin-bottom: 5px;
transition: background 0.15s;
}
.v5-sector-bar-clickable:hover {
background: rgba(37, 99, 235, 0.08);
}
.v5-sector-bar-clickable:hover .v5-sector-arrow {
opacity: 1;
color: var(--accent3);
}
.v5-sector-bar-clickable:hover .v5-sector-name {
color: var(--accent3);
}
/* ═══ MINI CHARTS (bar sparklines) ══════════════════════════ */
.v5-mini-chart {
height: 48px;
display: flex;
align-items: flex-end;
gap: 3px;
padding-bottom: 3px;
}
.v5-mini-bar {
flex: 1;
border-radius: 3px 3px 0 0;
min-width: 5px;
transition: opacity 0.15s;
}
.v5-mini-bar:hover { opacity: 0.7; }
/* ═══ METRIC ITEMS ═══════════════════════════════════════════ */
.v5-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.v5-metric-item {
background: var(--bg2);
border-radius: var(--radius-sm);
padding: 9px 11px;
}
.v5-metric-label {
font-size: 9px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 3px;
}
.v5-metric-value { font-size: 16px; font-weight: 700; color: var(--white); }
.v5-metric-sub { font-size: 9px; color: var(--text3); margin-top: 2px; }
/* ═══ GAUGE / SCORECARD ══════════════════════════════════════ */
.v5-gauge-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.v5-gauge-item {
background: var(--bg2);
border-radius: var(--radius-sm);
padding: 10px;
text-align: center;
}
.v5-gauge-value { font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.v5-gauge-label { font-size: 9px; color: var(--text3); }
/* ═══ TIMELINE ═══════════════════════════════════════════════ */
.v5-timeline { position: relative; padding-left: 18px; }
.v5-timeline::before {
content: '';
position: absolute;
left: 5px; top: 0; bottom: 0;
width: 1px;
background: var(--border);
}
.v5-timeline-item { position: relative; margin-bottom: 13px; }
.v5-timeline-dot {
position: absolute;
left: -16px; top: 3px;
width: 9px; height: 9px;
border-radius: 50%;
border: 2px solid var(--accent);
background: var(--bg);
}
.v5-timeline-dot.green { border-color: var(--green); }
.v5-timeline-dot.gold { border-color: var(--gold); }
.v5-timeline-dot.red { border-color: var(--red); }
.v5-timeline-dot.purple { border-color: var(--purple); }
.v5-timeline-date { font-size: 9px; color: var(--text3); margin-bottom: 2px; }
.v5-timeline-text { font-size: 11px; color: var(--text2); }
.v5-timeline-amount { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 2px; }
/* ═══ WATERFALL BARS ═════════════════════════════════════════ */
.v5-wf-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.v5-wf-label { font-size: 11px; color: var(--text2); width: 110px; }
.v5-wf-track { flex: 1; height: 17px; background: var(--bg2); border-radius: 3px; overflow: hidden; position: relative; }
.v5-wf-fill {
height: 100%;
border-radius: 3px;
display: flex;
align-items: center;
padding-left: 6px;
font-size: 9px;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.v5-wf-num { font-size: 11px; color: var(--text2); width: 70px; text-align: right; }
/* ═══ INSIGHT CARDS ══════════════════════════════════════════ */
.v5-insight-card {
background: var(--card2);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin-bottom: 8px;
border-left: 3px solid var(--accent);
font-size: 12px;
color: var(--text2);
line-height: 1.5;
}
.v5-insight-card.gold { border-left-color: var(--gold); }
.v5-insight-card.green { border-left-color: var(--green); }
.v5-insight-card.red { border-left-color: var(--red); }
.v5-insight-card.purple { border-left-color: var(--purple); }
.v5-insight-title {
font-size: 11px;
font-weight: 700;
color: var(--text);
margin-bottom: 3px;
}
/* ═══ INPUT STYLES ═══════════════════════════════════════════ */
.v5-input, .v5-select {
background: var(--card2);
border: 1px solid var(--border);
color: var(--text);
padding: 5px 10px;
border-radius: var(--radius-xs);
font-size: 12px;
font-family: var(--font);
outline: none;
transition: border-color 0.15s;
}
.v5-input:focus, .v5-select:focus { border-color: var(--accent); }
.v5-select option { background: var(--card2); }
/* ═══ MODAL ══════════════════════════════════════════════════ */
.v5-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 900;
background: rgba(0,0,0,0.72);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
}
.v5-modal-overlay.open { display: flex; }
.v5-modal {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
max-height: 88vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.v5-modal-sm { width: 420px; }
.v5-modal-md { width: 560px; }
.v5-modal-lg { width: 720px; }
.v5-modal-xl { width: 900px; }
.v5-modal-header {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.v5-modal-title { font-size: 14px; font-weight: 700; color: var(--white); }
.v5-modal-close {
cursor: pointer;
color: var(--text3);
font-size: 20px;
background: none;
border: none;
font-family: var(--font);
line-height: 1;
padding: 0;
}
.v5-modal-close:hover { color: var(--text); }
.v5-modal-body { padding: 18px; }
.v5-modal-footer {
padding: 12px 18px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* ═══ FORM FIELDS ════════════════════════════════════════════ */
.v5-field { margin-bottom: 13px; }
.v5-field label {
display: block;
font-size: 10px;
font-weight: 600;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 5px;
}
.v5-field input,
.v5-field select,
.v5-field textarea {
width: 100%;
background: var(--card2);
border: 1px solid var(--border);
color: var(--text);
padding: 7px 10px;
border-radius: var(--radius-xs);
font-size: 12px;
font-family: var(--font);
outline: none;
transition: border-color 0.15s;
}
.v5-field input:focus,
.v5-field select:focus,
.v5-field textarea:focus { border-color: var(--accent); }
.v5-field textarea { resize: vertical; min-height: 72px; }
.v5-field select option { background: var(--card2); }
.v5-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ═══ PROGRESS RING ══════════════════════════════════════════ */
.v5-progress-bar-wrap {
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
margin: 10px 0;
}
.v5-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--cyan));
border-radius: 2px;
transition: width 0.4s ease;
}
/* ═══ HEATMAP ════════════════════════════════════════════════ */
.v5-heatmap-grid { display: grid; grid-template-columns: repeat(10,1fr); gap: 3px; }
.v5-heat-cell {
height: 26px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s;
}
.v5-heat-cell:hover { opacity: 0.7; }
/* ═══ CHAT BOX ═══════════════════════════════════════════════ */
.v5-chat-box {
display: flex;
flex-direction: column;
height: 65vh;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
}
.v5-chat-header {
padding: 10px 13px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 9px;
background: var(--card2);
}
.v5-chat-avatar-ai {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg,#2563eb,#7c3aed);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.v5-chat-msgs {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.v5-chat-msg {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 12px;
}
.v5-chat-msg.user { flex-direction: row-reverse; }
.v5-chat-bubble {
max-width: 78%;
padding: 9px 12px;
border-radius: 10px;
line-height: 1.55;
color: var(--text);
}
.v5-chat-msg:not(.user) .v5-chat-bubble {
background: var(--card2);
border: 1px solid var(--border);
}
.v5-chat-msg.user .v5-chat-bubble {
background: rgba(37,99,235,0.12);
border: 1px solid rgba(37,99,235,0.25);
}
.v5-chat-suggestions {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px 12px;
border-top: 1px solid var(--border);
background: var(--card2);
}
.v5-chat-sug {
font-size: 10px;
background: rgba(37,99,235,0.1);
border: 1px solid rgba(37,99,235,0.2);
color: var(--accent3);
padding: 3px 8px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.v5-chat-sug:hover { background: rgba(37,99,235,0.18); }
.v5-chat-input-row {
display: flex;
gap: 8px;
padding: 9px 12px;
border-top: 1px solid var(--border);
}
.v5-chat-input {
flex: 1;
background: var(--card2);
border: 1px solid var(--border);
color: var(--text);
padding: 7px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-family: var(--font);
outline: none;
}
.v5-chat-input:focus { border-color: var(--accent); }
.v5-chat-send {
background: var(--accent);
border: none;
color: #fff;
padding: 7px 13px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 11px;
font-weight: 600;
font-family: var(--font);
transition: background 0.15s;
}
.v5-chat-send:hover { background: #1d4ed8; }
/* ═══ TYPING INDICATOR ═══════════════════════════════════════ */
.v5-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.v5-typing-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--text3);
animation: v5-bounce 1.2s ease-in-out infinite;
}
.v5-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.v5-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes v5-bounce {
0%,60%,100% { transform: translateY(0); }
30% { transform: translateY(-6px); }
}
/* ═══ CHATBOT FULL-PAGE LAYOUT ═══════════════════════════════ */
#ai-chatbot.v5-subpane.active {
margin: -20px -22px;
width: calc(100% + 44px);
}
.chatbot-layout {
display: flex;
height: calc(100vh - var(--nav-h));
gap: 0;
position: relative;
}
.chatbot-sidebar {
width: 280px;
min-width: 280px;
background: var(--card);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
transition: margin-left 0.25s ease, opacity 0.25s ease;
z-index: 10;
}
.chatbot-sidebar.collapsed {
margin-left: -280px;
opacity: 0;
pointer-events: none;
}
.chatbot-sidebar-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 14px 12px;
border-bottom: 1px solid var(--border);
}
.chatbot-sidebar-title {
flex: 1;
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.chatbot-sidebar-toggle,
.chatbot-sidebar-toggle-mini {
background: none;
border: none;
color: var(--text2);
font-size: 18px;
cursor: pointer;
padding: 4px 6px;
border-radius: var(--radius-sm);
transition: background 0.15s;
line-height: 1;
}
.chatbot-sidebar-toggle:hover,
.chatbot-sidebar-toggle-mini:hover {
background: var(--card2);
}
.chatbot-sidebar-toggle-mini {
display: none;
}
.chatbot-sidebar.collapsed ~ .chatbot-main .chatbot-sidebar-toggle-mini {
display: flex;
}
.chatbot-new-chat-btn {
background: var(--accent);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
line-height: 1;
}
.chatbot-new-chat-btn:hover { background: #1d4ed8; }
.chatbot-new-chat-header-btn {
background: var(--accent);
border: none;
color: #fff;
padding: 5px 12px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: var(--font);
transition: background 0.15s;
white-space: nowrap;
}
.chatbot-new-chat-header-btn:hover { background: #1d4ed8; }
.chatbot-conv-list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.chatbot-conv-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
cursor: pointer;
font-size: 12px;
color: var(--text2);
border-left: 3px solid transparent;
transition: background 0.12s, border-color 0.12s;
position: relative;
}
.chatbot-conv-item:hover {
background: var(--card2);
}
.chatbot-conv-item.active {
background: rgba(37, 99, 235, 0.08);
border-left-color: var(--accent);
color: var(--text);
}
.chatbot-conv-item .conv-icon {
font-size: 14px;
flex-shrink: 0;
opacity: 0.6;
}
.chatbot-conv-item .conv-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
line-height: 1.4;
}
.chatbot-conv-item .conv-time {
font-size: 9px;
color: var(--text3);
white-space: nowrap;
}
.chatbot-conv-item .conv-delete {
display: none;
background: none;
border: none;
color: var(--text3);
cursor: pointer;
font-size: 13px;
padding: 2px 4px;
border-radius: 4px;
transition: color 0.15s;
}
.chatbot-conv-item:hover .conv-delete { display: block; }
.chatbot-conv-item:hover .conv-time { display: none; }
.chatbot-conv-item .conv-delete:hover { color: #ef4444; }
/* Main chat area */
.chatbot-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.v5-chat-box.chatbot-fullscreen {
height: 100%;
border: none;
border-radius: 0;
}
/* Welcome screen */
.v5-chat-welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px 30px;
text-align: center;
}
.v5-chat-welcome-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}
.v5-chat-welcome-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.v5-chat-welcome-sub {
font-size: 13px;
color: var(--text3);
max-width: 480px;
line-height: 1.5;
margin-bottom: 24px;
}
.v5-chat-welcome .v5-chat-suggestions {
border-top: none;
background: transparent;
justify-content: center;
padding: 0;
}
.chatbot-fullscreen .v5-chat-header {
padding: 8px 14px;
}
.chatbot-fullscreen .v5-chat-input-row {
padding: 10px 20px 12px;
}
.chatbot-fullscreen .v5-chat-input {
font-size: 13px;
padding: 10px 14px;
}
.chatbot-fullscreen .v5-chat-send {
padding: 10px 18px;
font-size: 12px;
}
.chatbot-fullscreen .v5-chat-msgs {
padding: 16px 24px;
}
.chatbot-fullscreen .v5-chat-bubble {
max-width: 72%;
font-size: 13px;
padding: 10px 14px;
}
.chatbot-fullscreen .v5-chat-msg {
font-size: 13px;
}
/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
.chatbot-sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 20;
box-shadow: 4px 0 12px rgba(0,0,0,0.15);
}
.chatbot-sidebar.collapsed {
margin-left: -280px;
}
.chatbot-sidebar-toggle-mini {
display: flex !important;
}
}
/* ═══ FUND LIST ══════════════════════════════════════════════ */
.v5-fund-list {
display: flex;
flex-direction: column;
gap: 7px;
max-height: 320px;
overflow-y: auto;
}
.v5-fund-item {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 9px 11px;
cursor: pointer;
transition: all 0.15s;
}
.v5-fund-item:hover,
.v5-fund-item.selected { border-color: var(--accent); background: rgba(37,99,235,0.06); }
.v5-fund-item-name { font-size: 12px; font-weight: 600; color: var(--text); }
.v5-fund-item-type {
font-size: 9px;
color: var(--accent3);
background: rgba(37,99,235,0.12);
padding: 1px 6px;
border-radius: 8px;
font-weight: 600;
display: inline-block;
margin-top: 3px;
}
.v5-fund-item-meta { display: flex; gap: 10px; margin-top: 5px; }
.v5-fund-item-meta span { font-size: 9px; color: var(--text3); }
.v5-fund-item-meta b { color: var(--text2); }
/* ═══ NOTIFICATION BELL BADGE ════════════════════════════════ */
.v5-notif-badge {
background: rgba(239,68,68,0.15);
color: #f87171;
border: 1px solid rgba(239,68,68,0.3);
border-radius: 10px;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
cursor: pointer;
transition: all 0.15s;
}
.v5-notif-badge:hover { background: rgba(239,68,68,0.25); }
.v5-notif-badge.zero {
background: rgba(255,255,255,0.04);
border-color: var(--border);
color: var(--text3);
}
/* ═══ VARIANCE BAR (BvA) ═════════════════════════════════════ */
.v5-var-cell { display: flex; align-items: center; gap: 5px; }
.v5-var-bar {
height: 6px;
border-radius: 3px;
background: var(--green);
min-width: 2px;
}
.v5-var-bar.neg { background: var(--red); }
.v5-var-pct { font-size: 10px; font-weight: 600; }
.v5-var-pct.pos { color: #34d399; }
.v5-var-pct.neg { color: #f87171; }
/* ═══ DATA UPLOAD SPECIFIC ═══════════════════════════════════ */
.v5-drop-zone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
text-align: center;
}
.v5-drop-zone:hover,
.v5-drop-zone.drag-over {
border-color: var(--accent);
background: rgba(37,99,235,0.04);
}
.v5-drop-icon { font-size: 28px; margin-bottom: 4px; }
.v5-drop-text { font-size: 14px; font-weight: 600; color: var(--white); }
.v5-drop-sub { font-size: 11px; color: var(--text3); }
.v5-drop-types {
font-size: 10px;
background: var(--card2);
border: 1px solid var(--border);
padding: 3px 10px;
border-radius: 8px;
color: var(--text3);
}
.v5-file-queue-item {
display: flex;
align-items: center;
gap: 12px;
background: var(--card2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin-bottom: 7px;
}
.v5-file-icon {
background: rgba(37,99,235,0.15);
color: var(--accent3);
font-size: 9px;
font-weight: 700;
padding: 4px 6px;
border-radius: 4px;
flex-shrink: 0;
}
.v5-file-name { font-size: 12px; font-weight: 600; color: var(--text); }
.v5-file-size { font-size: 10px; color: var(--text3); margin-top: 2px; }
.v5-file-status {
margin-left: auto;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 8px;
}
.v5-file-status.pending { background: rgba(100,116,139,0.15); color: var(--text3); }
.v5-file-status.importing { background: rgba(37,99,235,0.12); color: var(--accent3); }
.v5-file-status.completed { background: rgba(16,185,129,0.12); color: #34d399; }
.v5-file-status.failed { background: rgba(239,68,68,0.12); color: #f87171; }
.v5-import-progress {
display: none;
background: var(--card2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
margin-top: 16px;
}
.v5-import-progress.active { display: block; }
.v5-progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.v5-progress-title { font-size: 13px; font-weight: 700; color: var(--white); }
.v5-progress-pct { font-size: 14px; font-weight: 800; color: var(--accent3); }
.v5-progress-msg { font-size: 11px; color: var(--text2); margin-top: 8px; }
.v5-progress-file { font-size: 10px; color: var(--text3); margin-top: 4px; font-style: italic; }
.v5-import-results {
display: none;
background: var(--card2);
border: 1px solid rgba(16,185,129,0.3);
border-radius: var(--radius);
padding: 18px;
margin-top: 16px;
}
.v5-import-results.active { display: block; }
.v5-results-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.v5-results-check {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(16,185,129,0.15);
border: 2px solid var(--green);
color: #34d399;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.v5-results-title { font-size: 14px; font-weight: 700; color: var(--white); }
.v5-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
gap: 10px;
margin-bottom: 14px;
}
.v5-result-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px;
text-align: center;
}
.v5-result-count { font-size: 20px; font-weight: 800; color: var(--white); }
.v5-result-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.v5-import-errors {
display: none;
background: rgba(239,68,68,0.05);
border: 1px solid rgba(239,68,68,0.2);
border-radius: var(--radius);
padding: 14px;
margin-top: 10px;
}
.v5-import-errors.active { display: block; }
.v5-error-item {
background: var(--card);
border: 1px solid rgba(239,68,68,0.15);
border-radius: var(--radius-sm);
padding: 8px 12px;
margin-bottom: 6px;
}
.v5-error-file { font-size: 11px; font-weight: 600; color: #f87171; }
.v5-error-msg { font-size: 11px; color: var(--text2); margin-top: 2px; }
/* Uploaded docs list */
.v5-uploaded-item {
display: flex;
align-items: center;
gap: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-bottom: 8px;
transition: border-color 0.15s;
}
.v5-uploaded-item:hover { border-color: var(--accent); }
.v5-xlsx-badge {
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.25);
color: #34d399;
font-size: 9px;
font-weight: 700;
padding: 4px 6px;
border-radius: 4px;
flex-shrink: 0;
}
.v5-uploaded-fund { font-size: 13px; font-weight: 600; color: var(--text); }
.v5-uploaded-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.v5-uploaded-meta span { font-size: 10px; color: var(--text3); }
.v5-btn-delete {
margin-left: auto;
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.2);
color: #f87171;
padding: 5px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 11px;
font-weight: 600;
font-family: var(--font);
display: flex;
align-items: center;
gap: 5px;
transition: all 0.15s;
flex-shrink: 0;
}
.v5-btn-delete:hover {
background: rgba(239,68,68,0.15);
border-color: rgba(239,68,68,0.4);
}
/* Upload actions bar */
.v5-upload-actions {
display: none;
justify-content: space-between;
align-items: center;
padding: 10px 0 4px;
gap: 12px;
}
.v5-upload-actions.show { display: flex; }
.v5-file-count { font-size: 12px; color: var(--text2); }
/* ═══ PAGE SECTIONS (SPA routing) ═══════════════════════════ */
.v5-page { display: none; }
.v5-page.active { display: block; }
/* ═══ ALERT STRIP CLOSE ══════════════════════════════════════ */
.v5-alert-close {
margin-left: auto;
background: none;
border: none;
color: #fbbf24;
cursor: pointer;
font-size: 16px;
padding: 0 4px;
}
/* ═══ TOAST ══════════════════════════════════════════════════ */
#v5-toast-container {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9999;
pointer-events: none;
}
.v5-toast {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 15px;
border-radius: var(--radius-sm);
background: var(--card);
border: 1px solid var(--border);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
min-width: 260px;
max-width: 380px;
pointer-events: all;
font-size: 12px;
color: var(--text);
transform: translateX(120%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.v5-toast.visible { transform: translateX(0); opacity: 1; }
.v5-toast.success { border-color: rgba(16,185,129,0.4); }
.v5-toast.error { border-color: rgba(239,68,68,0.4); }
.v5-toast.warning { border-color: rgba(245,158,11,0.4); }
/* ═══ LOADING SCREEN ═════════════════════════════════════════ */
#v5-loading {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#v5-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.v5-loading-content { text-align: center; }
.v5-loading-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg,#2563eb,#7c3aed);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
color: #fff;
margin: 0 auto 16px;
animation: v5-logo-pulse 1.5s ease-in-out infinite;
}
@keyframes v5-logo-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); }
50% { box-shadow: 0 0 0 16px rgba(37,99,235,0); }
}
.v5-loading-text { font-size: 12px; color: var(--text3); letter-spacing: 0.1em; }
.v5-loading-bar {
width: 160px;
height: 2px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
margin: 12px auto 8px;
}
.v5-loading-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg,#2563eb,#06b6d4);
border-radius: 2px;
transition: width 0.3s ease;
}
/* ═══ UTILITY ════════════════════════════════════════════════ */
.hidden { display: none !important; }
.v5-mb { margin-bottom: 14px; }
.v5-section-mb { margin-bottom: 16px; }
.v5-text-right { text-align: right; }
.v5-text-center { text-align: center; }
.v5-text-green { color: #34d399; }
.v5-text-red { color: #f87171; }
.v5-text-gold { color: #fbbf24; }
.v5-text-blue { color: var(--accent3); }
.v5-text-muted { color: var(--text3); }
.v5-fw-bold { font-weight: 700; }
.v5-fw-heavy { font-weight: 800; }
.v5-fs-10 { font-size: 10px; }
.v5-fs-11 { font-size: 11px; }
.v5-fs-12 { font-size: 12px; }
/* ═══ EMPTY STATE ════════════════════════════════════════════ */
.v5-empty {
text-align: center;
padding: 32px;
color: var(--text3);
}
.v5-empty-icon { font-size: 28px; margin-bottom: 10px; }
.v5-empty-text { font-size: 12px; }
/* ═══ SEARCH BAR ═════════════════════════════════════════════ */
.v5-search {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.v5-search input {
background: var(--card2);
border: 1px solid var(--border);
color: var(--text);
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-family: var(--font);
outline: none;
flex: 1;
transition: border-color 0.15s;
}
.v5-search input:focus { border-color: var(--accent); }
.v5-search input::placeholder { color: var(--text3); }
/* ═══ KANBAN (IC Workflow) ════════════════════════════════════ */
.v5-kanban {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
}
.v5-kanban-col {
min-width: 220px;
max-width: 260px;
background: var(--card2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
flex-shrink: 0;
}
.v5-kanban-col-header {
font-size: 11px;
font-weight: 700;
color: var(--text2);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 9px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v5-kanban-count {
background: var(--card);
border: 1px solid var(--border);
font-size: 10px;
padding: 1px 6px;
border-radius: 8px;
color: var(--text3);
}
.v5-kanban-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 9px 10px;
margin-bottom: 7px;
cursor: pointer;
transition: all 0.15s;
}
.v5-kanban-card:hover { border-color: var(--accent); }
.v5-kanban-card-name { font-size: 12px; font-weight: 600; color: var(--text); }
.v5-kanban-card-meta { font-size: 10px; color: var(--text3); margin-top: 3px; }
/* Stage badge colors */
.v5-stage { padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.v5-stage-sourced { background: rgba(100,116,139,.15); color: var(--text3); }
.v5-stage-screening { background: rgba(6,182,212,.12); color: var(--cyan); }
.v5-stage-dd { background: rgba(245,158,11,.12); color: #fbbf24; }
.v5-stage-term_sheet { background: rgba(249,115,22,.12); color: #fb923c; }
.v5-stage-ic_presentation { background: rgba(139,92,246,.12); color: #a78bfa; }
.v5-stage-approved { background: rgba(16,185,129,.12); color: #34d399; }
.v5-stage-rejected { background: rgba(239,68,68,.12); color: #f87171; }
.v5-stage-closed { background: rgba(37,99,235,.12); color: var(--accent3); }
.v5-stage-passed { background: rgba(100,116,139,.1); color: var(--text3); }
/* ═══ MIS REPORTS — report row layout ═══════════════════════ */
.mis-report-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
border-radius: 8px;
background: var(--card2);
border: 1px solid var(--border);
transition: background 0.15s;
}
.mis-report-row:hover { background: var(--card3, rgba(255,255,255,0.05)); }
.mis-report-name {
font-size: 12px;
font-weight: 500;
color: var(--text);
}
.mis-gen-btn {
font-size: 11px;
padding: 4px 14px;
min-width: 80px;
}
/* ═══ CHATBOT WIDGET (floating) ══════════════════════════════ */
/* Kept in chatbot-widget.js as self-contained IIFE */
/* ═══ RESPONSIVE TWEAKS ══════════════════════════════════════ */
@media (max-width: 768px) {
.v5-sidebar { display: none; }
.v5-main { margin-left: 0; }
.v5-alert-strip { left: 0; }
.v5-kpi-grid { grid-template-columns: repeat(2,1fr); }
.v5-grid.two, .v5-grid.three { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════
SAPPHIRE INSTITUTIONAL THEME — Default (non-light-toggle)
───────────────────────────────────────────────────────────
Scoped entirely to html:not([data-theme="light"]) so the
white light-mode toggle (data-theme="light") is UNTOUCHED.
Deep sapphire chrome (navbar + sidebar) for trust, an airy
light canvas with clean flat white cards for the data —
institutional-grade, crisp, high-contrast. No gradient,
no glassmorphism: clarity over decoration.
═══════════════════════════════════════════════════════════ */
html:not([data-theme="light"]) {
/* Surfaces */
--bg: #EDF0F6; /* content canvas — soft cool grey */
--bg2: #143A8A; /* navbar + sidebar — deep sapphire chrome */
--card: #FFFFFF; /* cards, panels, tables */
--card2: #F4F6FB; /* table stripe, inputs, light tiles */
--border:#E3E6EE; /* hairline borders & dividers */
/* Accents — sapphire */
--accent: #1F56D6; /* primary — vivid sapphire (buttons, focus) */
--accent2: #4F7BE8; /* lighter sapphire */
--accent3: #1A47B8; /* links & active text on white (high contrast) */
--gold: #B54708; /* strong amber — warnings */
--green: #067647; /* strong green — positive data */
--red: #B42318; /* strong red — errors */
--purple: #6938EF;
--cyan: #0E7090;
--orange: #C4320A;
/* Highlight */
--teal: #1F56D6; /* highlight accent line */
--teal-tint: #E8EEFC; /* light sapphire — highlight backgrounds */
/* Lighter sapphire for accents on the deep chrome */
--sapphire-bright: #3F69CE;
/* Text — crisp & high-contrast, never pale */
--text: #1C2840; /* body — strong dark */
--text2: #3D4A63; /* secondary — still strong */
--text3: #5A6478; /* muted labels — readable, not faint */
--white: #0B1424; /* headings & key figures — near-black */
/* Depth — subtle, professional */
--shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.09);
--shadow-hover: 0 6px 16px rgba(16,24,40,0.12), 0 2px 6px rgba(16,24,40,0.08);
color-scheme: light;
}
/* ── Canvas — flat, airy light surface ─────────────────────── */
html:not([data-theme="light"]) body { background: var(--bg); }
html:not([data-theme="light"]) .v5-main { background: var(--bg); }
/* ── Top navbar — deep navy #172F5D ────────────────────────── */
html:not([data-theme="light"]) .v5-navbar {
background: #172F5D;
border-bottom: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 1px 3px rgba(8,16,36,0.28);
}
html:not([data-theme="light"]) .v5-logo-icon {
background: #FFFFFF;
color: #143A8A;
}
html:not([data-theme="light"]) .v5-logo-text { color: #FFFFFF; }
html:not([data-theme="light"]) .v5-logo-text span { color: #9DB4F0; }
html:not([data-theme="light"]) .v5-logo-sub { color: rgba(255,255,255,0.80); }
html:not([data-theme="light"]) .v5-nav-tab { color: #FFFFFF; font-weight: 600; }
html:not([data-theme="light"]) .v5-nav-tab:hover {
background: rgba(255,255,255,0.12);
color: #FFFFFF;
}
html:not([data-theme="light"]) .v5-nav-tab.active {
background: var(--sapphire-bright);
color: #FFFFFF;
font-weight: 700;
}
html:not([data-theme="light"]) .v5-nav-icon-btn {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
color: #FFFFFF;
}
html:not([data-theme="light"]) #user-badge { color: #FFFFFF; }
html:not([data-theme="light"]) .v5-nav-icon-btn:hover {
color: #FFFFFF;
border-color: rgba(255,255,255,0.55);
}
html:not([data-theme="light"]) .v5-fund-selector {
background: #FFFFFF;
border-color: #B7D2CF;
color: #000000;
font-weight: 700;
}
html:not([data-theme="light"]) .v5-fund-selector option {
background: #FFFFFF;
color: var(--text);
}
/* ── Sidebar — absolute white #FFFFFF, black bold content ───── */
html:not([data-theme="light"]) .v5-sidebar {
background: #FFFFFF;
border-right: 1px solid #E3E6EE;
}
html:not([data-theme="light"]) .v5-sidebar-label {
color: #000000;
font-weight: 700;
}
html:not([data-theme="light"]) .v5-sidebar-item {
color: #000000;
font-weight: 700;
}
html:not([data-theme="light"]) .v5-sidebar-item:hover {
background: rgba(20,58,138,0.08);
color: #000000;
border-left-color: #143A8A;
}
html:not([data-theme="light"]) .v5-sidebar-item.active {
background: rgba(20,58,138,0.12);
color: #000000;
border-left-color: #143A8A;
}
html:not([data-theme="light"]) .v5-sidebar-item .s-count {
background: rgba(20,58,138,0.10);
color: #143A8A;
}
html:not([data-theme="light"]) .v5-sidebar-item.active .s-count {
background: rgba(20,58,138,0.18);
color: #143A8A;
}
html:not([data-theme="light"]) .sidebar-fund-section,
html:not([data-theme="light"]) #sidebar-dynamic {
border-bottom-color: #E3E6EE;
}
/* ── Sidebar icons — formal Lucide-style SVG via CSS mask-image.
Same pattern as the top navbar (.nav-ico). Emoji stay in the
HTML so the white light-toggle keeps its original look; the
sapphire theme paints a masked SVG over them. */
html:not([data-theme="light"]) .v5-sidebar-item .s-icon {
display: inline-block;
width: 16px;
height: 16px;
font-size: 0;
flex-shrink: 0;
background-color: #143A8A;
opacity: 1;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color 0.15s;
}
html:not([data-theme="light"]) .v5-sidebar-item:hover .s-icon,
html:not([data-theme="light"]) .v5-sidebar-item.active .s-icon {
background-color: #1F56D6;
}
/* Per-icon mask definitions. Every si-* class maps to a single
Lucide-style stroke SVG, encoded as a data URI. One rule per
unique concept — multiple sub-tabs may share the same icon
(e.g. nav, pl and bridge all use si-trend). */
html:not([data-theme="light"]) .si-grid { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-building { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-flame { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-exit { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-bars { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-bolt { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-house { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-briefcase { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-trend { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-clipboard { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-rocket { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-columns { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-banknote { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-send { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-book { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-clipcheck { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-coins { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-scroll { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-percent { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-folder { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-scales { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-doc { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-compare { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-layers { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-gear { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-users { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-monitor { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-shieldcheck{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-gavel { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-bell { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-calendar { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-message { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-bulb { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-shieldwarn { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-news { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-check { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-sparkle { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
html:not([data-theme="light"]) .si-upload { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
/* ── Navbar tabs → formal monochrome icons (blue theme only) ─── */
/* The emoji stay in the HTML so the light theme is untouched; */
/* the blue theme hides them and paints a masked SVG instead. */
html:not([data-theme="light"]) .nav-ico {
display: inline-block;
width: 16px;
height: 16px;
font-size: 0;
flex-shrink: 0;
background-color: #FFFFFF;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
html:not([data-theme="light"]) .v5-nav-tab.active .nav-ico {
background-color: #FFFFFF;
}
html:not([data-theme="light"]) .ni-overview {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-portfolio {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-accounting {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-financials {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-valuations {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-investors {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-compliance {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-benchmarks {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-market {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
html:not([data-theme="light"]) .ni-analytics {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ── Page header & sub-tabs (on the light canvas) ──────────── */
html:not([data-theme="light"]) .v5-page-title { color: var(--white); }
html:not([data-theme="light"]) .v5-page-subtitle { color: var(--text3); }
html:not([data-theme="light"]) .v5-subtab-bar {
border-bottom-color: var(--border);
}
html:not([data-theme="light"]) .v5-subtab { color: var(--text3); font-weight: 600; }
html:not([data-theme="light"]) .v5-subtab:hover { color: var(--text); }
html:not([data-theme="light"]) .v5-subtab.active { color: var(--accent3); }
/* ── Scrollbars — quiet grey ───────────────────────────────── */
html:not([data-theme="light"]) ::-webkit-scrollbar-track { background: transparent; }
html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
background: rgba(16,24,40,0.20);
}
html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
background: rgba(16,24,40,0.34);
}
/* ── Notification drawer — drop the heavy side shadow ──────── */
html:not([data-theme="light"]) .notif-drawer {
box-shadow: none;
}
/* ── Cards & panels — clean flat white ─────────────────────── */
html:not([data-theme="light"]) .v5-panel,
html:not([data-theme="light"]) .v5-kpi-card,
html:not([data-theme="light"]) .v5-insight-card,
html:not([data-theme="light"]) .v5-chat-box,
html:not([data-theme="light"]) .chatbot-sidebar {
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
html:not([data-theme="light"]) .v5-panel:hover {
box-shadow: var(--shadow-hover);
border-color: #D2D8E4;
}
html:not([data-theme="light"]) .v5-kpi-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
border-color: var(--accent2);
}
html:not([data-theme="light"]) .v5-panel-header {
border-bottom-color: var(--border);
}
/* ── Performance Snapshot & Fund Scorecard — clean light tiles ─ */
html:not([data-theme="light"]) .v5-metric-item,
html:not([data-theme="light"]) .v5-gauge-item {
background: var(--card2);
border: 1px solid var(--border);
}
html:not([data-theme="light"]) .v5-metric-label,
html:not([data-theme="light"]) .v5-gauge-label {
color: var(--text3);
}
html:not([data-theme="light"]) .v5-metric-value {
color: var(--white);
}
html:not([data-theme="light"]) .v5-gauge-value {
color: var(--white) !important; /* overrides JS inline colors — crisp */
}
/* ── Tables — sapphire header, clean rows ──────────────────── */
html:not([data-theme="light"]) .v5-table thead tr,
html:not([data-theme="light"]) .v5-table th {
background: var(--bg2);
color: #FFFFFF;
border-bottom-color: var(--bg2);
}
html:not([data-theme="light"]) .v5-table td {
border-bottom-color: var(--border);
color: var(--text);
}
html:not([data-theme="light"]) .v5-table tbody tr:nth-child(even) td {
background: var(--card2);
}
html:not([data-theme="light"]) .v5-table tbody tr:hover td {
background: var(--teal-tint);
}
html:not([data-theme="light"]) .v5-table .td-bold { color: var(--white); }
html:not([data-theme="light"]) .v5-table .td-green { color: var(--green); }
html:not([data-theme="light"]) .v5-table .td-red { color: var(--red); }
html:not([data-theme="light"]) .v5-table .td-gold { color: var(--gold); }
/* ── Status badges & data colors — professional tones ──────── */
html:not([data-theme="light"]) .v5-status.active,
html:not([data-theme="light"]) .v5-status.funded,
html:not([data-theme="light"]) .v5-status.approved,
html:not([data-theme="light"]) .v5-status.complete,
html:not([data-theme="light"]) .v5-status.low { color: var(--green); }
html:not([data-theme="light"]) .v5-status.writeoff,
html:not([data-theme="light"]) .v5-status.rejected,
html:not([data-theme="light"]) .v5-status.critical,
html:not([data-theme="light"]) .v5-status.overdue { color: var(--red); }
html:not([data-theme="light"]) .v5-status.pending,
html:not([data-theme="light"]) .v5-status.review,
html:not([data-theme="light"]) .v5-status.medium,
html:not([data-theme="light"]) .v5-status.upcoming { color: var(--gold); }
html:not([data-theme="light"]) .v5-status.high { color: var(--orange); }
html:not([data-theme="light"]) .v5-chip-live { color: var(--green); }
html:not([data-theme="light"]) .v5-text-green { color: var(--green); }
html:not([data-theme="light"]) .v5-text-red { color: var(--red); }
html:not([data-theme="light"]) .v5-text-gold { color: var(--gold); }
html:not([data-theme="light"]) .v5-alert-strip { color: var(--gold); }
/* ── Buttons — solid sapphire, darken on hover ─────────────── */
html:not([data-theme="light"]) .v5-btn-primary {
background: var(--accent);
transition: background 0.16s ease, box-shadow 0.16s ease;
}
html:not([data-theme="light"]) .v5-btn-primary:hover {
background: var(--accent3);
box-shadow: 0 2px 8px rgba(31,86,214,0.34);
}
html:not([data-theme="light"]) .v5-btn-ghost:hover {
border-color: var(--accent);
color: var(--accent3);
}
/* ── Form inputs — sapphire focus ring ─────────────────────── */
html:not([data-theme="light"]) input:focus,
html:not([data-theme="light"]) select:focus,
html:not([data-theme="light"]) textarea:focus,
html:not([data-theme="light"]) .v5-fund-selector:focus,
html:not([data-theme="light"]) .v5-chat-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(31,86,214,0.18);
}
/* ── Highlight states — light sapphire ─────────────────────── */
html:not([data-theme="light"]) .v5-chat-sug:hover {
background: var(--teal-tint);
border-color: var(--accent2);
color: var(--accent3);
}
html:not([data-theme="light"]) .chatbot-conv-item:hover {
background: var(--teal-tint);
}
html:not([data-theme="light"]) .chatbot-conv-item.active {
background: #DCE6FB;
}
/* ── Animations — deliberate & refined ─────────────────────── */
@keyframes v5-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes v5-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes v5-shimmer {
0% { background-position: -520px 0; }
100% { background-position: 520px 0; }
}
@keyframes v5-pulse-live {
0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.35); }
50% { box-shadow: 0 0 0 5px rgba(5,150,105,0); }
}
html:not([data-theme="light"]) .v5-page.active {
animation: v5-fade-up 0.42s ease-out both;
}
html:not([data-theme="light"]) .v5-subpane.active {
animation: v5-fade-in 0.34s ease-out both;
}
html:not([data-theme="light"]) .v5-chip-live {
animation: v5-pulse-live 2.4s ease-in-out infinite;
}
/* Soft shimmer skeleton */
html:not([data-theme="light"]) .v5-skeleton {
background: linear-gradient(90deg,#EDEFF4 25%,#DEE3EE 38%,#EDEFF4 55%);
background-size: 1040px 100%;
animation: v5-shimmer 1.5s linear infinite;
border-radius: var(--radius-xs);
}
@media (prefers-reduced-motion: reduce) {
html:not([data-theme="light"]) .v5-page.active,
html:not([data-theme="light"]) .v5-subpane.active,
html:not([data-theme="light"]) .v5-chip-live,
html:not([data-theme="light"]) .v5-skeleton { animation: none; }
}
/* ════════════════════════════════════════════════════════════════
KPI tile refinements — sapphire theme only
1) Drop the multicolored top stripe (looked childish)
2) Replace the 6 emoji KPI icons with formal monochrome SVGs,
tinted to match each tile's accent. Emoji stay in HTML so the
light toggle theme keeps its original look.
3) Force ALL progress-bar fills (sector + stage/geo/co-investor)
to a single brand sapphire #3892E8.
════════════════════════════════════════════════════════════════ */
/* (1) Kill the multicolored top stripe on every KPI card */
html:not([data-theme="light"]) .v5-kpi-card::before { display: none; content: none; }
/* (2) Formal masked SVG KPI icons. Emoji is hidden via font-size:0;
the SVG is painted with each tile's accent color. */
html:not([data-theme="light"]) .kpi-ico {
display: inline-block;
width: 22px;
height: 22px;
font-size: 0;
vertical-align: middle;
background-color: #1F56D6;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Per-tile accent tint (matches the original color-coded grid) */
html:not([data-theme="light"]) .v5-kpi-card.blue .kpi-ico { background-color: #1F56D6; }
html:not([data-theme="light"]) .v5-kpi-card.green .kpi-ico { background-color: #067647; }
html:not([data-theme="light"]) .v5-kpi-card.gold .kpi-ico { background-color: #B54708; }
html:not([data-theme="light"]) .v5-kpi-card.purple .kpi-ico { background-color: #5B3FCC; }
html:not([data-theme="light"]) .v5-kpi-card.cyan .kpi-ico { background-color: #0E7490; }
html:not([data-theme="light"]) .v5-kpi-card.red .kpi-ico { background-color: #B42318; }
/* Portfolio Companies — office building */
html:not([data-theme="light"]) .ki-cos {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Total Fair Value — wallet */
html:not([data-theme="light"]) .ki-fv {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Portfolio MOIC — trending up arrow */
html:not([data-theme="light"]) .ki-moic {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Net IRR — bullseye target */
html:not([data-theme="light"]) .ki-irr {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* TVPI — bar chart */
html:not([data-theme="light"]) .ki-tvpi {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Deployment — outgoing arrow over coins (paper plane / send) */
html:not([data-theme="light"]) .ki-dep {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Kill the blue→violet gradient on the AI assistant avatar, welcome
icon and loading splash. Replace with a pure sapphire gradient
#172F5D → #1F56D6 so the chatbot reads as part of the brand instead
of a generic AI-purple. Light theme keeps its original look — these
overrides are sapphire-theme-only.
NOTE: .v5-logo-icon is deliberately excluded — the navbar TF tile
keeps its crisp white-on-sapphire styling from the main override
block above; gradiating it would make it look like a shadow against
the #172F5D navbar. */
html:not([data-theme="light"]) .v5-chat-avatar-ai,
html:not([data-theme="light"]) .v5-chat-welcome-icon,
html:not([data-theme="light"]) .v5-loading-icon {
background: linear-gradient(135deg, #172F5D, #1F56D6) !important;
}
/* (3) Progress bars — light-grey empty track + sapphire #3892E8 fill.
Sector Allocation, Stage, Geography, Co-Investors — all of them.
The JS still passes inline `background:` colours; !important wins.
Track was previously var(--bg2) deep navy, which made the empty
portion look like more fill. Switched to a soft neutral grey so
the filled progress reads accurately at a glance. */
html:not([data-theme="light"]) .v5-sector-track {
background: #EAEEF5;
border-radius: 999px;
height: 6px;
box-shadow: inset 0 0 0 1px #DEE3EE;
}
html:not([data-theme="light"]) .v5-sector-fill {
background: #3892E8 !important;
border-radius: 999px;
}
/* ── Pass 4 Provenance Panel ─────────────────────────────────────────── */
.prov-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(8,12,22,0.45);
z-index: 12000;
backdrop-filter: blur(2px);
}
.prov-overlay.open { display: block; }
.prov-panel {
position: fixed; top: 0; right: 0;
width: 460px; max-width: 92vw; height: 100vh;
background: var(--surface, #fff);
border-left: 1px solid var(--border, #e2e8f0);
box-shadow: -12px 0 32px rgba(8,12,22,0.18);
overflow-y: auto;
transform: translateX(100%);
transition: transform 220ms ease-out;
display: flex; flex-direction: column;
}
.prov-overlay.open .prov-panel { transform: translateX(0); }
.prov-head {
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border, #e2e8f0);
display: flex; align-items: flex-start; justify-content: space-between;
gap: 14px;
}
.prov-eyebrow {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text3, #94a3b8); font-weight: 600;
}
.prov-head h3 {
margin: 4px 0 2px; font-size: 17px; font-weight: 700;
color: var(--text1, #0f172a);
}
.prov-sub { font-size: 12px; color: var(--text3, #94a3b8); }
.prov-close {
background: transparent; border: 0; font-size: 26px;
cursor: pointer; color: var(--text3, #94a3b8); line-height: 1;
padding: 0 4px;
}
.prov-close:hover { color: var(--text1, #0f172a); }
.prov-body { padding: 18px 22px 32px; font-size: 13px; color: var(--text1, #1e293b); }
.prov-section { margin-bottom: 18px; }
.prov-section h4 {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 700; color: var(--text2, #475569);
margin: 0 0 8px;
}
.prov-source-pill {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 600;
}
.prov-source-pill.derived { background: rgba(99,102,241,0.12); color: #4338ca; }
.prov-source-pill.imported { background: rgba(34,197,94,0.12); color: #15803d; }
.prov-formula {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.18);
border-radius: 8px; padding: 10px 12px; font-size: 12px;
word-break: break-word; line-height: 1.55; color: var(--text1, #0f172a);
}
.prov-value-big {
font-size: 28px; font-weight: 800; color: var(--text1, #0f172a);
margin-bottom: 2px;
}
.prov-value-meta { font-size: 12px; color: var(--text3, #94a3b8); }
.prov-inputs-table {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.prov-inputs-table th, .prov-inputs-table td {
text-align: left; padding: 6px 8px;
border-bottom: 1px solid var(--border, #e2e8f0);
vertical-align: top;
}
.prov-inputs-table th {
font-weight: 600; color: var(--text2, #475569);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
}
.prov-inputs-table td.k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #4338ca; }
.prov-inputs-table td.v { font-variant-numeric: tabular-nums; }
.prov-inputs-table td.s { color: var(--text3, #94a3b8); font-size: 11px; }
.prov-candidate {
border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
padding: 8px 10px; margin-bottom: 6px;
}
.prov-candidate-head {
display: flex; justify-content: space-between; gap: 8px;
font-size: 12px; font-weight: 600; color: var(--text1, #0f172a);
}
.prov-candidate-reason { color: var(--text3, #94a3b8); font-size: 11px; margin-top: 4px; }
.prov-confidence-bar {
height: 6px; background: rgba(99,102,241,0.15);
border-radius: 99px; overflow: hidden; margin-top: 6px;
}
.prov-confidence-fill {
height: 100%; background: linear-gradient(90deg, #4338ca, #6366f1);
}
/* Click affordance on KPI values backed by provenance */
.v5-kpi-value.has-prov, .v5-kpi-value[data-prov-key] {
cursor: pointer;
position: relative;
}
.v5-kpi-value[data-prov-key]:hover { opacity: 0.85; }
/* AT-A-GLANCE provenance badge — distinguishes IMPORTED (extracted from
Excel cell) vs DERIVED (computed by Gemini Pass 4 formula). The badge
sits in the corner of the KPI tile so the user can read every tile's
source without clicking. Click still opens the full provenance side-panel. */
.v5-kpi-value[data-prov-source]::after {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
vertical-align: middle;
line-height: 14px;
transform: translateY(-3px);
}
.v5-kpi-value[data-prov-source="extracted"]::after {
content: 'Extracted';
background: rgba(34, 197, 94, 0.18);
color: #15803d;
border: 1px solid rgba(34, 197, 94, 0.35);
}
.v5-kpi-value[data-prov-source="derived"]::after {
content: 'Derived';
background: rgba(99, 102, 241, 0.18);
color: #4338ca;
border: 1px solid rgba(99, 102, 241, 0.40);
}