/* ══════════════════════════════════════════════════════════════════
   CODEX STATS VIEW (redesign step 10)
   See design_handoff_codex_redesign/README.md §Per-view specs · Stats.

   CSS-only restyle of #statsView. Layers Codex chrome on the existing
   sticky nav + collapsible sections + metric cards + chart containers
   + top-10 + recent activity. Existing JS (chart render, collapse,
   nav scroll-spy) is unchanged.

   Deferred (DEFERRED.md):
     - Distribution stacked-bar chart per type
     - Size doughnut
     - PSA pop histogram
     - 24-month twin-bar acquisition timeline
     - Sources horizontal stacked bar + 6-up legend grid
     - Spend-by-source strip (also referenced in step 9)
   ══════════════════════════════════════════════════════════════════ */

/* ── Sticky left nav rail (Codex spec) ────────────────────────────── */
#statsView {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
#statsView .stats-content {
  flex: 1;
  min-width: 0;
}

#statsView .stats-nav {
  flex: 0 0 196px;
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
#statsView .stats-nav::before {
  content: 'Sections';
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 0 10px 8px;
}

#statsView .stats-nav-link {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  padding: 7px 10px;
  border-radius: 5px;
  letter-spacing: -0.005em;
  border-left: 2px solid transparent;
}
#statsView .stats-nav-link:hover {
  background: var(--surface2);
  color: var(--text);
}
#statsView .stats-nav-link.active {
  background: var(--surface3);
  color: var(--text);
  border-left-color: var(--accent);
  box-shadow: none;
}

/* Value summary box at the bottom of the rail. */
#statsView .stats-nav-value {
  margin-top: 18px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}
#statsView .stats-nav-value-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
#statsView .stats-nav-value-amount {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
#statsView .stats-nav-value-delta {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Below 1100px the rail would crowd the charts — drop it to a
   horizontal scroll strip on top (legacy behaviour). */
@media (max-width: 1100px) {
  #statsView {
    flex-direction: column;
  }
  #statsView .stats-nav {
    flex: 0 0 auto;
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 14px;
  }
  #statsView .stats-nav::before {
    display: none;
  }
  #statsView .stats-nav-link {
    border-left: 0;
  }
  #statsView .stats-nav-value {
    display: none;
  }
}

/* ── Section wrapper ──────────────────────────────────────────────── */
#statsView .stats-collapsible {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  border-top: 2px solid var(--accent);
  margin-bottom: 14px;
  overflow: hidden;
}

#statsView .stats-section-header {
  padding: 12px 16px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
#statsView .stats-section-header:hover {
  background: var(--surface2);
}
#statsView .stats-collapsible:not(.collapsed) .stats-section-header {
  border-bottom-color: var(--border);
}

#statsView .stats-section-header h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

#statsView .stats-section-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
}

#statsView .collapse-chevron::before {
  border-color: var(--text-dim);
}
#statsView .stats-section-header:hover .collapse-chevron::before {
  border-color: var(--accent);
}

#statsView .stats-section-body {
  padding: 14px 16px;
}

/* ── Metric cells (Key metrics 5-up) ──────────────────────────────── */
#statsView .key-metrics-grid,
#statsView .hero-stat-cards {
  display: grid;
  /* Smaller minimum so the source cards inside the narrow left column
     of progress-master-layout still flow into 2-3 columns at desktop
     widths instead of falling back to a 1-col vertical strip. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
/* The "total" hero card stays full-width for emphasis; everything else
   flows in the auto-fill grid above. */
#statsView .hero-stat-cards .hero-stat-total {
  grid-column: 1 / -1;
}

#statsView .key-metric,
#statsView .hero-stat-card,
#statsView .stat-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease;
  /* Cards must clip — the inner .hero-stat-sub line has white-space:
     nowrap to render the spend range neatly, but when the grid puts
     cards in a narrow column the nowrap line escapes the card frame
     and lands on top of the next column. min-width: 0 lets the card
     shrink below its intrinsic content width; overflow:hidden clips
     anything that still doesn't fit. */
  min-width: 0;
  overflow: hidden;
}
#statsView .key-metric:hover,
#statsView .hero-stat-card:hover,
#statsView .stat-box:hover {
  border-color: var(--border-hi);
}

#statsView .key-metric-label,
#statsView .hero-stat-label,
#statsView .stat-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

#statsView .key-metric-value,
#statsView .hero-stat-value,
#statsView .stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

#statsView .key-metric-sub,
#statsView .hero-stat-sub,
#statsView .stat-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
}

/* ── Valuation row (Owned 2/3 + Missing 1/3 + Price tiers + Rarity) ─ */
#statsView .valuation-row,
#statsView .progress-tracking {
  background: transparent;
  display: grid;
  gap: 12px;
}

#statsView .progress-bar {
  background: var(--surface3);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
#statsView .progress-fill {
  background: var(--accent);
  height: 100%;
  border-radius: 3px;
}

/* Hero progress (Owned big number + percent) */
#statsView .progress-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Top 10 table ─────────────────────────────────────────────────── */
#statsView .top-10-table,
#statsView .stats-table {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
#statsView .top-10-table th,
#statsView .stats-table th {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
#statsView .top-10-table td,
#statsView .stats-table td {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
#statsView .top-10-table td .price,
#statsView .stats-table td .price,
#statsView .stats-table td.mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
#statsView .top-10-table tr:last-child td,
#statsView .stats-table tr:last-child td {
  border-bottom: 0;
}

/* ── Chart containers ─────────────────────────────────────────────── */
#statsView .chart-container,
#statsView .stats-chart {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

#statsView .chart-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 10px;
}

/* ── Recent activity list ─────────────────────────────────────────── */
#statsView .recent-activity-list .activity-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text);
}
#statsView .recent-activity-list .activity-item:last-child {
  margin-bottom: 0;
}
#statsView .recent-activity-list .activity-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
}

/* ── Dark-mode safety overrides ───────────────────────────────────── */
body.dark-mode #statsView .stats-nav,
body.dark-mode #statsView .stats-collapsible,
body.dark-mode #statsView .key-metric,
body.dark-mode #statsView .hero-stat-card,
body.dark-mode #statsView .stat-box,
body.dark-mode #statsView .chart-container,
body.dark-mode #statsView .stats-chart,
body.dark-mode #statsView .top-10-table,
body.dark-mode #statsView .stats-table {
  background: var(--surface);
  border-color: var(--border);
}
body.dark-mode #statsView .key-metric,
body.dark-mode #statsView .hero-stat-card,
body.dark-mode #statsView .stat-box,
body.dark-mode #statsView .chart-container,
body.dark-mode #statsView .stats-chart {
  background: var(--surface2);
}

body.dark-mode #statsView .stats-nav-link.active {
  background: var(--surface3);
  color: var(--accent);
}