/* begin license *
 *
 * Copyright (C) 2026 BBPak https://bbpak.nl
 *
 * This file is part of "De slimmedoos - Configurator"
 *
 * end license */

/*
 * The admin screens, the login and the preview (/), in the web shop's house style.
 *
 * huisstijl/css/slimme-doos-huisstijl.css (from the web designer, loaded before this
 * file) gives the fonts, the tokens (--eno-*) and buttons and fields. The pages are
 * built with Bootstrap (grid, tabs, dropdown; SWL's dialogs take its variables); this
 * file dresses Bootstrap in those tokens, and adds the header, breadcrumbs, cards and
 * tiles (dsd-*) after the web shop's.
 */

/* Bootstrap and SWL in the house tokens ----------------------------------- */

:root {
	--bs-body-font-family: var(--eno-font-body);
	--bs-body-font-size: var(--eno-text-body);
	--bs-body-line-height: 1.6;
	--bs-body-color: var(--eno-color-text);
	--bs-body-color-rgb: 28, 27, 27;
	--bs-body-bg: var(--eno-color-bg);
	--bs-body-bg-rgb: 252, 249, 248;
	--bs-emphasis-color: var(--eno-color-text);
	--bs-secondary-color: var(--eno-color-text-muted);
	--bs-tertiary-bg: var(--eno-color-surface-low);
	--bs-heading-color: var(--eno-color-text);
	--bs-primary: var(--eno-color-orange);
	--bs-primary-rgb: 242, 113, 17;
	--bs-link-color: var(--eno-color-orange-dark);
	--bs-link-color-rgb: 156, 68, 0;
	--bs-link-hover-color: var(--eno-color-orange);
	--bs-link-hover-color-rgb: 242, 113, 17;
	--bs-border-color: var(--eno-color-surface-high);
	--bs-border-radius: var(--eno-radius);
	--bs-border-radius-sm: var(--eno-radius-sm);
	--bs-border-radius-lg: var(--eno-radius-lg);
	--bs-focus-ring-color: var(--eno-color-orange-tint);
}

body.dsd-page {
	margin: 0;
	/* SWL's dialogs and toasts */
	--swl-accent: var(--eno-color-orange);
	--swl-accent-fg: var(--eno-color-white);
	--swl-bg: var(--eno-color-white);
	--swl-fg: var(--eno-color-text);
	--swl-muted: var(--eno-color-text-muted);
	--swl-border: var(--eno-color-surface-high);
	--swl-subtle-bg: var(--eno-color-surface-low);
	--swl-radius: var(--eno-radius-lg);
	--swl-danger: #b3261e;
	--swl-success: var(--eno-color-status-open);
}

a {
	color: var(--eno-color-orange-dark);
	text-decoration: none;
}

a:hover {
	color: var(--eno-color-orange-dark);
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--eno-font-heading);
	font-weight: 800;
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--eno-text-headline-md);
}

.swl-modal-title {
	font-family: var(--eno-font-heading);
	font-weight: 800;
}

/* Header (as the web shop's .eno-header) ---------------------------------- */

/* the top bar stays at the top; only the page under it scrolls */
:root {
	--dsd-header-height: 5rem;
	scroll-padding-top: calc(var(--dsd-header-height) + 1rem); /* links to #anchors */
}

.dsd-header {
	position: sticky;
	top: 0;
	z-index: 1020;
	border-bottom: 1px solid var(--eno-color-surface-high);
	background-color: var(--eno-color-bg);
}

.dsd-header__inner {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	box-sizing: border-box;
	max-width: var(--eno-container-width);
	min-height: 5rem;
	margin: 0 auto;
	padding: 0 var(--eno-gutter);
}

.dsd-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--eno-color-orange);
}

.dsd-brand:hover {
	color: var(--eno-color-orange);
	text-decoration: none;
}

.dsd-brand .eno-icon {
	width: 2.25rem;
	height: 2.25rem;
}

.dsd-brand__name {
	font-family: var(--eno-font-heading);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 0.95;
	text-transform: uppercase;
}

.dsd-nav {
	display: flex;
	flex: 1;
	gap: 1.75rem;
}

.dsd-nav a {
	padding: 1.75rem 0 calc(1.75rem - 2px);
	border-bottom: 2px solid transparent;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.dsd-nav a:hover {
	color: var(--eno-color-orange-dark);
	text-decoration: none;
}

.dsd-nav a[aria-current] {
	border-bottom-color: var(--eno-color-orange);
	color: var(--eno-color-orange-dark);
}

.dsd-user {
	margin-left: auto;
}

.dsd-user__button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	font-weight: 600;
	letter-spacing: 0.05em;
}

.dsd-user__button:hover {
	color: var(--eno-color-orange-dark);
}

.dsd-header .eno-button {
	margin-left: auto;
}

.dsd-header .eno-button:hover {
	text-decoration: none;
}

.dropdown-menu {
	--bs-dropdown-border-color: var(--eno-color-surface-high);
	--bs-dropdown-border-radius: var(--eno-radius-lg);
	--bs-dropdown-font-size: var(--eno-text-label);
	--bs-dropdown-link-color: var(--eno-color-text);
	--bs-dropdown-link-hover-color: var(--eno-color-orange-dark);
	--bs-dropdown-link-hover-bg: var(--eno-color-surface-low);
	--bs-dropdown-link-active-color: var(--eno-color-orange-dark);
	--bs-dropdown-link-active-bg: var(--eno-color-orange-tint);
	box-shadow: var(--eno-shadow-lg);
}

.dropdown-item:hover {
	text-decoration: none;
}

/* Page -------------------------------------------------------------------- */

.dsd-main {
	box-sizing: border-box;
	max-width: var(--eno-container-width);
	margin: 0 auto;
	padding: 1rem var(--eno-gutter) 4rem;
}

.dsd-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	list-style: none;
}

.dsd-breadcrumbs li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--eno-color-outline);
}

.dsd-breadcrumbs a {
	color: var(--eno-color-text-muted);
}

.dsd-breadcrumbs [aria-current] {
	color: var(--eno-color-text);
}

.dsd-title {
	margin: 0;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* the title, a line below it, the page's buttons on the right */
.dsd-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin: 1.25rem 0 1.75rem;
}

.dsd-subtitle {
	max-width: 70ch;
	margin: 0.375rem 0 0;
	color: var(--eno-color-text-muted);
}

.dsd-pagehead__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* a small heading above a part of a page or a form */
.dsd-section-title,
.dsd-form-section {
	margin: 2rem 0 0.875rem;
	color: var(--eno-color-text-muted);
	font-family: var(--eno-font-body);
	font-size: var(--eno-text-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dsd-form-section {
	margin-top: 1.5rem;
}

/* A white card, as the web shop's order card (.eno-order__embed) */
.dsd-card {
	box-sizing: border-box;
	padding: 1.5rem;
	border: 1px solid var(--eno-color-surface-high);
	border-top: 3px solid var(--eno-color-orange);
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-white);
	box-shadow: var(--eno-shadow-float);
}

/* a form or a list in a card: a heading with a line of explanation, the fields, the
   buttons at the bottom */
.dsd-form-card {
	max-width: 64rem;
	padding: 1.75rem;
}

.dsd-card__head {
	margin-bottom: 1.5rem;
}

.dsd-card__head h2 {
	margin: 0;
	font-size: 1.25rem;
}

.dsd-card__head p {
	max-width: 70ch;
	margin: 0.375rem 0 0;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
}

.dsd-card__head--sub {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--eno-color-surface-high);
}

.dsd-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eno-color-surface-high);
}

/* a white panel without the orange edge */
.dsd-panel {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--eno-color-surface-high);
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-white);
	box-shadow: var(--eno-shadow-float);
}

.dsd-toolbar {
	margin-bottom: 1.25rem;
}

/* a list without rows */
.dsd-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.5rem 1rem;
	border: 1px dashed var(--eno-color-surface-dim);
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-white);
	color: var(--eno-color-text-muted);
	text-align: center;
}

.dsd-empty .bi {
	color: var(--eno-color-outline);
	font-size: 1.75rem;
	line-height: 1;
}

.dsd-empty p {
	margin: 0;
}

/* active or not, open or done */
.dsd-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background-color: var(--eno-color-surface);
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.dsd-pill--on {
	background-color: rgb(47 158 85 / 12%);
	color: var(--eno-color-status-open-ink);
}

.dsd-pill--open {
	background-color: var(--eno-color-orange-tint);
	color: var(--eno-color-orange-dark);
}

.dsd-muted {
	color: var(--eno-color-text-muted);
}

/* the order in the web shop (order modal) */
.dsd-shop-orders {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsd-shop-orders li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.dsd-shop-orders li + li {
	margin-top: 0.25rem;
}

/* the other boxes in the same shop order */
.dsd-shop-boxes {
	margin-top: 0.625rem;
	padding: 0.75rem 1rem;
	border-radius: var(--eno-radius);
	background-color: var(--eno-color-orange-tint);
}

.dsd-shop-boxes p {
	margin: 0;
}

.dsd-shop-boxes ul {
	margin: 0.375rem 0;
	padding-left: 1.25rem;
}

.dsd-linkbutton {
	padding: 0;
	border: 0;
	background: none;
	color: var(--eno-color-orange-dark);
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* Buttons (as .eno-button) ------------------------------------------------ */

.btn {
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-padding-y: 0.6875rem;
	--bs-btn-font-family: var(--eno-font-body);
	--bs-btn-font-size: var(--eno-text-label);
	--bs-btn-font-weight: 600;
	--bs-btn-line-height: 1.4;
	--bs-btn-border-radius: var(--eno-radius-sm);
	/* no theme's gradient or text shadow (Bootswatch) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-image: none;
	text-shadow: none;
	letter-spacing: 0.05em;
}

.btn-primary {
	--bs-btn-color: var(--eno-color-white);
	--bs-btn-bg: var(--eno-color-orange);
	--bs-btn-border-color: var(--eno-color-orange);
	--bs-btn-hover-color: var(--eno-color-white);
	--bs-btn-hover-bg: var(--eno-color-orange-dark);
	--bs-btn-hover-border-color: var(--eno-color-orange-dark);
	--bs-btn-active-color: var(--eno-color-white);
	--bs-btn-active-bg: var(--eno-color-orange-dark);
	--bs-btn-active-border-color: var(--eno-color-orange-dark);
	--bs-btn-focus-shadow-rgb: 242, 113, 17;
	box-shadow: var(--eno-shadow-sm);
	white-space: nowrap;
}

.btn-primary:hover {
	background-image: none;
	box-shadow: var(--eno-shadow-md);
}

.btn-sm {
	--bs-btn-padding-x: 0.875rem;
	--bs-btn-padding-y: 0.375rem;
	--bs-btn-font-size: var(--eno-text-label);
	--bs-btn-border-radius: var(--eno-radius-sm);
}

/* as .eno-button--outline */
.btn-outline-primary {
	--bs-btn-color: var(--eno-color-orange-dark);
	--bs-btn-bg: var(--eno-color-white);
	--bs-btn-border-color: var(--eno-color-outline);
	--bs-btn-hover-color: var(--eno-color-orange-dark);
	--bs-btn-hover-bg: var(--eno-color-surface-low);
	--bs-btn-hover-border-color: var(--eno-color-outline);
	--bs-btn-active-color: var(--eno-color-orange-dark);
	--bs-btn-active-bg: var(--eno-color-surface);
	--bs-btn-active-border-color: var(--eno-color-outline);
	--bs-btn-disabled-color: var(--eno-color-outline);
	--bs-btn-disabled-bg: var(--eno-color-white);
	--bs-btn-disabled-border-color: var(--eno-color-surface-high);
	--bs-btn-focus-shadow-rgb: 242, 113, 17;
	white-space: nowrap;
}

/* an icon button (in a table row: delete) */
.dsd-icon-btn {
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;
	--bs-btn-color: var(--eno-color-text-muted);
	--bs-btn-hover-color: var(--eno-color-orange-dark);
	--bs-btn-hover-bg: var(--eno-color-surface-low);
	--bs-btn-active-color: var(--eno-color-orange-dark);
	--bs-btn-active-bg: var(--eno-color-surface);
	--bs-btn-border-width: 0;
	width: 2rem;
	height: 2rem;
	border-radius: var(--eno-radius);
	letter-spacing: 0;
}

.dsd-icon-btn--danger {
	--bs-btn-hover-color: #b3261e;
	--bs-btn-hover-bg: rgb(179 38 30 / 8%);
	--bs-btn-active-color: #b3261e;
	--bs-btn-active-bg: rgb(179 38 30 / 12%);
}

/* Fields (as .eno-input, .eno-select, .eno-field-label) ------------------- */

.form-control,
.form-select {
	min-height: 2.75rem;
	border-color: var(--eno-color-surface-dim);
	border-radius: var(--eno-radius);
	background-color: var(--eno-color-white);
	color: var(--eno-color-text);
	font-size: 1rem;
	transition: border-color 150ms var(--eno-ease), box-shadow 150ms var(--eno-ease);
}

.form-control {
	padding: 0.5rem 0.875rem;
	font-variant-numeric: tabular-nums;
}

.input-group-sm > .form-control {
	min-height: 2.5rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.9375rem;
}

.input-group-sm > .input-group-text {
	padding: 0.375rem 0.625rem;
}

.form-select {
	padding: 0.5rem 2.25rem 0.5rem 0.875rem;
}

.form-control:hover,
.form-select:hover {
	border-color: var(--eno-color-outline);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--eno-color-orange);
	box-shadow: 0 0 0 3px var(--eno-color-orange-tint);
}

.form-control::placeholder {
	color: var(--eno-color-outline);
}

/* a unit at the end of a field, as part of the field */
.input-group-text {
	min-width: 2.5rem;
	justify-content: center;
	border-color: var(--eno-color-surface-dim);
	background-color: var(--eno-color-surface-low);
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
}

.input-group:focus-within .input-group-text {
	border-color: var(--eno-color-orange);
}

.input-group > .form-control:focus {
	z-index: 3;
}

.form-label,
.form-check-label,
.dsd-label {
	color: var(--eno-color-text);
	font-size: var(--eno-text-label);
	font-weight: 600;
}

.form-label {
	margin-bottom: 0.375rem;
}

.form-text {
	margin-top: 0.375rem;
	color: var(--eno-color-text-muted);
	font-size: 0.8125rem;
}

/* fields side by side: two (or three) columns, a wide field takes the whole row */
.dsd-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem 1.25rem;
}

.dsd-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dsd-field {
	min-width: 0;
}

.dsd-field--wide {
	grid-column: 1 / -1;
}

/* a table of fields (FEFCO sizes): a row and a column per factor */
.dsd-matrix-wrap {
	overflow-x: auto;
}

.dsd-matrix {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0.5rem 0.375rem;
	margin: -0.375rem -0.5rem;
}

.dsd-matrix--narrow {
	width: auto;
}

.dsd-matrix thead th {
	padding: 0 0.125rem 0.125rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dsd-matrix tbody th {
	padding-right: 0.75rem;
	font-size: var(--eno-text-label);
	font-weight: 600;
	white-space: nowrap;
}

.dsd-matrix td {
	min-width: 7.5rem;
}

.dsd-matrix--narrow td {
	width: 10rem;
}

/* a row of fields under a list, to add to it */
.dsd-addrow {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 14rem) auto;
	align-items: end;
	justify-content: start;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-surface-low);
}

.dsd-addrow--options {
	grid-template-columns: minmax(10rem, 2fr) repeat(4, minmax(6.5rem, 1fr)) auto;
	justify-content: stretch;
}

.form-check-input {
	width: 1.25em;
	height: 1.25em;
	border-color: var(--eno-color-surface-dim);
}

.form-switch {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2rem;
	margin: 0;
	padding-left: 0;
}

.form-switch .form-check-input {
	width: 2.75em;
	height: 1.5em;
	margin: 0;
	cursor: pointer;
}

.form-switch .form-check-label {
	cursor: pointer;
}

.form-check-input:checked {
	border-color: var(--eno-color-orange);
	background-color: var(--eno-color-orange);
}

.form-check-input:focus {
	border-color: var(--eno-color-orange);
	box-shadow: 0 0 0 3px var(--eno-color-orange-tint);
}

/* Tables: in a white card ------------------------------------------------- */

.table {
	--bs-table-color: var(--eno-color-text);
	--bs-table-bg: var(--eno-color-white);
	--bs-table-border-color: var(--eno-color-surface-high);
	--bs-table-hover-color: var(--eno-color-text);
	--bs-table-hover-bg: rgb(242 113 17 / 5%);
	overflow: hidden;
	border: 1px solid var(--eno-color-surface-high);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--eno-radius-lg);
	box-shadow: var(--eno-shadow-float);
}

.table > :not(caption) > * > * {
	padding: 0.875rem 1rem;
	vertical-align: middle;
}

.table > thead > tr > th {
	--bs-table-bg: var(--eno-color-surface-low);
	padding-block: 0.625rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom-color: var(--eno-color-surface-high);
}

.table > tbody > tr:last-child > * {
	border-bottom: 0;
}

/* a table inside a card: no card of its own */
.table.dsd-table-flat {
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.table.dsd-table-flat > thead > tr > th {
	--bs-table-bg: transparent;
	padding-top: 0;
}

.table.dsd-table-flat > :not(caption) > * > :first-child {
	padding-left: 0;
}

.table.dsd-table-flat > :not(caption) > * > :last-child {
	padding-right: 0;
}

/* numbers: right, digits of equal width */
.dsd-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* a row that opens something: the whole row is clickable, an arrow at the end */
.table tr[role="button"],
.dsd-link-row {
	position: relative;
	cursor: pointer;
}

.dsd-link-row a {
	color: inherit;
}

.dsd-link-row a:hover {
	text-decoration: none;
}

.table .dsd-chevron {
	width: 1%;
	padding-left: 0;
	color: var(--eno-color-outline);
	transition: color 150ms var(--eno-ease), transform 150ms var(--eno-ease);
}

.table tr:hover .dsd-chevron {
	color: var(--eno-color-orange);
	transform: translateX(2px);
}

/* Tabs (FEFCO): underlined, the content in a card ------------------------- */

.nav-tabs {
	gap: 1.75rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--eno-color-surface-high);
}

.nav-tabs .nav-link {
	margin-bottom: -1px;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	font-weight: 600;
	letter-spacing: 0.05em;
}

.nav-tabs .nav-link:hover {
	color: var(--eno-color-orange-dark);
}

.nav-tabs .nav-link.active {
	border-bottom-color: var(--eno-color-orange);
	background: none;
	color: var(--eno-color-orange-dark);
}

/* Admin start page: the configurator switch and the tiles ----------------- */

.dsd-state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
}

.dsd-state__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: rgb(179 38 30 / 10%);
	color: #b3261e;
	font-size: 1.25rem;
}

.dsd-state__icon--on {
	background-color: rgb(47 158 85 / 12%);
	color: var(--eno-color-status-open-ink);
}

.dsd-state__text {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
}

.dsd-state__name {
	font-weight: 700;
}

.dsd-state__help {
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
}

.dsd-switch {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--eno-color-surface-dim);
	border-radius: var(--eno-radius);
	background-color: var(--eno-color-white);
}

.dsd-switch button,
.dsd-switch label {
	margin: 0;
	padding: 0.6875rem 1.25rem;
	line-height: 1.4;
	border: 0;
	background: none;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.dsd-switch button + button,
.dsd-switch input + label ~ input + label {
	border-left: 1px solid var(--eno-color-surface-dim);
}

.dsd-switch button:hover,
.dsd-switch label:hover {
	background-color: var(--eno-color-surface-low);
}

/* a choice (radio buttons, .btn-check hides the circles) */
.dsd-switch input:checked + label {
	background-color: var(--eno-color-orange);
	color: var(--eno-color-white);
}

.dsd-switch input:focus-visible + label {
	outline: 2px solid var(--eno-color-orange);
	outline-offset: -2px;
}

.dsd-switch .dsd-switch__on[aria-pressed="true"] {
	background-color: var(--eno-color-status-open);
	color: var(--eno-color-white);
}

.dsd-switch .dsd-switch__off[aria-pressed="true"] {
	background-color: #b3261e;
	color: var(--eno-color-white);
}

.dsd-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1rem;
}

.dsd-tile {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.5rem;
	border: 1px solid var(--eno-color-surface-high);
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-white);
	box-shadow: var(--eno-shadow-float);
	color: var(--eno-color-text);
	transition: border-color 150ms var(--eno-ease), box-shadow 150ms var(--eno-ease);
}

.dsd-tile:hover {
	border-color: var(--eno-color-orange);
	box-shadow: var(--eno-shadow-md);
	color: var(--eno-color-text);
	text-decoration: none;
}

.dsd-tile .bi {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.75rem;
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-orange-tint);
	color: var(--eno-color-orange);
	font-size: 1.5rem;
	line-height: 1;
}

.dsd-tile__name {
	font-family: var(--eno-font-heading);
	font-size: 1.25rem;
	font-weight: 800;
}

.dsd-tile__text {
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
}

/* Orders: search, count, done, pages ------------------------------------ */

.dsd-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.dsd-search {
	position: relative;
	flex: 1 1 20rem;
	max-width: 36rem;
}

.dsd-search .bi {
	position: absolute;
	top: 50%;
	left: 0.875rem;
	color: var(--eno-color-outline);
	transform: translateY(-50%);
	pointer-events: none;
}

.dsd-search .form-control {
	padding-left: 2.5rem;
}

.dsd-count {
	margin-bottom: 0.75rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
}

.dsd-done {
	color: var(--eno-color-status-open-ink);
	font-weight: 600;
}

/* the order list: one line per cell; a click on a row opens the order */
.dsd-orders td {
	white-space: nowrap;
}

/* the product may wrap between its parts: then the table fits an upright iPad */
.dsd-orders td.dsd-product {
	white-space: normal;
}

.dsd-orders td.dsd-product span {
	white-space: nowrap;
}

.dsd-orders small {
	margin-left: 0.5rem;
	color: var(--eno-color-text-muted);
}

.dsd-ref {
	font-family: var(--bs-font-monospace);
}

/* the order in its modal: label, value */
.dsd-props {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 0;
	margin: 0;
}

.dsd-props dt {
	padding-right: 1.5rem;
	color: var(--eno-color-text-muted);
	font-weight: 500;
}

.dsd-props dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.dsd-props .dsd-total {
	padding-top: 0.5rem;
	border-top: 1px solid var(--eno-color-surface-high);
	font-weight: 700;
}

.dsd-copy {
	--bs-btn-color: var(--eno-color-text-muted);
	--bs-btn-hover-color: var(--eno-color-orange-dark);
	--bs-btn-active-color: var(--eno-color-orange-dark);
	margin-left: 0.25rem;
	vertical-align: baseline;
}

.dsd-pages {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* Calculator: the input and the outcome side by side ------------------------- */

.dsd-calc {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: start;
	gap: 1.5rem;
}

.dsd-field--option {
	grid-column: span 2;
}

/* how the price is calculated: numbered steps, each with its amount */
.dsd-steps {
	counter-reset: dsd-step;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.dsd-step {
	position: relative;
	padding: 0 0 1.125rem 2.25rem;
	counter-increment: dsd-step;
}

.dsd-step + .dsd-step {
	padding-top: 1.125rem;
	border-top: 1px solid var(--eno-color-surface-high);
}

.dsd-step::before {
	content: counter(dsd-step);
	position: absolute;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--eno-color-orange-tint);
	color: var(--eno-color-orange-dark);
	font-size: var(--eno-text-small);
	font-weight: 700;
}

.dsd-step__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.375rem;
}

.dsd-step__head h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

.dsd-step__amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dsd-step p {
	margin: 0 0 0.375rem;
	color: var(--eno-color-text-muted);
}

.dsd-step p.dsd-calc-line,
.dsd-calc-lines dd {
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.dsd-calc-lines {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0 0 0.375rem;
}

.dsd-calc-lines dt {
	color: var(--eno-color-text-muted);
	font-weight: 500;
}

.dsd-calc-lines dd {
	margin: 0;
}

.dsd-what {
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
}

.dsd-staffel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.dsd-staffel li {
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--eno-color-surface-high);
	border-radius: 999px;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
}

.dsd-staffel li.is-current {
	border-color: var(--eno-color-orange-dark);
	color: var(--eno-color-orange-dark);
}

.dsd-pallet-choice {
	margin: 0.25rem 0 0;
}

.dsd-pallet-choice tr.is-current td {
	font-weight: 700;
}

.dsd-warning {
	color: var(--eno-color-orange-dark) !important;
}

.dsd-sum dt.dsd-total:first-child,
.dsd-sum dt.dsd-total:first-child + dd {
	border-top-width: 2px;
}

.dsd-sum dd {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.dsd-figure {
	margin: 1.5rem 0 0;
}

.dsd-figure img {
	border: 1px solid var(--eno-color-surface-high);
	border-radius: var(--eno-radius);
}

.dsd-figure figcaption {
	margin-top: 0.5rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
}

/* Manual (Handleiding) ----------------------------------------------------- */

.dsd-manual {
	display: grid;
	grid-template-columns: 14rem minmax(0, 1fr);
	align-items: start;
	gap: 2.5rem;
}

.dsd-manual__toc {
	position: sticky;
	top: calc(var(--dsd-header-height) + 1.5rem);
	max-height: calc(100vh - var(--dsd-header-height) - 3rem);
	overflow-y: auto;
	padding: 1.25rem;
	border: 1px solid var(--eno-color-surface-high);
	border-radius: var(--eno-radius);
	background: #fff;
}

.dsd-manual__toc-title {
	margin: 0 0 0.5rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dsd-manual__toc ol {
	margin: 0;
	padding-left: 1.25rem;
}

.dsd-manual__toc li + li {
	margin-top: 0.375rem;
}

.dsd-manual__toc a,
.dsd-manual__body a {
	color: var(--eno-color-orange-dark);
}

.dsd-manual__body {
	max-width: 50rem;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.dsd-manual__body section {
	padding: 2rem 2.25rem;
	border: 1px solid var(--eno-color-surface-high);
	border-radius: var(--eno-radius);
	background: #fff;
}

.dsd-manual__body section + section {
	margin-top: 1.5rem;
}

.dsd-manual__body h2 {
	margin: 0 0 1rem;
	font-size: 1.625rem;
}

.dsd-manual__body h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1.25rem;
}

.dsd-manual__body h4 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.dsd-manual__body li + li {
	margin-top: 0.375rem;
}

.dsd-manual__steps li::marker {
	color: var(--eno-color-orange-dark);
	font-weight: 700;
}

.dsd-manual__fig {
	margin: 1.25rem 0 1.5rem;
}

.dsd-manual__fig--narrow {
	max-width: 32rem;
}

.dsd-manual__fig img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--eno-color-surface-high);
	border-radius: var(--eno-radius);
	box-shadow: var(--eno-shadow-sm, 0 1px 3px rgb(0 0 0 / 8%));
}

.dsd-manual__fig figcaption {
	margin-top: 0.5rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
}

.dsd-manual__note {
	display: flex;
	gap: 0.75rem;
	margin: 1.25rem 0;
	padding: 0.875rem 1.125rem;
	border-radius: var(--eno-radius);
	background-color: var(--eno-color-orange-tint);
}

.dsd-manual__note i {
	color: var(--eno-color-orange-dark);
	font-size: 1.25rem;
	line-height: 1.4;
}

.dsd-manual__example {
	padding: 0.875rem 1.125rem;
	border-left: 3px solid var(--eno-color-orange-dark);
	background-color: var(--eno-color-surface);
	font-variant-numeric: tabular-nums;
}

.dsd-manual__table {
	font-size: 1rem;
}

.dsd-manual__table td:first-child {
	white-space: nowrap;
}

.dsd-manual__faq dt {
	margin-top: 1rem;
}

.dsd-manual__faq dd {
	margin: 0.25rem 0 0;
}

/* Login ------------------------------------------------------------------- */

.dsd-login {
	display: flex;
	justify-content: center;
	padding: 12vh var(--eno-gutter) 4rem;
}

.dsd-login__card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	max-width: 26rem;
	padding: 2rem;
}

.dsd-login .dsd-title {
	margin: 0;
	font-size: var(--eno-text-headline-md);
}

.dsd-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* The configurator preview on / (main.j2): as the web shop's order page shows it */

.sd-preview {
	max-width: 1200px;
	margin: 1rem auto;
	padding: 2.5rem 2rem;
}

.sd-preview iframe {
	display: block;
	width: 100%;
	height: 40rem;
	border: 0;
}

/* Phones ------------------------------------------------------------------ */

@media (max-width: 899px) {
	.dsd-header__inner {
		flex-wrap: wrap;
		gap: 0 1rem;
		min-height: 4rem;
		padding-top: 0.75rem;
	}

	.dsd-brand__name {
		font-size: 1.25rem;
	}

	.dsd-nav {
		order: 3;
		flex-basis: 100%;
		gap: 1.25rem;
		margin-top: 0.25rem;
		overflow-x: auto;
	}

	.dsd-nav a {
		padding: 0.75rem 0 calc(0.75rem - 2px);
		letter-spacing: 0;
	}

	.nav-tabs {
		flex-wrap: nowrap;
		gap: 1.25rem;
		overflow-x: auto;
	}

	.nav-tabs .nav-link {
		letter-spacing: 0;
		white-space: nowrap;
	}

	.dsd-pagehead {
		margin: 1rem 0 1.25rem;
	}

	.dsd-calc {
		grid-template-columns: minmax(0, 1fr);
	}

	:root {
		--dsd-header-height: 6.5rem; /* the menu wraps below the logo */
	}

	.dsd-manual {
		grid-template-columns: minmax(0, 1fr);
	}

	.dsd-manual__toc {
		position: static;
	}

	.dsd-manual__body section {
		padding: 1.5rem;
	}

	.dsd-manual__table td:first-child {
		white-space: normal;
	}

	.dsd-addrow,
	.dsd-addrow--options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dsd-addrow > .dsd-field:first-of-type {
		grid-column: 1 / -1;
	}

	.dsd-card,
	.sd-preview {
		padding: 1.25rem 1rem;
	}

	/* the sizes table fits an upright iPad: the row names wrap, the fields narrower */
	.dsd-matrix tbody th {
		white-space: normal;
	}

	.dsd-matrix td {
		min-width: 5.5rem;
	}

	.dsd-matrix .input-group-text {
		min-width: 1.75rem;
		padding-inline: 0.375rem;
	}

	.table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* a short table that fits: no scrolling */
	.dsd-pallet-choice {
		display: table;
		white-space: normal;
	}

	/* the reference breaks at its dashes */
	.dsd-orders td.dsd-ref {
		white-space: normal;
	}
}

@media (max-width: 599px) {
	.dsd-grid,
	.dsd-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.dsd-field--option {
		grid-column: auto;
	}
}