/* ============================================================
   PAGE-SPECIFIC STYLES
   ============================================================ */

/* Page sections — show/hide routing */
.page-section {
  display: none;
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  animation: fadeIn 0.3s ease;
}
.page-section.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-title {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.page-title h2 { font-size: 1.375rem; font-weight: 700; }
.page-title-actions { margin-left: auto; display: flex; gap: var(--space-3); }

/* Chain content — show/hide per chain */
.chain-content { display: none; animation: fadeIn 0.3s ease; }
.chain-content.active { display: block; }

/* Wallet detail panel (holders) */
.wallet-detail-panel {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6);
}
.wallet-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.wallet-address-display { display: flex; align-items: center; gap: var(--space-3); }
.wallet-address-display .wallet-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem;
}
.wallet-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.wallet-stat { text-align: center; padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md); }
.wallet-stat-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.wallet-stat-label { font-size: 0.6875rem; color: var(--color-text-muted); margin-top: var(--space-1); }
.token-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle);
}
.token-balance-row:last-child { border-bottom: none; }

@media (max-width: 1024px) {
  .wallet-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* Wallet activity sparkline */
.wallet-activity { display: flex; gap: 1px; align-items: flex-end; height: 20px; }
.wallet-activity-bar {
  width: 3px; border-radius: 1px;
  background: var(--color-accent); opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.wallet-activity:hover .wallet-activity-bar { opacity: 1; }

/* ============================================================
   METRICS PAGES
   ============================================================ */

/* Overview — 3-column summary card grid */
.metrics-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (max-width: 1100px) { .metrics-overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .metrics-overview-grid { grid-template-columns: 1fr; } }

.metrics-summary-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.metrics-summary-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
}
.metrics-summary-card.skeleton-card { min-height: 140px; }
.metrics-summary-header {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary);
}
.metrics-summary-rows { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.metrics-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8125rem;
}
.metrics-summary-row span { color: var(--color-text-muted); }
.metrics-summary-row strong { font-family: var(--font-mono); color: var(--color-text); }
.metrics-summary-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.8125rem; font-weight: 500; color: var(--color-accent);
  text-decoration: none; margin-top: var(--space-1);
  transition: opacity var(--transition-fast);
}
.metrics-summary-link:hover { opacity: 0.8; }

/* Detail pages — KPI row */
.metrics-kpi-row {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.metrics-kpi-row .kpi-card {
  flex: 1; min-width: 120px;
}

/* Detail pages — interval selector bar */
.metrics-interval-bar {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Detail pages — charts grid (2 columns) */
.metrics-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .metrics-charts-grid { grid-template-columns: 1fr; } }

/* Individual chart card */
.metrics-chart-card {
  display: flex; flex-direction: column;
}

/* Chart.js canvas container — fixed height so charts don't collapse */
.chart-canvas-wrap {
  position: relative;
  height: 220px;
  padding: var(--space-4);
}
.chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}