/**
 * Quick Compare Overlay - full-size side-by-side comparison overlay
 *
 * Stacking mirrors .v2-overlay-root (fund profile overlay) but sits one layer
 * above so it can open on top of an existing profile overlay if needed.
 */

#v2-quick-compare-overlay-root {
  position: fixed;
  top: var(--header-h, 54px);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 600;
  display: none;
  transition: left 0.2s ease;
}

#v2-quick-compare-overlay-root[aria-hidden="false"] {
  display: block;
}

.is-collapsed #v2-quick-compare-overlay-root {
  left: 76px;
}

@media (max-width: 767px) {
  #v2-quick-compare-overlay-root {
    left: 0;
  }
}

#v2-quick-compare-overlay-root .qc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

#v2-quick-compare-overlay-root .qc-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--v2-bg-page, #f8f9fa);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}

/* ---------- Header ---------- */

.qc-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--v2-bg-surface, #fff);
  border-bottom: 1px solid var(--v2-border, #dee2e6);
}

.qc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.qc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-primary, #212529);
  white-space: nowrap;
}

.qc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--v2-bg-hover, #f1f3f4);
  border: 1px solid var(--v2-border-light, #e9ecef);
  border-radius: 14px;
  font-size: 12px;
  color: var(--v2-text-primary, #212529);
}

.qc-chip-type {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: var(--v2-text-muted, #6c757d);
  background: var(--v2-bg-page, #f8f9fa);
  padding: 1px 6px;
  border-radius: 8px;
}

.qc-chip-truncated {
  background: #fff3cd;
  border-color: #ffe69c;
  color: #664d03;
  font-weight: 600;
  font-size: 11px;
}

.qc-chip-label {
  font-weight: 600;
}

.qc-chip-remove {
  background: none;
  border: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--v2-text-muted, #6c757d);
  cursor: pointer;
  padding: 0 2px;
}

.qc-chip-remove:hover {
  color: var(--v2-danger, #dc3545);
}

.qc-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.qc-control {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--v2-text-muted, #6c757d);
}

.qc-control input,
.qc-control select {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 4px;
  background: var(--v2-bg-input, #fff);
  color: var(--v2-text-primary, #212529);
}

.qc-control input {
  width: 100px;
}

/* Bench autocomplete: stretch the wrapper-hosted input to the wrapper width
   set inline in the markup, and override the autocomplete's default input
   styling so it matches the period select next to it. */
.qc-control-bench .v2-autocomplete {
  display: inline-block;
}

.qc-control-bench .v2-auto-input {
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 4px;
  background: var(--v2-bg-input, #fff);
  color: var(--v2-text-primary, #212529);
  box-sizing: border-box;
}

/* Keep the autocomplete dropdown above the overlay's z-index (overlay is 600,
   the dropdown's default 9999 is fine but we make the local stacking explicit). */
#v2-quick-compare-overlay-root .v2-ac-dropdown {
  z-index: 10000;
}

#qc-close {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  color: var(--v2-text-secondary, #495057);
  border-radius: 4px;
}

#qc-close:hover {
  background: var(--v2-bg-hover, #f1f3f4);
  color: var(--v2-text-primary, #212529);
}

/* ---------- Tab Bar ---------- */

.qc-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: var(--v2-bg-surface, #fff);
  border-bottom: 1px solid var(--v2-border, #dee2e6);
}

.qc-tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-secondary, #495057);
  cursor: pointer;
  margin-bottom: -1px;
}

.qc-tab:hover {
  color: var(--v2-text-primary, #212529);
}

.qc-tab.active {
  color: var(--v2-accent, #0964A0);
  border-bottom-color: var(--v2-accent, #0964A0);
}

/* ---------- Body / Panels ---------- */

.qc-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 20px;
  background: var(--v2-bg-page, #f8f9fa);
}

.qc-panel {
  display: none;
}

.qc-panel.active {
  display: block;
}

.qc-empty,
.qc-error {
  padding: 24px;
  text-align: center;
  color: var(--v2-text-muted, #6c757d);
  font-size: 14px;
}

.qc-error {
  color: var(--v2-danger, #dc3545);
}

.qc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--v2-text-muted, #6c757d);
  font-size: 13px;
}

.qc-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--v2-border, #dee2e6);
  border-top-color: var(--v2-accent, #0964A0);
  border-radius: 50%;
  animation: qc-spin 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes qc-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Side-by-side primitives (used by tab modules) ---------- */

.qc-grid {
  display: grid;
  gap: 12px;
}

/* Per-entity column heading row used by composition tiles */
.qc-tile {
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border-light, #e9ecef);
  border-radius: 6px;
  padding: 12px;
}

.qc-tile-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-text-secondary, #495057);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qc-tile-header .qc-tile-type {
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--v2-bg-hover, #f1f3f4);
  color: var(--v2-text-muted, #6c757d);
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 700;
}

.qc-tile-na {
  font-size: 12px;
  color: var(--v2-text-muted, #6c757d);
  font-style: italic;
  text-align: center;
  padding: 24px 8px;
}

/* Comparison table — first column is metric label, rest are entities */
.qc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--v2-bg-surface, #fff);
  font-size: 13px;
}

.qc-table th,
.qc-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--v2-border-light, #e9ecef);
  text-align: right;
  white-space: nowrap;
}

.qc-table th {
  background: var(--v2-bg-hover, #f1f3f4);
  font-weight: 600;
  color: var(--v2-text-secondary, #495057);
  font-size: 12px;
  text-align: right;
  position: sticky;
  top: 0;
  z-index: 1;
}

.qc-table th.qc-metric-col,
.qc-table td.qc-metric-col {
  text-align: left;
  font-weight: 500;
  color: var(--v2-text-primary, #212529);
  position: sticky;
  left: 0;
  background: var(--v2-bg-surface, #fff);
  z-index: 2;
}

.qc-table th.qc-metric-col {
  background: var(--v2-bg-hover, #f1f3f4);
  z-index: 3;
}

.qc-table tbody tr:hover td {
  background: var(--v2-bg-hover, #f1f3f4);
}

.qc-table .qc-cell-na {
  color: var(--v2-text-muted, #6c757d);
  font-style: italic;
}

/**
 * Benchmark column (Performance / Risk / Fundamentals tabs). Visually offset
 * from the entity columns with a left border + subtle background so it reads
 * as "reference data" rather than another peer column.
 */
.qc-table th.qc-bench-col,
.qc-table td.qc-bench-col {
  border-left: 2px solid var(--v2-border, #dee2e6);
  background: var(--v2-bg-page, #f8f9fa);
  color: var(--v2-text-secondary, #495057);
  font-weight: 500;
}

.qc-table tbody tr:hover td.qc-bench-col {
  background: var(--v2-bg-hover, #eef1f4);
}

.qc-section {
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border-light, #e9ecef);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  overflow: auto;
}

.qc-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-primary, #212529);
  margin: 0 0 12px;
}

/* Section header row that hosts a title plus right-aligned control(s) —
 * used by the Risk tab to anchor its Period dropdown next to the
 * "Risk & Return Statistics" title (the Period control was previously
 * in the global overlay header but only Risk uses it). */
.qc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.qc-section-header .qc-section-title {
  margin: 0;
}

.qc-section-control {
  flex-shrink: 0;
}

.qc-chart {
  width: 100%;
  height: 360px;
}

/* =========================================================================
 * Composition tab — type segmented control + per-breakdown card grid
 * ========================================================================= */

.qc-comp-typebar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--v2-bg-page, #f1f3f4);
  border: 1px solid var(--v2-border-light, #e9ecef);
  border-radius: 6px;
  padding: 2px;
  margin: 0 0 12px;
}

.qc-comp-typebtn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-secondary, #495057);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.qc-comp-typebtn:hover {
  color: var(--v2-text-primary, #212529);
}

.qc-comp-typebtn.active {
  background: var(--v2-bg-surface, #fff);
  color: var(--v2-text-primary, #212529);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.qc-comp-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/**
 * Two-up card grid for the Equity and Fixed Income tabs (which produce 3-4
 * cards each). `auto-fit` keeps it single-column at narrow widths so cards
 * don't get squeezed below a usable bar-chart size. Asset Class only ever
 * has one card, so it stays in the default column flow.
 */
.qc-comp-cards-equity,
.qc-comp-cards-fixed-income {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 16px;
}

.qc-comp-card {
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border-light, #e9ecef);
  border-radius: 6px;
  overflow: hidden;
  /* Self-contain block formatting context so internal flex/grid descendants
   * (e.g. Highcharts' SVG container) can't push the card past its bounds. */
  min-width: 0;
}

/**
 * Featured / hero card — spans the full row in the 2-up grid layout. Used
 * for cards like "Key Ratios" on the Equity Fundamentals tab where we want
 * the chart to have the full overlay width to itself.
 */
.qc-comp-cards-equity > .qc-comp-card-featured,
.qc-comp-cards-fixed-income > .qc-comp-card-featured {
  grid-column: 1 / -1;
}

.qc-comp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--v2-border-light, #e9ecef);
  background: var(--v2-bg-page, #f8f9fa);
}

.qc-comp-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-primary, #212529);
  margin: 0;
}

.qc-comp-card-toggle {
  display: inline-flex;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 4px;
  overflow: hidden;
  background: var(--v2-bg-surface, #fff);
}

.qc-comp-tbtn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-text-secondary, #495057);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.qc-comp-tbtn + .qc-comp-tbtn {
  border-left: 1px solid var(--v2-border, #dee2e6);
}

.qc-comp-tbtn:hover {
  color: var(--v2-text-primary, #212529);
  background: var(--v2-bg-hover, #f1f3f4);
}

.qc-comp-tbtn.active {
  background: var(--v2-primary, #0964A0);
  color: #fff;
}

.qc-comp-card-body {
  padding: 12px 14px;
}

.qc-comp-chart-host {
  width: 100%;
  /* Defensive: keep Highcharts' SVG from ever exceeding the card width.
   * The JS layer also ResizeObserves and reflows on container changes;
   * this just makes sure no transient SVG sizing leaks past the card. */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  min-height: 280px;
}

.qc-comp-grid-wrap {
  overflow: auto;
}

.qc-comp-grid {
  width: 100%;
  font-size: 12px;
}

.qc-comp-footnote {
  margin-top: 12px;
  font-size: 11px;
  color: var(--v2-text-muted, #6c757d);
}

.qc-comp-footnote:empty {
  display: none;
}

/* When the overlay is open, prevent body scroll behind it */
body.qc-overlay-open {
  overflow: hidden;
}

/* =========================================================================
 * Dark theme overrides
 *
 * The light-theme rules above all reference --v2-* CSS variables that should
 * automatically remap when `<html class="dark-theme">` is set, but in
 * practice several surfaces (qc-body, qc-section, qc-table cells, comp
 * cards, typebars) were rendering white in dark mode. Pinning explicit
 * dark colors here guarantees the overlay reads correctly regardless of
 * how the variable cascade behaves around the fixed-position root.
 *
 * Palette mirrors v2-overlay.css's `.dark-theme` block:
 *   page    #0c111a    surface #111520    elevated #161b26
 *   border  #1e2433    border-light #252d3d
 *   primary #e6e9f0    secondary #c4c9d4   muted #8b92a5
 *   accent  #0d7cc4
 * ========================================================================= */

/* ---------- Container / Header ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-container {
  background: #0c111a;
}

.dark-theme #v2-quick-compare-overlay-root .qc-header {
  background: #111520;
  border-bottom-color: #1e2433;
}

.dark-theme #v2-quick-compare-overlay-root .qc-title {
  color: #e6e9f0;
}

/* Ticker chips — dark surface, light text. Per-entity-type chips
 * (qc-chip-etf, qc-chip-mutual_fund, etc.) all share the same base
 * .qc-chip rule so a single override covers them. */
.dark-theme #v2-quick-compare-overlay-root .qc-chip {
  background: #161b26;
  border-color: #252d3d;
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-chip-type {
  background: #0c111a;
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-chip-remove {
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-chip-remove:hover {
  color: #e05b5b;
}

/* Truncated-list warning chip stays amber but tuned for dark contrast. */
.dark-theme #v2-quick-compare-overlay-root .qc-chip-truncated {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

/* ---------- Header right (controls, close) ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-control {
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-control input,
.dark-theme #v2-quick-compare-overlay-root .qc-control select,
.dark-theme #v2-quick-compare-overlay-root .qc-control-bench .v2-auto-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: #1e2433;
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-control input::placeholder,
.dark-theme #v2-quick-compare-overlay-root .qc-control-bench .v2-auto-input::placeholder {
  color: #6b7280;
}

.dark-theme #v2-quick-compare-overlay-root #qc-close {
  color: #c4c9d4;
}

.dark-theme #v2-quick-compare-overlay-root #qc-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6e9f0;
}

/* ---------- Tab bar ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-tabs {
  background: #111520;
  border-bottom-color: #1e2433;
}

.dark-theme #v2-quick-compare-overlay-root .qc-tab {
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-tab:hover {
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-tab.active {
  color: #2BA8E8;
  border-bottom-color: #2BA8E8;
}

/* ---------- Body / panels ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-body {
  background: #0c111a;
}

.dark-theme #v2-quick-compare-overlay-root .qc-empty,
.dark-theme #v2-quick-compare-overlay-root .qc-loading {
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-error {
  color: #e05b5b;
}

.dark-theme #v2-quick-compare-overlay-root .qc-loading::before {
  border-color: #1e2433;
  border-top-color: #2BA8E8;
}

/* ---------- Composition tile primitives ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-tile {
  background: #111520;
  border-color: #252d3d;
}

.dark-theme #v2-quick-compare-overlay-root .qc-tile-header {
  color: #c4c9d4;
}

.dark-theme #v2-quick-compare-overlay-root .qc-tile-header .qc-tile-type {
  background: rgba(255, 255, 255, 0.05);
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-tile-na {
  color: #8b92a5;
}

/* ---------- Comparison tables (Performance / Risk / Fundamentals) ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-table {
  background: #111520;
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-table th,
.dark-theme #v2-quick-compare-overlay-root .qc-table td {
  border-bottom-color: #1e2433;
}

.dark-theme #v2-quick-compare-overlay-root .qc-table th {
  background: #161b26;
  color: #c4c9d4;
}

.dark-theme #v2-quick-compare-overlay-root .qc-table th.qc-metric-col,
.dark-theme #v2-quick-compare-overlay-root .qc-table td.qc-metric-col {
  background: #111520;
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-table th.qc-metric-col {
  background: #161b26;
}

.dark-theme #v2-quick-compare-overlay-root .qc-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.dark-theme #v2-quick-compare-overlay-root .qc-table .qc-cell-na {
  color: #8b92a5;
}

/* Bench column — keep visually distinct from peer columns by using the
 * darker page color and a stronger left divider, with light-but-secondary
 * text so it still reads as reference data rather than noise. */
.dark-theme #v2-quick-compare-overlay-root .qc-table th.qc-bench-col,
.dark-theme #v2-quick-compare-overlay-root .qc-table td.qc-bench-col {
  background: #0c111a;
  border-left-color: #1e2433;
  color: #c4c9d4;
}

.dark-theme #v2-quick-compare-overlay-root .qc-table tbody tr:hover td.qc-bench-col {
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- Section blocks (Performance, Risk wrappers) ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-section {
  background: #111520;
  border-color: #252d3d;
}

.dark-theme #v2-quick-compare-overlay-root .qc-section-title {
  color: #e6e9f0;
}

/* ---------- Composition / Fundamentals: type segmented control ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-comp-typebar {
  background: #0c111a;
  border-color: #252d3d;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-typebtn {
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-typebtn:hover {
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-typebtn.active {
  background: #161b26;
  color: #e6e9f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- Composition / Fundamentals: per-breakdown cards ---------- */
.dark-theme #v2-quick-compare-overlay-root .qc-comp-card {
  background: #111520;
  border-color: #252d3d;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-card-header {
  background: #161b26;
  border-bottom-color: #252d3d;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-card-title {
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-card-toggle {
  background: #0c111a;
  border-color: #1e2433;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-tbtn {
  color: #8b92a5;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-tbtn + .qc-comp-tbtn {
  border-left-color: #1e2433;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-tbtn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e6e9f0;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-tbtn.active {
  background: #0d7cc4;
  color: #fff;
}

.dark-theme #v2-quick-compare-overlay-root .qc-comp-footnote {
  color: #8b92a5;
}