/*
	Third-party library colours on the tokens of tokens.css. Loaded last by the layouts.
	Light keeps each library's own look: the rules up front only swap a library colour for the token
	with the same light value, and everything else sits in the two dark blocks at the end, which are
	identical (system dark, then an explicit dark choice) and must be edited together.
	In those blocks ":where(&) .x" keeps the library's own weight, so the app's rules still win over
	it, while "& .x" outweighs a library that a view loads in <body>, after this file.
*/

/* flatpickr */
.flatpickr-calendar {
	background-color: var(--color-surface-raised);
}

.flatpickr-calendar.arrowTop:after {
	border-bottom-color: var(--color-surface-raised);
}

.flatpickr-calendar.arrowBottom:after {
	border-top-color: var(--color-surface-raised);
}

/* vanillaSelectBox */
.vsb-menu,
.vsb-js-search-zone,
.vsb-menu li,
.vsb-menu .multi li {
	background-color: var(--color-surface-raised);
}

.vsb-menu ul {
	color: var(--color-text-secondary);
}

.vsb-main button {
	background: var(--color-surface) !important;
	border-color: var(--color-border-muted) !important;
}

.vsb-main button:not(:hover, :focus) {
	color: var(--color-text-secondary);
}

.vsb-menu li.grouped-option i,
.vsb-menu .multi li:not(.grouped-option)::before {
	color: var(--color-text);
}

.vsb-menu li.grouped-option.open span,
.vsb-menu li.grouped-option.closed span,
.vsb-menu li.grouped-option.checked i::after,
.vsb-menu :not(.multi) li.active::before,
.vsb-menu .multi li:not(.grouped-option).active::after {
	border-bottom-color: var(--color-text);
	border-right-color: var(--color-text);
}

/* Native form controls: the input tokens' light values are the browser's own, and :where() keeps
   every app or library rule ahead of these. */
:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"], [type="hidden"]), select, textarea):where(:not(:disabled)),
:where(option, optgroup) {
	background-color: var(--color-input-bg);
	color: var(--color-input-text);
}

/* Logos with a dark-theme copy (Account views) */
img.logo-dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* comboTree, Choices.js and DataTables read these */
		--ct-bg: var(--color-surface-raised);
		--ct-border-color: var(--color-border);
		--ct-tree-hover: var(--color-surface-hover);
		--choices-bg-color: var(--color-input-bg);
		--choices-bg-color-dropdown: var(--color-surface-raised);
		--choices-bg-color-disabled: var(--color-surface-muted);
		--choices-disabled-color: var(--color-surface-muted);
		--choices-keyline-color: var(--color-border);
		--choices-highlighted-color: var(--color-surface-hover);
		--choices-text-color: var(--color-text);
		--choices-darken: var(--color-text);
		--dt-html-background: var(--color-surface);

		/* jQuery UI */
		:where(&) .ui-widget-content {
			border-color: var(--color-border);
			background-color: var(--color-surface);
			color: var(--color-text);
		}

		:where(&) .ui-widget.ui-widget-content,
		:where(&) .ui-widget-header {
			border-color: var(--color-border);
		}

		:where(&) .ui-widget-header {
			background-color: var(--color-surface-alt);
			color: var(--color-text);
		}

		:where(&) :is(.ui-widget-content, .ui-widget-header) a:not([href], [class]) {
			color: inherit;
		}

		:where(&) .ui-dialog,
		:where(&) .ui-dialog .ui-dialog-buttonpane,
		:where(&) .ui-menu,
		:where(&) .ui-tooltip,
		:where(&) .ui-datepicker {
			background-color: var(--color-surface-raised);
		}

		/* The active state is left to myStyle.css, which these would outweigh by coming later */
		:where(&) .ui-state-default:where(:not(.ui-state-active)),
		:where(&) .ui-widget-content .ui-state-default:where(:not(.ui-state-active)),
		:where(&) .ui-widget-header .ui-state-default:where(:not(.ui-state-active)),
		:where(&) .ui-button:where(:not(.ui-state-active)),
		:where(&) .ui-state-default:where(:not(.ui-state-active)) a,
		:where(&) .ui-state-default:where(:not(.ui-state-active)) a:link,
		:where(&) .ui-state-default:where(:not(.ui-state-active)) a:visited,
		:where(&) body .ui-button.ui-state-disabled:hover,
		:where(&) body .ui-button.ui-state-disabled:active {
			color: var(--color-text);
		}

		:where(&) .ui-state-default:where(:not(.ui-state-active, .custom-combobox-input)),
		:where(&) .ui-widget-content .ui-state-default:where(:not(.ui-state-active, .custom-combobox-input)),
		:where(&) .ui-widget-header .ui-state-default:where(:not(.ui-state-active, .custom-combobox-input)),
		:where(&) .ui-button:where(:not(.ui-state-active)),
		:where(&) body .ui-button.ui-state-disabled:hover,
		:where(&) body .ui-button.ui-state-disabled:active {
			border-color: var(--color-border);
			background-color: var(--color-surface-alt);
		}

		:where(&) .ui-state-hover:where(:not(.ui-state-active)),
		:where(&) .ui-widget-content .ui-state-hover:where(:not(.ui-state-active)),
		:where(&) .ui-widget-header .ui-state-hover:where(:not(.ui-state-active)),
		:where(&) .ui-state-focus:where(:not(.ui-state-active)),
		:where(&) .ui-widget-content .ui-state-focus:where(:not(.ui-state-active)),
		:where(&) .ui-widget-header .ui-state-focus:where(:not(.ui-state-active)),
		:where(&) .ui-button:hover:where(:not(:active, .ui-state-active)),
		:where(&) .ui-button:focus:where(:not(:active, .ui-state-active)) {
			border-color: var(--color-border-light);
			background-color: var(--color-surface-hover);
			color: var(--color-text);
		}

		:where(&) .ui-state-hover:where(:not(.ui-state-active)) a,
		:where(&) .ui-state-hover:where(:not(.ui-state-active)) a:hover,
		:where(&) .ui-state-hover:where(:not(.ui-state-active)) a:link,
		:where(&) .ui-state-hover:where(:not(.ui-state-active)) a:visited,
		:where(&) .ui-state-focus:where(:not(.ui-state-active)) a,
		:where(&) .ui-state-focus:where(:not(.ui-state-active)) a:hover,
		:where(&) .ui-state-focus:where(:not(.ui-state-active)) a:link,
		:where(&) .ui-state-focus:where(:not(.ui-state-active)) a:visited {
			color: var(--color-text);
		}

		:where(&) .ui-state-highlight:where(:not(.ui-state-active)),
		:where(&) .ui-widget-content .ui-state-highlight:where(:not(.ui-state-active)),
		:where(&) .ui-widget-header .ui-state-highlight:where(:not(.ui-state-active)) {
			border-color: var(--color-warning-border);
			background-color: var(--color-warning-bg);
			color: var(--color-warning-text);
		}

		:where(&) .ui-state-highlight:where(:not(.ui-state-active)) a,
		:where(&) .ui-widget-content .ui-state-highlight:where(:not(.ui-state-active)) a,
		:where(&) .ui-widget-header .ui-state-highlight:where(:not(.ui-state-active)) a {
			color: var(--color-warning-text);
		}

		:where(&) .ui-state-error,
		:where(&) .ui-widget-content .ui-state-error,
		:where(&) .ui-widget-header .ui-state-error {
			border-color: var(--color-danger-border);
			background-color: var(--color-danger-bg);
			color: var(--color-danger-text);
		}

		:where(&) .ui-state-error a,
		:where(&) .ui-widget-content .ui-state-error a,
		:where(&) .ui-widget-header .ui-state-error a,
		:where(&) .ui-state-error-text,
		:where(&) .ui-widget-content .ui-state-error-text,
		:where(&) .ui-widget-header .ui-state-error-text {
			color: var(--color-danger-text);
		}

		:where(&) .ui-icon-background,
		:where(&) .ui-state-active .ui-icon-background {
			background-color: var(--color-surface);
		}

		:where(&) .ui-state-checked {
			border-color: var(--color-warning-border);
			background-color: var(--color-warning-bg);
		}

		/* every sprite but the white one is dark grey or dark red */
		:where(&) .ui-icon,
		:where(&) .ui-widget-content .ui-icon,
		:where(&) .ui-widget-header .ui-icon,
		:where(&) .ui-state-hover .ui-icon,
		:where(&) .ui-state-focus .ui-icon,
		:where(&) .ui-button:hover .ui-icon,
		:where(&) .ui-button:focus .ui-icon,
		:where(&) .ui-state-highlight .ui-icon,
		:where(&) .ui-button .ui-state-highlight.ui-icon,
		:where(&) .ui-state-error .ui-icon,
		:where(&) .ui-state-error-text .ui-icon,
		:where(&) .ui-button .ui-icon {
			background-image: url("/Scripts/jQuery-ui/images/ui-icons_ffffff_256x240.png");
		}

		:where(&) .ui-widget-overlay {
			background: var(--color-scrim);
			opacity: 1;
		}

		/* jsTree: its sprite's dots and open arrow are near-black */
		:where(&) .jstree-default .jstree-node {
			background-image: linear-gradient(var(--color-border-strong) 50%, transparent 50%);
			background-position: 11px 0;
			background-size: 1px 2px;
		}

		:where(&) .jstree-default .jstree-last {
			background-image: none;
		}

		:where(&) .jstree-default .jstree-open > .jstree-ocl,
		:where(&) .jstree-default .jstree-leaf > .jstree-ocl {
			filter: invert(1);
		}

		:where(&) .jstree-default .jstree-hovered,
		:where(&) .jstree-default .jstree-context,
		:where(&) .jstree-default .jstree-wholerow-hovered {
			background: var(--color-surface-hover);
		}

		:where(&) .jstree-default .jstree-clicked,
		:where(&) .jstree-default .jstree-wholerow-clicked {
			background: var(--color-highlight);
		}

		/* flatpickr */
		:where(&) .flatpickr-calendar {
			box-shadow: 1px 0 0 var(--color-border), -1px 0 0 var(--color-border), 0 1px 0 var(--color-border), 0 -1px 0 var(--color-border), 0 3px 13px var(--color-shadow);
		}

		:where(&) .flatpickr-calendar.arrowTop:before {
			border-bottom-color: var(--color-border);
		}

		:where(&) .flatpickr-calendar.arrowBottom:before {
			border-top-color: var(--color-border);
		}

		:where(&) .flatpickr-months .flatpickr-month,
		:where(&) .flatpickr-months .flatpickr-prev-month,
		:where(&) .flatpickr-months .flatpickr-next-month {
			color: var(--color-text);
			fill: var(--color-text);
		}

		:where(&) .flatpickr-day,
		:where(&) .flatpickr-time input,
		:where(&) .flatpickr-time .flatpickr-time-separator,
		:where(&) .flatpickr-time .flatpickr-am-pm {
			color: var(--color-text);
		}

		:where(&) span.flatpickr-weekday {
			color: var(--color-text-muted);
		}

		:where(&) .numInputWrapper span {
			border-color: var(--color-border);
		}

		:where(&) .numInputWrapper span svg path {
			fill: var(--color-text-muted);
		}

		:where(&) .flatpickr-current-month .numInputWrapper span.arrowUp:after,
		:where(&) .flatpickr-time .numInputWrapper span.arrowUp:after {
			border-bottom-color: var(--color-text);
		}

		:where(&) .flatpickr-current-month .numInputWrapper span.arrowDown:after,
		:where(&) .flatpickr-time .numInputWrapper span.arrowDown:after {
			border-top-color: var(--color-text);
		}

		:where(&) .numInputWrapper:hover,
		:where(&) .numInputWrapper span:hover,
		:where(&) .flatpickr-current-month span.cur-month:hover,
		:where(&) .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
		:where(&) .flatpickr-time input:hover,
		:where(&) .flatpickr-time input:focus,
		:where(&) .flatpickr-time .flatpickr-am-pm:hover,
		:where(&) .flatpickr-time .flatpickr-am-pm:focus {
			background: var(--color-surface-hover);
		}

		:where(&) .dayContainer + .dayContainer {
			box-shadow: -1px 0 0 var(--color-border);
		}

		:where(&) .flatpickr-weekwrapper .flatpickr-weeks {
			box-shadow: 1px 0 0 var(--color-border);
		}

		:where(&) .flatpickr-calendar.hasTime .flatpickr-time {
			border-top-color: var(--color-border);
		}

		:where(&) .flatpickr-day.inRange,
		:where(&) .flatpickr-day.prevMonthDay.inRange,
		:where(&) .flatpickr-day.nextMonthDay.inRange,
		:where(&) .flatpickr-day.today.inRange,
		:where(&) .flatpickr-day.prevMonthDay.today.inRange,
		:where(&) .flatpickr-day.nextMonthDay.today.inRange,
		:where(&) .flatpickr-day:hover,
		:where(&) .flatpickr-day.prevMonthDay:hover,
		:where(&) .flatpickr-day.nextMonthDay:hover,
		:where(&) .flatpickr-day:focus,
		:where(&) .flatpickr-day.prevMonthDay:focus,
		:where(&) .flatpickr-day.nextMonthDay:focus {
			border-color: var(--color-surface-hover);
			background: var(--color-surface-hover);
		}

		:where(&) .flatpickr-day.inRange {
			box-shadow: -5px 0 0 var(--color-surface-hover), 5px 0 0 var(--color-surface-hover);
		}

		:where(&) .flatpickr-day.flatpickr-disabled,
		:where(&) .flatpickr-day.flatpickr-disabled:hover,
		:where(&) .flatpickr-day.prevMonthDay,
		:where(&) .flatpickr-day.nextMonthDay,
		:where(&) .flatpickr-day.notAllowed,
		:where(&) .flatpickr-day.notAllowed.prevMonthDay,
		:where(&) .flatpickr-day.notAllowed.nextMonthDay,
		:where(&) .flatpickr-current-month input.cur-year[disabled],
		:where(&) .flatpickr-weekwrapper span.flatpickr-day {
			color: var(--color-text-disabled);
		}

		/* flatpickr monthSelect plugin (Report/MonthlyReport) */
		& .flatpickr-monthSelect-month {
			color: var(--color-text);
		}

		& .flatpickr-monthSelect-month.disabled {
			color: var(--color-text-disabled);
		}

		& .flatpickr-monthSelect-month:hover,
		& .flatpickr-monthSelect-month:focus {
			background: var(--color-surface-hover);
		}

		& .flatpickr-monthSelect-month.selected {
			background-color: var(--color-selected);
			color: var(--color-text-inverse);
		}

		/* toastr: its fills stay; only the glow is too light */
		& #toast-container > div:not(:hover) {
			box-shadow: 0 0 12px var(--color-shadow-heavy);
		}

		/* vanillaSelectBox */
		:where(&) .vsb-menu {
			border-color: var(--color-border);
			box-shadow: 0 6px 12px var(--color-shadow);
		}

		:where(&) .vsb-menu li:hover,
		:where(&) .vsb-main li:hover {
			background: var(--color-surface-hover);
		}

		:where(&) .vsb-menu .multi li.grouped-option:hover {
			color: var(--color-brand-text);
		}

		/* tableSorter: SortingTable.css's arrow gifs and theme.bootstrap_4's arrow svgs are near-black */
		& table.tablesorter thead tr .header,
		& .tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
			background-image: conic-gradient(from 139deg at 50% 0, var(--color-text-muted) 82deg, transparent 0), conic-gradient(from -41deg at 50% 100%, var(--color-text-muted) 82deg, transparent 0);
			background-position: right 7px top calc(50% - 2.5px), right 7px top calc(50% + 2.5px);
			background-size: 7px 4px;
		}

		& table.tablesorter thead tr .headerSortDown,
		& .tablesorter-bootstrap thead .tablesorter-headerAsc {
			background-image: conic-gradient(from 139deg at 50% 0, var(--color-text-muted) 82deg, transparent 0);
			background-position: right 7px center;
			background-size: 7px 4px;
		}

		& table.tablesorter thead tr .headerSortUp,
		& .tablesorter-bootstrap thead .tablesorter-headerDesc {
			background-image: conic-gradient(from -41deg at 50% 100%, var(--color-text-muted) 82deg, transparent 0);
			background-position: right 7px center;
			background-size: 7px 4px;
		}

		& .tablesorter-bootstrap .bootstrap-icon-unsorted {
			filter: invert(1);
		}

		& .tablesorter-bootstrap th,
		& .tablesorter-bootstrap thead td,
		& .tablesorter-bootstrap tbody td {
			color: inherit;
		}

		& .tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row :is(input, select) {
			border-color: var(--color-border-input);
			background-color: var(--color-input-bg);
			color: var(--color-input-text);
		}

		& .tablesorter:not(.table-dark) .tablesorter-errorRow td {
			background-color: var(--color-danger-bg);
			color: var(--color-danger-text);
		}

		/* Bootstrap 4 (Device/Index, Report/InstalledPlayer) */
		& .table {
			color: inherit;
		}

		& .table th,
		& .table td {
			border-top-color: var(--color-border);
		}

		& .table thead th {
			border-bottom-color: var(--color-border);
		}

		& .form-control,
		& .custom-select {
			border-color: var(--color-border-input);
			background-color: var(--color-input-bg);
			color: var(--color-input-text);
		}

		& .form-control:focus,
		& .custom-select:focus {
			border-color: var(--color-focus);
		}

		& .form-control:disabled,
		& .form-control[readonly] {
			background-color: var(--color-surface-muted);
		}

		& .custom-select {
			background-image: conic-gradient(from -39deg at 50% 100%, var(--color-text-muted) 78deg, transparent 0);
			background-size: 8px 5px;
		}

		/* Select2 (Device/Index) */
		& .select2-dropdown {
			border-color: var(--color-border);
			background-color: var(--color-surface-raised);
		}

		& .select2-container--default .select2-selection--single,
		& .select2-container--default .select2-selection--multiple,
		& .select2-container--default .select2-search--dropdown .select2-search__field {
			border-color: var(--color-border-input);
			background-color: var(--color-input-bg);
		}

		& .select2-container--default.select2-container--focus .select2-selection--multiple {
			border-color: var(--color-border-strong);
		}

		& .select2-container--default.select2-container--disabled .select2-selection--single,
		& .select2-container--default.select2-container--disabled .select2-selection--multiple {
			background-color: var(--color-surface-muted);
		}

		& .select2-container--default .select2-selection--single .select2-selection__rendered,
		& .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
			color: var(--color-text);
		}

		& .select2-container--default .select2-selection--multiple .select2-selection__choice {
			border-color: var(--color-border);
			background-color: var(--color-surface-alt);
		}

		& .select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
			background-color: var(--color-surface-hover);
		}

		/* comboTree (Device/Index) */
		& .ct-drop-down-container label.ct-tree-item-hover {
			color: var(--color-text);
		}

		/* Choices.js (Report/FlowTracking): the single-select clear button is a black cross */
		& .choices[data-type*="select-one"] .choices__button {
			filter: invert(1);
		}

		/* DataTables (Home/Dashboard, Report/FlowTracking) */
		& table.dataTable > thead > tr > th,
		& table.dataTable > thead > tr > td {
			border-bottom-color: var(--color-border);
		}

		& table.dataTable > tfoot > tr > th,
		& table.dataTable > tfoot > tr > td {
			border-top-color: var(--color-border);
		}

		& table.dataTable.stripe > tbody > tr:nth-child(odd):not(.selected) > *,
		& table.dataTable.display > tbody > tr:nth-child(odd):not(.selected) > * {
			box-shadow: inset 0 0 0 9999px var(--color-row-stripe);
		}

		& table.dataTable.hover > tbody > tr:not(.selected):hover > *,
		& table.dataTable.display > tbody > tr:not(.selected):hover > * {
			box-shadow: inset 0 0 0 9999px var(--color-surface-hover);
		}

		& table.dataTable > tbody > tr > td.dtr-control::before,
		& table.dataTable > tbody > tr > th.dtr-control::before {
			border-left-color: var(--color-text-subtle);
		}

		& table.dataTable > tbody > tr > td.dtr-control.arrow-right::before,
		& table.dataTable > tbody > tr > th.dtr-control.arrow-right::before {
			border-right-color: var(--color-text-subtle);
		}

		& table.dataTable > tbody > tr.dtr-expanded > td.dtr-control::before,
		& table.dataTable > tbody > tr.dtr-expanded > th.dtr-control::before {
			border-top-color: var(--color-text-subtle);
			border-right-color: transparent;
			border-left-color: transparent;
		}

		& table.dataTable > tbody > tr.child ul.dtr-details > li {
			border-bottom-color: var(--color-border);
		}

		& div.dt-container .dt-paging .dt-paging-button.current,
		& div.dt-container .dt-paging .dt-paging-button.current:hover {
			border-color: var(--color-border);
			background: var(--color-surface-hover);
		}

		& div.dt-container .dt-paging .dt-paging-button.disabled,
		& div.dt-container .dt-paging .dt-paging-button.disabled:hover,
		& div.dt-container .dt-paging .dt-paging-button.disabled:active {
			color: var(--color-text-disabled) !important;
		}

		/* Gridstack (Home/Dashboard) */
		& .grid-stack-placeholder > .placeholder-content {
			background-color: var(--color-surface-hover);
		}

		& .grid-stack-item > :is(.ui-resizable-ne, .ui-resizable-nw, .ui-resizable-se, .ui-resizable-sw) {
			filter: invert(1);
		}

		/* Images drawn for a light ground */
		& img.logo-light {
			display: none;
		}

		& img.logo-dark {
			display: inline;
		}

		& :is(img, input[type="image"]):is([src*="/Pencil.png"], [src*="/Remove.png"], [src*="/Eye.png"], [src*="/EyeClosed.png"], [src*="/Copy.png"], [src*="/Archive.png"], [src*="check.png"], [src*="/exclamation.png"], [src*="XML.png"], [src*="/find.png"]),
		& :is(.addButton, .deleteButton, .editButton, .playing) {
			filter: brightness(1.4);
		}

		& img[src*="/Restore.png"] {
			filter: brightness(1.9);
		}

		& img[src*="/loading.gif"] {
			filter: brightness(1.6);
		}

		& .logo-linux {
			filter: drop-shadow(0 0 1px var(--color-text));
		}

		& .colone-az-order {
			background-image: url("/Content/images/AZ-dark.png");
		}

		& .colone-za-order {
			background-image: url("/Content/images/ZA-dark.png");
		}

		& .colone-09-order {
			background-image: url("/Content/images/09-dark.png");
		}

		& .colone-90-order {
			background-image: url("/Content/images/90-dark.png");
		}
	}
}

:root[data-theme="dark"] {
	/* comboTree, Choices.js and DataTables read these */
	--ct-bg: var(--color-surface-raised);
	--ct-border-color: var(--color-border);
	--ct-tree-hover: var(--color-surface-hover);
	--choices-bg-color: var(--color-input-bg);
	--choices-bg-color-dropdown: var(--color-surface-raised);
	--choices-bg-color-disabled: var(--color-surface-muted);
	--choices-disabled-color: var(--color-surface-muted);
	--choices-keyline-color: var(--color-border);
	--choices-highlighted-color: var(--color-surface-hover);
	--choices-text-color: var(--color-text);
	--choices-darken: var(--color-text);
	--dt-html-background: var(--color-surface);

	/* jQuery UI */
	:where(&) .ui-widget-content {
		border-color: var(--color-border);
		background-color: var(--color-surface);
		color: var(--color-text);
	}

	:where(&) .ui-widget.ui-widget-content,
	:where(&) .ui-widget-header {
		border-color: var(--color-border);
	}

	:where(&) .ui-widget-header {
		background-color: var(--color-surface-alt);
		color: var(--color-text);
	}

	:where(&) :is(.ui-widget-content, .ui-widget-header) a:not([href], [class]) {
		color: inherit;
	}

	:where(&) .ui-dialog,
	:where(&) .ui-dialog .ui-dialog-buttonpane,
	:where(&) .ui-menu,
	:where(&) .ui-tooltip,
	:where(&) .ui-datepicker {
		background-color: var(--color-surface-raised);
	}

	/* The active state is left to myStyle.css, which these would outweigh by coming later */
	:where(&) .ui-state-default:where(:not(.ui-state-active)),
	:where(&) .ui-widget-content .ui-state-default:where(:not(.ui-state-active)),
	:where(&) .ui-widget-header .ui-state-default:where(:not(.ui-state-active)),
	:where(&) .ui-button:where(:not(.ui-state-active)),
	:where(&) .ui-state-default:where(:not(.ui-state-active)) a,
	:where(&) .ui-state-default:where(:not(.ui-state-active)) a:link,
	:where(&) .ui-state-default:where(:not(.ui-state-active)) a:visited,
	:where(&) body .ui-button.ui-state-disabled:hover,
	:where(&) body .ui-button.ui-state-disabled:active {
		color: var(--color-text);
	}

	:where(&) .ui-state-default:where(:not(.ui-state-active, .custom-combobox-input)),
	:where(&) .ui-widget-content .ui-state-default:where(:not(.ui-state-active, .custom-combobox-input)),
	:where(&) .ui-widget-header .ui-state-default:where(:not(.ui-state-active, .custom-combobox-input)),
	:where(&) .ui-button:where(:not(.ui-state-active)),
	:where(&) body .ui-button.ui-state-disabled:hover,
	:where(&) body .ui-button.ui-state-disabled:active {
		border-color: var(--color-border);
		background-color: var(--color-surface-alt);
	}

	:where(&) .ui-state-hover:where(:not(.ui-state-active)),
	:where(&) .ui-widget-content .ui-state-hover:where(:not(.ui-state-active)),
	:where(&) .ui-widget-header .ui-state-hover:where(:not(.ui-state-active)),
	:where(&) .ui-state-focus:where(:not(.ui-state-active)),
	:where(&) .ui-widget-content .ui-state-focus:where(:not(.ui-state-active)),
	:where(&) .ui-widget-header .ui-state-focus:where(:not(.ui-state-active)),
	:where(&) .ui-button:hover:where(:not(:active, .ui-state-active)),
	:where(&) .ui-button:focus:where(:not(:active, .ui-state-active)) {
		border-color: var(--color-border-light);
		background-color: var(--color-surface-hover);
		color: var(--color-text);
	}

	:where(&) .ui-state-hover:where(:not(.ui-state-active)) a,
	:where(&) .ui-state-hover:where(:not(.ui-state-active)) a:hover,
	:where(&) .ui-state-hover:where(:not(.ui-state-active)) a:link,
	:where(&) .ui-state-hover:where(:not(.ui-state-active)) a:visited,
	:where(&) .ui-state-focus:where(:not(.ui-state-active)) a,
	:where(&) .ui-state-focus:where(:not(.ui-state-active)) a:hover,
	:where(&) .ui-state-focus:where(:not(.ui-state-active)) a:link,
	:where(&) .ui-state-focus:where(:not(.ui-state-active)) a:visited {
		color: var(--color-text);
	}

	:where(&) .ui-state-highlight:where(:not(.ui-state-active)),
	:where(&) .ui-widget-content .ui-state-highlight:where(:not(.ui-state-active)),
	:where(&) .ui-widget-header .ui-state-highlight:where(:not(.ui-state-active)) {
		border-color: var(--color-warning-border);
		background-color: var(--color-warning-bg);
		color: var(--color-warning-text);
	}

	:where(&) .ui-state-highlight:where(:not(.ui-state-active)) a,
	:where(&) .ui-widget-content .ui-state-highlight:where(:not(.ui-state-active)) a,
	:where(&) .ui-widget-header .ui-state-highlight:where(:not(.ui-state-active)) a {
		color: var(--color-warning-text);
	}

	:where(&) .ui-state-error,
	:where(&) .ui-widget-content .ui-state-error,
	:where(&) .ui-widget-header .ui-state-error {
		border-color: var(--color-danger-border);
		background-color: var(--color-danger-bg);
		color: var(--color-danger-text);
	}

	:where(&) .ui-state-error a,
	:where(&) .ui-widget-content .ui-state-error a,
	:where(&) .ui-widget-header .ui-state-error a,
	:where(&) .ui-state-error-text,
	:where(&) .ui-widget-content .ui-state-error-text,
	:where(&) .ui-widget-header .ui-state-error-text {
		color: var(--color-danger-text);
	}

	:where(&) .ui-icon-background,
	:where(&) .ui-state-active .ui-icon-background {
		background-color: var(--color-surface);
	}

	:where(&) .ui-state-checked {
		border-color: var(--color-warning-border);
		background-color: var(--color-warning-bg);
	}

	/* every sprite but the white one is dark grey or dark red */
	:where(&) .ui-icon,
	:where(&) .ui-widget-content .ui-icon,
	:where(&) .ui-widget-header .ui-icon,
	:where(&) .ui-state-hover .ui-icon,
	:where(&) .ui-state-focus .ui-icon,
	:where(&) .ui-button:hover .ui-icon,
	:where(&) .ui-button:focus .ui-icon,
	:where(&) .ui-state-highlight .ui-icon,
	:where(&) .ui-button .ui-state-highlight.ui-icon,
	:where(&) .ui-state-error .ui-icon,
	:where(&) .ui-state-error-text .ui-icon,
	:where(&) .ui-button .ui-icon {
		background-image: url("/Scripts/jQuery-ui/images/ui-icons_ffffff_256x240.png");
	}

	:where(&) .ui-widget-overlay {
		background: var(--color-scrim);
		opacity: 1;
	}

	/* jsTree: its sprite's dots and open arrow are near-black */
	:where(&) .jstree-default .jstree-node {
		background-image: linear-gradient(var(--color-border-strong) 50%, transparent 50%);
		background-position: 11px 0;
		background-size: 1px 2px;
	}

	:where(&) .jstree-default .jstree-last {
		background-image: none;
	}

	:where(&) .jstree-default .jstree-open > .jstree-ocl,
	:where(&) .jstree-default .jstree-leaf > .jstree-ocl {
		filter: invert(1);
	}

	:where(&) .jstree-default .jstree-hovered,
	:where(&) .jstree-default .jstree-context,
	:where(&) .jstree-default .jstree-wholerow-hovered {
		background: var(--color-surface-hover);
	}

	:where(&) .jstree-default .jstree-clicked,
	:where(&) .jstree-default .jstree-wholerow-clicked {
		background: var(--color-highlight);
	}

	/* flatpickr */
	:where(&) .flatpickr-calendar {
		box-shadow: 1px 0 0 var(--color-border), -1px 0 0 var(--color-border), 0 1px 0 var(--color-border), 0 -1px 0 var(--color-border), 0 3px 13px var(--color-shadow);
	}

	:where(&) .flatpickr-calendar.arrowTop:before {
		border-bottom-color: var(--color-border);
	}

	:where(&) .flatpickr-calendar.arrowBottom:before {
		border-top-color: var(--color-border);
	}

	:where(&) .flatpickr-months .flatpickr-month,
	:where(&) .flatpickr-months .flatpickr-prev-month,
	:where(&) .flatpickr-months .flatpickr-next-month {
		color: var(--color-text);
		fill: var(--color-text);
	}

	:where(&) .flatpickr-day,
	:where(&) .flatpickr-time input,
	:where(&) .flatpickr-time .flatpickr-time-separator,
	:where(&) .flatpickr-time .flatpickr-am-pm {
		color: var(--color-text);
	}

	:where(&) span.flatpickr-weekday {
		color: var(--color-text-muted);
	}

	:where(&) .numInputWrapper span {
		border-color: var(--color-border);
	}

	:where(&) .numInputWrapper span svg path {
		fill: var(--color-text-muted);
	}

	:where(&) .flatpickr-current-month .numInputWrapper span.arrowUp:after,
	:where(&) .flatpickr-time .numInputWrapper span.arrowUp:after {
		border-bottom-color: var(--color-text);
	}

	:where(&) .flatpickr-current-month .numInputWrapper span.arrowDown:after,
	:where(&) .flatpickr-time .numInputWrapper span.arrowDown:after {
		border-top-color: var(--color-text);
	}

	:where(&) .numInputWrapper:hover,
	:where(&) .numInputWrapper span:hover,
	:where(&) .flatpickr-current-month span.cur-month:hover,
	:where(&) .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
	:where(&) .flatpickr-time input:hover,
	:where(&) .flatpickr-time input:focus,
	:where(&) .flatpickr-time .flatpickr-am-pm:hover,
	:where(&) .flatpickr-time .flatpickr-am-pm:focus {
		background: var(--color-surface-hover);
	}

	:where(&) .dayContainer + .dayContainer {
		box-shadow: -1px 0 0 var(--color-border);
	}

	:where(&) .flatpickr-weekwrapper .flatpickr-weeks {
		box-shadow: 1px 0 0 var(--color-border);
	}

	:where(&) .flatpickr-calendar.hasTime .flatpickr-time {
		border-top-color: var(--color-border);
	}

	:where(&) .flatpickr-day.inRange,
	:where(&) .flatpickr-day.prevMonthDay.inRange,
	:where(&) .flatpickr-day.nextMonthDay.inRange,
	:where(&) .flatpickr-day.today.inRange,
	:where(&) .flatpickr-day.prevMonthDay.today.inRange,
	:where(&) .flatpickr-day.nextMonthDay.today.inRange,
	:where(&) .flatpickr-day:hover,
	:where(&) .flatpickr-day.prevMonthDay:hover,
	:where(&) .flatpickr-day.nextMonthDay:hover,
	:where(&) .flatpickr-day:focus,
	:where(&) .flatpickr-day.prevMonthDay:focus,
	:where(&) .flatpickr-day.nextMonthDay:focus {
		border-color: var(--color-surface-hover);
		background: var(--color-surface-hover);
	}

	:where(&) .flatpickr-day.inRange {
		box-shadow: -5px 0 0 var(--color-surface-hover), 5px 0 0 var(--color-surface-hover);
	}

	:where(&) .flatpickr-day.flatpickr-disabled,
	:where(&) .flatpickr-day.flatpickr-disabled:hover,
	:where(&) .flatpickr-day.prevMonthDay,
	:where(&) .flatpickr-day.nextMonthDay,
	:where(&) .flatpickr-day.notAllowed,
	:where(&) .flatpickr-day.notAllowed.prevMonthDay,
	:where(&) .flatpickr-day.notAllowed.nextMonthDay,
	:where(&) .flatpickr-current-month input.cur-year[disabled],
	:where(&) .flatpickr-weekwrapper span.flatpickr-day {
		color: var(--color-text-disabled);
	}

	/* flatpickr monthSelect plugin (Report/MonthlyReport) */
	& .flatpickr-monthSelect-month {
		color: var(--color-text);
	}

	& .flatpickr-monthSelect-month.disabled {
		color: var(--color-text-disabled);
	}

	& .flatpickr-monthSelect-month:hover,
	& .flatpickr-monthSelect-month:focus {
		background: var(--color-surface-hover);
	}

	& .flatpickr-monthSelect-month.selected {
		background-color: var(--color-selected);
		color: var(--color-text-inverse);
	}

	/* toastr: its fills stay; only the glow is too light */
	& #toast-container > div:not(:hover) {
		box-shadow: 0 0 12px var(--color-shadow-heavy);
	}

	/* vanillaSelectBox */
	:where(&) .vsb-menu {
		border-color: var(--color-border);
		box-shadow: 0 6px 12px var(--color-shadow);
	}

	:where(&) .vsb-menu li:hover,
	:where(&) .vsb-main li:hover {
		background: var(--color-surface-hover);
	}

	:where(&) .vsb-menu .multi li.grouped-option:hover {
		color: var(--color-brand-text);
	}

	/* tableSorter: SortingTable.css's arrow gifs and theme.bootstrap_4's arrow svgs are near-black */
	& table.tablesorter thead tr .header,
	& .tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
		background-image: conic-gradient(from 139deg at 50% 0, var(--color-text-muted) 82deg, transparent 0), conic-gradient(from -41deg at 50% 100%, var(--color-text-muted) 82deg, transparent 0);
		background-position: right 7px top calc(50% - 2.5px), right 7px top calc(50% + 2.5px);
		background-size: 7px 4px;
	}

	& table.tablesorter thead tr .headerSortDown,
	& .tablesorter-bootstrap thead .tablesorter-headerAsc {
		background-image: conic-gradient(from 139deg at 50% 0, var(--color-text-muted) 82deg, transparent 0);
		background-position: right 7px center;
		background-size: 7px 4px;
	}

	& table.tablesorter thead tr .headerSortUp,
	& .tablesorter-bootstrap thead .tablesorter-headerDesc {
		background-image: conic-gradient(from -41deg at 50% 100%, var(--color-text-muted) 82deg, transparent 0);
		background-position: right 7px center;
		background-size: 7px 4px;
	}

	& .tablesorter-bootstrap .bootstrap-icon-unsorted {
		filter: invert(1);
	}

	& .tablesorter-bootstrap th,
	& .tablesorter-bootstrap thead td,
	& .tablesorter-bootstrap tbody td {
		color: inherit;
	}

	& .tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row :is(input, select) {
		border-color: var(--color-border-input);
		background-color: var(--color-input-bg);
		color: var(--color-input-text);
	}

	& .tablesorter:not(.table-dark) .tablesorter-errorRow td {
		background-color: var(--color-danger-bg);
		color: var(--color-danger-text);
	}

	/* Bootstrap 4 (Device/Index, Report/InstalledPlayer) */
	& .table {
		color: inherit;
	}

	& .table th,
	& .table td {
		border-top-color: var(--color-border);
	}

	& .table thead th {
		border-bottom-color: var(--color-border);
	}

	& .form-control,
	& .custom-select {
		border-color: var(--color-border-input);
		background-color: var(--color-input-bg);
		color: var(--color-input-text);
	}

	& .form-control:focus,
	& .custom-select:focus {
		border-color: var(--color-focus);
	}

	& .form-control:disabled,
	& .form-control[readonly] {
		background-color: var(--color-surface-muted);
	}

	& .custom-select {
		background-image: conic-gradient(from -39deg at 50% 100%, var(--color-text-muted) 78deg, transparent 0);
		background-size: 8px 5px;
	}

	/* Select2 (Device/Index) */
	& .select2-dropdown {
		border-color: var(--color-border);
		background-color: var(--color-surface-raised);
	}

	& .select2-container--default .select2-selection--single,
	& .select2-container--default .select2-selection--multiple,
	& .select2-container--default .select2-search--dropdown .select2-search__field {
		border-color: var(--color-border-input);
		background-color: var(--color-input-bg);
	}

	& .select2-container--default.select2-container--focus .select2-selection--multiple {
		border-color: var(--color-border-strong);
	}

	& .select2-container--default.select2-container--disabled .select2-selection--single,
	& .select2-container--default.select2-container--disabled .select2-selection--multiple {
		background-color: var(--color-surface-muted);
	}

	& .select2-container--default .select2-selection--single .select2-selection__rendered,
	& .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
		color: var(--color-text);
	}

	& .select2-container--default .select2-selection--multiple .select2-selection__choice {
		border-color: var(--color-border);
		background-color: var(--color-surface-alt);
	}

	& .select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
		background-color: var(--color-surface-hover);
	}

	/* comboTree (Device/Index) */
	& .ct-drop-down-container label.ct-tree-item-hover {
		color: var(--color-text);
	}

	/* Choices.js (Report/FlowTracking): the single-select clear button is a black cross */
	& .choices[data-type*="select-one"] .choices__button {
		filter: invert(1);
	}

	/* DataTables (Home/Dashboard, Report/FlowTracking) */
	& table.dataTable > thead > tr > th,
	& table.dataTable > thead > tr > td {
		border-bottom-color: var(--color-border);
	}

	& table.dataTable > tfoot > tr > th,
	& table.dataTable > tfoot > tr > td {
		border-top-color: var(--color-border);
	}

	& table.dataTable.stripe > tbody > tr:nth-child(odd):not(.selected) > *,
	& table.dataTable.display > tbody > tr:nth-child(odd):not(.selected) > * {
		box-shadow: inset 0 0 0 9999px var(--color-row-stripe);
	}

	& table.dataTable.hover > tbody > tr:not(.selected):hover > *,
	& table.dataTable.display > tbody > tr:not(.selected):hover > * {
		box-shadow: inset 0 0 0 9999px var(--color-surface-hover);
	}

	& table.dataTable > tbody > tr > td.dtr-control::before,
	& table.dataTable > tbody > tr > th.dtr-control::before {
		border-left-color: var(--color-text-subtle);
	}

	& table.dataTable > tbody > tr > td.dtr-control.arrow-right::before,
	& table.dataTable > tbody > tr > th.dtr-control.arrow-right::before {
		border-right-color: var(--color-text-subtle);
	}

	& table.dataTable > tbody > tr.dtr-expanded > td.dtr-control::before,
	& table.dataTable > tbody > tr.dtr-expanded > th.dtr-control::before {
		border-top-color: var(--color-text-subtle);
		border-right-color: transparent;
		border-left-color: transparent;
	}

	& table.dataTable > tbody > tr.child ul.dtr-details > li {
		border-bottom-color: var(--color-border);
	}

	& div.dt-container .dt-paging .dt-paging-button.current,
	& div.dt-container .dt-paging .dt-paging-button.current:hover {
		border-color: var(--color-border);
		background: var(--color-surface-hover);
	}

	& div.dt-container .dt-paging .dt-paging-button.disabled,
	& div.dt-container .dt-paging .dt-paging-button.disabled:hover,
	& div.dt-container .dt-paging .dt-paging-button.disabled:active {
		color: var(--color-text-disabled) !important;
	}

	/* Gridstack (Home/Dashboard) */
	& .grid-stack-placeholder > .placeholder-content {
		background-color: var(--color-surface-hover);
	}

	& .grid-stack-item > :is(.ui-resizable-ne, .ui-resizable-nw, .ui-resizable-se, .ui-resizable-sw) {
		filter: invert(1);
	}

	/* Images drawn for a light ground */
	& img.logo-light {
		display: none;
	}

	& img.logo-dark {
		display: inline;
	}

	& :is(img, input[type="image"]):is([src*="/Pencil.png"], [src*="/Remove.png"], [src*="/Eye.png"], [src*="/EyeClosed.png"], [src*="/Copy.png"], [src*="/Archive.png"], [src*="check.png"], [src*="/exclamation.png"], [src*="XML.png"], [src*="/find.png"]),
	& :is(.addButton, .deleteButton, .editButton, .playing) {
		filter: brightness(1.4);
	}

	& img[src*="/Restore.png"] {
		filter: brightness(1.9);
	}

	& img[src*="/loading.gif"] {
		filter: brightness(1.6);
	}

	& .logo-linux {
		filter: drop-shadow(0 0 1px var(--color-text));
	}

	& .colone-az-order {
		background-image: url("/Content/images/AZ-dark.png");
	}

	& .colone-za-order {
		background-image: url("/Content/images/ZA-dark.png");
	}

	& .colone-09-order {
		background-image: url("/Content/images/09-dark.png");
	}

	& .colone-90-order {
		background-image: url("/Content/images/90-dark.png");
	}
}