/*
	Shared FurnStream component styling (formerly order-flow.css): the Inkoop pipeline bar, the Bestellingen fase
	filter cards, the per-row miniflow, the order-detail stepper and the compact empty states — one
	file so the four surfaces can never drift apart. Sizing only where possible: every colour comes
	from a UBold theme variable, so light and dark mode keep working and a rebranded theme carries
	straight through. Spacing stays on the 4/8/12/16/24px grid.
*/

/* === Pipeline bar (Inkoop) + fase filter cards (Bestellingen) === */

.furnstream-pipeline {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

/* Sizes follow the offerte/factuur mockups for all four surfaces at once (Inkoop, Bestellingen, Offertes,
	Facturen): padding 14/18, count 27px, radius 12px, chevron 18px, active ring .18 plus the card shadow. */
.furnstream-seg {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 14px 18px;
	background: var(--theme-secondary-bg);
	border: 1px solid var(--theme-border-color);
	border-radius: 12px;
	box-shadow: var(--furnstream-card-shadow);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.furnstream-seg:hover {
	border-color: var(--theme-secondary-color);
	transform: translateY(-1px);
}

.furnstream-seg.active {
	background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), .08), rgba(var(--theme-primary-rgb), .16));
	border-color: var(--theme-primary);
	box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .18), var(--furnstream-card-shadow);
}

.furnstream-seg-title {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--theme-secondary-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.furnstream-seg.active .furnstream-seg-title {
	color: var(--theme-primary-text-emphasis);
}

.furnstream-seg-count {
	font-size: 27px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--theme-heading-color);
	font-variant-numeric: tabular-nums;
}

.furnstream-seg-sub {
	font-size: 11.5px;
	color: var(--theme-secondary-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.furnstream-chevron {
	align-self: center;
	display: flex;
	font-size: 18px;
	color: var(--theme-secondary-color);
	opacity: .6;
}

/* Compact variant: the Bestellingen fase filter cards. Since the mockup tune the compact bar shares every
	size with the full bar — the class stays as the marker of the list-page variant, without overrides. */

/* Quiet secondary views (Geannuleerd / Alle) on their own row below the bar. */
.furnstream-secondary {
	display: flex;
	justify-content: flex-end;
	gap: 18px;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
}

.furnstream-secondary-link {
	color: var(--theme-secondary-color);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.furnstream-secondary-link:hover {
	color: var(--theme-body-color);
}

.furnstream-secondary-link.active {
	color: var(--theme-primary);
}

/* Page-level location filter of the goods pages and Routes (session 94, R9): the same quiet row as the
	secondary views, left-aligned above the page content. */
.location-filter-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 700;
}

.location-filter-label {
	color: var(--theme-secondary-color);
	font-weight: 500;
}

.location-filter-link {
	color: var(--theme-secondary-color);
	text-decoration: none;
}

.location-filter-link:hover {
	color: var(--theme-body-color);
}

.location-filter-link.active {
	color: var(--theme-primary);
}

/* Inside a card header (Routes) the header row already spaces the strip. */
.card-header .location-filter-strip {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.furnstream-seg {
		transition: none;
	}

	.furnstream-seg:hover {
		transform: none;
	}
}

@media (max-width: 767.98px) {
	.furnstream-pipeline {
		flex-wrap: wrap;
	}

	.furnstream-seg {
		flex-basis: 9rem;
	}

	.furnstream-chevron {
		display: none;
	}
}

/* === Alert strip (dispatching on Inkoop; Verlopen / Vervallen on the offerte- and factuurlijsten) === */

.furnstream-alert {
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
}

/* The strip text is darker than the chip tone of the same colour (mockup #8a5d05 / #b2293f on the tinted
	ground); the double class outranks .alert's own colour variable. */
.furnstream-alert.alert-warning {
	color: var(--furnstream-strip-warning-color);
}

.furnstream-alert.alert-danger {
	color: var(--furnstream-strip-danger-color);
}

.furnstream-alert-icon {
	font-size: 19px;
	line-height: 1;
}

/* Divider between bulk-action groups — same soft colour as the card header's bottom border.
	Double class beats Bootstrap's own .vr (currentColor at .25 opacity) regardless of load order. */
.vr.furnstream-vr {
	background-color: var(--theme-card-border-color);
	opacity: 1;
}

/* === Step panes: vendor sub-cards + shared table rhythm === */

.vendor-order-cards .card {
	background: var(--theme-tertiary-bg);
	border: 1px solid var(--theme-border-color);
	border-radius: 10px;
	box-shadow: none;
	margin-bottom: 12px;
}

.vendor-order-cards .card:last-child {
	margin-bottom: 0;
}

.furnstream-table tbody td {
	padding-top: 11px;
	padding-bottom: 11px;
}

/* === Empty state: centered, icon above the message === */

.furnstream-empty {
	padding: 48px 16px;
	text-align: center;
	color: var(--theme-secondary-color);
}

.furnstream-empty > i {
	display: block;
	font-size: 36px;
	margin-bottom: 8px;
	opacity: .5;
}

.furnstream-empty-title {
	font-weight: 600;
	margin-bottom: 4px;
}

.furnstream-empty-sub {
	font-size: 12px;
}

/* === Miniflow: the per-row voortgangsindicator on the Bestellingen, Offertes and Facturen lists === */

.furnstream-miniflow {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.furnstream-miniflow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--theme-body-color) 13%, transparent);
	flex-shrink: 0;
}

.furnstream-miniflow-dot.done {
	background: var(--theme-primary);
}

.furnstream-miniflow-dot.current {
	background: var(--theme-secondary-bg);
	border: 2px solid var(--theme-primary);
	box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), .35);
}

.furnstream-miniflow-line {
	width: 11px;
	height: 1px;
	background: color-mix(in srgb, var(--theme-body-color) 13%, transparent);
	flex-shrink: 0;
}

.furnstream-miniflow-line.done {
	background: var(--theme-primary);
}

.furnstream-amount {
	font-variant-numeric: tabular-nums;
}

/* === Stepper: the order-detail fasebalk === */

.furnstream-stepper {
	display: flex;
}

.furnstream-stepper-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Sizes follow the offerte/factuur mockups for every fasebalk at once — Bestellingen moves along:
	dot 29px, ring 5px at .16, label 12px/700, sub 11px. */

/* Connector from the previous circle to this one; primary once this step has been reached. */
.furnstream-stepper-step + .furnstream-stepper-step::before {
	content: '';
	position: absolute;
	top: 14px;
	left: calc(-50% + 22px);
	right: calc(50% + 22px);
	height: 2px;
	background: var(--theme-border-color);
}

.furnstream-stepper-step.done::before,
.furnstream-stepper-step.current::before {
	background: var(--theme-primary);
}

.furnstream-stepper-dot {
	width: 29px;
	height: 29px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-secondary-bg);
	border: 1.5px solid var(--theme-border-color);
	z-index: 1;
}

.furnstream-stepper-step.done .furnstream-stepper-dot {
	background: var(--theme-primary);
	border-color: var(--theme-primary);
	color: #fff;
}

.furnstream-stepper-step.current .furnstream-stepper-dot {
	border: 2px solid var(--theme-primary);
	box-shadow: 0 0 0 5px rgba(var(--theme-primary-rgb), .16);
}

/* Filled core inside the current circle — a bare ring reads as unfinished */
.furnstream-stepper-step.current .furnstream-stepper-dot::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--theme-primary);
}

.furnstream-stepper-label {
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	color: var(--theme-secondary-color);
	text-align: center;
}

.furnstream-stepper-step.current .furnstream-stepper-label {
	color: var(--theme-primary-text-emphasis);
}

.furnstream-stepper-sub {
	font-size: 11px;
	color: var(--theme-secondary-color);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Warning variant of the current step: an expired offerte or an overdue factuur keeps its fase, but the dot,
	its core and the label turn warning — all in the amber text tone, so dot and label match. */
.furnstream-stepper-step.current.warning .furnstream-stepper-dot {
	border-color: var(--theme-warning-text-emphasis);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-warning-text-emphasis) 16%, transparent);
}

.furnstream-stepper-step.current.warning .furnstream-stepper-dot::after {
	background: var(--theme-warning-text-emphasis);
}

.furnstream-stepper-step.current.warning .furnstream-stepper-label {
	color: var(--theme-warning-text-emphasis);
}

/* === "Volgende stap" row under the stepper === */

.furnstream-next {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding: 11px 16px;
	border-radius: 12px;
	background: var(--theme-tertiary-bg);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

/* The expired/overdue row carries the explanation itself, in the strip's warning tone, instead of a separate
	alert strip. */
.furnstream-next.warning {
	background: var(--theme-warning-bg-subtle);
	color: var(--furnstream-strip-warning-color);
}

.furnstream-next.warning .text-muted {
	color: inherit !important;
	opacity: .85;
}

.furnstream-next.warning .ti {
	font-size: 16px;
	vertical-align: -3px;
}

/* === Document thread: offerte › bestelling › factuur on top of every detail page === */

.document-thread {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12.5px;
}

.document-thread-doc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--theme-border-color);
	background: var(--theme-secondary-bg);
	color: var(--theme-body-color);
	font-weight: 700;
	box-shadow: var(--furnstream-card-shadow);
	text-decoration: none;
	white-space: nowrap;
}

a.document-thread-doc:hover {
	color: var(--theme-body-color);
	border-color: var(--theme-secondary-color);
}

.document-thread-doc > i {
	font-size: 13px;
	color: var(--theme-success-text-emphasis);
}

.document-thread-doc.current,
a.document-thread-doc.current:hover {
	border-color: var(--theme-primary);
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-primary-text-emphasis);
}

.document-thread-doc.future {
	color: var(--theme-secondary-color);
	border-style: dashed;
	box-shadow: none;
	background: transparent;
}

.document-thread-sep {
	display: flex;
	font-size: 15px;
	color: var(--theme-secondary-color);
	opacity: .6;
}

/* === Action bar: centered neutral buttons, the destructive one last, no primary === */

.document-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* === Detail page layout: the document column plus a fixed 300px side column, stacked below xl === */

.document-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 18px;
	align-items: start;
	margin-bottom: 24px;
}

/* The order page still uses Bootstrap columns; it keeps the same breathing room above the footer. */
.document-detail-row {
	margin-bottom: 24px;
}

.document-layout-main {
	min-width: 0;
}

.document-layout-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The column gap spaces the side cards; UBold's own card margin would add to it. */
.document-layout-side > .card {
	margin-bottom: 0;
}

@media (max-width: 1199.98px) {
	.document-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* === Document card: number + captioned chips, dates right, lines table, totals block === */

/* UBold's .card-header (flex, centred, 15×22) loads after this file; the double class outranks it. */
.card-header.document-card-header {
	align-items: flex-start;
	padding: 20px 26px 18px;
}

.document-card-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--theme-heading-color);
	margin: 0 0 12px;
}

.document-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.document-card-chips > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.document-card-chips .furnstream-caption {
	margin-bottom: 0;
}

.document-card-dates {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	font-size: 13.5px;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.document-card-dates > span > span {
	color: var(--theme-secondary-color);
	margin-right: 6px;
}

.document-card-dates b {
	font-weight: 700;
	color: var(--theme-heading-color);
}

.document-card-dates b.warning {
	color: var(--theme-warning-text-emphasis);
}

/* Edge cells sit 26px from the card border. The skin's caption-head rules load later and set the side padding
	on thead.table-light heads and on the body cells under them, so these selectors carry one class more. */
.table.document-lines > thead > tr > th:first-child,
.table.document-lines:has(> thead.table-light) > tbody > tr > td:first-child {
	padding-left: 26px;
}

.table.document-lines > thead > tr > th:last-child,
.table.document-lines:has(> thead.table-light) > tbody > tr > td:last-child {
	padding-right: 26px;
}

/* Quantity, prices and BTW stay level with the product name instead of centring on a multi-line description. */
.document-lines > tbody > tr > td {
	padding: 13px 14px;
	vertical-align: top;
}

.document-lines > tbody > tr.line-sub-row > td {
	padding-top: 4px;
	padding-bottom: 8px;
	border-top: 0;
}

.document-line-index {
	width: 44px;
	color: var(--theme-secondary-color);
}

.document-totals-wrap {
	display: flex;
	justify-content: flex-end;
	padding: 18px 26px 22px;
	border-top: 1px solid var(--theme-border-color);
}

.document-totals {
	width: 320px;
	max-width: 100%;
}

.document-kv {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 6px 0;
	font-size: 13.5px;
}

.document-kv > b {
	font-weight: 800;
	color: var(--theme-heading-color);
	font-variant-numeric: tabular-nums;
}

.document-kv.total {
	border-top: 1px solid var(--theme-border-color);
	margin-top: 4px;
	padding-top: 10px;
	font-size: 16px;
}

.document-kv.warning,
.document-kv.warning > b {
	color: var(--theme-warning-text-emphasis);
}

/* The fasebalk card of the offerte- and factuurpagina: stepper centered at the mockup width, next-row below.
	The double class outranks UBold's .card-body padding, which loads after this file. */
.card-body.document-flow-body {
	padding: 22px 26px 18px;
}

.furnstream-stepper.document-flow-stepper {
	max-width: 720px;
	margin: 0 auto;
}

.furnstream-stepper.document-flow-stepper-wide {
	max-width: 820px;
}

/* Right column cards: 13.5px body text, one muted sentence as empty state. */
.document-side-card .card-body {
	font-size: 13.5px;
}

.document-side-card .card-body.document-side-scroll {
	max-height: 500px;
	overflow-y: auto;
}

/* The Klant card body: avatar left, name + muted lines right. */
.document-side-customer {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.document-side-customer > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.document-side-card .card-header .card-title {
	margin-bottom: 0;
}

.document-side-name {
	font-weight: 700;
	color: var(--theme-heading-color);
}

/* The bestelling's afleveradres under the klantregels: a primary-tinted callout with a map pin, so the address
	the chauffeur drives to stands apart from the muted customer lines above it. */
.document-side-address {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	border-left: 3px solid var(--theme-primary);
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-heading-color);
}

.document-side-address > i {
	font-size: 18px;
	line-height: 1;
	color: var(--theme-primary-text-emphasis);
	flex-shrink: 0;
}

.document-side-address > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.document-side-address .furnstream-caption {
	color: var(--theme-primary-text-emphasis);
	margin-bottom: 2px;
}

/* === List card: title + explainer + search in the header, the table flush to the card edge, the Facturen
	footer with the openstaand total === */

/* Mockup card header gap; the header carries no gap utility, so this rule owns it. */
.document-list-card > .card-header {
	gap: 10px;
}

.document-list-explainer {
	font-size: 12px;
	color: var(--theme-secondary-color);
}

.document-list-search {
	position: relative;
	width: 260px;
	max-width: 100%;
}

.document-list-search > i {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--theme-secondary-color);
	pointer-events: none;
}

.document-list-search > input {
	padding-left: 32px;
}

/* Edge cells sit 22px from the card border. The skin's DataTable body rule (.table.dataTable, later) sets the
	side padding at the same weight as a plain .table selector here, so the body cells name .dataTable too. */
.document-list-card .table > thead > tr > th:first-child,
.document-list-card .table.dataTable > tbody > tr > td:first-child {
	padding-left: 22px;
}

.document-list-card .table > thead > tr > th:last-child,
.document-list-card .table.dataTable > tbody > tr > td:last-child {
	padding-right: 22px;
}

.document-list-card .table > tbody > tr > td {
	padding-top: 13px;
	padding-bottom: 13px;
}

.document-list-card .table {
	margin-bottom: 0;
}

/* UBold pulls every DataTable up by 0.75rem to tuck it under its own toolbar row; no backoffice table has that
	toolbar (datatables-defaults.js sets dom 'rt…ip' for all of them), so without this the head slides under
	whatever sits above it (card header, filter row, button row) and loses its top padding. */
.dt-container {
	margin-top: 0;
}

.document-list-paging {
	padding: 10px 22px 14px;
}

/* Collapsible cards: the chevron follows the trigger's Bootstrap .collapsed state (UBold keyed its rotation on
	the data-action attribute the triggers no longer carry). The 24px toggle centres on a taller neighbour in the same
	.card-action (a header button); UBold leaves the row on stretch, which pins the toggle to the top. */
.card-header .card-action {
	align-items: center;
}

.card-header .card-action-item > i {
	transition: transform .3s ease;
}

.card-header .card-action-item.collapsed > i {
	transform: rotate(-180deg);
}

/* A collapsed list card shows only its title and toggle; the search field and filters appear with the body. */
.document-list-card > .card-header:has(.card-action-item.collapsed) > :not(.card-title):not(.card-action) {
	display: none;
}

/* The header search pushes itself and everything after it to the right; UBold's .card-action must not claim a
	second auto margin (two auto margins would centre the search). While collapsed the search is hidden and the
	toggle keeps its own margin. */
.document-list-card > .card-header:not(:has(.card-action-item.collapsed)) > .document-list-search ~ .card-action {
	margin-inline-start: 0;
}

/* A filter row between the header and the table of a flush list card (status chips, selects, tabs). */
.document-list-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 22px;
	border-bottom: 1px solid var(--theme-border-color);
}

/* Form controls in a toolbar size to their content: flatpickr's altInput copies the classes of the original
	field but not an inline width, so a 100% form-control would push the label and the buttons onto their own rows. */
.document-list-toolbar :is(.form-control, .form-select) {
	width: auto;
}

/* Tab strips inside a flush list card get the same side padding as the edge cells. */
.document-list-card > .card-body > .nav-tabs,
.document-list-card > .card-body > .document-list-toolbar > .nav-tabs {
	padding: 0 22px;
}

.document-list-paging .dataTables_info {
	padding-top: 0;
}

.document-list-footer {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 16px 22px;
	border-top: 1px solid var(--theme-border-color);
	background: var(--furnstream-table-head-bg);
	border-radius: 0 0 var(--theme-card-inner-border-radius) var(--theme-card-inner-border-radius);
}

.document-total-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.document-total-hero-amount {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--theme-heading-color);
	font-variant-numeric: tabular-nums;
}

.document-next-sub {
	font-size: 12px;
	color: var(--theme-secondary-color);
	margin-top: 4px;
}

/* A radio card of the label-format editor (session 103): the chosen design tile carries the primary ring. */
.furnstream-choice-tile {
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.furnstream-choice-tile:has(input:checked) {
	border-color: var(--theme-primary) !important;
	box-shadow: inset 0 0 0 1px var(--theme-primary);
	background: rgba(var(--theme-primary-rgb), .06);
}

/* === Caption pattern: muted uppercase labels above chips and dialog fields === */

.furnstream-caption {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--theme-secondary-color);
	margin-bottom: 4px;
}

.furnstream-dialog label,
.furnstream-dialog .form-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--theme-secondary-color);
}

/* === Builder: numbered cards, the selected-customer box, one search/scan field, inline line fields, the
	notes + totals footer and the sticky closing bar === */

/* Mockup card header gap between the step chip, the title and the header button. */
.document-builder-card > .card-header {
	gap: 10px;
}

.document-builder-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-primary-text-emphasis);
}

.document-builder-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.document-builder-customer {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--theme-border-color);
	border-radius: 12px;
	background: var(--theme-tertiary-bg);
}

.document-builder-customer-name {
	font-weight: 700;
	color: var(--theme-heading-color);
}

.document-builder-helper {
	font-size: 12px;
	color: var(--theme-secondary-color);
}

.document-builder-search {
	position: relative;
}

.document-builder-search > i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--theme-secondary-color);
	pointer-events: none;
}

.document-builder-search > i:first-child {
	left: 13px;
}

.document-builder-search > i.document-builder-search-scan {
	right: 13px;
	opacity: .6;
}

.document-builder-search > input {
	padding-left: 38px;
}

.document-builder-kv {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
	font-size: 13.5px;
}

.document-builder-kv > b {
	font-weight: 800;
	color: var(--theme-heading-color);
	font-variant-numeric: tabular-nums;
}

.document-builder-placeholder {
	font-style: italic;
	color: var(--theme-secondary-color);
}

.document-builder-field {
	height: 34px;
	min-height: 34px;
}

/* Fixed widths of the Kenmerken and discount fields. Bootstrap's form controls and input groups are 100% wide
	at class weight and load after this file, so the width class is paired with the control class. */
:is(.form-control, .form-select, .input-group).document-builder-field-date {
	width: 170px;
}

:is(.form-control, .form-select, .input-group).document-builder-field-discount-type {
	width: 70px;
}

:is(.form-control, .form-select, .input-group).document-builder-field-discount {
	width: 110px;
}

/* Column widths of the builder line table, on the <th>. */
.document-builder-col-number {
	width: 44px;
}

.document-builder-col-quantity {
	width: 100px;
}

.document-builder-col-price {
	width: 170px;
}

.document-builder-col-discount {
	width: 130px;
}

.document-builder-col-vat {
	width: 80px;
}

.document-builder-col-total {
	width: 140px;
}

.document-builder-col-remove {
	width: 52px;
}

/* Edge cells sit 22px from the card border; same cascade reason as .document-lines above. */
.table.document-builder-lines > thead > tr > th:first-child,
.table.document-builder-lines:has(> thead.table-light) > tbody > tr > td:first-child {
	padding-left: 22px;
}

.table.document-builder-lines > thead > tr > th:last-child,
.table.document-builder-lines:has(> thead.table-light) > tbody > tr > td:last-child {
	padding-right: 22px;
}

/* Every cell lines up with the product title (Kevin, 2026-09-17): top-aligned, and a cell holding an input or
	the trash sits a few px higher so its centre meets the title's first line. */
.document-builder-lines > tbody > tr > td {
	padding: 13px 14px;
	vertical-align: top;
}

.document-builder-lines > tbody > tr > td:has(> .document-builder-input) {
	padding-top: 6px;
}

.document-builder-lines > tbody > tr > td:has(> .document-builder-remove) {
	padding-top: 8px;
}

/* The title row of a line: name, type chips and the free-line pencil on one wrapping row. */
.document-line-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.document-builder-lines > tbody > tr.line-sub-row > td {
	padding-top: 4px;
	padding-bottom: 8px;
	border-top: 0;
}

.document-builder-input {
	height: 34px;
	min-height: 34px;
	margin-left: auto;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.document-builder-input-quantity {
	width: 70px;
}

.document-builder-input-price {
	width: 150px;
}

/* Wide enough for "100,00" next to the %-addon; the spinner is off for this field (custom.css). */
.document-builder-input-discount {
	width: 110px;
}

/* A prefix or suffix addon (€ before a price, % after a discount, in the line table, the Kenmerken fields and
	the free-line modal) reads as part of the field, not as a grey box: same border and background as the input,
	muted text, the field's 10px outer radius (Bootstrap zeroes the inner corners) and the 34px field height.
	The double selector outranks UBold's .input-group-sm > … sizing, which loads after this file. */
.document-builder-input.input-group > .input-group-text,
.document-builder-field-date.input-group > .input-group-text,
.document-builder-group.input-group > .input-group-text {
	min-height: 34px;
	padding: 0 10px;
	background: var(--theme-secondary-bg);
	color: var(--theme-secondary-color);
	font-size: 13px;
	font-weight: 500;
	border-radius: 10px;
}

.document-builder-input.input-group > .form-control,
.document-builder-field-date.input-group > .form-control,
.document-builder-group.input-group > .form-control {
	height: 34px;
	min-height: 34px;
	border-radius: 10px;
}

.document-builder-input.input-group > .input-group-text > i,
.document-builder-group.input-group > .input-group-text > i {
	font-size: 15px;
}

/* The addon follows the input's focus border, so the field lights up as one. */
.document-builder-input.input-group:focus-within > .input-group-text,
.document-builder-field-date.input-group:focus-within > .input-group-text,
.document-builder-group.input-group:focus-within > .input-group-text {
	border-color: var(--theme-dark-border-subtle);
}

/* The trash button: a bare muted icon in its 52px column; the double class outranks UBold's .btn padding and
	colour, which load after this file. */
.btn.document-builder-remove {
	padding: 0;
	color: var(--theme-secondary-color);
	opacity: .7;
}

.btn.document-builder-remove:hover {
	color: var(--theme-danger);
	opacity: 1;
}

.document-builder-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 18px;
	padding: 18px 22px 22px;
	border-top: 1px solid var(--theme-border-color);
}

/* The notice + helper column takes the remaining width so a long helper wraps instead of pushing the totals onto
	their own row; when the row does wrap (narrow screens) the totals still keep to the right. */
.document-builder-footer > :not(.document-totals) {
	flex: 1 1 320px;
	min-width: 0;
}

.document-builder-footer > .document-totals {
	flex: 0 0 auto;
	margin-inline-start: auto;
}


/* A .card is a column flexbox in UBold and app.css loads after this file, so the double class is needed to
	win on specificity: hint text left, buttons right on one row. */
.card.document-builder-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 22px;
}

.card.document-builder-bar .document-builder-helper {
	text-align: left;
}

/* The finishing buttons of a wizard bar (session 97): a plain inline-flex group the module toggles with an
	inline display, so no d-* utility (its !important would win over the inline display: none). */
.document-builder-bar-finish {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* The primary action of the closing bar is one size up (mockup .wizbar .b-prim). */
.document-builder-bar .btn-primary {
	font-size: 13.5px;
	padding: 10px 18px;
}

@media (max-width: 991.98px) {
	.card.document-builder-bar {
		position: static;
	}
}

/* === Interne rit on the route calendar (session 94, mockup 6): primary-subtle highlight next to the plain
	leveringen; the label colour feeds the shared planner-block border. === */
.label-internal {
	--label-color: var(--theme-primary);
}

.mbsc-schedule-event.planner-block.planner-internal-transfer .mbsc-schedule-event-background {
	background: var(--theme-primary-bg-subtle) !important;
	border: 1px solid var(--theme-primary);
}

.mbsc-schedule-event.planner-block.planner-internal-transfer .mbsc-schedule-event-title,
.mbsc-schedule-event.planner-block.planner-internal-transfer .mbsc-schedule-event-range {
	color: var(--theme-primary) !important;
}

/* === Stat tiles: the Kassa day strip, the Z-rapport head and the dashboard metrics — one
	tile style: caption on top (with an optional tinted icon right), the figure, one muted sub line and an
	optional chip row. The grid holds four tiles per row and stacks below lg. === */

.furnstream-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.furnstream-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	height: 100%;
	padding: 14px 16px;
	background: var(--theme-secondary-bg);
	border: 1px solid var(--theme-border-color);
	border-radius: 12px;
	box-shadow: var(--furnstream-card-shadow);
}

.furnstream-stat-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--theme-secondary-color);
}

.furnstream-stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: auto;
	border-radius: 50%;
	flex-shrink: 0;
}

.furnstream-stat-icon > svg,
.furnstream-stat-icon > i {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.furnstream-stat-value {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--theme-heading-color);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.furnstream-stat-value.warning {
	color: var(--theme-warning-text-emphasis);
}

.furnstream-stat-value.danger {
	color: var(--theme-danger-text-emphasis);
}

.furnstream-stat-value.success {
	color: var(--theme-success-text-emphasis);
}

.furnstream-stat-sub {
	font-size: 12px;
	color: var(--theme-secondary-color);
	margin-top: 2px;
}

.furnstream-stat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

@media (max-width: 1199.98px) {
	.furnstream-stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.furnstream-stat-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* === Kassa page: the muted kasmutatie row in the bonnenlijst and the coupure grid of the Z-rapport === */

.document-list-card .table > tbody > tr.pos-row-muted > td {
	background: var(--furnstream-table-head-bg);
	color: var(--theme-secondary-color);
	font-style: italic;
}

.document-denominations {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.document-denomination {
	padding: 8px 10px;
	border: 1px solid var(--theme-border-color);
	border-radius: 10px;
	font-size: 12.5px;
	color: var(--theme-secondary-color);
}

.document-denomination > b {
	display: block;
	font-size: 14px;
	color: var(--theme-heading-color);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
	.document-denominations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* === Builder wizard (session 97): the pipeline bar, the four tiles, scan hint, empty state, the korting
	notice, the picker modal list, the samenvatting grid and the sub-row hook. Theme variables only; weights
	800 read as 700 under 13px (Windows correction). === */

/* Wizard bar (revision v1): the compact pipeline of the list pages carries the step number as a small badge in
	front of the title, the step question at 16px instead of a count and the outcome line. The bar is not a
	card, so it carries its own gap to the step cards below (wider than the card gap, Kevin, 2026-09-17). */
.document-wizard-pipeline {
	margin-bottom: 24px;
}

.furnstream-seg-large-text {
	font-size: 16px;
	font-weight: 800;
	color: var(--theme-heading-color);
	letter-spacing: -.01em;
	line-height: 1.25;
}

.furnstream-seg-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin-right: 7px;
	border-radius: 6px;
	background: var(--theme-primary);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0;
	box-shadow: 0 2px 6px rgba(var(--theme-primary-rgb), .32);
}

.furnstream-seg:not(.active) .furnstream-seg-no {
	background: var(--theme-secondary-color);
	box-shadow: none;
}

/* A finished step keeps the primary badge with a tick and links back; in edit mode an unlocked later step
	(reachable) is a link too. */
.furnstream-seg.done,
.furnstream-seg.reachable {
	cursor: pointer;
}

.furnstream-seg.done .furnstream-seg-no {
	background: var(--theme-primary);
}

.furnstream-seg-no svg {
	width: 11px;
	height: 11px;
	stroke: #fff;
}

/* Step 1: the "Gekozen klant" column next to the picker, hidden by an inline display until a customer is chosen
	(a d-flex utility would win over that inline display). */
.document-wizard-customer-column {
	display: flex;
}

/* The four tiles of step 2: big, one colour each, icon + title + one explaining line. */
.document-wizard-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding: 20px 22px 16px;
}

.document-wizard-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-height: 150px;
	padding: 20px 20px 18px;
	border: 2px solid var(--theme-border-color);
	border-radius: 16px;
	background: var(--theme-secondary-bg);
	color: var(--theme-body-color);
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

.document-wizard-tile:not(:disabled):hover {
	transform: translateY(-2px);
}

.document-wizard-tile:disabled {
	opacity: .5;
	cursor: default;
}

.document-wizard-tile-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

.document-wizard-tile-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--theme-heading-color);
	letter-spacing: -.01em;
}

.document-wizard-tile-text {
	font-size: 12px;
	color: var(--theme-secondary-color);
	line-height: 1.4;
}

.document-wizard-tile-product .document-wizard-tile-icon {
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-primary-text-emphasis);
}

.document-wizard-tile-product:not(:disabled):hover {
	border-color: var(--theme-primary);
	box-shadow: 0 8px 22px rgba(var(--theme-primary-rgb), .18);
}

.document-wizard-tile.active {
	border-color: var(--theme-primary);
	box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .16);
}

.document-wizard-tile-configuration .document-wizard-tile-icon {
	background: var(--theme-info-bg-subtle);
	color: var(--theme-info-text-emphasis);
}

.document-wizard-tile-configuration:not(:disabled):hover {
	border-color: var(--theme-info-text-emphasis);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-info-text-emphasis) 18%, transparent);
}

.document-wizard-tile-showroom .document-wizard-tile-icon {
	background: var(--theme-success-bg-subtle);
	color: var(--theme-success-text-emphasis);
}

.document-wizard-tile-showroom:not(:disabled):hover {
	border-color: var(--theme-success-text-emphasis);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-success-text-emphasis) 18%, transparent);
}

.document-wizard-tile-free .document-wizard-tile-icon {
	background: var(--theme-warning-bg-subtle);
	color: var(--theme-warning-text-emphasis);
}

.document-wizard-tile-free:not(:disabled):hover {
	border-color: var(--theme-warning-text-emphasis);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-warning-text-emphasis) 18%, transparent);
}

.document-wizard-scanhint {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 22px 16px;
	font-size: 12.5px;
	color: var(--theme-secondary-color);
}

.document-wizard-scanhint > i {
	font-size: 16px;
	flex-shrink: 0;
}

/* Empty state under the tiles, before the first line. */
.document-wizard-empty {
	padding: 34px 22px;
	text-align: center;
	color: var(--theme-secondary-color);
	border-top: 1px solid var(--theme-border-color);
}

.document-wizard-empty > i {
	display: block;
	font-size: 26px;
	margin: 0 auto 8px;
	opacity: .6;
}

/* The "Korting geven?" notice left of the step-2 totals (info tint, percent icon). */
.document-wizard-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 13.5px;
	max-width: 520px;
	background: var(--theme-info-bg-subtle);
	color: var(--furnstream-strip-info-color);
}

.document-wizard-notice b {
	color: var(--furnstream-strip-info-bold-color);
}

.document-wizard-notice > i {
	font-size: 19px;
	flex-shrink: 0;
}

/* Step 4 of the bestelling: the inkoop notice under the samenvatting spans the card. */
.document-wizard-notice.document-wizard-notice-wide {
	max-width: none;
}

/* Step 3 (revision v1): the document-discount card body in two equal halves — "Korting toevoegen" left with a
	divider that is exactly as tall as that block, the added discounts right. The totals live in their own card
	below, right-aligned at a third of the width (col-lg-4). */
.document-wizard-discount-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 18px;
}

.document-wizard-discount-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.document-wizard-discount-entry {
	align-self: start;
	padding-right: 48px;
	border-right: 1px solid var(--theme-border-color);
}

.document-wizard-discount-heading {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--theme-heading-color);
}

@media (max-width: 991.98px) {
	.document-wizard-discount-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.document-wizard-discount-entry {
		padding-right: 0;
		border-right: 0;
	}
}

.document-wizard-discount-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--theme-border-color);
	border-radius: 10px;
	font-size: 13.5px;
}

.document-wizard-discount-row > b {
	color: var(--theme-danger-text-emphasis);
	font-variant-numeric: tabular-nums;
}

.document-wizard-discount-amount {
	color: var(--theme-danger-text-emphasis);
	font-variant-numeric: tabular-nums;
}

/* Picker modal (product, configuratie, showmodel) and the step-1 customer search: 46px search field, bordered
	result rows with a highlighted one, the green "toegevoegd" strip and the footer with the counter. */
.document-picker-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -20px -24px 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--theme-border-color);
}

.document-picker-head-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--theme-heading-color);
}

.document-picker-head-scope {
	font-size: 12px;
	color: var(--theme-secondary-color);
}

.document-picker-head-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.document-picker-head-icon.document-picker-head-icon-product {
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-primary-text-emphasis);
}

.document-picker-head-icon.document-picker-head-icon-configuration {
	background: var(--theme-info-bg-subtle);
	color: var(--theme-info-text-emphasis);
}

.document-picker-head-icon.document-picker-head-icon-showroom {
	background: var(--theme-success-bg-subtle);
	color: var(--theme-success-text-emphasis);
}

.document-picker-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.document-builder-search.document-picker-search > input {
	height: 46px;
	font-size: 14.5px;
	padding-left: 40px;
	padding-right: 38px;
}

.document-picker-results {
	border: 1px solid var(--theme-border-color);
	border-radius: 12px;
	overflow: hidden;
}

.document-picker-results.document-picker-results-floating {
	box-shadow: var(--furnstream-floating-shadow);
}

.document-picker-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--theme-border-color);
	cursor: pointer;
	color: var(--theme-body-color);
}

.document-picker-row:last-child {
	border-bottom: 0;
}

.document-picker-row.highlighted {
	background: var(--furnstream-row-highlight-bg);
}

.document-picker-row.highlighted .document-picker-row-action {
	--theme-btn-color: var(--theme-primary);
	--theme-btn-border-color: var(--theme-primary);
}

.document-picker-row .furnstream-avatar {
	width: 36px;
	height: 36px;
	font-size: 12px;
}

.document-picker-row-main {
	flex: 1 1 0;
	min-width: 0;
}

.document-picker-row-main > b {
	color: var(--theme-heading-color);
}

.document-picker-row-price {
	font-weight: 700;
	color: var(--theme-primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.document-picker-row.unavailable {
	opacity: .55;
	cursor: default;
}


.document-picker-empty {
	padding: 14px 16px;
	font-size: 13px;
	color: var(--theme-secondary-color);
}

.document-picker-added {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--theme-success-bg-subtle);
	color: var(--furnstream-strip-success-color);
	font-size: 13px;
}

.document-picker-added > i {
	font-size: 16px;
	flex-shrink: 0;
}

/* The document-picker modal size: the framework header stays hidden (the picker paints its own), the body carries
	the mockup's 20px 24px padding, and from 992px the dialog is 860px wide. It stays vertically centred like every
	other framework modal (Kevin, 17-09-2026: no 70px top position). */
.modal-dialog.modal-document-picker .modal-header {
	display: none;
}

.modal-dialog.modal-document-picker .modal-body {
	padding: 20px 24px;
}

@media (min-width: 992px) {
	.modal-dialog.modal-document-picker {
		--theme-modal-width: 860px;
	}
}

/* Step 4: the samenvatting grid — Klant · Regels · Kortingen · Totaal incl. BTW (primary-tinted). */
.document-wizard-summary {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 18px;
}

.document-wizard-summary-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border: 1px solid var(--theme-border-color);
	border-radius: 12px;
	background: var(--furnstream-panel-bg);
	min-width: 0;
}

.document-wizard-summary-block > .furnstream-caption {
	margin-bottom: 0;
}

.document-wizard-summary-value {
	font-size: 15px;
	font-weight: 800;
	color: var(--theme-heading-color);
	overflow-wrap: anywhere;
}

.document-wizard-summary-value.document-wizard-summary-amount {
	font-size: 20px;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.document-wizard-summary-block > a {
	font-size: 12px;
	font-weight: 700;
}

.document-wizard-summary-customer {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.document-wizard-summary-customer .furnstream-avatar {
	width: 34px;
	height: 34px;
	font-size: 11.5px;
}

.document-wizard-summary-customer-text {
	min-width: 0;
}

.document-wizard-summary-customer .document-wizard-summary-value {
	font-size: 14px;
}

.document-wizard-summary-block.document-wizard-summary-total {
	background: var(--theme-primary-bg-subtle);
	border-color: var(--furnstream-primary-outline-border);
}

.document-wizard-summary-total > .furnstream-caption,
.document-wizard-summary-total > .document-wizard-summary-sub {
	color: var(--theme-primary-text-emphasis);
}

.document-wizard-summary-sub {
	font-size: 12px;
	color: var(--theme-secondary-color);
}

/* The sub-row hook of a configuration's component rows (Nunito has no ↳ glyph). */
.document-line-hook {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 7px 2px 0;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	border-radius: 0 0 0 3px;
	vertical-align: middle;
	opacity: .7;
}

@media (max-width: 991.98px) {
	.document-wizard-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.document-wizard-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}