/* mobile-charts.css — Trading Hub v2 */
/* Mobile-specific chart and data visualization adaptations */
/* Design tokens: --bg:#06090F --gold:#D4A853 --accent:#4CC2FF --text:#E8EDF5 */
/* All new classes prefixed .thv2- or .mob- */

/* ─── 1. Responsive chart heights ─────────────────────────────────────────── */
.sota-chart-wrap {
  min-height: 180px;
}

@media (min-width: 768px) {
  .sota-chart-wrap {
    min-height: 280px;
  }
}

@media (min-width: 1024px) {
  .sota-chart-wrap {
    min-height: 360px;
  }
}

/* ─── 2. Pinch zoom wrapper ───────────────────────────────────────────────── */
.thv2-pinch-zoom {
  overflow: hidden;
  touch-action: pinch-zoom pan-x pan-y;
}

/* ─── 3. Mobile tooltip ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sota-crosshair-tip {
    bottom: auto;
    top: 8px;
    transform: translateX(-50%);
    max-width: 160px;
    font-size: 11px;
  }
}

/* ─── 4. Score ring sizing ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .thv2-score-ring-wrap {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 768px) {
  .thv2-score-ring-wrap {
    width: 140px;
    height: 140px;
  }
}

/* ─── 5. Horizontal scroll tables ────────────────────────────────────────── */
.thv2-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.thv2-scroll-x::-webkit-scrollbar {
  height: 4px;
}

/* ─── 6. Heatmap on mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sota-heatmap-cell {
    font-size: 10px;
  }

  canvas.heatmap {
    max-height: 200px;
  }
}

/* ─── 7. Sparkline sizing ────────────────────────────────────────────────── */
.sota-sparkline canvas {
  width: 60px !important;
  height: 24px !important;
}

@media (min-width: 768px) {
  .sota-sparkline canvas {
    width: 80px !important;
    height: 32px !important;
  }
}

/* ─── 8. Chart controls wrapping ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .sota-chart-controls {
    flex-wrap: wrap;
    gap: 2px;
  }

  .sota-chart-btn {
    font-size: 10px;
    padding: 2px 7px;
  }
}

/* ─── 9. Factor grid mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .factor-grid,
  .signal-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
}

/* ─── 10. Modal / bottom sheet on mobile ─────────────────────────────────── */
.thv2-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 13, 18, 0.97);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px;
  z-index: 9000;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.34, 1.1, 0.64, 1);
}

.thv2-sheet.open {
  transform: translateY(0);
}

.thv2-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .thv2-sheet {
    transition: none;
  }
}