/* sota-charts.css — Canvas-based chart styles for Trading Hub v2
   Prefix: .sota- | Do not clobber existing tokens
   Colors: --bg:#06090F --gold:#D4A853 --accent:#4CC2FF --text:#E8EDF5 */

/* ─── 1. Chart Container ─────────────────────────────────────────────────── */

.sota-chart-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.sota-chart-canvas {
  display: block;
  width: 100% !important;
}

.sota-chart-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ─── 2. Crosshair Tooltip ───────────────────────────────────────────────── */

.sota-crosshair-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(12, 16, 24, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #E8EDF5;
  white-space: nowrap;
  transform: translateY(-100%) translateX(-50%);
  margin-top: -8px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ─── 3. Chart Legend ────────────────────────────────────────────────────── */

.sota-chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #8B95A8;
}

.sota-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sota-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── 4. Sparkline ───────────────────────────────────────────────────────── */

.sota-sparkline {
  display: inline-block;
  vertical-align: middle;
}

.sota-sparkline canvas {
  display: block;
}

/* ─── 5. Heatmap Cell Animations ─────────────────────────────────────────── */

.sota-heatmap-cell {
  transition: opacity 200ms ease, transform 200ms ease;
}

.sota-heatmap-cell:hover {
  opacity: 1 !important;
  transform: scale(1.05);
  z-index: 1;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .sota-heatmap-cell {
    transition: none;
  }

  .sota-heatmap-cell:hover {
    transform: none;
  }
}

/* ─── 6. Chart Loading State ─────────────────────────────────────────────── */

.sota-chart-loading {
  display: grid;
  place-items: center;
  min-height: 200px;
  color: #4A5568;
  font-size: 13px;
}

.sota-chart-loading::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(212, 168, 83, 0.2);
  border-top-color: #D4A853;
  border-radius: 50%;
  animation: sota-spin 0.8s linear infinite;
  margin-bottom: 12px;
}

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

@media (prefers-reduced-motion: reduce) {
  .sota-chart-loading::before {
    animation: none;
    border-color: rgba(212, 168, 83, 0.4);
    border-top-color: #D4A853;
  }
}

/* ─── 7. Axis Labels ─────────────────────────────────────────────────────── */

.sota-axis-label {
  font-size: 10px;
  fill: #4A5568;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

/* ─── 8. Chart Controls ──────────────────────────────────────────────────── */

.sota-chart-controls {
  display: flex;
  gap: 4px;
}

.sota-chart-btn {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #8B95A8;
  transition: all 150ms;
}

.sota-chart-btn.active,
.sota-chart-btn:hover {
  background: rgba(212, 168, 83, 0.1);
  border-color: rgba(212, 168, 83, 0.3);
  color: #D4A853;
}

@media (prefers-reduced-motion: reduce) {
  .sota-chart-btn {
    transition: none;
  }
}