/*
	HarTeluk house style for the backoffice.

	Derived from manage.harteluk/manage/assets/css/harteluk-dark.css, which is where the palette was
	worked out and where the contrast of every step was measured. The two sit on the same UBold theme,
	so keep them in step: what changes here for a shared component should change there as well. The
	sections for the planner, the hour tables and the schedule action menu are left out, since none of
	those screens exist here.

	This file is loaded as the last stylesheet and only when the dark layout is active. It overrides
	colours from the UBold theme, from assets/css/custom.css and from the inline <style> blocks in the
	templates; layout, sizing and behaviour are left untouched.

	The palette consists of the three brand colours - blue, gold and red - plus a tonal scale derived
	from the brand blue. That scale exists because UBold takes its depth from a run of greys (#303841,
	#36404a, #3b4651, #424e5a, ...); laying only the brand colours over that produces a flat screen in
	which cards, fields and tiles can no longer be told apart. Every UBold grey is tied to a step of
	the scale below.

	Colours that carry meaning - confirm, cancel, warn, leave types, availability, chart series - keep
	the tints the rest of the suite uses for them, so staff keep recognising them. Elements with a
	semantic Bootstrap class that in practice only navigate are listed separately further down.

	Every rule is scoped to body:not([data-mode=light]) rather than written bare. The theme switcher in
	the right sidebar swaps the layout client side without reloading the page, so this stylesheet stays
	loaded when someone picks the light layout; without the guard it would wreck that layout until the
	next page load. The light layout is deliberately left unbranded.

	That same guard carries the extra weight needed to beat the inline <style> blocks in the templates,
	which sit later in the document and would otherwise win at equal specificity.
*/

:root {
	/* Brand colours as RGB triplets so they can be used in rgba() at varying opacity. */
	--harteluk-blue: 27, 65, 107;
	--harteluk-gold: 204, 175, 119;
	--harteluk-red: 164, 42, 46;

	/* Tonal scale, deep to light. Replaces the grey run of the theme. */
	--ht-bg: #07182a;
	--ht-sunken: #0b2139;
	--ht-surface: #12314f;
	--ht-surface-alt: #16395c;
	/* The step tiles, button faces and hover sit on is the brand blue itself. */
	--ht-raised: rgb(var(--harteluk-blue));
	--ht-raised-hover: #245688;

	--ht-line: rgba(204, 175, 119, .2);
	--ht-line-strong: rgba(204, 175, 119, .4);

	/*
		Gold is an accent, not a reading colour: it carries the headings, the card titles, the links and
		the active states. Running text, table cells, labels and field values keep the soft grey of the
		theme - a screen full of gold text is exhausting to work in all day, and flat white is harsh.

		Those greys turn out to sit on hue 211 already, which is the hue of the brand blue itself, so
		this is the theme's own scale pushed onto that hue exactly and lifted a little: the theme's
		#94a0ad only reaches 3.9:1 on the raised step, this holds 5.1:1 there.
	*/
	--ht-text-strong: #d1dbe5;
	--ht-text: #a9b7c6;
	--ht-text-dim: #8a98a8;
	--ht-text-faint: #667585;

	/*
		The menu reads as text too, so it takes the same soft white; the brand shows there through the
		gold of the item you are on.
	*/
	--ht-menu-text: #a9b7c6;

	/*
		A rule that separates rather than decorates: it sits a step below the text it divides, so it
		does not compete with it. The gold hairline above is for framing, this one for grouping.
	*/
	--ht-line-soft: rgba(169, 183, 198, .28);

	/* Text on a gold surface. */
	--ht-on-gold: #10293f;

	/*
		Confirm stays green, but the neon #1abc9c of the theme shouts against this blue. This tint
		carries the same meaning, sits more calmly next to the brand palette and holds white button
		text at 4.8:1 - the theme had white on #1abc9c at 3.5, which was too light.
	*/
	--ht-success: #178163;
	--ht-success-hover: #19906e;
	/*
		As text the fill colour is too dark: #178163 only reaches 2.8 against a card. Same hue, raised
		until it holds 5.7 on a card and 4.5 on the raised step.
	*/
	--ht-success-text: #22c093;
}

/* ---<< Base and typography >>------------------------------------------------------------------ */
body:not([data-mode=light]) {
	background-color: var(--ht-bg);
	color: var(--ht-text);
}

/* A Bootstrap utility, so it carries !important and needs one back to be overridden at all. */
body:not([data-mode=light]) .bg-body {
	background-color: var(--ht-bg) !important;
}

/*
	The wrapper has to stay transparent. Absolutely positioned backdrops elsewhere in the interface sit
	behind it and would disappear the moment the wrapper itself gets an opaque plane.
*/
body:not([data-mode=light]) #wrapper {
	background-color: transparent;
}

body:not([data-mode=light]) h1, body:not([data-mode=light]) h2, body:not([data-mode=light]) h3,
body:not([data-mode=light]) h4, body:not([data-mode=light]) h5, body:not([data-mode=light]) h6,
body:not([data-mode=light]) .h1, body:not([data-mode=light]) .h2, body:not([data-mode=light]) .h3,
body:not([data-mode=light]) .h4, body:not([data-mode=light]) .h5, body:not([data-mode=light]) .h6 {
	color: rgb(var(--harteluk-gold));
}

/* In this theme .text-dark is the light text colour, not a dark one; it marks the values in a pair. */
body:not([data-mode=light]) .text-dark {
	color: var(--ht-text-strong) !important;
}

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

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

/* .text-primary carries !important in custom.css, so this needs one too. */
body:not([data-mode=light]) .text-primary {
	color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) a,
body:not([data-mode=light]) .link-light,
body:not([data-mode=light]) .link-secondary {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) a:hover,
body:not([data-mode=light]) .link-light:hover,
body:not([data-mode=light]) .link-secondary:hover {
	color: #e2cb9c;
}

/*
	Alerts are left with the pale planes the theme gives them, because an alert is meant to shout. That
	means nothing inside one may take its colour from this palette: gold on the secondary plane reads
	2.0:1 and the light text step 1.3:1. They inherit from the alert instead, which carries a colour
	per variant, and a link keeps its underline to stay recognisable without one.
*/
body:not([data-mode=light]) .alert a {
	color: inherit;
	text-decoration: underline;
}

body:not([data-mode=light]) .alert .text-dark,
body:not([data-mode=light]) .alert .text-light,
body:not([data-mode=light]) .alert .text-secondary,
body:not([data-mode=light]) .alert .text-muted,
body:not([data-mode=light]) .alert .text-primary {
	color: inherit !important;
}

/*
	Bootstrap draws an hr not with a border but with background-color: currentColor. Setting only the
	text colour is therefore enough here - passing a background colour makes the line disappear.
*/
body:not([data-mode=light]) hr {
	color: var(--ht-line-strong);
	opacity: 1;
}

body:not([data-mode=light]) .dropdown-divider {
	border-top-color: var(--ht-line);
}

body:not([data-mode=light]) .page-title-box .page-title,
body:not([data-mode=light]) .header-title,
body:not([data-mode=light]) .card-title {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .breadcrumb-item > a,
body:not([data-mode=light]) .breadcrumb-item.active,
body:not([data-mode=light]) .breadcrumb-item + .breadcrumb-item::before {
	color: var(--ht-text-dim);
}

/* ---<< Top bar >>------------------------------------------------------------------------------ */
body:not([data-mode=light]) .navbar-custom,
body:not([data-mode=light])[data-topbar-color] .navbar-custom {
	background-color: var(--ht-surface-alt) !important;
	box-shadow: none;
}

body:not([data-mode=light]) .logo-box,
body:not([data-mode=light])[data-sidebar-color] .logo-box {
	background-color: var(--ht-surface);
}

body:not([data-mode=light]) .navbar-custom .topnav-menu .nav-link,
body:not([data-mode=light])[data-topbar-color] .navbar-custom .topnav-menu .nav-link,
body:not([data-mode=light]) .navbar-custom .button-menu-mobile,
body:not([data-mode=light])[data-topbar-color] .navbar-custom .button-menu-mobile,
body:not([data-mode=light]) .navbar-custom .noti-icon {
	color: var(--ht-text);
}

body:not([data-mode=light]) .navbar-custom .topnav-menu .nav-link:hover,
body:not([data-mode=light]) .navbar-custom .button-menu-mobile:hover {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .navbar-custom .dropdown .nav-link.show {
	background-color: var(--ht-raised);
}

body:not([data-mode=light]) .navbar-custom .select2-container .select2-selection--single {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

/* ---<< Left menu >>---------------------------------------------------------------------------- */
/*
	The theme colours the side menu through body[data-sidebar-color], and custom.css adds a rule of its
	own on top of that; both weigh more than a plain class. #wrapper always surrounds the menu in the
	markup and lifts the weight here far enough. The attribute is repeated in the selector because the
	theme always sets it and custom.css uses it too.
*/
body:not([data-mode=light]) #wrapper .left-side-menu,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu {
	background-color: var(--ht-surface);
	box-shadow: none;
}

body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu > ul > li > a,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu .nav-second-level li a,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu .nav-thrid-level li a,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu .menu-title {
	color: var(--ht-menu-text);
}

body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu > ul > li > a:hover,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu > ul > li > a:focus,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu > ul > li > a:active,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu > ul > li > a.mm-active,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu .menuitem-active > a,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu .menuitem-active .active,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu .nav-second-level li a:hover,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu .nav-second-level li a:focus,
body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu .nav-second-level li.active > a {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light])[data-sidebar-color] #wrapper .left-side-menu #sidebar-menu > ul > li > a.mm-active {
	background-color: var(--ht-raised);
}

/* The label that unfolds beside an icon in the collapsed menu. */
body:not([data-mode=light])[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a,
body:not([data-mode=light])[data-sidebar-color][data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a,
body:not([data-mode=light])[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul ul {
	background-color: var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) #wrapper .left-side-menu .simplebar-scrollbar::before {
	background: var(--ht-line-strong);
}

body:not([data-mode=light]) #sidebar-menu .menu-arrow {
	color: var(--ht-menu-text);
}

/* Bootstrap draws an hr with background-color: currentColor, so only the text colour is set here. */
body:not([data-mode=light]) #wrapper .left-side-menu hr {
	color: var(--ht-line-soft);
	opacity: 1;
}

/* ---<< Right settings panel and footer >>------------------------------------------------------ */
body:not([data-mode=light]) .right-bar {
	background-color: var(--ht-surface);
}

body:not([data-mode=light]) .right-bar .rightbar-title {
	background-color: var(--ht-surface-alt);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .rightbar-overlay {
	background-color: rgba(3, 10, 18, .8);
}

/* .bg-light is the section header band inside the right panel and the grouping row in tables. */
body:not([data-mode=light]) .bg-light {
	background-color: var(--ht-surface-alt) !important;
}

body:not([data-mode=light]) .footer {
	background-color: transparent;
	border-top: 1px solid var(--ht-line);
	color: var(--ht-text-dim);
}

body:not([data-mode=light]) .footer a,
body:not([data-mode=light]) .footer .footer-links a {
	color: var(--ht-text-dim);
}

body:not([data-mode=light]) .footer a:hover,
body:not([data-mode=light]) .footer .footer-links a:hover {
	color: rgb(var(--harteluk-gold));
}

/* ---<< Cards, lists and tables >>-------------------------------------------------------------- */
body:not([data-mode=light]) .card,
body:not([data-mode=light]) .modal-content,
body:not([data-mode=light]) .offcanvas,
body:not([data-mode=light]) .popover,
body:not([data-mode=light]) #preloader {
	background-color: var(--ht-surface);
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .card {
	border: 1px solid var(--ht-line);
}

body:not([data-mode=light]) .card-header,
body:not([data-mode=light]) .card-footer,
body:not([data-mode=light]) .popover-header {
	background-color: var(--ht-surface-alt);
	border-color: var(--ht-line);
}

/*
	A plane of its own rather than transparent: a list group does not always sit on a card, and where
	it stands on its own the items would otherwise drop through to the page background.
*/
body:not([data-mode=light]) .list-group-item {
	background-color: var(--ht-surface);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

/* The band that heads a group inside a list - a course, a cancelled section. */
body:not([data-mode=light]) .list-group-item.bg-body {
	background-color: var(--ht-surface-alt) !important;
}

body:not([data-mode=light]) .list-group-item-action:hover,
body:not([data-mode=light]) .list-group-item-action:focus {
	background-color: var(--ht-raised);
}

/*
	Bootstrap hands the row colour of a striped or hovered table down through its own custom
	properties, so setting only `color` here would leave every odd row on the grey of the theme.
*/
body:not([data-mode=light]) .table {
	color: var(--ht-text);
	border-color: var(--ht-line);
	--bs-table-striped-color: var(--ht-text);
	--bs-table-active-color: var(--ht-text);
	--bs-table-hover-color: var(--ht-text);
}

body:not([data-mode=light]) .table > :not(caption) > * > * {
	border-color: var(--ht-line);
}

/* Column headings are part of the reading, not a title, so they take the top step of the text scale. */
body:not([data-mode=light]) .table > thead th,
body:not([data-mode=light]) .table > thead > tr > th,
body:not([data-mode=light]) table.dataTable > thead th {
	color: var(--ht-text-strong);
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-accent-bg: var(--ht-surface-alt);
}

body:not([data-mode=light]) .table-hover > tbody > tr:hover > * {
	--bs-table-accent-bg: var(--ht-raised);
}

/*
	A row that already carries a colour keeps it under the cursor. Hover says where you are; it does
	not outrank what the row is telling you, so a sick shift or a flagged hour stays the colour it was.
*/
body:not([data-mode=light]) .table-hover > tbody > tr[class*="table-"]:hover > *,
body:not([data-mode=light]) .table-hover > tbody > tr[class*="bg-extra-soft-"]:hover > * {
	--bs-table-accent-bg: transparent;
}

body:not([data-mode=light]) table.dataTable tbody > tr.selected,
body:not([data-mode=light]) table.dataTable tbody > tr > .selected {
	background-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) table.dataTable tbody > tr.selected td,
body:not([data-mode=light]) table.dataTable tbody > tr > .selected td {
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) table.dataTable tbody th.focus,
body:not([data-mode=light]) table.dataTable tbody td.focus {
	outline-color: rgb(var(--harteluk-gold)) !important;
	background-color: var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .dataTables_wrapper .dataTables_info,
body:not([data-mode=light]) .dataTables_wrapper .dataTables_length,
body:not([data-mode=light]) .dataTables_wrapper .dataTables_filter {
	color: var(--ht-text-dim);
}

/* ---<< Dropdowns and pagination >>------------------------------------------------------------- */
body:not([data-mode=light]) .dropdown-menu,
body:not([data-mode=light]) .dropdown-menu-dark {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .dropdown-item,
body:not([data-mode=light]) .dropdown-menu-dark .dropdown-item {
	color: var(--ht-text);
}

body:not([data-mode=light]) .dropdown-item:hover,
body:not([data-mode=light]) .dropdown-item:focus,
body:not([data-mode=light]) .dropdown-item.active,
body:not([data-mode=light]) .dropdown-item:active,
body:not([data-mode=light]) .dropdown-menu-dark .dropdown-item:hover,
body:not([data-mode=light]) .dropdown-menu-dark .dropdown-item:focus {
	background-color: var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .dropdown-item.disabled,
body:not([data-mode=light]) .dropdown-item:disabled {
	color: var(--ht-text-faint);
}

body:not([data-mode=light]) .dropdown-header,
body:not([data-mode=light]) .noti-title h5,
body:not([data-mode=light]) .noti-title h6 {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .notification-list .notify-item .notify-details {
	color: var(--ht-text);
}

body:not([data-mode=light]) .dropdown-icon-item {
	border-color: var(--ht-line);
	color: var(--ht-text);
}

body:not([data-mode=light]) .dropdown-icon-item:hover {
	background-color: var(--ht-raised);
	border-color: var(--ht-line-strong);
}

body:not([data-mode=light]) .page-link {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

body:not([data-mode=light]) .page-link:hover {
	background-color: var(--ht-raised);
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .page-item.active .page-link {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .page-link:focus {
	box-shadow: 0 0 0 .15rem rgba(var(--harteluk-gold), .45);
}

/* ---<< Forms >>-------------------------------------------------------------------------------- */
body:not([data-mode=light]) .form-control,
body:not([data-mode=light]) .form-select,
body:not([data-mode=light]) .form-check-input {
	color: var(--ht-text);
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .form-control:focus,
body:not([data-mode=light]) .form-select:focus,
body:not([data-mode=light]) .form-check-input:focus {
	color: var(--ht-text);
	background-color: var(--ht-sunken);
	border-color: var(--ht-line-strong);
	box-shadow: none;
}

body:not([data-mode=light]) .form-control:disabled,
body:not([data-mode=light]) .form-control[readonly],
body:not([data-mode=light]) .form-select:disabled {
	color: var(--ht-text-dim);
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .form-control::placeholder {
	color: var(--ht-text-faint);
}

body:not([data-mode=light]) .input-group-text {
	color: var(--ht-text);
	background-color: var(--ht-surface-alt);
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .form-label,
body:not([data-mode=light]) label,
body:not([data-mode=light]) .form-check-label {
	color: var(--ht-text);
}

/*
	The cash registry closure writes every field label as an h5 - sixty-five of them - which would make
	the whole screen read as a wall of titles. Scoped to the form that wraps the page, since h5 is the
	label element there and nothing else. Excluded are the headings that really are titles: the card
	headers, the page header and the modal header. The h4 in the middle of a row is the plus between
	two amounts, and the h6 is a notice, so both follow the text as well. The bare h4 elsewhere on the
	page opens an explanation and stays gold.

	Inline opacity on some of these labels keeps working: it dims whatever colour lands here.
*/
body:not([data-mode=light]) #cashRegistryPrimairyForm h5:not(.card-title):not(.modal-title):not(.page-title),
body:not([data-mode=light]) #cashRegistryPrimairyForm h6:not(.card-title),
body:not([data-mode=light]) #cashRegistryPrimairyForm h4.text-center {
	color: var(--ht-text);
}

/* The rules between the blocks of that form group amounts, so they take the soft line. */
body:not([data-mode=light]) #cashRegistryPrimairyForm hr {
	color: var(--ht-line-soft);
}

/* custom.css sets this one with !important. */
body:not([data-mode=light]) .form-check-input:checked {
	background-color: rgb(var(--harteluk-gold)) !important;
	border-color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) .form-check-input:focus {
	box-shadow: 0 0 0 .15rem rgba(var(--harteluk-gold), .35);
}

body:not([data-mode=light]) .invalid-feedback {
	color: #f1556c;
}

/*
	The filter block above the reports and graphs. Its plain white text and white hairline came from
	custom.css and were the last non-brand elements above the fold.
*/
body:not([data-mode=light]) .filterContainer {
	border-bottom-color: var(--ht-line);
}

body:not([data-mode=light]) .filterContainer .labelForFilter {
	color: var(--ht-text-dim);
}

body:not([data-mode=light]) .filterContainer .optionsForFilter,
body:not([data-mode=light]) .filterContainer .select2-container .select2-selection--single .select2-selection__rendered,
body:not([data-mode=light]) .filterContainer .flatpickr-input {
	color: var(--ht-text);
}

body:not([data-mode=light]) .filterContainer .flatpickr-input {
	border-color: var(--ht-line);
}

/* ---<< Select2 >>------------------------------------------------------------------------------ */
body:not([data-mode=light]) .select2-container .select2-selection--single,
body:not([data-mode=light]) .select2-container .select2-selection--multiple,
body:not([data-mode=light]) .select2-dropdown,
body:not([data-mode=light]) .select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line) !important;
	color: var(--ht-text);
}

body:not([data-mode=light]) .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ht-text);
}

body:not([data-mode=light]) .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--ht-text-dim);
}

/* Both of these carry !important in custom.css. */
body:not([data-mode=light]) .select2-container--default .select2-results__option--highlighted[aria-selected],
body:not([data-mode=light]) .select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--ht-raised) !important;
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .select2-container .select2-selection--multiple .select2-selection__choice {
	background-color: var(--ht-raised) !important;
	border-color: var(--ht-line);
	color: var(--ht-text);
}

/* ---<< Flatpickr >>---------------------------------------------------------------------------- */
body:not([data-mode=light]) .flatpickr-calendar,
body:not([data-mode=light]) .flatpickr-months,
body:not([data-mode=light]) .flatpickr-monthDropdown-months {
	background: var(--ht-sunken);
	color: var(--ht-text);
}

body:not([data-mode=light]) .flatpickr-day,
body:not([data-mode=light]) span.flatpickr-weekday,
body:not([data-mode=light]) .flatpickr-current-month input.cur-year,
body:not([data-mode=light]) .flatpickr-monthSelect-month,
body:not([data-mode=light]) .flatpickr-time input,
body:not([data-mode=light]) .flatpickr-time .flatpickr-am-pm,
body:not([data-mode=light]) .flatpickr-time .flatpickr-time-separator {
	color: var(--ht-text);
	fill: var(--ht-text);
}

body:not([data-mode=light]) .flatpickr-day:hover,
body:not([data-mode=light]) .flatpickr-day.today {
	background: var(--ht-raised);
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .flatpickr-day.flatpickr-disabled,
body:not([data-mode=light]) .flatpickr-day.flatpickr-disabled:hover,
body:not([data-mode=light]) .flatpickr-day.prevMonthDay,
body:not([data-mode=light]) .flatpickr-day.nextMonthDay {
	color: var(--ht-text-faint);
}

/* .flatpickr-rContainer .selected carries !important in custom.css. */
body:not([data-mode=light]) .flatpickr-day.selected,
body:not([data-mode=light]) .flatpickr-day.startRange,
body:not([data-mode=light]) .flatpickr-day.endRange,
body:not([data-mode=light]) .flatpickr-day.selected:hover,
body:not([data-mode=light]) .flatpickr-day.startRange:hover,
body:not([data-mode=light]) .flatpickr-day.endRange:hover,
body:not([data-mode=light]) .flatpickr-rContainer .selected,
body:not([data-mode=light]) .flatpickr-monthSelect-month.selected {
	background: rgb(var(--harteluk-gold)) !important;
	border-color: rgb(var(--harteluk-gold)) !important;
	color: var(--ht-on-gold) !important;
}

body:not([data-mode=light]) .flatpickr-day.inRange {
	background: var(--ht-raised);
	border-color: var(--ht-raised);
	box-shadow: -5px 0 0 var(--ht-raised), 5px 0 0 var(--ht-raised);
}

body:not([data-mode=light]) .flatpickr-months .flatpickr-prev-month svg,
body:not([data-mode=light]) .flatpickr-months .flatpickr-next-month svg {
	fill: var(--ht-text-dim);
}

body:not([data-mode=light]) .flatpickr-months .flatpickr-prev-month:hover svg,
body:not([data-mode=light]) .flatpickr-months .flatpickr-next-month:hover svg {
	fill: rgb(var(--harteluk-gold));
}

/* ---<< Buttons >>------------------------------------------------------------------------------ */
/*
	btn-success and btn-danger stay green and red: those are confirm and cancel. Every neutral button
	takes a brand colour. All of these are also declared in custom.css, which is why the rules here
	repeat the disabled and active states rather than relying on the theme.
*/
body:not([data-mode=light]) .btn-primary,
body:not([data-mode=light]) .btn-primary.disabled,
body:not([data-mode=light]) .btn-primary:disabled {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .btn-primary:hover,
body:not([data-mode=light]) .btn-primary:focus,
body:not([data-mode=light]) .btn-primary:active,
body:not([data-mode=light]) .btn-primary.active,
body:not([data-mode=light]) .show > .btn-primary.dropdown-toggle {
	background-color: #dcc294;
	border-color: #dcc294;
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .btn-outline-primary {
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
	background-color: transparent;
}

body:not([data-mode=light]) .btn-outline-primary:hover {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .btn-secondary,
body:not([data-mode=light]) .btn-light,
body:not([data-mode=light]) .btn-dark,
body:not([data-mode=light]) .btn-white {
	background-color: var(--ht-raised);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

body:not([data-mode=light]) .btn-secondary:hover,
body:not([data-mode=light]) .btn-light:hover,
body:not([data-mode=light]) .btn-dark:hover,
body:not([data-mode=light]) .btn-white:hover,
body:not([data-mode=light]) .btn-secondary:focus,
body:not([data-mode=light]) .btn-light:focus,
body:not([data-mode=light]) .btn-dark:focus,
body:not([data-mode=light]) .btn-white:focus {
	background-color: var(--ht-raised-hover);
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .btn-outline-secondary,
body:not([data-mode=light]) .btn-outline-light,
body:not([data-mode=light]) .btn-outline-dark {
	border-color: var(--ht-line-strong);
	color: var(--ht-text);
	background-color: transparent;
}

body:not([data-mode=light]) .btn-outline-secondary:hover,
body:not([data-mode=light]) .btn-outline-light:hover,
body:not([data-mode=light]) .btn-outline-dark:hover {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .btn-link {
	color: rgb(var(--harteluk-gold));
}

/*
	The focus ring of the theme is coloured per button kind, so a gold button used to get a green glow.
	Focus only says where you are and carries no meaning, so it is brand gold everywhere.

	The list is this long because the theme has separate, heavier rules for a button that has focus and
	is switched on at the same time. Note the difference between the class .active and the pseudo class
	:active - a tab that is on carries the class, not the pseudo class.
*/
body:not([data-mode=light]) .btn:focus,
body:not([data-mode=light]) .btn.focus,
body:not([data-mode=light]) .btn.active:focus,
body:not([data-mode=light]) .btn:active:focus,
body:not([data-mode=light]) .btn.show:focus,
body:not([data-mode=light]) .btn:not(:disabled):not(.disabled):active:focus,
body:not([data-mode=light]) .btn:not(:disabled):not(.disabled).active:focus,
body:not([data-mode=light]) .btn.dropdown-toggle.show:focus,
body:not([data-mode=light]) .btn-primary:active:focus,
body:not([data-mode=light]) .btn-primary:focus,
body:not([data-mode=light]) .show > .btn-primary.dropdown-toggle:focus,
body:not([data-mode=light]) .btn-close:focus,
body:not([data-mode=light]) .btn-check:focus + .btn,
body:not([data-mode=light]) .btn-check:checked + .btn:focus,
body:not([data-mode=light]) .btn-check:active + .btn:focus {
	box-shadow: 0 0 0 .15rem rgba(var(--harteluk-gold), .45);
}

/* Confirm stays green, in a tint that sits beside the brand blue instead of on top of it. */
body:not([data-mode=light]) .btn-success,
body:not([data-mode=light]) .bg-success,
body:not([data-mode=light]) .badge.bg-success {
	background-color: var(--ht-success) !important;
	border-color: var(--ht-success) !important;
	color: #fff;
}

body:not([data-mode=light]) .btn-success:hover,
body:not([data-mode=light]) .btn-success:focus,
body:not([data-mode=light]) .btn-success:active,
body:not([data-mode=light]) .btn-check:focus + .btn-success,
body:not([data-mode=light]) .btn-success:not(:disabled):not(.disabled):active {
	background-color: var(--ht-success-hover) !important;
	border-color: var(--ht-success-hover) !important;
	color: #fff;
}

body:not([data-mode=light]) .btn-outline-success {
	border-color: var(--ht-success-text);
	color: var(--ht-success-text);
	background-color: transparent;
}

body:not([data-mode=light]) .btn-outline-success:hover,
body:not([data-mode=light]) .btn-outline-success:focus {
	background-color: var(--ht-success);
	border-color: var(--ht-success);
	color: #fff;
}

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

/* Cancel stays red; the brand has a red, so those two coincide here. */
body:not([data-mode=light]) .btn-danger,
body:not([data-mode=light]) .bg-danger,
body:not([data-mode=light]) .badge.bg-danger {
	background-color: rgb(var(--harteluk-red)) !important;
	border-color: rgb(var(--harteluk-red)) !important;
	color: #fff;
}

body:not([data-mode=light]) .btn-danger:hover,
body:not([data-mode=light]) .btn-danger:focus,
body:not([data-mode=light]) .btn-danger:active {
	background-color: #b93036 !important;
	border-color: #b93036 !important;
	color: #fff;
}

body:not([data-mode=light]) .btn-outline-danger {
	border-color: #f1556c;
	color: #f1556c;
	background-color: transparent;
}

body:not([data-mode=light]) .btn-outline-danger:hover {
	background-color: rgb(var(--harteluk-red));
	border-color: rgb(var(--harteluk-red));
	color: #fff;
}

/* Warn keeps its amber; custom.css forces white text on it with !important. */
body:not([data-mode=light]) .btn-warning {
	background-color: #f7b84b;
	border-color: #f7b84b;
	color: var(--ht-on-gold) !important;
}

body:not([data-mode=light]) .btn-warning:hover,
body:not([data-mode=light]) .btn-warning:focus {
	background-color: #f9c66c;
	border-color: #f9c66c;
	color: var(--ht-on-gold) !important;
}

/*
	The button back to the dashboard on the error pages carries btn-success because that happened to be
	the green button; it confirms nothing, so it turns gold.
*/
body:not([data-mode=light]) .error-text-box + .text-center .btn-success {
	background-color: rgb(var(--harteluk-gold)) !important;
	border-color: rgb(var(--harteluk-gold)) !important;
	color: var(--ht-on-gold);
}

/* ---<< Navigation >>--------------------------------------------------------------------------- */
body:not([data-mode=light]) .nav-tabs {
	border-bottom-color: var(--ht-line);
}

body:not([data-mode=light]) .nav-tabs .nav-link,
body:not([data-mode=light]) .nav-pills .nav-link {
	color: var(--ht-text-dim);
}

body:not([data-mode=light]) .nav-tabs .nav-link:hover,
body:not([data-mode=light]) .nav-tabs .nav-link:focus {
	border-color: var(--ht-line);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .nav-tabs .nav-link.active,
body:not([data-mode=light]) .nav-tabs .nav-item.show .nav-link {
	background-color: var(--ht-raised);
	border-color: var(--ht-line);
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .nav-pills .nav-link.active,
body:not([data-mode=light]) .nav-pills .show > .nav-link {
	background-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

/* custom.css sets this underline with !important. */
body:not([data-mode=light]) .nav-bordered a.active {
	border-bottom-color: rgb(var(--harteluk-gold)) !important;
	color: rgb(var(--harteluk-gold));
}

/* ---<< Labels >>-------------------------------------------------------------------------------- */
/*
	The status labels keep their own colour - that is what they are for - but not as the wash of the
	theme, which is 18% of that colour laid over the plane behind it. Over dark blue amber turns olive,
	red turns plum, and the text on the blue variants drops to 2.2:1. Each label gets an even plane on
	its own hue at the same saturation and lightness, so the whole set reads as one family beside the
	brand blue, with the label colour on top at 4.5:1 or better.

	Several of these labels are buttons in disguise: the history, edit and new controls on the employee
	card are spans carrying badge-soft-warning or -secondary.
*/
body:not([data-mode=light]) .badge-soft-warning,
body:not([data-mode=light]) .bg-soft-warning {
	background-color: #4f3e22 !important;
	color: #f7b84b;
}

body:not([data-mode=light]) .badge-soft-danger,
body:not([data-mode=light]) .bg-soft-danger {
	background-color: #4f2228 !important;
	color: #f36a7e;
}

body:not([data-mode=light]) .badge-soft-success,
body:not([data-mode=light]) .bg-soft-success {
	background-color: #224f46 !important;
	color: #1ccca9;
}

body:not([data-mode=light]) .badge-soft-info,
body:not([data-mode=light]) .bg-soft-info {
	background-color: #22464f !important;
	color: #4fc6e1;
}

body:not([data-mode=light]) .badge-soft-pink,
body:not([data-mode=light]) .bg-soft-pink {
	background-color: #4f2234 !important;
	color: #f672a7;
}

body:not([data-mode=light]) .badge-soft-primary,
body:not([data-mode=light]) .badge-soft-purple,
body:not([data-mode=light]) .bg-soft-primary,
body:not([data-mode=light]) .bg-soft-purple {
	background-color: #26224f !important;
	color: #8c82e5;
}

body:not([data-mode=light]) .badge-soft-blue,
body:not([data-mode=light]) .bg-soft-blue {
	background-color: #22334f !important;
	color: #79a2df;
}

/* Secondary, light and dark carry no meaning, so they take the brand plane. */
body:not([data-mode=light]) .badge-soft-secondary,
body:not([data-mode=light]) .badge-soft-light,
body:not([data-mode=light]) .badge-soft-dark,
body:not([data-mode=light]) .bg-soft-secondary,
body:not([data-mode=light]) .bg-soft-light,
body:not([data-mode=light]) .bg-soft-dark {
	background-color: var(--ht-raised-hover) !important;
	color: var(--ht-text-strong);
}

body:not([data-mode=light]) .badge.bg-primary,
body:not([data-mode=light]) .badge.bg-blue,
body:not([data-mode=light]) .badge.bg-purple,
body:not([data-mode=light]) .badge-pill {
	background-color: rgb(var(--harteluk-gold)) !important;
	color: var(--ht-on-gold);
}

/* ---<< Dashboard tiles >>---------------------------------------------------------------------- */
/*
	The round tiles on the dashboard, on the employee overview and above the revenue figures get their
	colour from ColorManager, which hands out danger, info, warning, primary, success, pink and blue in
	turn. They keep those seven colours, but not as the wash of the theme: a 25% tint of amber over
	dark blue reads olive and one of red reads purple. Each tile gets an even plane on the hue itself,
	with the ring and the icon on top of it at 4.5:1 or better.
*/
body:not([data-mode=light]) .widget-rounded-circle .avatar-lg,
body:not([data-mode=light]) .widget-rounded-circle .avatar-md,
body:not([data-mode=light]) .widget-rounded-circle .avatar-sm {
	border-width: 1px;
	border-style: solid;
}

/*
	These tiles are buttons, so their heading is a label and not a title: it reads with the text scale,
	the way the revenue tiles already do by carrying text-dark. The colour of the tile is in the ring.
*/
body:not([data-mode=light]) .widget-rounded-circle h1,
body:not([data-mode=light]) .widget-rounded-circle h2,
body:not([data-mode=light]) .widget-rounded-circle h3,
body:not([data-mode=light]) .widget-rounded-circle h4,
body:not([data-mode=light]) .widget-rounded-circle h5,
body:not([data-mode=light]) .widget-rounded-circle h6 {
	color: var(--ht-text-strong);
}

/*
	Same on the weather cards of the start page: temperature, wind and humidity are readings put in a
	heading. Their captions above them keep the opacity the template gives them.
*/
body:not([data-mode=light]) .weather-element-value {
	color: var(--ht-text-strong);
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-danger {
	background-color: #57232b !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-danger {
	border-color: #f37386 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-danger {
	color: #f37386 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-info {
	background-color: #234d57 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-info {
	border-color: #4fc6e1 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-info {
	color: #4fc6e1 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-warning {
	background-color: #574423 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-warning {
	border-color: #f7b84b !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-warning {
	color: #f7b84b !important;
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-primary,
body:not([data-mode=light]) .widget-rounded-circle .bg-soft-purple {
	background-color: #292357 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-primary,
body:not([data-mode=light]) .widget-rounded-circle .border-purple {
	border-color: #8f85e6 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-primary,
body:not([data-mode=light]) .widget-rounded-circle .text-purple {
	color: #8f85e6 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-success {
	background-color: #23574d !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-success {
	border-color: #1ed8b3 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-success {
	color: #1ed8b3 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-pink {
	background-color: #572338 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-pink {
	border-color: #f672a7 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-pink {
	color: #f672a7 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .bg-soft-blue {
	background-color: #233857 !important;
}

body:not([data-mode=light]) .widget-rounded-circle .border-blue {
	border-color: #79a2df !important;
}

body:not([data-mode=light]) .widget-rounded-circle .text-blue {
	color: #79a2df !important;
}

/* A tile is a link; hover lifts the whole card rather than only the ring. */
body:not([data-mode=light]) a:hover > .widget-rounded-circle.card {
	background-color: var(--ht-surface-alt);
	border-color: var(--ht-line-strong);
}

/* ---<< Borders >>------------------------------------------------------------------------------ */
body:not([data-mode=light]) .border,
body:not([data-mode=light]) .border-light,
body:not([data-mode=light]) .border-top,
body:not([data-mode=light]) .border-bottom,
body:not([data-mode=light]) .border-start,
body:not([data-mode=light]) .border-end {
	border-color: var(--ht-line) !important;
}

/*
	These have to stand after .border: on a status card both classes sit side by side and weigh the
	same, so the order decides which border gets to tell the status.
*/
body:not([data-mode=light]) .border-primary,
body:not([data-mode=light]) .border-blue,
body:not([data-mode=light]) .border-purple {
	border-color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) .border-success {
	border-color: var(--ht-success) !important;
}

body:not([data-mode=light]) .border-info {
	border-color: #4fc6e1 !important;
}

body:not([data-mode=light]) .border-warning {
	border-color: #f7b84b !important;
}

body:not([data-mode=light]) .border-danger {
	border-color: #f1556c !important;
}

/* The append button on the date range fields; a plain blue plane that only frames an icon. */
body:not([data-mode=light]) .input-group-text.bg-blue {
	background-color: var(--ht-raised) !important;
	color: rgb(var(--harteluk-gold)) !important;
}

/* ---<< Modals >>-------------------------------------------------------------------------------- */
body:not([data-mode=light]) .modal-header,
body:not([data-mode=light]) .modal-footer {
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .modal-header {
	background-color: var(--ht-surface-alt);
}

body:not([data-mode=light]) .modal-title {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .modal-backdrop.show {
	background-color: rgba(3, 10, 18, .8);
	opacity: 1;
}

body:not([data-mode=light]) .custom-modal {
	background: rgba(3, 10, 18, .95);
}

body:not([data-mode=light]) .btn-close {
	filter: none;
	color: var(--ht-text);
}

/* ---<< SweetAlert >>--------------------------------------------------------------------------- */
/*
	SweetAlert is loaded through a stylesheet of its own and the theme forces its icon colours with
	!important, while custom.css does the same for the confirm button. Without !important here the
	popup keeps the old accent.
*/
body:not([data-mode=light]) .swal2-popup {
	background: var(--ht-surface) !important;
	color: var(--ht-text);
}

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

body:not([data-mode=light]) .swal2-html-container,
body:not([data-mode=light]) .swal2-content {
	color: var(--ht-text) !important;
}

body:not([data-mode=light]) .swal2-modal .swal2-confirm,
body:not([data-mode=light]) .swal2-styled.swal2-confirm {
	background-color: var(--ht-success) !important;
	color: #fff !important;
}

body:not([data-mode=light]) .swal2-modal .swal2-cancel,
body:not([data-mode=light]) .swal2-styled.swal2-cancel {
	background-color: rgb(var(--harteluk-red)) !important;
	color: #fff !important;
}

body:not([data-mode=light]) .swal2-styled:focus {
	box-shadow: none !important;
}

/* The theme lays a light haze behind the popup; on a dark screen that flashes white. */
body:not([data-mode=light]) .swal2-container.swal2-backdrop-show,
body:not([data-mode=light]) .swal2-container.swal2-noanimation {
	background-color: rgba(3, 10, 18, .8) !important;
}

/* The question and info icons are brand; warning and error keep their meaning. */
body:not([data-mode=light]) .swal2-icon.swal2-question,
body:not([data-mode=light]) .swal2-icon.swal2-info {
	border-color: var(--ht-line-strong) !important;
	color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) .swal2-icon.swal2-success {
	border-color: var(--ht-success) !important;
}

body:not([data-mode=light]) .swal2-icon.swal2-success .swal2-success-ring,
body:not([data-mode=light]) .swal2-icon.swal2-success .placeholder {
	border-color: var(--ht-success) !important;
}

body:not([data-mode=light]) .swal2-icon.swal2-success [class^="swal2-success-line"],
body:not([data-mode=light]) .swal2-icon.swal2-success .line {
	background-color: var(--ht-success) !important;
}

body:not([data-mode=light]) .swal2-close {
	color: var(--ht-text-dim);
}

body:not([data-mode=light]) .swal2-close:hover {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .swal2-modal .swal2-input,
body:not([data-mode=light]) .swal2-modal .swal2-textarea,
body:not([data-mode=light]) .swal2-modal .swal2-file,
body:not([data-mode=light]) .swal2-modal .swal2-select {
	background: var(--ht-sunken);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

body:not([data-mode=light]) .swal2-modal .swal2-input:focus,
body:not([data-mode=light]) .swal2-modal .swal2-textarea:focus,
body:not([data-mode=light]) .swal2-modal .swal2-file:focus {
	border-color: var(--ht-line-strong);
}

/* ---<< Tooltips >>------------------------------------------------------------------------------ */
/*
	Tippy is initialised without a theme, so it falls back to its own dark grey. The fill has to be set
	in two places: with animateFill on - which is the default in this version - the box itself is
	transparent and what you actually see is the backdrop scaling up inside it. The border does sit on
	the box, which clips the backdrop to its rounded corners.

	The arrow is drawn as a css triangle out of borders, so a line cannot run around it; it takes the
	plane colour and the border simply stops there. The text keeps the white tippy gives it.
*/
body:not([data-mode=light]) .tippy-tooltip,
body:not([data-mode=light]) .tippy-backdrop {
	background-color: var(--ht-raised);
}

body:not([data-mode=light]) .tippy-tooltip {
	border: 1px solid var(--ht-line-strong);
}

body:not([data-mode=light]) .tippy-popper[x-placement^=top] .tippy-arrow {
	border-top-color: var(--ht-raised);
}

body:not([data-mode=light]) .tippy-popper[x-placement^=bottom] .tippy-arrow {
	border-bottom-color: var(--ht-raised);
}

body:not([data-mode=light]) .tippy-popper[x-placement^=left] .tippy-arrow {
	border-left-color: var(--ht-raised);
}

body:not([data-mode=light]) .tippy-popper[x-placement^=right] .tippy-arrow {
	border-right-color: var(--ht-raised);
}

body:not([data-mode=light]) .tippy-roundarrow {
	fill: var(--ht-raised);
}

/* ---<< Charts >>-------------------------------------------------------------------------------- */
/*
	The series colours of the graphs are set per chart in data-colors in the templates and are matched
	by legend dots beside them, so they stay put. Only the frame around them moves.
*/
body:not([data-mode=light]) .apexcharts-yaxis text,
body:not([data-mode=light]) .apexcharts-xaxis text,
body:not([data-mode=light]) .apexcharts-datalabels-group text,
body:not([data-mode=light]) .apexcharts-pie-label,
body:not([data-mode=light]) .apexcharts-datalabel,
body:not([data-mode=light]) .apexcharts-datalabel-label,
body:not([data-mode=light]) .apexcharts-datalabel-value,
body:not([data-mode=light]) .morris-chart text {
	fill: var(--ht-text-dim) !important;
}

body:not([data-mode=light]) .apexcharts-legend-text {
	color: var(--ht-text-dim) !important;
}

body:not([data-mode=light]) .apexcharts-gridline,
body:not([data-mode=light]) .apexcharts-xaxis line {
	stroke: var(--ht-line) !important;
}

body:not([data-mode=light]) .apexcharts-track path {
	stroke: var(--ht-raised);
}

/* The hover box of Morris is a white card in the theme. */
body:not([data-mode=light]) .morris-hover.morris-default-style {
	background: var(--ht-sunken);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

body:not([data-mode=light]) .morris-hover.morris-default-style .morris-hover-row-label {
	color: rgb(var(--harteluk-gold));
}

/* ---<< Spinners and loaders >>------------------------------------------------------------------- */
body:not([data-mode=light]) #pageLoadSpinnerWrapper {
	background: rgba(3, 10, 18, .9);
}

body:not([data-mode=light]) .spinner,
body:not([data-mode=light]) .pageLoadSpinner {
	border-top-color: var(--ht-line);
	border-right-color: var(--ht-line);
	border-bottom-color: var(--ht-line);
	border-left-color: rgb(var(--harteluk-gold)) !important;
}

body:not([data-mode=light]) .ladda-button-no-style {
	color: var(--ht-text);
}

/* ---<< Login and error pages >>------------------------------------------------------------------ */
/*
	The background photo gets a blue haze, the way the dashboard does it too. It is applied through a
	gradient in background-image rather than a ::before, because the content of this screen sits in a
	statically positioned container that would otherwise disappear behind the layer. The background
	colour has to come along: custom.css puts a maroon behind the photo, which shows at the edges.
*/
body:not([data-mode=light]).authentication-bg-pattern {
	background-color: var(--ht-bg);
	background-image:
		linear-gradient(rgba(7, 24, 42, .1), rgba(7, 24, 42, .1)),
		url('../images/background-image-dark.jpg');
	background-blend-mode: normal;
	background-size: cover;
	background-position: center;
}

body:not([data-mode=light]).authentication-bg .card,
body:not([data-mode=light]).authentication-bg-pattern .card {
	background-color: var(--ht-surface);
	border-color: var(--ht-line);
}

body:not([data-mode=light]).authentication-bg-pattern .subtitle {
	color: rgb(var(--harteluk-gold));
	border-color: var(--ht-line-strong);
}

body:not([data-mode=light]).authentication-bg .btn-primary {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .footer-alt {
	background-color: transparent;
	border-top: 0;
}

/* The svg lettering behind the error code takes the theme accent per repetition. */
body:not([data-mode=light]) .error-text-box .text {
	stroke: var(--ht-line-strong);
}