/*
	HarTeluk house style for Manage.

	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;

	/*
		Flagged rows and cards - an expiring contract, a shift that was never clocked out. These are the
		card colour with a touch of the semantic colour mixed in, not a plane on the semantic hue
		itself: amber laid over dark blue at any real strength reads as brown, and a screen like the
		clocked hours has most of its rows carrying one. The colour they are named after is carried by
		a bar down the left edge instead, which is loud enough on its own.
	*/
	--ht-flag-warning: #32444e;
	--ht-flag-danger: #313653;
	--ht-flag-success: #13445a;
	--ht-flag-primary: #1e3663;
}

/* ---<< 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,
body:not([data-mode=light]) .white-underline-href {
	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,
body:not([data-mode=light]) .white-underline-href: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);
}

/* The dashed divider between the location and schedule pickers in the top bar. */
body:not([data-mode=light]) .topbar-planning-select {
	border-right-color: var(--ht-line);
}

body:not([data-mode=light]) .navbar-custom .select2-container .select2-selection--single,
body:not([data-mode=light]) .topbar-planning-select .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);
}

/* custom.css draws this separator in a theme grey. */
body:not([data-mode=light]) .card.shadow-sm > .card-body {
	border-top-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);
}

/* The blocks the shift exchange screen puts the two shifts in; a lone grey in the theme. */
body:not([data-mode=light]) .tasklist li {
	background-color: var(--ht-surface-alt);
	border-color: var(--ht-line);
}

/*
	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);
}

/*
	Flagged rows and card bodies. The fill is painted on both the row and its cells, because the
	striping of Bootstrap 5 paints the cell over the row background; the edge bar goes on the first
	cell, since a box-shadow on a tr does not render through a collapsed border.
*/
body:not([data-mode=light]) .bg-extra-soft-warning,
body:not([data-mode=light]) .bg-extra-soft-warning > * {
	background: var(--ht-flag-warning) !important;
	--bs-table-accent-bg: transparent;
}

body:not([data-mode=light]) .bg-extra-soft-danger,
body:not([data-mode=light]) .bg-extra-soft-danger > * {
	background: var(--ht-flag-danger) !important;
	--bs-table-accent-bg: transparent;
}

body:not([data-mode=light]) .bg-extra-soft-success,
body:not([data-mode=light]) .bg-extra-soft-success > * {
	background: var(--ht-flag-success) !important;
	--bs-table-accent-bg: transparent;
}

body:not([data-mode=light]) .bg-extra-soft-primary,
body:not([data-mode=light]) .bg-extra-soft-primary > * {
	background: var(--ht-flag-primary) !important;
	--bs-table-accent-bg: transparent;
}

body:not([data-mode=light]) .bg-extra-soft-warning,
body:not([data-mode=light]) tr.bg-extra-soft-warning > *:first-child {
	box-shadow: inset 4px 0 0 #f7b84b;
}

body:not([data-mode=light]) .bg-extra-soft-danger,
body:not([data-mode=light]) tr.bg-extra-soft-danger > *:first-child {
	box-shadow: inset 4px 0 0 #f1556c;
}

body:not([data-mode=light]) .bg-extra-soft-success,
body:not([data-mode=light]) tr.bg-extra-soft-success > *:first-child {
	box-shadow: inset 4px 0 0 var(--ht-success-text);
}

body:not([data-mode=light]) .bg-extra-soft-primary,
body:not([data-mode=light]) tr.bg-extra-soft-primary > *:first-child {
	box-shadow: inset 4px 0 0 rgb(var(--harteluk-gold));
}

/* The row itself must not draw the bar as well, or it shows through every cell. */
body:not([data-mode=light]) tr.bg-extra-soft-warning,
body:not([data-mode=light]) tr.bg-extra-soft-danger,
body:not([data-mode=light]) tr.bg-extra-soft-success,
body:not([data-mode=light]) tr.bg-extra-soft-primary,
body:not([data-mode=light]) tr.bg-extra-soft-warning > *:not(:first-child),
body:not([data-mode=light]) tr.bg-extra-soft-danger > *:not(:first-child),
body:not([data-mode=light]) tr.bg-extra-soft-success > *:not(:first-child),
body:not([data-mode=light]) tr.bg-extra-soft-primary > *:not(:first-child) {
	box-shadow: none;
}

/* ---<< 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);
}

/* 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);
}

/*
	The modal form fields are forced to a theme grey in custom.css, background and text colour both
	with !important.
*/
body:not([data-mode=light]) .modal-body .form-control,
body:not([data-mode=light]) .modal-body .select2-selection__rendered,
body:not([data-mode=light]) .modal-body select,
body:not([data-mode=light]) .modal-body textarea,
body:not([data-mode=light]) .modal-body input {
	background-color: var(--ht-sunken) !important;
	color: var(--ht-text) !important;
}

/* ---<< 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 action buttons inside the schedule dropdown are set in custom.css with !important, in raw
	Bootstrap colours that have no relation to the rest of the interface. Only the neutral ones move to
	the brand palette; the green one confirms and keeps its role.
*/
body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-info,
body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-primary,
body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-secondary {
	background-color: var(--ht-raised) !important;
	color: var(--ht-text) !important;
}

body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-info:hover,
body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-primary:hover,
body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-secondary:hover {
	background-color: rgb(var(--harteluk-gold)) !important;
	color: var(--ht-on-gold) !important;
}

body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-success {
	background-color: var(--ht-success) !important;
}

body:not([data-mode=light]) .dropdown.schedule-actions .dropdown-menu .dropdown-item.btn-success:hover {
	background-color: var(--ht-success-hover) !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);
}

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));
}

/* ---<< Planner >>------------------------------------------------------------------------------- */
/*
	The schedule runs on Mobiscroll, which brings its own dark theme with a grey run and a light blue
	accent. The shift blocks themselves are coloured per profession from the data and stay untouched;
	everything around them follows the tonal scale. custom.css already pinned a few of these surfaces
	to a theme grey, hence the repetition here.
*/
body:not([data-mode=light]) .mbsc-material-dark.mbsc-eventcalendar,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-footer-bg,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-bg,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-text,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-resource-bg,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-resource-footer-cont,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-resource-header-cont,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-row-fixed,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-sidebar-footer-cont,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-sidebar-header-cont,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-wrapper {
	background: var(--ht-surface);
	box-shadow: none;
}

body:not([data-mode=light]) .mbsc-material-dark.mbsc-popup-body,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-popup-arrow,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-picker-slide,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-datepicker .mbsc-calendar-slide {
	background: var(--ht-sunken);
}

body:not([data-mode=light]) .mbsc-material-dark.mbsc-button-standard,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-switch-track {
	background: var(--ht-raised);
}

body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-all-day-item:after,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-column,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-item,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-resource,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-resource-group,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-time-col,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-column,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-day:after,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-footer,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-footer-column,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-footer-date,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-footer-week,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-column,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-date,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-month,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-week,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-resource,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-row,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-row-date,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-row-group:after,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-sidebar-resource,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-slot-header,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-slots,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-day,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-week-day,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-textfield-fieldset {
	border-color: var(--ht-line);
}

body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-wrapper:after {
	border-top-color: var(--ht-line);
}

/* The accent of the library is a light blue; it is chrome, so it turns gold. */
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-today,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-week-nr,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-label,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-month-title,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-list-header,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-popup-button.mbsc-font,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-checkbox-box,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-radio-box,
body:not([data-mode=light]) .mbsc-material-dark .mbsc-block-title,
body:not([data-mode=light]) .mbsc-material-dark a,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-cursor-time,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-time-indicator-time,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-header-day-today,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-header-dayname-curr,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-label-floating.mbsc-focus,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-label-stacked.mbsc-focus {
	color: rgb(var(--harteluk-gold));
}

body:not([data-mode=light]) .mbsc-material-dark.mbsc-selected .mbsc-calendar-cell-text,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-header-day.mbsc-selected,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timegrid-item.mbsc-selected,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-switch-handle.mbsc-checked,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-calendar-mark,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-timeline-header-active:after,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-textfield-ripple {
	background: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body:not([data-mode=light]) .mbsc-material-dark.mbsc-schedule-time-indicator,
body:not([data-mode=light]) .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-focus {
	border-color: rgb(var(--harteluk-gold));
}

/*
	The totals, budget and last-year rows below the schedule. Their colours come from an inline <style>
	in the template, split per light and dark layout, which is why the guard is needed to outweigh it.
*/
body:not([data-mode=light]) .totalsBottomContainer,
body:not([data-mode=light]) .budgetPerDayBottomContainer,
body:not([data-mode=light]) .revenueLastYearBottomContainer {
	background-color: var(--ht-surface-alt);
	border-top-color: var(--ht-line);
	color: var(--ht-text);
}

body:not([data-mode=light]) .totalsBottomContainer > div,
body:not([data-mode=light]) .totalsBottomContainer > .footer-scroll-viewport > .footer-scroll-content > div,
body:not([data-mode=light]) .budgetPerDayBottomContainer > .footer-scroll-viewport > .footer-scroll-content > div,
body:not([data-mode=light]) .revenueLastYearBottomContainer > .footer-scroll-viewport > .footer-scroll-content > div {
	border-left-color: var(--ht-line);
	border-right-color: var(--ht-line);
}

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

body:not([data-mode=light]) .work-order-special-day-notation {
	border-bottom-color: var(--ht-line);
}

body:not([data-mode=light]) .md-work-order-date {
	border-bottom-color: var(--ht-line);
}

body:not([data-mode=light]) .md-work-order-date-title,
body:not([data-mode=light]) .plannerTooltipContentTitle {
	color: var(--ht-text-dim);
}

body:not([data-mode=light]) .mds-tooltip-header {
	color: var(--ht-text);
}

body:not([data-mode=light]) .mds-tooltip-label {
	border-bottom-color: var(--ht-line);
}

/* The nestable list on the special days page forces white text with !important. */
body:not([data-mode=light]) .dd-list .dd-item .dd-handle,
body:not([data-mode=light]) .dd-list .dd3-content {
	background: var(--ht-raised);
	border-color: var(--ht-line);
}

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

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

/* ---<< Hours and reports >>---------------------------------------------------------------------- */
/*
	The hour tables draw their column groups with borders in a theme grey, from an inline <style> in
	the widget. The grouping washes in that same block are left alone: they are meaning, not chrome.
*/
body:not([data-mode=light]) .hoursTable-groupingLine,
body:not([data-mode=light]) .hoursTable-dashedBorderLeft,
body:not([data-mode=light]) .hoursTable-dashedBorderRight,
body:not([data-mode=light]) .hoursTable-borderLeft,
body:not([data-mode=light]) .hoursTable-borderRight {
	border-color: var(--ht-line-strong);
}

body:not([data-mode=light]) .displayFilterTitle,
body:not([data-mode=light]) .time-subscript {
	color: var(--ht-text-dim);
}

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

body:not([data-mode=light]) .spinner,
body:not([data-mode=light]) .pageLoadSpinner,
body:not([data-mode=light]) .scheduleLoadSpinner {
	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 black overlay. 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 blend mode has to be reset, since
	custom.css multiplies the photo with a grey.

	Resetting that blend mode also drops the darkening the multiply provided, so the overlay carries it
	instead: this opacity puts the photo back at the brightness it had before the house style.
*/
body:not([data-mode=light]).authentication-bg-pattern {
	background-color: var(--ht-bg);
	background-image:
		linear-gradient(rgba(0, 0, 0, .48), rgba(0, 0, 0, .48)),
		url('../images/background-manage.webp');
	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);
}

/* ---<< Employee card: dashboard planes >>----------------------------------------------------- */
/*
	The status and score planes of the employee dashboard are translucent tints in the light theme;
	over the dark blue those would shift hue like the soft labels do, so each gets the even plane of
	its badge-soft sibling (same saturation and lightness, own hue), with 'better' one step greener
	than 'good' the way the wall display separates them.
*/
body:not([data-mode=light]) {
	--performance-plane-better: #1f4f2e;
	--performance-plane-good: #224f46;
	--performance-plane-warning: #4f3e22;
	--performance-plane-danger: #4f2228;
}

body:not([data-mode=light]) .surveyScoreCell1 {
	background-color: #4f2228 !important;
}

body:not([data-mode=light]) .surveyScoreCell2 {
	background-color: #4f3522 !important;
}

body:not([data-mode=light]) .surveyScoreCell3 {
	background-color: #4f4522 !important;
}

body:not([data-mode=light]) .surveyScoreCell4 {
	background-color: #354f22 !important;
}

body:not([data-mode=light]) .surveyScoreCell5 {
	background-color: #224f46 !important;
}

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