/*
	HarTeluk huisstijl voor de kassa.

	Dit bestand wordt als laatste stylesheet ingeladen en overschrijft uitsluitend kleuren van het
	UBold-thema; layout, afmetingen en gedrag blijven ongemoeid.

	Het palet bestaat uit de drie merkkleuren - blauw, goud en rood - aangevuld met een tonale schaal
	die uit het merkblauw is afgeleid. Die schaal is er omdat UBold zijn diepte haalt uit een reeks
	grijstinten (#303841, #36404a, #3b4651, #424e5a, ...); wie alleen de merkkleuren erover legt,
	krijgt een vlak scherm waarin kaarten, velden en tegels niet meer van elkaar te onderscheiden
	zijn. Elke UBold-grijstint is hieronder aan een trede van de schaal gekoppeld.

	Kleuren die betekenis dragen - de gangen op de plattegrond, bevestigen, annuleren, waarschuwen -
	houden de tinten die het dashboard daarvoor ook gebruikt (#1abc9c, #f1556c, #f7b84b), zodat
	medewerkers ze blijven herkennen. Knoppen met een semantische Bootstrap-klasse die in de praktijk
	alleen navigeren, staan verderop apart genoemd.

	Sommige regels hebben een zwaardere selector of !important nodig omdat de basisregel in een
	inline <style> in een template staat, en die staat later in het document dan dit bestand.
*/

:root {
	/* Merkkleuren, als RGB-triplets zodat ze in rgba() met wisselende dekking te gebruiken zijn. */
	--harteluk-blue: 27, 65, 107;
	--harteluk-gold: 204, 175, 119;
	--harteluk-red: 164, 42, 46;

	/* Tonale schaal, van diep naar licht. Vervangt de grijstrap van het thema. */
	--ht-bg: #07182a;
	--ht-sunken: #0b2139;
	--ht-surface: #12314f;
	--ht-surface-alt: #16395c;
	/* De trede waar tegels, knopvlakken en hover op staan, is het merkblauw zelf. */
	--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);

	--ht-text: rgba(204, 175, 119, .92);
	--ht-text-dim: rgba(204, 175, 119, .62);
	--ht-text-faint: rgba(204, 175, 119, .42);

	/* Tekst op een gouden vlak. */
	--ht-on-gold: #10293f;

	/*
		Bevestigen blijft groen, maar het neon #1abc9c van het thema schreeuwt tegen dit blauw. Deze
		tint houdt dezelfde betekenis, gaat rustiger samen met het merkpalet en houdt de witte
		knoptekst op 4.8:1 - het thema zat met wit op #1abc9c op 3.5 en dat was te licht.
	*/
	--ht-success: #178163;
	--ht-success-hover: #19906e;
}

/* ---<< Basis en typografie >>------------------------------------------------------------------ */
body, .bg-body {
	background-color: var(--ht-bg);
	color: var(--ht-text);
}

/*
	De wrapper moet doorzichtig blijven. De achtergrondlaag van een producttegel staat op z-index -1
	en wordt door de body-achtergrond heen zichtbaar; zodra de wrapper zelf een dekkend vlak krijgt,
	verdwijnen alle producttegels erachter.
*/
#wrapper {
	background-color: transparent;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	color: rgb(var(--harteluk-gold));
}

.text-dark, .text-light, .text-secondary {
	color: var(--ht-text) !important;
}

.text-muted {
	color: var(--ht-text-dim) !important;
}

a, .link-light, .link-secondary {
	color: rgb(var(--harteluk-gold));
}

a:hover, .link-light:hover, .link-secondary:hover {
	color: #e2cb9c;
}

/*
	Bootstrap tekent een hr niet met een rand maar met background-color: currentColor. Alleen de
	tekstkleur zetten is hier dus genoeg - een achtergrondkleur meegeven laat de lijn verdwijnen.
*/
hr {
	color: var(--ht-line-strong);
	opacity: 1;
}

.dropdown-divider {
	border-top-color: var(--ht-line);
}

.page-title-box .page-title,
.page-title-box .breadcrumb .breadcrumb-item,
.page-title-box .breadcrumb .breadcrumb-item.active,
.page-title-box .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.header-title {
	color: var(--ht-text);
}

/* ---<< Zijmenu >>----------------------------------------------------------------------------- */
/*
	Het thema kleurt het zijmenu via body[data-sidebar-color]; die selector weegt zwaarder dan een
	losse klasse. #wrapper staat er in de opmaak altijd omheen en tilt het gewicht hier voldoende op.
*/
#wrapper .left-side-menu,
#wrapper .logo-box {
	background-color: var(--ht-surface);
	box-shadow: none;
}

#wrapper #sidebar-menu > ul > li > a,
#wrapper #sidebar-menu .nav-second-level li a,
#wrapper #sidebar-menu .menu-title {
	color: var(--ht-text-dim);
}

#wrapper #sidebar-menu > ul > li > a:hover,
#wrapper #sidebar-menu > ul > li > a:focus,
#wrapper #sidebar-menu > ul > li > a:active,
#wrapper #sidebar-menu > ul > li > a.mm-active,
#wrapper #sidebar-menu .menuitem-active > a,
#wrapper #sidebar-menu .menuitem-active .active,
#wrapper #sidebar-menu .nav-second-level li a:hover,
#wrapper #sidebar-menu .nav-second-level li a:focus,
#wrapper #sidebar-menu .nav-second-level li.active > a {
	color: rgb(var(--harteluk-gold));
}

#wrapper #sidebar-menu > ul > li > a.mm-active {
	background-color: var(--ht-raised);
}

/* Het uitklappende label naast een icoon in het ingeklapte menu */
body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > ul {
	background-color: var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

/*
	Het uitklappende submenu zelf. Het thema zet `#sidebar-menu > ul ul` op #ffffff en overschrijft dat
	nergens voor de donkere zijbalk, dus de uitklap bleef wit. De regel hierboven mikt op
	`li:hover > ul`, maar de opmaak zet de lijst in een `div.collapse` - die greep mist daarom. Hier
	dezelfde selector als het thema, met #wrapper erbij voor het gewicht, en bewust niet op :hover:
	op een touchscreen opent een tik de `.collapse` zonder dat er ooit gehoverd wordt.

	Het paneel volgt de blauwe balk van het label waar het aan hangt. De labels gaan daarbij een stap
	omhoog van --ht-text-dim naar --ht-text: op de gouden tekstschaal haalt de gedimde stap hier maar
	2,8:1, deze 4,4:1. Op het witte paneel was het 1,6:1 en stond het menu er onleesbaar bij.
*/
body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul ul {
	background-color: var(--ht-raised);
	box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, .45);
}

body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul ul li a {
	color: var(--ht-text);
}

body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul ul li.active > a,
body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul ul li a:hover,
body[data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul ul li a:focus {
	color: rgb(var(--harteluk-gold));
}

#wrapper .left-side-menu .simplebar-scrollbar::before {
	background: var(--ht-line-strong);
}

/* ---<< Kaarten, lijsten en tabellen >>--------------------------------------------------------- */
.card, .modal-content, .offcanvas, .popover, #preloader {
	background-color: var(--ht-surface);
	border-color: var(--ht-line);
}

.card {
	border: 1px solid var(--ht-line);
}

.card-header, .card-footer, .popover-header {
	background-color: var(--ht-surface-alt);
	border-color: var(--ht-line);
}

.card-title, .card-header .card-title {
	color: rgb(var(--harteluk-gold));
}

.modal-header, .modal-footer {
	border-color: var(--ht-line);
}

.list-group-item {
	background-color: transparent;
	border-color: var(--ht-line);
	color: var(--ht-text);
}

.list-group-item-action:hover, .list-group-item-action:focus,
.orderedProductsList .list-group-item:hover {
	background-color: var(--ht-raised);
}

.table {
	color: var(--ht-text);
	border-color: var(--ht-line);
}

.table > :not(caption) > * > * {
	border-color: var(--ht-line);
}

/* De pijltjes waarmee producten tussen gangen en bestellingen geschoven worden */
.mdi.list-group-button:hover, .mdi.list-group-button:active,
.fa.list-group-button:hover, .fa.list-group-button:active {
	color: rgb(var(--harteluk-gold));
}

.mdi.mdi-chevron-double-right.list-group-button:after,
.mdi.mdi-chevron-double-left.list-group-button:after,
.mdi.mdi-chevron-right.list-group-button:after,
.mdi.mdi-chevron-left.list-group-button:after,
.list-group-button.list-group-button-right:after,
.list-group-button.list-group-button-left:after {
	background: var(--ht-line);
}

.dropdown-menu, .dropdown-menu-dark {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

.dropdown-item, .dropdown-menu-dark .dropdown-item {
	color: var(--ht-text);
}

.dropdown-item:hover, .dropdown-item:focus,
.dropdown-item.active, .dropdown-item:active,
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
	background-color: var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

.dropdown-item.disabled, .dropdown-item:disabled {
	color: var(--ht-text-faint);
}

.page-link {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

.page-link:hover {
	background-color: var(--ht-raised);
	border-color: var(--ht-line-strong);
}

.right-bar {
	background-color: var(--ht-surface);
}

.rightbar-overlay {
	background-color: rgba(3, 10, 18, .8);
}

/* Select2 wordt door de kassa gebruikt voor keuzevelden en heeft zijn eigen grijstinten */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ht-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

/*
	De tafelkaartjes in de tafellijst. Het thema geeft ze een vaal gekleurd vlak; op donkerblauw
	wordt dat modderig. Ze krijgen daarom een egaal vlak met een gekleurde rand: de rand vertelt de
	status, het vlak vertelt alleen dat de tafel bezet is.
*/
.card.bg-soft-info, .card.bg-soft-warning, .card.bg-soft-purple,
.card.bg-soft-success, .card.bg-soft-danger, .card.bg-soft-primary {
	background-color: var(--ht-raised-hover) !important;
}

.avatar-sm.bg-soft-info, .avatar-md.bg-soft-info,
.avatar-sm.bg-soft-warning, .avatar-md.bg-soft-warning,
.avatar-sm.bg-soft-purple, .avatar-md.bg-soft-purple {
	background-color: var(--ht-surface) !important;
}

/*
	De bonnen-herprintmodal toont dezelfde kaartjes, maar daar is elke bon 'bezet'. Een scherm vol
	identiek oplichtende blokken leest als ruis, dus binnen een modal blijven ze rustig.
*/
.custom-modal .card.bg-soft-info, .custom-modal .card.bg-soft-warning,
.custom-modal .card.bg-soft-purple, .custom-modal .card.bg-soft-success {
	background-color: var(--ht-surface) !important;
	border-color: var(--ht-line-strong) !important;
}

.custom-modal .avatar-sm, .custom-modal .avatar-md {
	color: rgb(var(--harteluk-gold)) !important;
	border-color: var(--ht-line-strong) !important;
}

/* Hover op een tafelkaartje is navigatie, geen bevestiging */
.card.table-list:hover {
	background: rgb(var(--harteluk-gold)) !important;
	border-color: rgb(var(--harteluk-gold)) !important;
}

.table-list:hover .rounded-circle {
	border-color: rgb(var(--harteluk-gold)) !important;
	background: rgb(var(--harteluk-gold)) !important;
}

.table-list:hover p,
.table-list:hover .avatar-sm,
.card.table-list:hover .text-muted,
.card.table-list:hover .text-white {
	color: var(--ht-on-gold) !important;
}

/* ---<< Formulieren >>------------------------------------------------------------------------- */
.form-control, .form-select, .form-check-input {
	color: var(--ht-text);
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
	color: var(--ht-text);
	background-color: var(--ht-sunken);
	border-color: var(--ht-line-strong);
	box-shadow: none;
}

/* Het inlogveld van de kassa staat op readonly; het thema maakt die grijs */
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
	color: var(--ht-text);
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

.form-control::placeholder {
	color: var(--ht-text-faint);
}

.input-group-text {
	color: var(--ht-text);
	background-color: var(--ht-surface-alt);
	border-color: var(--ht-line);
}

.form-check {
	border-color: var(--ht-line-strong);
}

input[type=radio] + label:before,
input[type=checkbox] + label:before {
	border-color: var(--ht-line-strong);
}

input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:after {
	background: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
}

input[type=checkbox]:checked + label:after {
	color: var(--ht-on-gold);
}

.form-check-input:checked {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
}

/*
	De plus- en minknoppen bij een aantal. Touchspin zet er btn-primary op, maar een regel in
	meriad/custom.css overschrijft de achtergrond zonder de tekstkleur mee te nemen; het teken viel
	daardoor weg tegen het vlak. Ze staan hier expliciet, inclusief een duidelijke indrukstand -
	dit zijn de kleinste raakvlakken op een aanraakscherm.
*/
.form-product-quantity button,
.bootstrap-touchspin .btn.bootstrap-touchspin-up,
.bootstrap-touchspin .btn.bootstrap-touchspin-down {
	background: var(--ht-raised);
	border: 1px solid var(--ht-raised);
	color: rgb(var(--harteluk-gold));
}

.form-product-quantity button:hover,
.bootstrap-touchspin .btn.bootstrap-touchspin-up:hover,
.bootstrap-touchspin .btn.bootstrap-touchspin-down:hover {
	background: var(--ht-raised-hover);
	color: rgb(var(--harteluk-gold));
}

.form-product-quantity button:active,
.bootstrap-touchspin .btn.bootstrap-touchspin-up:active,
.bootstrap-touchspin .btn.bootstrap-touchspin-down:active {
	background: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

.input-group-number-field span,
input.form-control.input-number {
	background: var(--ht-sunken);
	color: var(--ht-text);
}

/*
	Het aantal-gastenscherm zet zijn knoppen op in een inline <style> met eigen grijstinten. Ze staan
	hier op dezelfde kleur als het invoerveld eronder: het zijn twee manieren om hetzelfde in te
	vullen, dus horen ze als een geheel te lezen.
*/
body .guestAmountButton {
	color: rgb(var(--harteluk-gold));
	background-color: var(--ht-sunken);
	border-color: var(--ht-line);
}

body .guestAmountButton:hover {
	background-color: var(--ht-raised);
	border-color: var(--ht-line-strong);
}

body .guestAmountButton:active {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

/*
	De kopjes boven de keuzegroepen in de productmodal ('Samenstellingskeuzes', 'Product retour').
	Op vol goud trekken ze meer aandacht dan de keuzes eronder, terwijl ze alleen groeperen.
*/
.form-title {
	color: var(--ht-text-dim);
}

.invalid-feedback {
	color: #f1556c;
}

/* ---<< Knoppen >>------------------------------------------------------------------------------ */
/*
	btn-success en btn-danger blijven groen en rood: dat zijn bevestigen en afbreken. Alle neutrale
	knoppen worden merkkleur.
*/
.btn-primary {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .btn-primary:not(:disabled):not(.disabled):active {
	background-color: #dcc294;
	border-color: #dcc294;
	color: var(--ht-on-gold);
	box-shadow: none;
}

.btn-secondary, .btn-light, .btn-dark, .btn-white {
	background-color: var(--ht-raised);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

.btn-secondary:hover, .btn-light:hover, .btn-dark:hover, .btn-white:hover,
.btn-secondary:focus, .btn-light:focus, .btn-dark:focus, .btn-white:focus {
	background-color: var(--ht-raised-hover);
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
}

.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
	border-color: var(--ht-line-strong);
	color: var(--ht-text);
	background-color: transparent;
}

.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

.btn-link {
	color: rgb(var(--harteluk-gold));
}

/*
	De focusring van het thema is per knopsoort gekleurd, dus je kreeg een groene gloed om een gouden
	knop. Focus zegt alleen waar je bent en draagt geen betekenis, dus is die overal merkgoud.

	De reeks is zo lang omdat het thema aparte, zwaardere regels heeft voor een knop die tegelijk
	focus heeft en aan staat. Let op het verschil tussen de klasse .active en de pseudo :active - een
	tab die aan staat draagt de klasse, niet de pseudo, en viel daardoor eerst buiten de boot.
*/
.btn:focus, .btn.focus,
.btn.active:focus, .btn:active:focus, .btn.show:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.btn.dropdown-toggle.show:focus,
.btn-check:focus + .btn, .btn-check:checked + .btn:focus, .btn-check:active + .btn:focus {
	box-shadow: 0 0 0 .15rem rgba(var(--harteluk-gold), .45);
}

/* Bevestigen blijft groen, maar in een tint die naast het merkblauw staat in plaats van erop */
.btn-success, .bg-success, .badge.bg-success {
	background-color: var(--ht-success) !important;
	border-color: var(--ht-success) !important;
}

.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-check:focus + .btn-success, .btn-success:not(:disabled):not(.disabled):active {
	background-color: var(--ht-success-hover) !important;
	border-color: var(--ht-success-hover) !important;
	box-shadow: none;
}

.text-success {
	color: var(--ht-success-hover) !important;
}

/*
	'Afronden en meteen afrekenen' staat naast de gewone bevestigknop, dus die twee moeten uit elkaar
	te houden zijn. Het teal uit het logo bleek ongeschikt - dat scheelt met het groen maar 1.02 in
	helderheid, waardoor de knoppen als een blok lezen - en goud is elders al in gebruik. Dit violet
	is van alle kandidaten het verst van het bevestiggroen af en houdt witte tekst op 6.9:1. Het is
	geen merkkleur, maar komt wel terug in het categoriepalet.
*/
[data-meriad-event="cart.processed.continue"].btn,
[data-meriad-event="cart.processed.continue"].btn-primary {
	background-color: #4a52a8;
	border-color: #4a52a8;
	color: #fff;
}

[data-meriad-event="cart.processed.continue"].btn:hover,
[data-meriad-event="cart.processed.continue"].btn:focus {
	background-color: #5a63bb;
	border-color: #5a63bb;
	color: #fff;
}

/* Afbreken blijft rood; het merk heeft rood, dus die twee vallen hier samen */
.btn-danger, .bg-danger {
	background-color: rgb(var(--harteluk-red)) !important;
	border-color: rgb(var(--harteluk-red)) !important;
	color: #fff;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
	background-color: #b93036 !important;
	border-color: #b93036 !important;
	color: #fff;
}

/*
	'Annuleren' in de bestelkolom draagt alleen .btn en .btn-cancel; die laatste bestaat niet in het
	thema, waardoor de knop geen eigen vlak of tekstkleur heeft en wegvalt tegen de achtergrond.
*/
.btn.btn-cancel {
	background-color: transparent;
	border: 1px solid var(--ht-line-strong);
	color: var(--ht-text);
}

.btn.btn-cancel:hover, .btn.btn-cancel:focus {
	background-color: rgba(var(--harteluk-red), .85);
	border-color: rgba(var(--harteluk-red), .85);
	color: #fff;
}

/* ---<< Navigatie die toevallig een semantische klasse draagt >>-------------------------------- */
/*
	De zoneknoppen boven de plattegrond, de tabs in de tafellijst, de subcategorieen boven de
	producten en acties als 'Proforma rekening' of 'Rekening splitsen' gebruiken btn-success omdat
	dat toevallig de groene knop was. Ze bevestigen niets, dus ze worden goud.
*/
/*
	Het !important is nodig omdat .btn-success hierboven zelf !important draagt; zonder dat zouden
	deze knoppen alsnog de bevestigkleur pakken.
*/
/*
	Alleen op .active en niet op .show: de opmaak van de tafellijst zet beide klassen op de eerste
	tab, maar Bootstrap beheert .show op het tabblad en niet op de knop. Die klasse blijft daar dus
	voor altijd staan, waardoor de eerste tab goud bleef terwijl je al ergens anders keek.
*/
.btn.zoneBtn.btn-success,
.button-list .btn.btn-success,
.button-list .btn.btn-success.active,
.btn-group-tabs .btn.btn-outline-success.active {
	background-color: rgb(var(--harteluk-gold)) !important;
	border-color: rgb(var(--harteluk-gold)) !important;
	color: var(--ht-on-gold) !important;
}

.btn-outline-success {
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
	background-color: transparent;
}

.btn-outline-success:hover, .btn-outline-success:focus,
.btn.zoneBtn.btn-success:hover, .btn.zoneBtn.btn-success:focus,
.button-list .btn.btn-success:hover, .button-list .btn.btn-success:focus {
	background-color: #dcc294 !important;
	border-color: #dcc294 !important;
	color: var(--ht-on-gold) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	background-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

.nav-pills .nav-link {
	color: var(--ht-text);
}

/* De stappenbalk van 'tafel verplaatsen' en 'rekening splitsen' staat op bg-light */
.bg-light {
	background-color: var(--ht-surface) !important;
}

.nav-tabs {
	border-bottom-color: var(--ht-line);
}

.nav-tabs .nav-link {
	color: var(--ht-text-dim);
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
	border-color: var(--ht-line);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	background-color: var(--ht-raised);
	border-color: var(--ht-line);
	color: rgb(var(--harteluk-gold));
}

/*
	De actiebalk op mobiel staat in het thema op #303841, en dat is precies de body-kleur daar: de
	balk hoort niet als eigen vlak te lezen, alleen de knoppen erin. Vandaar de paginakleur en niet
	een kaartkleur, met wat doorzichtigheid omdat de balk vastgeplakt over de producten heen schuift.

	Geen backdrop-filter hier, hoe verleidelijk ook: de schermvullende laag achter het ingeschoven
	menu is een position:fixed kind van deze balk, en een element met backdrop-filter wordt het
	containing block voor zulke kinderen. De laag zou dan niet langer op de viewport uitlijnen.
*/
body .stickyActionMenu {
	background-color: rgba(7, 24, 42, .88);
}

body .stickyActionMenu .btn-warning {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

/* ---<< Categorie- en producttegels >>----------------------------------------------------------- */
/*
	De categorieen krijgen bg-0 t/m bg-25 toegewezen op volgorde, dus blijven het 26 kleuren die
	onderling te onderscheiden moeten zijn. Het zijn dezelfde kleuren als in het standaardthema - de
	tint van elke tegel is ongewijzigd, zodat groen groen blijft en roze roze - maar verzadiging en
	helderheid zijn teruggebracht naar hetzelfde register als het merkblauw.

	Elke tegel is bovendien op dezelfde afstand van de witte tegeltekst gezet (contrast 4.8:1). Dat
	dient de leesbaarheid, en omdat gelijk contrast neerkomt op gelijke waargenomen helderheid, ogen
	de 26 tinten daardoor als een familie in plaats van als losse blokken.

	De twee tegels die in het thema grijs waren, zijn blauwgrijs geworden op de tint van het merk;
	hun onderlinge helderheidsverschil is bewust behouden.
*/
.bg-0 {
	background-color: #2f8062 !important;
}

.bg-1 {
	background-color: #357b8f !important;
}

.bg-2 {
	background-color: #867032 !important;
}

.bg-3 {
	background-color: #bd4e4e !important;
}

.bg-4 {
	background-color: #bc4977 !important;
}

.bg-5 {
	background-color: #5b7494 !important;
}

.bg-6 {
	background-color: #7066c6 !important;
}

.bg-7 {
	background-color: #986838 !important;
}

.bg-8 {
	background-color: #455971 !important;
}

.bg-9 {
	background-color: #996838 !important;
}

.bg-10 {
	background-color: #5f7c2e !important;
}

.bg-11 {
	background-color: #7d732e !important;
}

.bg-12 {
	background-color: #74762c !important;
}

.bg-13 {
	background-color: #5f6bc4 !important;
}

.bg-14 {
	background-color: #6b792d !important;
}

.bg-15 {
	background-color: #7d61c5 !important;
}

.bg-16 {
	background-color: #5a7c2e !important;
}

.bg-17 {
	background-color: #9556c0 !important;
}

.bg-18 {
	background-color: #3f8130 !important;
}

.bg-19 {
	background-color: #ac47bb !important;
}

.bg-20 {
	background-color: #2f805d !important;
}

.bg-21 {
	background-color: #ba4595 !important;
}

.bg-22 {
	background-color: #2f7e7b !important;
}

.bg-23 {
	background-color: #bd4c5f !important;
}

.bg-24 {
	background-color: #3c78a2 !important;
}

.bg-25 {
	background-color: #a7603e !important;
}

/*
	De producttegel bestaat uit een vlak op halve dekking waar de productfoto overheen ligt. Op halve
	dekking verbleekten zowel de foto's als de tegels zonder foto tot bijna de achtergrondkleur, dus
	staat de dekking hoger en compenseert een tekstschaduw voor de leesbaarheid.
*/
.grid-square-item {
	border: 1px solid var(--ht-line);
}

.grid-square-item h5, .grid-square-item h4, .grid-square-item .card-text {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

.grid-square-img {
	background-color: var(--ht-raised);
	opacity: .78;
}

.product-extra {
	background: var(--ht-surface);
}

/*
	Achter het ingeschoven categoriemenu en de ingeschoven bestelkolom op mobiel ligt een laag die in
	het thema puur zwart is. Daardoor drijven de categorietegels op zwart. Alleen de kleur gaat hier
	naar donkerblauw; de dekking blijft ongemoeid, want daar danken Menu en Bestelling het aan dat ze
	er gedimd doorheen blijven schemeren. De selector begint met body omdat de themaregel in een
	inline <style> verderop in het document staat.
*/
@media screen and (max-width: 575px) {
	body.mobileMenuActive .mobileMenuEnBestellingenBackground,
	body.mobileBestellingenActive .mobileMenuEnBestellingenBackground {
		background: var(--ht-surface);
	}
}

.menu-items-more {
	background: var(--ht-bg);
}

.menu-items-more .card {
	background: var(--ht-surface);
}

.productUitverkochtCover {
	background-color: var(--ht-bg);
	opacity: .72;
}

/* ---<< Modals en meldingen >>------------------------------------------------------------------ */
.modal.modal-big-dark {
	background: rgba(3, 10, 18, .9);
}

.custom-modal {
	background: rgba(3, 10, 18, .95);
}

#fullscreenLadda {
	background: rgba(3, 10, 18, .95) !important;
}

/*
	SweetAlert wordt via een eigen stylesheet ingeladen en zet de kleuren van zijn knoppen bovendien
	inline, met confirmButtonColor en cancelButtonColor uit meriad.js. Vandaar het !important: zonder
	dat blijft de bevestigknop de paarse standaardkleur van de bibliotheek houden.
*/
.swal2-popup {
	background: var(--ht-surface) !important;
	color: var(--ht-text);
}

.swal2-title, .swal2-html-container, .swal2-content {
	color: rgb(var(--harteluk-gold)) !important;
}

.swal2-styled.swal2-confirm {
	background-color: var(--ht-success) !important;
	color: #fff !important;
}

.swal2-styled.swal2-cancel {
	background-color: rgb(var(--harteluk-red)) !important;
	color: #fff !important;
}

.swal2-styled:focus {
	box-shadow: none !important;
}

/* Het thema legt hier een lichte waas achter de popup; op een donker scherm flitst dat wit op */
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
	background-color: rgba(3, 10, 18, .8) !important;
}

/* De vraag- en infopictogrammen zijn merkkleur; waarschuwing en fout houden hun betekenis */
.swal2-icon.swal2-question, .swal2-icon.swal2-info {
	border-color: var(--ht-line-strong) !important;
	color: rgb(var(--harteluk-gold)) !important;
}

.swal2-icon.swal2-success {
	border-color: var(--ht-success) !important;
}

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

.swal2-icon.swal2-success .placeholder,
.swal2-icon.swal2-success .swal2-success-ring {
	border-color: var(--ht-success) !important;
}

.swal2-close {
	color: var(--ht-text-dim);
}

.swal2-close:hover {
	color: rgb(var(--harteluk-gold));
}

.swal2-modal .swal2-input,
.swal2-modal .swal2-textarea,
.swal2-modal .swal2-file,
.swal2-modal .swal2-select {
	background: var(--ht-sunken);
	border-color: var(--ht-line);
	color: var(--ht-text);
}

.swal2-modal .swal2-input:focus,
.swal2-modal .swal2-textarea:focus,
.swal2-modal .swal2-file:focus {
	border-color: var(--ht-line-strong);
}

.spinner {
	border-color: var(--ht-line);
	border-top-color: rgb(var(--harteluk-gold));
}

.img-thumbnail {
	background-color: var(--ht-raised);
	border-color: var(--ht-line);
	color: rgb(var(--harteluk-gold));
}

.border, .border-light {
	border-color: var(--ht-line) !important;
}

/*
	Moet na .border staan: op een tafelkaartje staan beide klassen naast elkaar en ze wegen even
	zwaar, dus bepaalt de volgorde hier welke rand de status mag vertellen.
*/
.border-info {
	border-color: #4fc6e1 !important;
}

.border-warning {
	border-color: rgb(var(--harteluk-gold)) !important;
}

.border-purple {
	border-color: #6658dd !important;
}

.border-success {
	border-color: var(--ht-success) !important;
}

.border-danger {
	border-color: #f1556c !important;
}

/* ---<< Plattegrond >>-------------------------------------------------------------------------- */
/*
	De tafels en zones zelf worden op een canvas getekend; hun kleuren staan in
	templates/config/table.status.colors.tpl. Hier alleen de omlijsting eromheen.
*/
#floor-plan canvas {
	border-color: var(--ht-line) !important;
}

#floor-plan .img-thumbnail {
	background-color: var(--ht-raised);
	border-color: var(--ht-line-strong);
	color: rgb(var(--harteluk-gold));
}

/* ---<< Inlogscherm >>-------------------------------------------------------------------------- */
/*
	De achtergrondfoto krijgt een blauwe waas mee, zoals het dashboard dat ook doet. Dat gebeurt via
	een gradient in background-image en niet via een ::before, omdat de inhoud van dit scherm in een
	statisch gepositioneerde container staat die anders onder de laag zou verdwijnen.
*/
body.authentication-bg-pattern {
	background-color: var(--ht-bg);
	background-image:
		linear-gradient(rgba(7, 24, 42, .1), rgba(7, 24, 42, .1)),
		url('../images/background-image-dark.jpg');
	background-size: cover;
	background-position: center;
}

body.authentication-bg-pattern .card {
	background-color: var(--ht-surface);
	border-color: var(--ht-line);
}

body.authentication-bg-pattern .subtitle {
	color: rgb(var(--harteluk-gold));
	border-color: var(--ht-line-strong);
}

.authentication-bg .btn-primary {
	background-color: rgb(var(--harteluk-gold));
	border-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

/* Het toetsenblok krijgt zijn kleuren uit een inline <style> in form.login.tpl */
body #keypadForLogin .key {
	background-color: var(--ht-raised);
	border-color: var(--ht-line);
	color: rgb(var(--harteluk-gold));
}

body #keypadForLogin .btnClearKeypad {
	background-color: rgb(var(--harteluk-red));
	border-color: rgb(var(--harteluk-red));
	color: #fff;
}

body #keypadForLogin .key:active {
	background-color: rgb(var(--harteluk-gold));
	color: var(--ht-on-gold);
}

body #keypadForLogin .btnClearKeypad:active {
	background-color: rgba(var(--harteluk-red), .7);
}

.employeeCodeDisplay {
	color: rgb(var(--harteluk-gold));
}