/* Phase 111 – database-backed ApexCharts */
html.admin-ui-active .admin-advanced-chart-grid {
  align-items: stretch!important;
}

html.admin-ui-active .admin-chart-panel {
  min-height: 390px!important;
  overflow: hidden!important;
}

html.admin-ui-active .admin-apex-chart {
  width: 100%!important;
  min-height: 315px!important;
  margin-top: 10px!important;
}

html.admin-ui-active .admin-apex-chart--compact {
  min-height: 270px!important;
}

html.admin-ui-active .admin-apex-chart--donut {
  min-height: 300px!important;
}

html.admin-ui-active .admin-chart-fallback {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: .55rem;
  border-radius: 18px;
  background: rgba(15, 23, 42, .35);
  border: 1px dashed rgba(148, 163, 184, .22);
  color: #dbe7f5;
  padding: 1rem;
}

html.admin-ui-active .admin-chart-fallback i {
  color: #60a5fa;
  font-size: 2rem;
}

html.admin-ui-active .admin-chart-fallback strong,
html.admin-ui-active .admin-chart-fallback small {
  display: block;
}

html.admin-ui-active .apexcharts-canvas,
html.admin-ui-active .apexcharts-svg,
html.admin-ui-active .apexcharts-legend,
html.admin-ui-active .apexcharts-text,
html.admin-ui-active .apexcharts-title-text,
html.admin-ui-active .apexcharts-legend-text {
  color: #dbe7f5!important;
  fill: #dbe7f5!important;
}

html.admin-ui-active .apexcharts-tooltip,
html.admin-ui-active .apexcharts-tooltip-title {
  background: #07111f!important;
  border-color: rgba(148, 163, 184, .22)!important;
  color: #fff!important;
}

@media (max-width: 991.98px) {
  html.admin-ui-active .admin-chart-panel {
    min-height: auto!important;
  }

  html.admin-ui-active .admin-apex-chart {
    min-height: 285px!important;
  }
}

@media (max-width: 575.98px) {
  html.admin-ui-active .admin-apex-chart {
    min-height: 250px!important;
  }
}