/* ============================================================================
   IESMAC ERP — Material skin over Phoenix Bootstrap 5.3
   SPRINT 6 · Charts: ECharts surfaces, sparklines, donuts
   ----------------------------------------------------------------------------
   Depends on: material-skin.css (Sprint 1) — for tokens
   Pairs with: material-skin-charts.js (the ECharts theme registration)

   Load order:
     1. theme.min.css        (Phoenix core)
     2. user.min.css         (empty Phoenix slot)
     3. style.css            (existing tweaks)
     4. material-skin.css           (Sprint 1)
     5. material-skin-surfaces.css  (Sprint 3)
     6. material-skin-data.css      (Sprint 4)
     7. material-skin-navigation.css (Sprint 5)
     8. material-skin-charts.css    ← THIS FILE

   JS file load (in layout footer, BEFORE chart init scripts):
     <script th:src="@{/js/material-skin-charts.js}"></script>

   Tenant theming: All brand color references use --md-* variables only.
   The JS file reads these variables via getComputedStyle() at runtime.
   ============================================================================ */


/* ============================================================================
   1. ECHARTS TOOLTIP — dark MUI snackbar style
   ECharts renders tooltip as an inline-styled div, but we can target it via
   .echarts-tooltip class which the JS theme adds, plus the default selectors.
   ============================================================================ */

html body .echarts-tooltip,
html body div[id^="tooltip_"][class*="echarts"] {
  background-color: var(--md-neutral-10) !important;
  border: 0 !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-3), 0 4px 8px rgba(15, 55, 65, 0.18) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  min-width: 140px;
}

html body .echarts-tooltip .tooltip-title,
html body .echarts-tooltip-title {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--md-primary-80);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

html body .echarts-tooltip .tooltip-row,
html body .echarts-tooltip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  padding: 1px 0;
}

html body .echarts-tooltip .tooltip-dot,
html body .echarts-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

html body .echarts-tooltip .tooltip-label,
html body .echarts-tooltip-label {
  flex: 1;
  color: #FFFFFF;
}

html body .echarts-tooltip .tooltip-value,
html body .echarts-tooltip-value {
  color: #FFFFFF;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* ============================================================================
   2. CHART CONTAINER — wraps the ECharts mount point
   Use .chart-container around your <div id="myChart"> to inherit
   font, color, and tooltip alignment from this skin.
   ============================================================================ */

html body .chart-container,
html body .echarts-container,
html body .ec-canvas {
  font-family: 'Inter', sans-serif;
  color: var(--md-neutral-40);
}

/* When chart is inside a card, remove default chart padding */
html body .card .chart-container,
html body .card .echarts-container {
  margin: 0;
}

/* Chart header pattern — title + supporting + legend / actions */
html body .chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}

html body .chart-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-neutral-10);
  letter-spacing: -0.1px;
  margin: 0;
}

html body .chart-subtitle,
html body .chart-supporting {
  font-size: 11px;
  color: var(--md-neutral-40);
  margin-top: 1px;
}


/* ============================================================================
   3. LEGEND — inline chips above or beside the chart
   ============================================================================ */

html body .chart-legend,
html body .echarts-legend-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  flex-wrap: wrap;
}

html body .chart-legend .legend-item,
html body .chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--md-neutral-30);
}

html body .chart-legend .legend-dot,
html body .chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

html body .chart-legend .legend-dot.legend-dot-circle {
  border-radius: 50%;
}

html body .chart-legend .legend-value,
html body .chart-legend-value {
  color: var(--md-neutral-40);
  font-variant-numeric: tabular-nums;
}

/* Click-to-toggle disabled state */
html body .chart-legend .legend-item.disabled {
  opacity: 0.4;
}


/* ============================================================================
   4. SPARKLINE CONTAINERS — inline charts on stat cards
   ============================================================================ */

html body .sparkline,
html body .stat-card .sparkline,
html body .stat-card .ec-sparkline {
  height: 28px;
  width: 100%;
  margin-top: 6px;
  display: block;
}

html body .sparkline-sm { height: 20px; }
html body .sparkline-lg { height: 40px; }

/* Sparkline with trend indicator next to it */
html body .stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

html body .stat-trend.trend-up    { color: var(--md-success-800); }
html body .stat-trend.trend-down  { color: var(--md-error-600); }
html body .stat-trend.trend-flat  { color: var(--md-neutral-40); }


/* ============================================================================
   5. DONUT CENTER — total/label overlay on donut charts
   ============================================================================ */

html body .donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}

html body .donut-center .donut-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--md-neutral-10);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

html body .donut-center .donut-label {
  font-size: 10px;
  color: var(--md-neutral-40);
  margin-top: 2px;
  text-transform: lowercase;
  letter-spacing: 0;
}


/* ============================================================================
   6. PROGRESS BAR CHARTS — used for ranked category lists
   ============================================================================ */

html body .progress-chart .progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  font-size: 11.5px;
  margin-bottom: 9px;
}

html body .progress-chart .progress-row:last-child {
  margin-bottom: 0;
}

html body .progress-chart .progress-label {
  color: var(--md-neutral-10);
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  grid-column: 1 / -1;
}

html body .progress-chart .progress-value {
  color: var(--md-neutral-40);
  font-variant-numeric: tabular-nums;
}

html body .progress-chart .progress-track {
  height: 8px;
  background-color: var(--md-neutral-95);
  border-radius: 4px;
  overflow: hidden;
  grid-column: 1 / -1;
}

html body .progress-chart .progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 320ms ease;
}

html body .progress-chart .progress-fill.fill-primary-40 { background-color: var(--md-primary-40); }
html body .progress-chart .progress-fill.fill-primary-50 { background-color: var(--md-primary-50); }
html body .progress-chart .progress-fill.fill-primary-60 { background-color: var(--md-primary-60); }
html body .progress-chart .progress-fill.fill-primary-70 { background-color: var(--md-primary-70); }
html body .progress-chart .progress-fill.fill-primary-80 { background-color: var(--md-primary-80); }


/* ============================================================================
   7. CHART LOADING STATE — while data fetches
   ============================================================================ */

html body .chart-loading {
  position: relative;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-neutral-50);
}

html body .chart-loading::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--md-primary-90);
  border-top-color: var(--md-primary-40);
  animation: md-chart-spin 800ms linear infinite;
}

@keyframes md-chart-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body .chart-loading::before { animation: none; }
  html body .progress-chart .progress-fill { transition: none; }
}


/* ============================================================================
   8. CHART EMPTY STATE — when there's no data
   ============================================================================ */

html body .chart-empty {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--md-neutral-40);
  font-family: 'Inter', sans-serif;
}

html body .chart-empty .empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--md-surface-tinted);
  color: var(--md-primary-40);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 20px;
}

html body .chart-empty .empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-neutral-10);
  margin-bottom: 2px;
}

html body .chart-empty .empty-supporting {
  font-size: 11.5px;
  color: var(--md-neutral-40);
  max-width: 240px;
  line-height: 1.5;
}


/* ============================================================================
   9. AXIS LABEL HELPERS — when axis labels are HTML elements (rare)
   ============================================================================ */

html body .chart-axis-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  color: var(--md-neutral-50);
}

html body .chart-axis-tick {
  stroke: var(--md-neutral-90);
  stroke-width: 0.5;
}

html body .chart-axis-line {
  stroke: var(--md-surface-divider);
  stroke-width: 0.5;
}


/* ============================================================================
   10. RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  html body .chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  html body .chart-legend {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10.5px;
  }
}


/* ============================================================================
   END OF SPRINT 6 (CSS)
   The JS theme file (material-skin-charts.js) handles per-chart recoloring.
   ============================================================================ */