/* ═══════════════════════════════════════════════════════════════════
   CHARTS.CSS — ChartWrapper e contêineres ECharts.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Chart Card ──────────────────────────────────────────────────── */
.chart-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-divider);
  border-radius: var(--r-lg);
  display:       flex;
  flex-direction:column;
  overflow:      hidden;
  box-shadow:    var(--shadow-xs);
  transition:    box-shadow var(--t-fast);
  animation:     fadeIn var(--t-normal) both;
  height:        100%;
}
.chart-card:hover { box-shadow: var(--shadow-md); }

/* ── Card Header ─────────────────────────────────────────────────── */
.chart-card-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  padding:         var(--sp-4) var(--sp-5);
  border-bottom:   1px solid var(--c-divider);
  gap:             var(--sp-3);
  flex-shrink:     0;
  background:      var(--c-neutral-light);
}
.chart-card-header-left { flex: 1; min-width: 0; }

.chart-card-title {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-md);
  font-weight: 700;
  color:       var(--c-text-primary);
  line-height: 1.3;
}
.chart-card-title-icon {
  width:           28px;
  height:          28px;
  min-width:       28px;
  background:      var(--c-primary-light);
  border-radius:   var(--r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--c-primary);
  font-size:       12px;
  flex-shrink:     0;
}
.chart-card-subtitle {
  font-size:   var(--text-xs);
  color:       var(--c-text-tertiary);
  margin-top:  3px;
  line-height: 1.4;
}

.chart-card-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
  flex-shrink: 0;
}

/* ── Chart Body ──────────────────────────────────────────────────── */
.chart-body {
  flex:    1;
  padding: var(--sp-3) var(--sp-4);
  min-height:0;
  position:relative;
}

/* ── ECharts container heights ───────────────────────────────────── */
.echart-container { width: 100%; }
.echart-sm  { height: 200px; }
.echart-md  { height: 300px; }
.echart-lg  { height: 400px; }
.echart-xl  { height: 520px; }

/* ── Empty chart state ───────────────────────────────────────────── */
.chart-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      160px;
  text-align:      center;
  color:           var(--c-text-tertiary);
  padding:         var(--sp-6);
}
.chart-empty-icon { font-size:32px; margin-bottom:var(--sp-3); opacity:.4; }
.chart-empty-text { font-size:var(--text-sm); max-width:220px; line-height:1.4; }