/*
 * Highcharts v12+ visual overrides.
 *
 * Highcharts v12 ships a built-in stylesheet that paints the chart background
 * dark when the OS reports `prefers-color-scheme: dark`. That stylesheet sets
 * `fill:` on the `.highcharts-background` SVG rect, and a CSS `fill` beats the
 * `backgroundColor` attribute that `Highcharts.setOptions({ chart: {...} })`
 * writes - so the JS defaults in `highcharts-defaults.js` are not enough on
 * their own, and the chart background still goes black on dark-mode browsers.
 *
 * These rules force every chart on the site to render on a white canvas with
 * the pre-v12 palette, regardless of the viewer's OS theme. They are not
 * wrapped in a `prefers-color-scheme: dark` media query on purpose: the whole
 * site is designed to be viewed light, so the chart stays light in both modes.
 *
 * `color-scheme: light` on the chart container stops the browser from
 * flipping any form controls (export menu, dropdowns) that Highcharts hands
 * off to native UA styling.
 */

.highcharts-container,
.highcharts-root {
	color-scheme: light;
}

/* Chart + plot area backgrounds (the two SVG <rect>s v12 fills in dark mode) */
.highcharts-background {
	fill: #ffffff !important;
}
.highcharts-plot-background {
	fill: #ffffff !important;
}
.highcharts-plot-border {
	stroke: none !important;
}

/* Axis + gridline palette - pre-v12 values */
.highcharts-axis-line {
	stroke: #ccd6eb !important;
}
.highcharts-tick {
	stroke: #ccd6eb !important;
}
.highcharts-grid-line {
	stroke: #e6e6e6 !important;
}
.highcharts-minor-grid-line {
	stroke: #f2f2f2 !important;
}

/* Text (titles, axis labels, legend, data labels, tooltips) */
.highcharts-title,
.highcharts-subtitle,
.highcharts-axis-title,
.highcharts-axis-labels text,
.highcharts-legend-item text,
.highcharts-data-label text,
.highcharts-data-labels text,
.highcharts-tooltip text {
	fill: #333333 !important;
	color: #333333 !important;
}

/* Remove the white halo Highcharts puts around data labels on dark bgs */
.highcharts-data-label text,
.highcharts-data-labels text {
	text-shadow: none !important;
	stroke-width: 0 !important;
}

/*
 * Pie / donut slice labels: the label sits ON TOP of a coloured sector, so
 * dark text is low-contrast against the mid-tone slice colours used across
 * the site. Force white only inside pie series so bar / column data labels
 * (which sit on the chart's white canvas) stay dark and readable.
 *
 * `text-shadow` + a thin dark `stroke` give the label a faint outline so the
 * white stays legible on the lightest slice colours too.
 */
.highcharts-pie-series .highcharts-data-label text,
.highcharts-pie-series .highcharts-data-labels text,
.highcharts-pie-series .highcharts-data-label tspan,
.highcharts-pie-series .highcharts-data-labels tspan {
	fill: #ffffff !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
	stroke: rgba(0, 0, 0, 0.25) !important;
	stroke-width: 0.4px !important;
	paint-order: stroke fill !important;
}

/* Credits ("Highcharts.com" footer) stays dim */
.highcharts-credits {
	fill: #999999 !important;
}

/* Tooltip bubble background + border */
.highcharts-tooltip-box {
	fill: #ffffff !important;
	fill-opacity: 0.95 !important;
	stroke: #cccccc !important;
}

/* Navigation / export menu button */
.highcharts-button-box {
	fill: #ffffff !important;
	stroke: #cccccc !important;
}
.highcharts-button-symbol {
	stroke: #333333 !important;
}

/* Map / point selected states - keep contrast on the white canvas */
.highcharts-null-point {
	fill: #f7f7f7 !important;
}