/* ============================================================================
   ETF Dashboard — V2 Stylesheet
   Aligned with site-wide patterns (League Tables, Explorer, etc.)
   Uses shared V2 design tokens from v2-overlay.css (light/dark aware)
   ============================================================================ */

/* -- Pane override (beats default display:grid from v2-overlay.css) --------- */
#v2-dashboards-etf.v2-tool-pane.active {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* -- Universe bar wrapper -------------------------------------------------- */
.dash-universe-bar {
  flex-shrink: 0;
  border-bottom: 1px solid var(--v2-border);
}

.dash-universe-bar:empty {
  display: none;
}

/* Hide the Custom Universe button on the dashboard for now */
.dash-universe-bar [data-action="edit-universe"] {
  display: none;
}


/* -- Dashboard root — mirrors .mm-page from Market Movers ----------------- */
.etf-dashboard-root {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--v2-text-primary);
  font-size: 13px;
  position: relative;
}

/* -- Control Bar ----------------------------------------------------------- */
.dash-control-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--v2-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--v2-bg-surface);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.universe-badge {
  display: flex;
  flex-direction: column;
  padding-right: 16px;
  border-right: 1px solid var(--v2-border);
}

.universe-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--v2-text-muted);
  font-weight: 600;
}

.universe-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--v2-accent);
  font-variant-numeric: tabular-nums;
}

.view-header {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Share-button mount lives inside .view-header alongside the title and
 * Launch-in-Database link. Without this it'd render as a block element
 * and drop the share button onto its own line. */
.view-header .dash-share {
  display: inline-flex;
  align-items: center;
}

.view-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--v2-text-primary);
  margin: 0;
  line-height: 1.2;
}

.launch-db-link {
  font-size: 11px;
  color: var(--v2-accent);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity .15s;
}
.launch-db-link:hover { opacity: 1; }

.view-selector {
  padding: 8px 32px 8px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  min-width: 240px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.view-selector:hover { border-color: var(--v2-accent); }
.view-selector:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.view-selector option { background: var(--v2-bg-surface); color: var(--v2-text-primary); padding: 6px 10px; }

.group-by-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-by-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v2-text-muted);
  white-space: nowrap;
}
.group-by-selector {
  min-width: 160px;
}

.period-bar {
  display: inline-flex;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  overflow: hidden;
}

.period-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--v2-bg-elevated);
  color: var(--v2-text-muted);
  border: none;
  border-right: 1px solid var(--v2-border);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.period-btn:last-child { border-right: none; }
.period-btn:hover { color: var(--v2-text-primary); background: var(--v2-bg-hover); }
.period-btn.active { background: var(--v2-accent); color: #fff; }


/* ============================================================================
   KPI Row
   ============================================================================ */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 10px 16px;
  flex-shrink: 0;
}

.kpi-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--v2-text-muted);
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-value.positive { color: var(--color-success, #17B26A); }
.kpi-value.negative { color: var(--color-danger, #E11D48); }
.kpi-value.neutral  { color: var(--v2-accent); }

.kpi-delta {
  font-size: 11px;
  margin-top: 2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.positive { color: var(--color-success, #17B26A); }
.kpi-delta.negative { color: var(--color-danger, #E11D48); }


/* ============================================================================
   Chart Area
   ============================================================================ */

.chart-area {
  padding: 0 16px 10px;
  flex-shrink: 0;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chart-row.single { grid-template-columns: 1fr; }

.chart-panel {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-text-muted);
  margin-bottom: 8px;
  flex-shrink: 0;
}

/*
  The render-to wrapper carries an explicit inline height set by ensureContainer
  (and is reset to 100% on fullscreenOpen by chartHelpers.js), so the inner
  highcharts-container should always fill its parent. Capping it to 320px here
  meant that in Highcharts exporting fullscreen the OUTER renderTo would expand
  to the viewport but the INNER container stayed at 320px, leaving the chart
  visually cropped (only fixing itself when the export menu forced a reflow).
*/
.chart-panel .highcharts-container {
  width: 100% !important;
  max-height: 100%;
}

/*
  When the renderTo is in fullscreen (Highcharts uses the standard Fullscreen API
  which makes the browser apply :fullscreen to that element), force its descendants
  to fill the viewport. Vendor-prefixed pseudo-classes are split into separate
  rules — combining them in one selector list causes the entire rule to be
  discarded by browsers that don't recognise one of the prefixes.
*/
:fullscreen { width: 100vw !important; height: 100vh !important; max-height: none !important; }
:-webkit-full-screen { width: 100vw !important; height: 100vh !important; max-height: none !important; }
:-ms-fullscreen { width: 100vw !important; height: 100vh !important; max-height: none !important; }

:fullscreen .highcharts-container { width: 100% !important; height: 100% !important; max-height: none !important; }
:-webkit-full-screen .highcharts-container { width: 100% !important; height: 100% !important; max-height: none !important; }
:-ms-fullscreen .highcharts-container { width: 100% !important; height: 100% !important; max-height: none !important; }


/* ============================================================================
   Composition sub-nav
   ============================================================================ */

.comp-subnav {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
}

.comp-subnav-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--v2-bg-elevated);
  color: var(--v2-text-muted);
  border: 1px solid var(--v2-border);
  cursor: pointer;
  transition: all .15s;
}
.comp-subnav-btn:hover { color: var(--v2-text-primary); }
.comp-subnav-btn.active {
  background: var(--v2-accent-bg);
  color: var(--v2-text-primary);
  border-color: var(--v2-accent);
}

.comp-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 10px;
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.comp-table th {
  text-align: left;
  color: var(--v2-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--v2-border);
}
.comp-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--v2-border);
  color: var(--v2-text-primary);
  font-variant-numeric: tabular-nums;
}
.comp-table .weight-bar-cell { width: 120px; }
.comp-weight-bar {
  height: 6px;
  background: var(--v2-accent);
  border-radius: 3px;
  transition: width .3s;
}


/* ============================================================================
   Heatmap / Treemap
   ============================================================================ */

.heatmap-config {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}
.heatmap-config label {
  font-size: 11px;
  color: var(--v2-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.heatmap-config select {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  outline: none;
}

/* Metric + Period toggles inside the heatmap controls. Mirror the look of
   the landscape view's control groups so both dashboard views feel the same. */
.heatmap-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.heatmap-control-group .control-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--v2-text-muted, #6c757d);
  white-space: nowrap;
}

.treemap-container {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 4px;
  min-height: 500px;
  overflow: hidden;
}

.treemap-container .node {
  overflow: hidden;
  position: absolute;
  border: 1px solid rgba(0,0,0,0.15);
  font-size: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: opacity .15s;
}
.treemap-container .node:hover { opacity: 0.85; }

/* Treemap tooltip markup is now rendered inside a Highcharts tooltip
   (useHTML: true), not a standalone positioned <div>. Keep only the
   type/spacing rules here; the container visuals (bg/border/position)
   come from Highcharts tooltip options so they pick up dark-mode colors. */
.treemap-tooltip { font-size: 12px; max-width: 300px; color: var(--v2-text-primary); }
.treemap-tooltip .tt-ticker { font-weight: 700; color: var(--v2-accent); }
.treemap-tooltip .tt-name { color: var(--v2-text-muted); font-size: 11px; }
.treemap-tooltip .tt-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 2px; }
.treemap-tooltip .tt-label { color: var(--v2-text-muted); }
.treemap-tooltip .tt-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v2-text-primary); }

/* Highcharts wraps our HTML in .highcharts-tooltip. Force the dark-mode
   container/text colors so the treemap tooltip reads correctly on the
   dark dashboard background even when useHTML is on (inline Highcharts
   styles can otherwise bleed through the wrapper). */
.dark-theme .highcharts-tooltip > span,
.dark-theme .highcharts-tooltip-box {
  color: #e6e9f0 !important;
  fill: rgba(17, 21, 32, 0.95) !important;
  stroke: #2d3748 !important;
}
.dark-theme .treemap-tooltip { color: #e6e9f0; }
.dark-theme .treemap-tooltip .tt-name,
.dark-theme .treemap-tooltip .tt-label { color: #9CA3AF; }
.dark-theme .treemap-tooltip .tt-val { color: #e6e9f0; }


/* ============================================================================
   Leaders Grid
   ============================================================================ */

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px 10px;
}

.leader-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow: hidden;
}

.leader-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--v2-border);
}

.leader-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.leader-table thead th {
  text-align: left;
  color: var(--v2-text-muted);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 0;
  border-bottom: 1px solid var(--v2-border);
}

.leader-table tbody tr {
  transition: background .1s;
}
.leader-table tbody tr:hover {
  background: var(--v2-bg-hover);
}

.leader-table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--v2-border-light);
  vertical-align: middle;
  color: var(--v2-text-primary);
  font-variant-numeric: tabular-nums;
}

.leader-ticker {
  font-weight: 700;
  color: var(--v2-accent);
  font-size: 11px;
  white-space: nowrap;
  padding-right: 8px !important;
}

.leader-name {
  color: var(--v2-text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-value {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.leader-value.positive { color: var(--color-success, #17B26A); }
.leader-value.negative { color: var(--color-danger, #E11D48); }


/* ============================================================================
   Loading overlay
   ============================================================================ */

.dash-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--v2-bg-page);
  opacity: 0.92;
  z-index: 100;
  gap: 12px;
  color: var(--v2-text-secondary);
  font-size: 13px;
  border-radius: 6px;
  transition: opacity .2s;
}
.dash-loading.hidden { opacity: 0; pointer-events: none; }

.loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--v2-border);
  border-top-color: var(--v2-accent);
  border-radius: 50%;
  animation: dash-spin .8s linear infinite;
}

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


/* ============================================================================
   Skeleton placeholders
   ============================================================================ */

.skeleton {
  background: linear-gradient(90deg, var(--v2-bg-elevated) 25%, var(--v2-bg-hover) 50%, var(--v2-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: dash-shimmer 1.5s infinite;
  border-radius: 6px;
}
.skeleton-kpi { height: 70px; }
.skeleton-chart { height: 260px; }
.skeleton-leader { height: 250px; }

@keyframes dash-shimmer { to { background-position: -200% 0; } }


/* ============================================================================
   Responsive
   ============================================================================ */

/* ============================================================================
   Landscape Controls (Group By / Frequency toggle)
   ============================================================================ */

.landscape-controls {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 14px;
}

.landscape-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.landscape-control-group .control-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--v2-text-muted, #6c757d);
  white-space: nowrap;
}

.dash-toggle-bar {
  display: inline-flex;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 6px;
  overflow: hidden;
}

.dash-toggle-btn {
  padding: 5px 12px;
  border: none;
  background: var(--v2-bg-elevated, #fff);
  color: var(--v2-text-muted, #6c757d);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border-right: 1px solid var(--v2-border, #dee2e6);
}

.dash-toggle-btn:last-child {
  border-right: none;
}

.dash-toggle-btn:hover {
  background: var(--v2-bg-hover, #f1f5f9);
  color: var(--v2-text, #212529);
}

.dash-toggle-btn.active {
  background: var(--v2-accent, #3b82f6);
  color: #fff;
  font-weight: 600;
}

.landscape-top-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.landscape-half {
  flex: 1 1 0%;
  min-width: 0;
}

.landscape-bottom-row {
  margin-bottom: 16px;
}

.landscape-full {
  width: 100%;
}

.landscape-chart-wrap {
  min-height: 340px;
  position: relative;
  overflow: hidden;
}

.dash-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  color: var(--v2-text-muted, #6c757d);
  font-size: 13px;
}


@media (max-width: 1024px) {
  .chart-row { grid-template-columns: 1fr; }
  .leaders-grid { grid-template-columns: 1fr; }
  .comp-layout { grid-template-columns: 1fr; }
  .dash-control-bar { flex-direction: column; align-items: stretch; }
  .universe-badge { border-right: none; border-bottom: 1px solid var(--v2-border); padding-bottom: 8px; }
  .group-by-selector { min-width: 100%; }
  .landscape-controls { flex-direction: column; gap: 10px; align-items: flex-start; }
  .landscape-top-row { flex-direction: column; }
}

/* ── Dark theme overrides ── */
.dark-theme .kpi-value { color: #e6e9f0; }
.dark-theme .dash-toggle-bar { border-color: #1e2433; }
.dark-theme .dash-toggle-btn {
  background: #161b26;
  border-color: #1e2433;
  color: #8b92a5;
}
.dark-theme .dash-toggle-btn:hover {
  background: #1a2030;
  color: #e6e9f0;
}
.dark-theme .dash-toggle-btn.active {
  background: var(--v2-accent, #3b82f6);
  color: #fff;
}

/* The loading overlay (`.dash-loading`) inherits --v2-bg-page which IS dark
   in dark-theme, but the overlay was still reading as white because the
   underlying `.etf-dashboard-root` has no solid background and the parent
   app shell fill bleeds through the opacity: 0.92 layer in some browsers.
   Pin the overlay's background + text explicitly in dark mode. */
.dark-theme .dash-loading {
  background: #0c111a !important;
  color: #e6e9f0 !important;
  opacity: 1;
}
.dark-theme .dash-loading .loading-spinner {
  border-color: #2d3548;
  border-top-color: var(--v2-accent, #3b82f6);
}
.dark-theme .view-title {
  color: #e6e9f0 !important;
}

/* Heatmap view should fill the available viewport height. Switching the
   root to a flex column only when the class is present keeps every other
   view untouched. */
.etf-dashboard-root.view-heatmaps {
  display: flex;
  flex-direction: column;
}
.etf-dashboard-root.view-heatmaps .chart-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}
.etf-dashboard-root.view-heatmaps .treemap-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}