/* ============================================
   Universal Highcharts Theme for EMU System
   ============================================ */

/* Highcharts Color Palette (CSS Variables) */
.highcharts {
  --highcharts-color-0: #4F39F6;  /* Primary purple */
  --highcharts-color-1: #10b981;  /* Green */
  --highcharts-color-2: #f59e0b;  /* Orange */
  --highcharts-color-3: #ef4444;  /* Red */
  --highcharts-color-4: #8b5cf6;  /* Purple */
  --highcharts-color-5: #06b6d4;  /* Cyan */
  --highcharts-color-6: #ec4899;  /* Pink */
  --highcharts-color-7: #84cc16;  /* Lime */

  /* Neutral colors - Light Mode (match Tailwind gray-900, gray-500 etc) */
  --highcharts-neutral-color-100: #111827;
  --highcharts-neutral-color-80: #111827;
  --highcharts-neutral-color-60: #6b7280;
}

.dark .highcharts {
  /* Neutral colors - Dark Mode (match Tailwind gray-100, gray-400 etc) */
  --highcharts-neutral-color-100: #f3f4f6;
  --highcharts-neutral-color-80: #f3f4f6;
  --highcharts-neutral-color-60: #9ca3af;
}

/* EMU Plot Band Colors (Used across all EMU charts) */
.highcharts-plot-band.emu-band-very-bad {
  fill: #ef4444;
  fill-opacity: 0.25;
}

.highcharts-plot-band.emu-band-bad {
  fill: #fbbf24;
  fill-opacity: 0.25;
}

.highcharts-plot-band.emu-band-good {
  fill: #86efac;
  fill-opacity: 0.25;
}

.highcharts-plot-band.emu-band-very-good {
  fill: #15803d;
  fill-opacity: 0.25;
}

/* EMU Plot Band Labels - Light Mode */
.highcharts-plot-band.emu-band-very-bad .highcharts-plot-band-label {
  fill: #ffffff;
}

.highcharts-plot-band.emu-band-very-good .highcharts-plot-band-label {
  fill: #ffffff;
}

/* EMU Plot Band Labels - Dark Mode */
.dark .highcharts-plot-band-label,
.dark .highcharts-label.highcharts-plot-band-label,
.dark text.highcharts-plot-band-label,
.dark .highcharts-plot-band-label text,
.dark .highcharts-plot-band-label tspan {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Chart Background */
.highcharts-background {
  fill: transparent !important;
}

/* Chart Text - Light Mode */
.highcharts .highcharts-title,
.highcharts .highcharts-subtitle,
.highcharts .highcharts-axis-title,
.highcharts .highcharts-axis-labels text,
.highcharts .highcharts-data-label text,
.highcharts .highcharts-legend-item text {
  fill: #111827;
}

/* Chart Text - Dark Mode */
.dark .highcharts .highcharts-title,
.dark .highcharts .highcharts-subtitle,
.dark .highcharts .highcharts-axis-title,
.dark .highcharts .highcharts-axis-labels text,
.dark .highcharts .highcharts-data-label text,
.dark .highcharts .highcharts-node-label text,
.dark .highcharts .highcharts-legend-item text {
  fill: #f3f4f6 !important;
}

/* Grid Lines - Light Mode */
.highcharts .highcharts-grid-line {
  stroke: #e5e7eb;
}

/* Grid Lines - Dark Mode */
.dark .highcharts .highcharts-grid-line {
  stroke: #374151 !important;
}

/* Tooltip Styling */
.highcharts-tooltip {
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}

.highcharts-tooltip-box {
  fill: #f9fafb;
  stroke: #d1d5db;
}

/* Tooltip Background - Dark Mode */
.dark .highcharts-tooltip {
  filter: drop-shadow(0 10px 15px rgb(0 0 0 / 0.3)) drop-shadow(0 4px 6px rgb(0 0 0 / 0.2));
}

.dark .highcharts-tooltip-box {
  fill: #374151 !important;
  stroke: #4b5563 !important;
}

/* Context Menu - Light Mode */
.highcharts-contextmenu,
.highcharts-menu {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

/* Context Menu - Dark Mode */
.dark .highcharts-contextmenu,
.dark .highcharts-menu {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
}

/* Context Menu Items - Light Mode */
.highcharts-menu-item {
  color: #111827 !important;
}

/* Context Menu Items - Dark Mode */
.dark .highcharts-menu-item {
  color: #f3f4f6 !important;
}

/* Context Menu Hover - Light Mode */
.highcharts-menu-item:hover {
  background: #f3f4f6 !important;
}

/* Context Menu Hover - Dark Mode */
.dark .highcharts-menu-item:hover {
  background: #374151 !important;
}

/* Series Colors - Apply to specific series by index */
/* Only apply to EMU charts that use styledMode, exclude avg-grade-chart */
#emu-combo-chart .highcharts-series-0 .highcharts-point,
#emu-questions-chart .highcharts-series-0 .highcharts-point,
#emu-questions-chart .highcharts-series-1 .highcharts-point,
#emu-questions-chart .highcharts-series-2 .highcharts-point,
#emu-questions-chart .highcharts-series-3 .highcharts-point,
#emu-questions-chart .highcharts-series-4 .highcharts-point,
#emu-questions-chart .highcharts-series-5 .highcharts-point,
#emu-questions-chart .highcharts-series-6 .highcharts-point,
#emu-questions-chart .highcharts-series-7 .highcharts-point,
#emu-muni-combo-chart .highcharts-series-0 .highcharts-point,
#inst-emu-dotplot .highcharts-series-0 .highcharts-point,
#exam-results-chart .highcharts-series-0 .highcharts-point,
#exam-analysis-chart .highcharts-series-0 .highcharts-point {
  fill: var(--highcharts-color-0);
  stroke: #000000;
  stroke-width: 1px;
}

#exam-pyramid-chart .highcharts-point {
  stroke: #000000;
  stroke-width: 1px;
}

/* Pyramid chart: left side (selected) — solid colors */
#exam-pyramid-chart .highcharts-series-0 .highcharts-color-3.highcharts-point { fill: #ef4444; }
#exam-pyramid-chart .highcharts-series-0 .highcharts-color-2.highcharts-point { fill: #f59e0b; }
#exam-pyramid-chart .highcharts-series-0 .highcharts-color-0.highcharts-point { fill: #4F39F6; }
#exam-pyramid-chart .highcharts-series-0 .highcharts-color-1.highcharts-point { fill: #10b981; }

/* Pyramid chart: right side (comparison) — outline only, transparent fill */
#exam-pyramid-chart .highcharts-series-1 .highcharts-color-3.highcharts-point { fill: transparent; stroke: #ef4444; stroke-width: 2px; }
#exam-pyramid-chart .highcharts-series-1 .highcharts-color-2.highcharts-point { fill: transparent; stroke: #f59e0b; stroke-width: 2px; }
#exam-pyramid-chart .highcharts-series-1 .highcharts-color-0.highcharts-point { fill: transparent; stroke: #4F39F6; stroke-width: 2px; }
#exam-pyramid-chart .highcharts-series-1 .highcharts-color-1.highcharts-point { fill: transparent; stroke: #10b981; stroke-width: 2px; }

/* Pyramid chart plot lines */
.highcharts-plot-line.pyramid-avg-line {
  stroke: #ef4444;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
}
.highcharts-plot-line.pyramid-median-line {
  stroke: #10b981;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
}

/* Light red color for columns under passing score in exam results chart */
#exam-results-chart .highcharts-point.under-passing-point {
  fill: #fca5a5 !important;
}

/* Boxplot specific styles */
.highcharts-boxplot-box {
  fill: transparent;
  stroke: var(--highcharts-color-0);
  stroke-width: 2px;
}

.highcharts-boxplot-median {
  stroke: var(--highcharts-color-0);
  stroke-width: 3px;
}

.highcharts-boxplot-whisker,
.highcharts-boxplot-stem {
  stroke: var(--highcharts-color-0);
  stroke-width: 2px;
}

/* Exam Result Plot Lines */
.highcharts-plot-line.exam-avg-line {
  stroke: #ef4444;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
}

.highcharts-plot-line.exam-median-line {
  stroke: #10b981;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
}

/* Exam Comparison Median Plot Lines */
.highcharts-plot-line.exam-municipality-median-line {
  stroke: #10b981;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
}

.highcharts-plot-line.exam-all-municipalities-median-line {
  stroke: #ef4444;
  stroke-width: 4px;
  stroke-dasharray: 8, 4;
}

/* Institution Report Average Plot Lines */
.highcharts-plot-line.inst-avg-student-line {
  stroke: var(--highcharts-color-3);
  stroke-width: 3px;
  stroke-dasharray: 6, 3;
}

.highcharts-plot-line.inst-avg-parent-line {
  stroke: var(--highcharts-color-2);
  stroke-width: 3px;
  stroke-dasharray: 6, 3;
}

#emu-questions-chart .highcharts-series-1 .highcharts-point {
  fill: var(--highcharts-color-1);
}
#emu-questions-chart .highcharts-series-2 .highcharts-point {
  fill: var(--highcharts-color-2);
}
#emu-questions-chart .highcharts-series-3 .highcharts-point {
  fill: var(--highcharts-color-3);
}
#emu-questions-chart .highcharts-series-4 .highcharts-point {
  fill: var(--highcharts-color-4);
}
#emu-questions-chart .highcharts-series-5 .highcharts-point {
  fill: var(--highcharts-color-5);
}
#emu-questions-chart .highcharts-series-6 .highcharts-point {
  fill: var(--highcharts-color-6);
}
#emu-questions-chart .highcharts-series-7 .highcharts-point {
  fill: var(--highcharts-color-7);
}

#emu-combo-chart .highcharts-series-1 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-1 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-1 .highcharts-graph,
#exam-results-chart .highcharts-series-1 .highcharts-graph,
#exam-analysis-chart .highcharts-series-1 .highcharts-graph {
  stroke: var(--highcharts-color-1);
}

#emu-combo-chart .highcharts-series-2 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-2 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-2 .highcharts-graph,
#exam-results-chart .highcharts-series-2 .highcharts-graph {
  stroke: var(--highcharts-color-2);
}

#emu-combo-chart .highcharts-series-3 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-3 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-3 .highcharts-graph,
#exam-results-chart .highcharts-series-3 .highcharts-graph {
  stroke: var(--highcharts-color-3);
}

#emu-combo-chart .highcharts-series-4 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-4 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-4 .highcharts-graph,
#exam-results-chart .highcharts-series-4 .highcharts-graph {
  stroke: var(--highcharts-color-4);
}

#emu-combo-chart .highcharts-series-5 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-5 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-5 .highcharts-graph,
#exam-results-chart .highcharts-series-5 .highcharts-graph {
  stroke: var(--highcharts-color-5);
}

#emu-combo-chart .highcharts-series-6 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-6 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-6 .highcharts-graph,
#exam-results-chart .highcharts-series-6 .highcharts-graph {
  stroke: var(--highcharts-color-6);
}

#emu-combo-chart .highcharts-series-7 .highcharts-graph,
#emu-muni-combo-chart .highcharts-series-7 .highcharts-graph,
#inst-emu-dotplot .highcharts-series-7 .highcharts-graph,
#exam-results-chart .highcharts-series-7 .highcharts-graph {
  stroke: var(--highcharts-color-7);
}

/* avg-grade-chart uses its own colors from series data */
/* The chart is NOT using styledMode, so Highcharts applies colors directly from series.color */
/* No CSS color overrides needed - colors come from the JavaScript series configuration */

/* Admin Dashboard - Activity Chart (emu_admin/dashboard) */
/* series-0 = Neaktīvi (amber), series-1 = Aktīvi (green) */
#chart-activity .highcharts-series-0 .highcharts-point {
  fill: var(--highcharts-color-2);
}

#chart-activity .highcharts-series-1 .highcharts-point {
  fill: var(--highcharts-color-1);
}

#performance-distribution-chart .highcharts-data-label text {
  font-size: 10px !important;
  font-weight: normal !important;
}

.emu-stacked-tooltip {
  color: #111827; /* gray-900 */
}

.dark .emu-stacked-tooltip {
  color: #f3f4f6; /* gray-100 */
}

.emu-tooltip-header {
  color: #111827;
}

.dark .emu-tooltip-header {
  color: #f3f4f6;
}

/* Keep yearly chart data labels dark in dark mode (bars are light pastel colors) */
.dark #performance-yearly-chart .highcharts-data-label text,
.dark #absence-distribution-chart .highcharts-data-label text {
  fill: #111827 !important;
}