/* ── set.css — SET INDEX chart module styles ─────────────────────────── */

/* Chart type toggle buttons */
.chart-type-btn {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 700;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chart-type-btn.active { background: #334155; color: white; }
.dark .chart-type-btn  { background: #1e293b; color: #94a3b8; }
.dark .chart-type-btn.active { background: #475569; color: white; }

/* Range selector buttons */
.range-btn {
  padding: .25rem .65rem;
  border-radius: .5rem;
  font-size: .7rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.range-btn:hover  { background: #f1f5f9; color: #334155; }
.range-btn.active { background: #2563eb; color: white; }
.dark .range-btn:hover  { background: #1e293b; }
.dark .range-btn.active { background: #2563eb; color: white; }

/* Commodity overlay pill buttons */
.overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .75rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.overlay-btn:hover  { border-color: #94a3b8; color: #334155; }
.overlay-btn.active { color: white; border-color: transparent; }
.dark .overlay-btn        { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .overlay-btn:hover  { border-color: #64748b; color: #e2e8f0; }

/* OHLC toolbar labels / values */
.ohlc-val { font-size: .75rem; font-weight: 800; }
.ohlc-lbl { font-size: .625rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; }

/* Market stat cards */
.stat-card {
  background: white;
  border-radius: 1rem;
  padding: .875rem 1rem;
  border: 1.5px solid #f1f5f9;
}
.dark .stat-card { background: #1e293b; border-color: #334155; }

/* Canvas chart */
#chart-canvas {
  width: 100%;
  height: 480px;
  display: block;
  border-radius: 0 0 .75rem .75rem;
}
@media (max-width: 640px) {
  #chart-canvas { height: 320px; }
}