/* ═══════════════════════════════════════════════════════════════════════════
   STATS VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-view {
  /* Codex full-bleed: the rest of the app stretches to the viewport, the
     stats page should too. Inner sections cap themselves where it makes
     sense (charts, tables) so the page doesn't read as edge-to-edge sea
     of widgets on 2K+. */
  padding: var(--space-xl, 20px);
  max-width: none;
  margin: 0;
}

/* ─── Codex stats summary strip (redesign step 3) ─────────────────
   Dense 8-chip bar above the cards grid. Owned chip carries an inline
   4px progress sliver; other chips show glyph + label + bold mono
   number, color-coded by status. Collapses to a 28px one-liner via
   .stats-summary-bar--collapsed (toggled by toggleStatsCollapse).
*/
.stats-summary-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  padding: 0 14px;
  background: var(--surface, var(--bg-secondary, #f8f9fa));
  border: 1px solid var(--border, var(--border-color, #e5e7eb));
  border-radius: 8px;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  position: relative;
}

.stats-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px;
  position: relative;
}

/* Hairline separators between chips */
.stats-summary-item + .stats-summary-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border, rgba(255, 255, 255, 0.06));
}

.stats-summary-item--owned {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  /* 1.4× width: owned chip is the anchor */
  min-width: 240px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.stats-summary-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stats-summary-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--text-dim, var(--text-secondary, #6c757d));
  flex-shrink: 0;
}

.stats-summary-label {
  color: var(--text-dim, var(--text-secondary, #6c757d));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stats-summary-item strong {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--text-primary, #2d3748));
  letter-spacing: -0.01em;
}

.stats-summary-percent {
  font-family: var(--font-mono);
  color: var(--accent, var(--color-primary, #667eea));
  font-weight: 500;
  font-size: 11px;
  margin-left: auto;
}

.stats-summary-sub {
  font-family: var(--font-mono);
  color: var(--text-mute, var(--text-secondary, #6c757d));
  font-size: 10.5px;
}

/* Per-chip status colors on the mono number — semantic class names
   so the styling is robust to chip reordering (vs the earlier
   :nth-child rules). */
.stats-summary-item--owned strong { color: var(--pos, #10b981); }
.stats-summary-item--ordered strong { color: var(--cool, #7aa8ff); }
.stats-summary-item--wishlist strong { color: var(--warm, #fbb454); }
.stats-summary-item--missing strong { color: var(--text-dim, var(--text-secondary, #f59e0b)); }

/* Inline progress sliver lives inside the Owned chip. */
.stats-summary-progress--inline {
  width: 100%;
  height: 4px;
  background: var(--surface3, rgba(0, 0, 0, 0.08));
  border-radius: 2px;
  overflow: hidden;
}

.stats-summary-progress--inline .progress-bar {
  height: 100%;
  background: var(--pos, var(--color-primary));
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ─── Collapse toggle ─────────────────────────────────────────────── */
.stats-summary-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: 4px;
  align-self: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.stats-summary-collapse-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.stats-summary-collapse-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.2s ease;
}
.stats-summary-bar--collapsed .stats-summary-collapse-btn svg {
  transform: rotate(180deg);
}

/* ─── Collapsed state: 28px one-line summary ──────────────────────── */
.stats-summary-bar--collapsed {
  flex-wrap: nowrap;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  overflow: hidden;
}
.stats-summary-bar--collapsed .stats-summary-item {
  display: none;
}
.stats-summary-bar--collapsed .stats-summary-collapsed-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-right: auto;
}
.stats-summary-bar--collapsed .stats-summary-collapsed-summary .csl-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.stats-summary-collapsed-summary { display: none; }
.stats-summary-bar:not(.stats-summary-bar--collapsed) .stats-summary-collapsed-summary {
  display: none;
}

.stats-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-content .progress-tracking {
  display: block !important;
}

.stats-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  padding: var(--space-lg, 16px);
  /* Unified KPI-card surface — matches the codex hero-stat-card / key-metric /
     stat-box treatment (elevated --surface2 tone + --border + 8px) so every
     KPI card on the stats view reads as one system. Layout stays icon-left. */
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.metric-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.metric-info {
  flex: 1;
  min-width: 0;
}

.metric-label {
  font-size: var(--text-sm, 12px);
  color: var(--text-secondary, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.metric-value {
  font-size: var(--text-xl, 18px);
  font-weight: 700;
  color: var(--text-primary, #2d3748);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-sub {
  font-size: 11px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION VALUATION
   ═══════════════════════════════════════════════════════════════════════════ */

.valuation-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.valuation-card {
  /* Same unified KPI-card surface as .metric-card / codex hero cards. */
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 16px;
}

.valuation-card-cm {
  border-top: 3px solid #e74c3c;
}

.valuation-card-jtcg {
  border-top: 3px solid #3498db;
}

.valuation-card-purchase {
  border-top: 3px solid #f59e0b;
}

.valuation-card-combined {
  border-top: 3px solid #8b5cf6;
}

.valuation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.valuation-icon {
  font-size: 20px;
}

.valuation-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #6c757d);
}

/* Investment-over-time block (Valorisation section) */
.portfolio-history {
  margin-top: 16px;
}
.portfolio-history-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #6c757d);
}
.portfolio-history-summary {
  margin-top: 12px;
}
.portfolio-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13px;
  color: var(--text-secondary, #6c757d);
}
.portfolio-summary-row strong {
  color: var(--text, var(--text-primary, #1a1a1a));
  font-weight: 600;
}

.valuation-currency {
  font-weight: 400;
  opacity: 0.7;
}

.valuation-main {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #2d3748);
  line-height: 1.2;
}

.valuation-label {
  font-size: 11px;
  color: var(--text-secondary, #6c757d);
  margin-top: 2px;
}

.valuation-sub {
  margin-top: 6px;
}

.valuation-coverage {
  font-size: 11px;
  color: var(--text-muted, #999);
  background: var(--bg-secondary, #f3f4f6);
  padding: 2px 8px;
  border-radius: 10px;
}

.valuation-main-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.valuation-vs-purchase {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
}

.valuation-delta-inline {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}

.valuation-delta-inline.valuation-delta-up {
  color: #22c55e;
}

.valuation-delta-inline.valuation-delta-down {
  color: #ef4444;
}

.valuation-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.valuation-detail {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.valuation-detail-label {
  color: var(--text-secondary, #6c757d);
}

.valuation-detail-value {
  font-weight: 600;
  color: var(--text-primary, #2d3748);
}

.valuation-delta {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

.valuation-delta-up {
  color: #22c55e;
}

.valuation-delta-down {
  color: #ef4444;
}

.valuation-rate {
  font-size: 10px;
  color: var(--text-muted, #999);
  margin-top: 8px;
  text-align: right;
  font-style: italic;
}

/* ── Valuation summary row ── */
.valuation-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .valuation-summary { grid-template-columns: 1fr; }
}

.valuation-card-highlight {
  border-top: 3px solid #22c55e;
}

/* Value completion mini bar */
.valuation-completion {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.valuation-completion-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-secondary, #f3f4f6);
  overflow: hidden;
}
.valuation-completion-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.valuation-completion-text {
  font-size: 11px;
  font-weight: 600;
  color: #22c55e;
  white-space: nowrap;
}

/* Insight callout on missing cards */
.valuation-insight {
  margin-top: 8px;
  font-size: 11px;
  color: #f59e0b;
  font-style: italic;
}

/* ── Two-column layout for tiers + rarity ── */
.valuation-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .valuation-columns { grid-template-columns: 1fr; }
}

/* ── Valuation sub-sections ── */
.valuation-section {
  margin-top: 0;
}
.valuation-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary, #6c757d);
  margin-bottom: 12px;
}

/* ── Price tier bars ── */
.valuation-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tier-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px 90px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.tier-label {
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
  text-align: right;
}
.tier-bar-container {
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-secondary, #f3f4f6);
}
.tier-bar {
  height: 100%;
  transition: width 0.3s ease;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tier-bar-owned {
  background: #22c55e;
}
.tier-bar-missing {
  background: var(--border-color, #d1d5db);
}
.tier-bar-label {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.tier-bar-missing .tier-bar-label {
  color: var(--text-secondary, #6c757d);
  text-shadow: none;
}
.tier-count {
  font-weight: 700;
  color: var(--text-primary, #2d3748);
  text-align: right;
  font-size: 12px;
}
.tier-value {
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
  text-align: right;
  font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STICKY SECTION NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-nav {
  display: flex;
  gap: var(--space-xs, 4px);
  padding: var(--space-sm, 8px);
  background: var(--bg-secondary, rgba(248, 249, 250, 0.95));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg, 10px);
  margin-bottom: var(--space-lg, 16px);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.05));
  overflow-x: auto;
  scrollbar-width: none;
}

.stats-nav::-webkit-scrollbar {
  display: none;
}

.stats-nav-link {
  padding: 8px 14px;
  font-size: var(--text-sm, 12px);
  font-weight: 500;
  color: var(--text-secondary, #6c757d);
  text-decoration: none;
  border-radius: var(--radius-md, 6px);
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.stats-nav-link:hover {
  color: var(--text-primary, #1f2937);
  background: var(--bg-tertiary, rgba(102, 126, 234, 0.08));
}

.stats-nav-link.active {
  color: var(--text-inverse, #ffffff);
  background: var(--color-primary, #667eea);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-collapsible {
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
}

.stats-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-radius: var(--radius-lg, 10px);
  transition: background-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.stats-section-header:hover {
  background: rgba(102, 126, 234, 0.06);
}

.stats-section-header h2 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-section-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(102, 126, 234, 0.12);
  color: #667eea;
}

.collapse-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.25s ease;
}

.collapse-chevron::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #6c757d;
  border-bottom: 2px solid #6c757d;
  transform: translate(-50%, -65%) rotate(45deg);
  transition: border-color 0.15s ease;
}

.stats-section-header:hover .collapse-chevron::before {
  border-color: #667eea;
}

.stats-collapsible.collapsed .collapse-chevron {
  transform: rotate(-90deg);
}

.stats-section-body {
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;
  max-height: 5000px;
  opacity: 1;
}

.stats-collapsible.collapsed .stats-section-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOUGHNUT CHART ROW (3-column)
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-doughnut-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stats-doughnut-row .stats-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-doughnut-row--single {
  grid-template-columns: 1fr;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.stats-doughnut-row--double {
  grid-template-columns: repeat(2, 1fr);
}

.doughnut-container {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DENSE TOP 10 CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.top-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.top-card-item {
  display: grid;
  grid-template-columns: 28px 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.top-card-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.top-card-rank {
  font-size: 14px;
  font-weight: 700;
  color: #667eea;
  text-align: center;
}

.top-card-image {
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
}

.top-card-info {
  min-width: 0;
  overflow: hidden;
}

.top-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-card-details {
  font-size: 11px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-card-source {
  color: #667eea;
  font-weight: 500;
}

.top-card-prices {
  text-align: right;
  white-space: nowrap;
}

.top-card-price {
  font-size: 14px;
  font-weight: 700;
  color: #27ae60;
  white-space: nowrap;
}

.top-card-market {
  font-size: 11px;
  color: var(--text-secondary, #6c757d);
  font-weight: 500;
}

.top-card-market-src {
  font-size: 9px;
  opacity: 0.6;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DENSE RECENT ACQUISITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.recent-acquisitions-list .recent-acquisitions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #f0f0ff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
}

.recent-acquisition-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.recent-acquisition-item:hover {
  background: rgba(102, 126, 234, 0.04);
}

.recent-card-image {
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
}

.recent-card-info {
  min-width: 0;
  overflow: hidden;
}

.recent-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-card-details {
  font-size: 11px;
  color: #6c757d;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.recent-card-source {
  color: #667eea;
  font-weight: 500;
}

.recent-card-date {
  color: #e67e22;
}

.recent-card-price {
  font-size: 14px;
  font-weight: 700;
  color: #27ae60;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT SET COMPLETION (completed sets)
   ═══════════════════════════════════════════════════════════════════════════ */

.set-completion-item.compact-complete {
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.set-completion-item.compact-complete .set-completion-header {
  margin-bottom: 0;
  flex: 1;
}

.set-completion-item.compact-complete .set-completion-bar-container {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART.JS CANVAS CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

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

@media (max-width: 900px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
}

.chart-canvas-container {
  position: relative;
  width: 100%;
  /* Chart.js's `responsive: true + maintainAspectRatio: true` sizes the
   * canvas from its container's dimensions. Without an intrinsic height
   * here, the container collapses to the canvas's child height, and the
   * canvas in turn shrinks to the container — a chicken-and-egg that
   * pinned bar/timeline charts at ~133 px wide regardless of layout.
   * min-height gives Chart.js something definite to grow into; canvases
   * then expand to fill the full container width (with their own
   * aspectRatio governing the actual rendered height). */
  min-height: 200px;
  padding: 4px 0;
}

.chart-canvas-container canvas {
  max-width: 100%;
}

/* Doughnut containers manage their own dimensions via .doughnut-container
 * (max-width 320px + 1.25 aspect), so don't impose the bar-chart min. */
.chart-canvas-container.doughnut-container {
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART EXPAND BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.chart-expand-btn {
  background: none;
  border: none;
  padding: 3px 5px;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    color 0.15s ease,
    background-color 0.15s ease;
  flex-shrink: 0;
}

.lang-tracking-section:hover .chart-expand-btn,
.stats-section:hover .chart-expand-btn {
  opacity: 1;
}

.chart-expand-btn:hover {
  color: var(--color-primary, #667eea);
  background: rgba(102, 126, 234, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART FULLSCREEN OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.chart-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9400;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease-out;
}

.chart-fullscreen-overlay.active {
  display: flex;
}

.chart-fullscreen-content {
  width: 92%;
  max-width: 1200px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.chart-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.chart-fullscreen-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #2d3748;
}

.chart-fullscreen-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.chart-fullscreen-close:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.chart-fullscreen-body {
  flex: 1;
  padding: 20px;
  position: relative;
  overflow: hidden;
  min-height: 0; /* allow flex child to shrink below content size */
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

body.dark-mode .stats-view {
  background: transparent;
}

/* Codex: stats summary bar now uses tokens — no per-mode overrides needed.
   Kept the dark-mode block above intentionally minimal (variables-only)
   so the new --surface / --text / --pos / etc. drive both themes. */

/* Metric cards — dark mode now handled by CSS variables (--bg-elevated, --border-color) */

/* Sticky Nav - Dark Mode */
body.dark-mode .stats-nav {
  background: rgba(30, 30, 46, 0.95);
  box-shadow: var(--shadow-md);
}

/* Nav links inherit color from CSS variables; active uses --color-primary */

/* Collapsible Sections - Dark Mode */
body.dark-mode .stats-section-header:hover {
  background: rgba(160, 160, 255, 0.08);
}

body.dark-mode .collapse-chevron::before {
  border-color: #9898b0;
}

body.dark-mode .stats-section-header:hover .collapse-chevron::before {
  border-color: #a0a0ff;
}

body.dark-mode .stats-section-badge {
  background: rgba(160, 160, 255, 0.15);
  color: #a0a0ff;
}

/* Dense Top 10 - Dark Mode */
body.dark-mode .top-card-item {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .top-card-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .top-card-name {
  color: #e5e7eb;
}

body.dark-mode .top-card-details {
  color: #7c7c9a;
}

/* Dense Recent Acquisitions - Dark Mode */
body.dark-mode .recent-acquisitions-header {
  background: var(--surface);
  color: #818cf8;
}

body.dark-mode .recent-acquisition-item:hover {
  background: rgba(160, 160, 255, 0.06);
}

body.dark-mode .recent-card-name {
  color: #e5e7eb;
}

body.dark-mode .recent-card-details {
  color: #7c7c9a;
}

/* Chart Expand Button - Dark Mode */
body.dark-mode .chart-expand-btn {
  color: #6c6c88;
}

body.dark-mode .chart-expand-btn:hover {
  color: #a0a0ff;
  background: rgba(160, 160, 255, 0.15);
}

/* Chart Fullscreen Overlay - Dark Mode */
body.dark-mode .chart-fullscreen-content {
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

body.dark-mode .chart-fullscreen-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .chart-fullscreen-title {
  color: #e0e0f0;
}

body.dark-mode .chart-fullscreen-close {
  color: #9898b0;
}

body.dark-mode .chart-fullscreen-close:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

/* Clickable chart bars */
.chart-bar-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.15s ease;
}
.chart-bar-clickable:hover {
  background-color: rgba(102, 126, 234, 0.08);
}
body.dark-mode .chart-bar-clickable:hover {
  background-color: rgba(160, 160, 255, 0.12);
}

/* Clickable metric cards */
.metric-card-clickable {
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.metric-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}