/* ============================================================
   FUNDMONKEY — TERMINAL LAYOUT (Refinitiv-style dark theme)
   Single thin toolbar at top: logo (left) | controls (center) |
   mode toggle (right). Sector chips strip below. Then 3-pane
   workspace fills viewport (table left 60%, charts stacked right 40%).
   ============================================================ */

:root {
  /* Surfaces */
  --bg-base:        #0d1421;
  --bg-elevated:    #131c2e;
  --bg-pane:        #16203a;
  --bg-pane-header: #1a2540;
  --bg-hover:       #1a2538;
  --bg-selected:    #1e3a5f;
  --bg-input:       #0a0f1a;
  --bg-row-alt:     #131a2a;

  /* Borders */
  --border-subtle:  #1f2a3e;
  --border-strong:  #2a3a52;

  /* Text */
  --text-primary:   #e4e7eb;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-on-accent: #051018;

  /* Accent (funds mode) */
  --accent:           #22d3ee;
  --accent-hover:     #67e8f9;
  --accent-muted:     #0e7490;
  --accent-bg-subtle: rgba(34, 211, 238, 0.10);
  --accent-bg-strong: rgba(34, 211, 238, 0.18);

  /* Semantic */
  --gain:           #4ade80;
  --gain-bg:        rgba(74, 222, 128, 0.12);
  --gain-bg-strong: rgba(74, 222, 128, 0.20);
  --loss:           #f87171;
  --loss-bg:        rgba(248, 113, 113, 0.12);
  --loss-bg-strong: rgba(248, 113, 113, 0.20);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace; */

  /* Radius / shadows */
  --r:    3px;
  --r-lg: 4px;
  --sh-sm: 0 1px 2px rgba(0,0,0,0.4);
  --sh-md: 0 4px 12px rgba(0,0,0,0.35);
  --sh-lg: 0 8px 24px rgba(0,0,0,0.45);

  --t: all 0.15s ease;

  /* Header / chrome geometry */
  --header-h: 48px;
  --toolbar-h: 32px;
  --chips-h:  44px;

  /* Toolbar matches the pane-header band (Fund Manager Performance) */
  --toolbar-bg:        var(--bg-pane-header);
  --toolbar-text:      var(--text-secondary);
  --toolbar-text-mute: var(--text-muted);
  --toolbar-btn-bg:    var(--bg-hover);
  --toolbar-btn-border:var(--border-strong);
  --toolbar-btn-hover: var(--bg-selected);

  /* Legacy aliases */
  --b050: var(--bg-base);
  --b100: var(--bg-elevated);
  --b200: var(--border-subtle);
  --b300: var(--border-strong);
  --b400: var(--text-muted);
  --b500: var(--text-secondary);
  --b600: var(--text-primary);
  --b900: var(--bg-base);
  --bgPink: var(--accent-bg-subtle);
  --bgBlood: var(--accent);
  --gain-light: var(--gain-bg);
  --loss-light: var(--loss-bg);
}

/* ============================================================
   GLOBAL — fixed-viewport, body doesn't scroll
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
}

body {
  font-family: var(--font);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--toolbar-h));
  zoom: 1.25;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-muted); color: var(--text-primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   TOP TOOLBAR — single combined header
   Layout: header-left | header-controls (center, grows) | header-right
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--bg-elevated);
  /* border-bottom: 1px solid var(--border-subtle); */
  box-shadow: var(--sh-sm);
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-logo {
  height: 28px;
  display: block;
  cursor: pointer;
  filter: brightness(1.1);
}

.header-controls {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  min-width: 0;
}

.header-controls::-webkit-scrollbar { height: 4px; }

.header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================================
   BURGER MENU
   ============================================================ */
.burger-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.burger-btn {
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  transition: background 0.15s ease;
  position: relative;
  z-index: 10;
}

.burger-btn:hover { background: var(--bg-hover); }

.burger-btn span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  transform-origin: center;
}

.burger-btn.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background: var(--accent);
}
.burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: var(--accent);
}

.burger-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px); left: 0;
  background: var(--bg-pane);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  min-width: 220px;
  overflow: hidden;
  z-index: 2000;
}

.burger-menu.open { display: block; }

.burger-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s ease, color 0.1s ease;
}

.burger-menu a:last-child { border-bottom: none; }
.burger-menu a:hover { background: var(--bg-hover); color: var(--accent); }

.fmhead-wrap { display: flex; align-items: center; }

.fmhead-wrap img {
  width: 30px; height: 30px;
  display: block;
  border-radius: var(--r);
  padding: 2px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  transition: var(--t);
}

.fmhead-wrap img:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg-subtle);
}

/* ============================================================
   APP TOOLBAR — high-contrast strip below header
   Background flips per palette so it always pops. Buttons
   inside use a mathematical glyph + tooltip.
   ============================================================ */
.app-toolbar {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  height: var(--toolbar-h);
  /* background: var(--toolbar-bg); */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E"), var(--toolbar-bg);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent); 
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  z-index: 998;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.toolbar-btn {
  background: var(--toolbar-btn-bg);
  color: var(--toolbar-text);
  border: 1px solid var(--toolbar-btn-border);
  border-radius: var(--r);
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', Georgia, serif;
}

.toolbar-btn:hover {
  background: var(--toolbar-btn-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.toolbar-btn.active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.toolbar-btn.active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.toolbar-glyph {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  /* font-style: italic; */
}

/* When sectors are hidden via toolbar, collapse the filter section */
.filter-section.hidden { display: none; }

/* ============================================================
   CONTROLS — period + perf + toggles, inside header
   ============================================================ */
.controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.controls-divider {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  flex-shrink: 0;
}

.filter-label {
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.period-controls {
  display: inline-flex;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
}

.period-controls label {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.period-controls label:last-child { border-right: none; }
.period-controls label:hover { background: var(--bg-hover); color: var(--text-primary); }
.period-controls label:has(input:checked) {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}
.period-controls input[type="radio"] { display: none; }

.perf-filter {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-right: none;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 0;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.perf-filter:first-of-type { border-radius: var(--r) 0 0 var(--r); }
.perf-filter:last-of-type {
  border-right: 1px solid var(--border-strong);
  border-radius: 0 var(--r) var(--r) 0;
}

.perf-filter:hover { background: var(--bg-hover); color: var(--text-primary); }
.perf-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}

.positive-toggle,
.losers-toggle {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--t);
  min-width: 26px;
}

.positive-toggle { border-color: rgba(74, 222, 128, 0.35); color: var(--gain); }
.losers-toggle   { border-color: rgba(248, 113, 113, 0.35); color: var(--loss); }
.positive-toggle:hover { background: var(--gain-bg); }
.losers-toggle:hover   { background: var(--loss-bg); }
.positive-toggle.active { background: var(--gain); color: var(--bg-base); border-color: var(--gain); }
.losers-toggle.active   { background: var(--loss); color: var(--bg-base); border-color: var(--loss); }

/* Hide the now-defunct standalone controls-strip if anything still references it */
.controls-strip-inner { display: contents; }

/* ============================================================
   FILTER SECTION (sector chips strip, in normal flow below header)
   ============================================================ */
.filter-section {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.filter-content { padding: 6px 14px; }
.filter-content.collapsed { max-height: 0; padding: 0 14px; overflow: hidden; }

.filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.sector-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sector-link {
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--t);
}

.sector-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.pin-toggle {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.6;
  transition: var(--t);
  color: var(--text-secondary);
}

.pin-toggle:hover { opacity: 1; }
.pin-toggle.active {
  opacity: 1;
  background: var(--accent-bg-strong);
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   BUTTONS — chip style for sector filters
   ============================================================ */
button {
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--bg-input);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--t);
  font-family: var(--font);
  line-height: 1.4;
  letter-spacing: 0.2px;
}

button:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

button.active {
  background: var(--accent-bg-strong);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

button.active:hover { border-color: var(--accent-hover); color: var(--accent-hover); }

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-bg-strong);
  border-color: var(--accent);
}

/* ============================================================
   WORKSPACE — 3-pane grid filling remaining viewport
   Outer grid: pane-left | h-gutter | right-column
   right-column is itself a grid: pane-top-right | v-gutter | pane-bottom-right
   ============================================================ */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: var(--col-left, 60%) 6px 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  padding: 8px;
  overflow: hidden;
  background: var(--bg-base);
  min-height: 0;
}

.right-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--row-top, 50%) 6px 1fr;
  gap: 0;
  min-height: 0;
  min-width: 0;
}

/* Resize gutters */
.gutter {
  background: transparent;
  position: relative;
  z-index: 50;
  flex-shrink: 0;
  transition: background 0.1s ease;
}

.gutter-h {
  cursor: col-resize;
}

.gutter-v {
  cursor: row-resize;
}

/* Visual indicator line in the middle of the gutter */
.gutter::before {
  content: '';
  position: absolute;
  background: var(--border-subtle);
  transition: background 0.1s ease;
}

.gutter-h::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.gutter-v::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

/* Hover and active states */
.gutter:hover::before,
.gutter.dragging::before {
  background: var(--accent);
  width: 2px;
}

.gutter-v:hover::before,
.gutter-v.dragging::before {
  width: auto;
  height: 2px;
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

body.resizing.resizing-v {
  cursor: row-resize;
}

/* Panes now auto-place into the grid - no manual grid placement needed */
.pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  min-height: 0;
  min-width: 0;
}

.pane-header {
  background: var(--bg-pane-header);
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 32px;
}

.pane-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.pane-info {
  font-size: 11.5px;
  color: var(--text-primary);
  font-weight: 500;
  margin-left: auto;
}

.pane-target {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 2px 4px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 0;
  flex-shrink: 0;
}

.pane-target:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg-subtle);
}

.pane-target.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg-strong);
}

.pane-target svg { display: block; }

.pane-info #infoText { display: inline; }

.pane-content {
  flex: 1;
  overflow: auto;
  padding: 0;
  min-height: 0;
  min-width: 0;
}

/* ============================================================
   LEGACY ELEMENTS — keep functional but hidden
   ============================================================ */
.info { display: none; } /* fund counter is now in pane-header */
.sticky-spacer-top, .sticky-spacer-bottom { display: none; }
.company-analysis-link { display: none; }
#rowToggleBtn,
#companyToggleBtn,
#heatmapToggleBtn { display: none; }
.debug { display: none; }
.link { display: none; }
/* ============================================================
   PERFORMANCE PANEL — side-by-side bar charts for selected fund
   ============================================================ */
.performance {
  display: none;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin: 0 8px 8px;
  padding: 8px 14px 6px;
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}

.perf-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s ease;
}

.perf-close:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

.perf-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  padding-right: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perf-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.perf-chart-section {
  min-width: 0;
}

.perf-chart-title {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
  text-align: center;
}

.perf-chart {
  width: 100%;
  position: relative;
}

.perf-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.perf-bar {
  transition: opacity 0.15s ease, transform 0.15s ease;
  animation: perfBarReveal 0.45s ease-out backwards;
}
.perf-bar.gain { fill: var(--gain); }
.perf-bar.loss { fill: var(--loss); }
.perf-bar:hover { opacity: 0.85; }

/* Thin lighter stripe along the top edge of each bar for a touch of depth */
.perf-bar-top {
  fill: rgba(255, 255, 255, 0.30);
  pointer-events: none;
  animation: perfBarReveal 0.45s ease-out backwards;
}

/* Y-axis percentage labels */
.perf-y-label {
  font-size: 8.5px;
  fill: var(--text-muted);
  text-anchor: end;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.perf-y-label-zero {
  fill: var(--text-secondary);
  font-weight: 700;
}

/* Small tick marks on the left axis */
.perf-tick {
  stroke: var(--border-strong);
  stroke-width: 0.8;
  opacity: 0.6;
}

/* Vertical axis spine */
.perf-axis {
  stroke: var(--border-strong);
  stroke-width: 0.8;
  opacity: 0.5;
}

/* Subtle horizontal gridlines */
.perf-grid {
  stroke: var(--border-subtle);
  stroke-width: 0.5;
  opacity: 0.5;
}

/* Zero baseline — more prominent than gridlines */
.perf-zero-line {
  stroke: var(--border-strong);
  stroke-width: 1.2;
  opacity: 0.9;
  stroke-dasharray: none;
}

/* Average line — dashed, neutral (NOT accent, which would read as red in crimson) */
.perf-avg-line {
  stroke: #9ca3af; /* var(--text-secondary); */
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.85;
}

/* Average tag pill (drawn above the avg line at right end) — neutral grey */
.perf-avg-tag-bg {
  fill: #9ca3af; /* var(--text-secondary); */
  stroke: none;
  opacity: 0.95;
}

.perf-avg-tag-text {
  font-size: 8.5px;
  fill: #1f2937; /* var(--bg-elevated); */
  text-anchor: middle;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.perf-value-label {
  font-size: 8.5px;
  font-weight: 600;
  text-anchor: middle;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.perf-value-label.gain { fill: var(--gain); }
.perf-value-label.loss { fill: var(--loss); }

.perf-x-label {
  font-size: 9.5px;
  fill: var(--text-muted);
  text-anchor: middle;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Smaller variant for two-line date-range labels in the discrete chart */
.perf-x-label-multi {
  font-size: 6.5px;
  letter-spacing: 0.1px;
}

@keyframes perfBarReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   ACTIVE SHARE COLUMN — VU-meter style indicator
   ============================================================ */
.active-share-col {
  text-align: center;
  width: 36px;
  min-width: 36px;
}

.active-share-cell {
  text-align: center;
  vertical-align: middle;
  padding: 2px 4px !important;
  cursor: help;
}

/*
.vu-meter {
  display: inline-block;
  width: 14px;
  height: 26px;
  vertical-align: middle;
}
*/

.vu-meter {
  display: block;
  margin: 0 auto;
  width: 14px;
  height: 26px;
}

.vu-bar {
  transition: opacity 0.15s ease;
}

/* "Off" segments use a palette-aware muted colour so the meter
   adapts to the chosen theme (dark, crimson light, modern light) */
.vu-bar-off {
  fill: var(--border-strong);
  opacity: 0.25;
}

/* "Lit" segments use a fixed green→red gradient because these
   semantic colours are universal regardless of palette */
.vu-bar-lit { opacity: 1; }
.vu-bar-lit.vu-bar-1 { fill: #16a34a; }  /* deep green */
.vu-bar-lit.vu-bar-2 { fill: #65a30d; }  /* lime */
.vu-bar-lit.vu-bar-3 { fill: #ca8a04; }  /* amber */
.vu-bar-lit.vu-bar-4 { fill: #ea580c; }  /* orange */
.vu-bar-lit.vu-bar-5 { fill: #dc2626; }  /* red */

/* Highlight + hover handled by the existing th/td rules */

/* Mobile: stack the two charts vertically */
@media (max-width: 600px) {
  .perf-charts { grid-template-columns: 1fr; gap: 12px; }
}
.select-area { display: none; }

select {
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  outline: none;
  cursor: pointer;
  background: var(--bg-input);
  color: var(--text-primary);
}

option { background: var(--bg-elevated); color: var(--text-primary); }
::placeholder { color: var(--text-muted); }

/* ============================================================
   TABLE — sticky header fix using border-collapse: separate
   Sticky doesn't work reliably with border-collapse: collapse,
   so we use separate + apply borders to td/th individually.
   ============================================================ */
#tableContainer { width: 100%; margin: 0; }

#resultsTable {
  width: 100%;
  background: transparent;
  border: none;
  overflow: visible;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: transparent;
}

th, td {
  padding: 5px 9px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

th:not(:first-child), td:not(:first-child) {
  text-align: right;
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1;
  font-size: 11.5px;
}

td:first-child {
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font);
}

td {
  background: var(--bg-elevated);
  color: var(--text-primary);
  transition: background 0.08s ease;
}

td.gain { color: var(--gain); font-weight: 600; }
td.loss { color: var(--loss); font-weight: 600; }

/* Sticky table header - applied to thead (more reliable than th in Chrome) */
thead {
  position: sticky;
  top: 0;
  z-index: 95;
}

th {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  background: var(--bg-pane);
  z-index: 95;
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 0 var(--border-strong);
}

th:hover { background: var(--bg-hover); color: var(--text-primary); }
th.highlight-col { background: var(--bg-hover); color: var(--accent); }
th.highlight-col:hover { background: var(--bg-selected); color: var(--accent-hover); }

#results tbody tr { cursor: pointer; }

tr:hover td { background: var(--bg-hover); }
tr.loser-row td { background: var(--loss-bg); }
tr.loser-row:hover td { background: var(--loss-bg-strong); }

#results tbody tr:nth-child(even) td { background: var(--bg-row-alt); }
#results tbody tr:nth-child(even):hover td { background: var(--bg-hover); }

.fee-column { display: none; }

.fee-toggle {
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
  text-transform: uppercase;
}

.fee-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-muted); }
.fee-toggle.active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  font-weight: 700;
}

th.has-tooltip::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 4px 4px 0;
  border-color: transparent var(--text-muted) transparent transparent;
}

th.has-tooltip:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%; right: 0;
  margin-top: 4px;
  padding: 7px 10px;
  background: var(--bg-pane);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  font-size: 11px;
  white-space: nowrap;
  border-radius: var(--r);
  box-shadow: var(--sh-md);
  z-index: 1000;
  pointer-events: none;
}

.sort-icon {
  font-family: Arial, sans-serif;
  font-size: 8px;
  opacity: 0.5;
  margin-left: 2px;
}

/* ============================================================
   COMPANY CHART — pane-top-right
   ============================================================ */
.section-container { width: 100%; position: relative; }
.section-toggle-btn { display: none; }

.company-chart-wrapper {
  width: 100%;
  margin: 0;
  padding: 8px 12px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.company-chart-title { display: none; }
.company-chart { margin-top: 4px; padding: 0 4px; }

.company-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 3px 0;
}

.company-row-alt { background: var(--bg-row-alt); }

.company-label {
  width: 130px;
  text-align: right;
  flex-shrink: 0;
  font-size: 11.5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  color: var(--text-primary);
}

.company-name {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.company-count {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--mono);
}

.company-separator {
  width: 1px;
  height: 24px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.company-chart-area {
  position: relative;
  height: 42px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r);
  flex: 1;
  min-width: 0;
}

.company-row-alt .company-chart-area { background: var(--bg-base); }

.range-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
}

.marker-worst, .marker-best {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

.marker-avg {
  position: absolute;
  top: 40%;
  left: 0;
  transform: translateX(-50%);
  z-index: 30;
}

.marker-value {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--mono);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.marker-value-avg {
  font-weight: 700;
  font-size: 11px;
  color: var(--accent);
  font-family: var(--mono);
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  transform: translateX(-25%);
  white-space: nowrap;
}

.marker-value-left {
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
}

.marker-value-right {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
}

.marker-bar { width: 5px; height: 30px; border-radius: 2px; }
.marker-bar-worst { background: var(--loss); }
.marker-bar-best  { background: var(--gain); }

.marker-dot {
  width: 10px; height: 10px;
  background: var(--accent);
  border: 2px solid var(--bg-base);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--accent);
}

.scale-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.scale-area { position: relative; height: 18px; flex: 1; min-width: 0; }

.scale-tick {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.scale-line { width: 1px; height: 5px; background: var(--text-muted); }
.scale-label {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  padding: 6px;
  background: var(--bg-pane);
  border-radius: var(--r);
  border: 1px solid var(--border-subtle);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.legend-marker { width: 4px; height: 14px; border-radius: 2px; }
.legend-marker-worst { background: var(--loss); }
.legend-marker-best  { background: var(--gain); }
.legend-marker-avg {
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

/* ============================================================
   HEATMAP — pane-bottom-right
   ============================================================ */
#sectorHeatmapContainer { padding: 8px 12px; }

.heatmap-header {
  background: var(--bg-pane);
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}

.heatmap-header.heatmap-corner-tl {
  justify-content: flex-start;
  padding-left: 12px;
  border-radius: var(--r-lg) 0 0 0;
}

.heatmap-header.heatmap-corner-tr {
  border-radius: 0 var(--r-lg) 0 0;
}

.heatmap-sector-name {
  background: var(--bg-elevated);
  padding: 8px 10px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  font-size: 11.5px;
  border: 1px solid var(--border-subtle);
  border-right: 2px solid var(--border-strong);
}

.heatmap-sector-name.alt { background: var(--bg-row-alt); }
.heatmap-sector-name.heatmap-corner-bl { border-radius: 0 0 0 var(--r-lg); }

.heatmap-cell {
  border: 1px solid var(--border-subtle);
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.heatmap-cell-empty {
  cursor: default;
  background: var(--bg-input) !important;
}

.heatmap-cell.heatmap-corner-br { border-radius: 0 0 var(--r-lg) 0; }

/* ============================================================
   TOOLTIPS — override inline white styles
   ============================================================ */
#heatmapTooltip,
#companyChartTooltip,
#holdingsTooltip {
  background: var(--bg-pane) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: var(--sh-lg) !important;
  border-radius: var(--r-lg) !important;
}

#tooltipTitle,
#companyTooltipTitle,
#holdingsTooltipTitle {
  color: var(--accent) !important;
  border-bottom-color: var(--border-subtle) !important;
}

#tooltipContent,
#companyTooltipContent,
#holdingsTooltipContent { color: var(--text-primary) !important; }

/* ============================================================
   LOADING / EMPTY STATES
   ============================================================ */
.loading {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 30px 20px;
  font-size: 12.5px;
}

/* ============================================================
   RESPONSIVE — collapse 3-pane to stacked below 900px
   ============================================================ */
@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; }
  body { display: block; padding-top: calc(var(--header-h) + var(--toolbar-h)); }

  .header-controls { overflow-x: auto; }

  .workspace {
    display: block;
    flex: none;
    height: auto;
    padding: 8px;
    overflow: visible;
  }

  .right-column {
    display: block;
    height: auto;
  }

  .gutter { display: none; }

  .pane {
    margin-bottom: 8px;
    min-height: 240px;
  }
}

@media (max-width: 600px) {
  .header { padding: 0 10px; gap: 10px; }
  .header-logo { height: 24px; }
  .controls-divider { display: none; }
  .filter-label { display: none; }

  .pane-header { height: 28px; padding: 4px 10px; }
  .pane-title { font-size: 9.5px; }
  .pane-info { font-size: 11px; }
}

/* ============================================================
   ETF MODE — amber accent
   ============================================================ */
body.etf-mode {
  --accent:           #f59e0b;
  --accent-hover:     #fbbf24;
  --accent-muted:     #92400e;
  --accent-bg-subtle: rgba(245, 158, 11, 0.10);
  --accent-bg-strong: rgba(245, 158, 11, 0.18);
  --text-on-accent:   #1c0f00;
}

/* ============================================================
   PALETTE: CRIMSON LIGHT (original FundMonkey look)
   White surfaces, crimson accent, soft pink alternating rows.
   ============================================================ */
body.palette-crimson {
  --bg-base:          #ffffff;
  --bg-elevated:      #ffffff;
  --bg-pane:          #fcefef;
  --bg-pane-header:   #f8dcd8;
  --bg-hover:         #fff5f4;
  --bg-selected:      #ffe5e3;
  --bg-input:         #ffffff;
  --bg-row-alt:       #fceee8;

  --border-subtle:    #f0d0ce;
  --border-strong:    #e8b8b5;

  --text-primary:     #1a1a1a;
  --text-secondary:   #6b3a37;
  --text-muted:       #888888;
  --text-on-accent:   #ffffff;

  --accent:           #b02a25;
  --accent-hover:     #c93e38;
  --accent-muted:     #8a1f1b;
  --accent-bg-subtle: rgba(176, 42, 37, 0.08);
  --accent-bg-strong: rgba(176, 42, 37, 0.18);

  --gain:             #1e7e34;
  --gain-bg:          rgba(30, 126, 52, 0.10);
  --gain-bg-strong:   rgba(30, 126, 52, 0.20);
  --loss:             #c82333;
  --loss-bg:          rgba(200, 35, 51, 0.10);
  --loss-bg-strong:   rgba(200, 35, 51, 0.20);

  /* Toolbar matches the pane-header band (Fund Manager Performance) */
  --toolbar-bg:        var(--bg-pane-header);
  --toolbar-text:      var(--text-secondary);
  --toolbar-text-mute: var(--text-muted);
  --toolbar-btn-bg:    var(--bg-hover);
  --toolbar-btn-border:var(--border-strong);
  --toolbar-btn-hover: var(--bg-selected);
}

/* ETF mode under crimson palette flips accent to teal so the two
   modes remain visually distinct */
body.palette-crimson.etf-mode {
  --accent:           #117a8b;
  --accent-hover:     #138496;
  --accent-muted:     #0c5460;
  --accent-bg-subtle: rgba(17, 122, 139, 0.08);
  --accent-bg-strong: rgba(17, 122, 139, 0.18);
  --text-on-accent:   #ffffff;
}

/* ============================================================
   PALETTE: MODERN LIGHT (clean, Stripe/Linear-inspired)
   Off-white surfaces, deep slate text, indigo accent.
   ============================================================ */
body.palette-light {
  --bg-base:          #f5f7fa;
  --bg-elevated:      #ffffff;
  --bg-pane:          #f8fafc;
  --bg-pane-header:   #eef2f7;
  --bg-hover:         #f1f5f9;
  --bg-selected:      #dbeafe;
  --bg-input:         #ffffff;
  --bg-row-alt:       #f8fafc;

  --border-subtle:    #e2e8f0;
  --border-strong:    #cbd5e1;

  --text-primary:     #0f172a;
  --text-secondary:   #475569;
  --text-muted:       #94a3b8;
  --text-on-accent:   #ffffff;

  --accent:           #0369a1;
  --accent-hover:     #0284c7;
  --accent-muted:     #075985;
  --accent-bg-subtle: rgba(3, 105, 161, 0.08);
  --accent-bg-strong: rgba(3, 105, 161, 0.18);

  --gain:             #15803d;
  --gain-bg:          rgba(21, 128, 61, 0.10);
  --gain-bg-strong:   rgba(21, 128, 61, 0.20);
  --loss:             #b91c1c;
  --loss-bg:          rgba(185, 28, 28, 0.10);
  --loss-bg-strong:   rgba(185, 28, 28, 0.20);

  /* Toolbar matches the pane-header band (Fund Manager Performance) */
  --toolbar-bg:        var(--bg-pane-header);
  --toolbar-text:      var(--text-secondary);
  --toolbar-text-mute: var(--text-muted);
  --toolbar-btn-bg:    var(--bg-hover);
  --toolbar-btn-border:var(--border-strong);
  --toolbar-btn-hover: var(--bg-selected);
}

body.palette-light.etf-mode {
  --accent:           #c2410c;
  --accent-hover:     #ea580c;
  --accent-muted:     #9a3412;
  --accent-bg-subtle: rgba(194, 65, 12, 0.08);
  --accent-bg-strong: rgba(194, 65, 12, 0.18);
  --text-on-accent:   #ffffff;
}

/* ============================================================
   THEME PICKER — submenu inside burger menu
   ============================================================ */
.burger-menu-label {
  display: block;
  padding: 8px 16px 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-subtle);
  margin-top: 4px;
}

.burger-menu .palette-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}

.burger-menu .palette-swatch {
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

.palette-swatch.swatch-dark    { background: linear-gradient(135deg, #0d1421 50%, #22d3ee 50%); }
.palette-swatch.swatch-crimson { background: linear-gradient(135deg, #ffffff 50%, #b02a25 50%); }
.palette-swatch.swatch-light   { background: linear-gradient(135deg, #f5f7fa 50%, #0369a1 50%); }

.burger-menu .palette-option.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-bg-subtle);
}