/* app/assets/stylesheets/components/charts.css */

.chart-area {
  background: var(--bg-surface);
  border:     1px solid var(--border-color);
  padding:    var(--space-6);
  position:   relative;
  min-height: 200px;
}

.chart-area__title {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  var(--space-4);
}

.chart-area canvas {
  width:  100% !important;
  height: auto !important;
}

.chart-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      160px;
  color:           var(--text-muted);
  font-size:       var(--text-sm);
}