/*
	HarTeluk house style for the Highcharts graphs in Manage - the wage costs, the capacity forecast
	and the management report.

	These charts are not in styled mode, so Highcharts writes its colours straight into the SVG. Two
	kinds of colour end up there and they need different handling:

	- Shapes (background, grid lines, axis lines, ticks, tooltip box) get them as presentation
	  attributes on the element. A plain CSS rule already outweighs those.
	- Text (axis labels, axis titles, legend items) gets them as an inline style attribute, put there
	  by assets/js/meriad/meriad.highcharts.style.js. Only !important beats that, and that file is
	  deliberately left alone: it also runs with the house style switched off.

	The series colours are the identity of the lines and stay exactly as the data delivers them.

	The tonal scale this file reads from lives in harteluk-dark.css, which is loaded just before it and
	under the same condition; on its own this file has nothing to draw with.
*/

/* The chart sits inside a card, so it should not carry a plane of its own. */
body:not([data-mode=light]) .highcharts-background {
	fill: transparent;
}

body:not([data-mode=light]) .highcharts-plot-background,
body:not([data-mode=light]) .highcharts-plot-border {
	fill: transparent;
	stroke: none;
}

body:not([data-mode=light]) .highcharts-grid-line {
	stroke: var(--ht-line);
}

body:not([data-mode=light]) .highcharts-minor-grid-line {
	stroke: rgba(204, 175, 119, .1);
}

body:not([data-mode=light]) .highcharts-axis-line,
body:not([data-mode=light]) .highcharts-tick {
	stroke: var(--ht-line-strong);
}

body:not([data-mode=light]) .highcharts-axis-labels text,
body:not([data-mode=light]) .highcharts-axis-labels tspan {
	fill: var(--ht-text-dim) !important;
	color: var(--ht-text-dim) !important;
}

body:not([data-mode=light]) .highcharts-axis-title,
body:not([data-mode=light]) .highcharts-axis-title tspan {
	fill: var(--ht-text) !important;
	color: var(--ht-text) !important;
}

body:not([data-mode=light]) .highcharts-title,
body:not([data-mode=light]) .highcharts-subtitle {
	fill: rgb(var(--harteluk-gold)) !important;
	color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) .highcharts-legend-item text,
body:not([data-mode=light]) .highcharts-legend-item tspan {
	fill: var(--ht-text) !important;
	color: var(--ht-text) !important;
}

/* A legend entry that has been switched off; the theme leaves it at the same weight as the rest. */
body:not([data-mode=light]) .highcharts-legend-item-hidden text,
body:not([data-mode=light]) .highcharts-legend-item-hidden tspan {
	fill: var(--ht-text-faint) !important;
	color: var(--ht-text-faint) !important;
}

body:not([data-mode=light]) .highcharts-legend-title text {
	fill: rgb(var(--harteluk-gold)) !important;
}

/*
	The tooltip. Highcharts draws it as an SVG path unless a chart asks for useHTML, so both shapes
	are covered here. It sits above the card and takes the sunken step, the way the dropdowns do.
*/
body:not([data-mode=light]) .highcharts-tooltip-box,
body:not([data-mode=light]) .highcharts-tooltip path {
	fill: var(--ht-sunken);
	stroke: var(--ht-line-strong);
}

/*
	Only the text element, never the tspans inside it. In a shared tooltip each row starts with a
	bullet that carries the colour of its series as an inline style on its own tspan; the rest inherit
	from the text element, so they follow along and the bullets keep telling you which line is which.
*/
body:not([data-mode=light]) .highcharts-tooltip text {
	fill: var(--ht-text) !important;
	color: var(--ht-text) !important;
}

body:not([data-mode=light]) .highcharts-tooltip-container .highcharts-label > span {
	color: var(--ht-text) !important;
}

body:not([data-mode=light]) .highcharts-tooltip b,
body:not([data-mode=light]) .highcharts-tooltip tspan.highcharts-header {
	fill: var(--ht-text-strong) !important;
	color: var(--ht-text-strong) !important;
}

body:not([data-mode=light]) .highcharts-crosshair {
	stroke: var(--ht-line-strong);
}

/* The band a shared tooltip lays over the hovered category. */
body:not([data-mode=light]) .highcharts-plot-band {
	fill: rgba(204, 175, 119, .08);
}

body:not([data-mode=light]) .highcharts-plot-line {
	stroke: var(--ht-line-strong);
}

/* Range selector, navigator and export menu; only in use if a chart turns them on. */
body:not([data-mode=light]) .highcharts-button > rect,
body:not([data-mode=light]) .highcharts-button-box {
	fill: var(--ht-raised);
	stroke: var(--ht-line);
}

body:not([data-mode=light]) .highcharts-button text {
	fill: var(--ht-text) !important;
}

body:not([data-mode=light]) .highcharts-button-hover > rect,
body:not([data-mode=light]) .highcharts-button-pressed > rect {
	fill: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .highcharts-button-hover text,
body:not([data-mode=light]) .highcharts-button-pressed text {
	fill: var(--ht-on-gold) !important;
}

body:not([data-mode=light]) .highcharts-menu {
	background: var(--ht-sunken) !important;
	border-color: var(--ht-line) !important;
	box-shadow: none !important;
}

body:not([data-mode=light]) .highcharts-menu-item {
	color: var(--ht-text) !important;
}

body:not([data-mode=light]) .highcharts-menu-item:hover {
	background: var(--ht-raised) !important;
	color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) .highcharts-no-data text {
	fill: var(--ht-text-dim) !important;
}

body:not([data-mode=light]) .highcharts-credits {
	fill: var(--ht-text-faint) !important;
}