/* ==========================================================================
   chart.css - K 线图 / 迷你图样式
   ========================================================================== */

/* --------------------------------------------------------------------------
   K 线主图
   -------------------------------------------------------------------------- */
[data-child-theme="binance"] .kline-chart {
  position: relative;
  background: var(--ri-tertiary-bg);
  border-radius: var(--ri-border-radius);
  padding: 0.85rem;
  border: 1px solid var(--ri-border-color);
}

[data-child-theme="binance"] .kline-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
[data-child-theme="binance"] .kline-chart-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ri-emphasis-color);
  font-size: 0.95rem;
}
[data-child-theme="binance"] .kline-chart-pair-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ri-primary-soft);
  color: var(--ri-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
[data-child-theme="binance"] .kline-chart-price {
  font-family: var(--ri-heading-font-family);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ri-emphasis-color);
}
[data-child-theme="binance"] .kline-chart-change {
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

[data-child-theme="binance"] .kline-chart-intervals {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
[data-child-theme="binance"] .kline-chart-intervals button {
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ri-secondary-color);
  border-radius: var(--ri-border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
[data-child-theme="binance"] .kline-chart-intervals button:hover {
  color: var(--ri-primary);
}
[data-child-theme="binance"] .kline-chart-intervals button.active {
  background: var(--ri-primary-soft);
  color: var(--ri-primary);
  border-color: var(--ri-primary-soft-2);
}

[data-child-theme="binance"] .kline-chart-canvas {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}

[data-child-theme="binance"] .kline-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 17, 0.6);
  color: var(--ri-tertiary-color);
  font-size: 0.88rem;
  backdrop-filter: blur(4px);
}
[data-child-theme="binance"] .kline-chart-loading i {
  margin-right: 0.4rem;
  color: var(--ri-primary);
  animation: spin 1s linear infinite;
}

/* K 线图统计指标 */
[data-child-theme="binance"] .kline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ri-border-color);
  font-size: 0.82rem;
}
[data-child-theme="binance"] .kline-stat-item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
[data-child-theme="binance"] .kline-stat-label {
  color: var(--ri-tertiary-color);
}
[data-child-theme="binance"] .kline-stat-value {
  font-weight: 600;
  color: var(--ri-emphasis-color);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   迷你图（Sparkline）
   -------------------------------------------------------------------------- */
[data-child-theme="binance"] .sparkline-up {
  color: var(--ri-success);
}
[data-child-theme="binance"] .sparkline-down {
  color: var(--ri-danger);
}

[data-child-theme="binance"] canvas.sparkline-canvas {
  display: block;
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  [data-child-theme="binance"] .kline-chart-canvas {
    height: 240px;
  }
  [data-child-theme="binance"] .kline-chart {
    padding: 0.65rem;
  }
  [data-child-theme="binance"] .kline-chart-price {
    font-size: 1rem;
  }
  [data-child-theme="binance"] .kline-chart-intervals button {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 575.98px) {
  [data-child-theme="binance"] .kline-chart-canvas {
    height: 200px;
  }
  [data-child-theme="binance"] .kline-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}