/* Card-style editable order lines. Each item collapses to a one-line
   summary (checkbox, part, qty, price, ETA, quick-status chips) and
   expands on click to reveal the full supplier reply form. Only one
   card is open at a time and the rest are dimmed while it is open, so
   the card being edited is never ambiguous. Column widths are shared
   between the sticky header and every row via the --order-line-grid
   custom property so they always line up. */
.order-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-2);
	margin-top: var(--au-space-1);
	font-size: var(--au-font-size-sm);
	color: var(--au-text-muted);
}

.order-detail__vehicle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--au-space-1) var(--au-space-4);
	margin-top: var(--au-space-1);
	font-size: var(--au-font-size-sm);
	color: var(--au-text-muted);
}

.order-detail__vehicle strong {
	color: var(--au-slate);
	font-weight: 600;
}

@keyframes order-line-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Bulk-action toolbar (shown when >=1 line is selected) ---------- */
.order-lines-bulk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-3);
	padding: var(--au-space-2) var(--au-space-4);
	background: darkgoldenrod;
	color: white;
	border-radius: 0 0 10px 10px;
	animation: order-line-fade-in 0.15s ease-out;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.order-lines-bulk-bar[hidden] {
	display: none;
}

.order-lines-bulk-bar__count {
	font-size: 16px;
	font-weight: 700;
	color: black;
	white-space: nowrap;
}

.order-lines-bulk-bar__divider {
	width: 1px;
	height: 22px;
	background: var(--au-border);
}

.order-lines-bulk-bar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-2);
}

.order-lines-bulk-bar__eta-separator {
	font-size: 18px;
	line-height: 1;
	font-weight: 500;
	color: black;
}

.order-lines-bulk-bar__label {
	font-size: 16px;
	font-weight: 500;
	color: black;
	white-space: nowrap;
}

/* The last-applied button in each group stays lit with a tick, so the user can
   see at a glance which status / ETA they just pushed onto the selection. */
.order-lines-bulk-bar .au-btn[aria-pressed="true"] {
	background: var(--au-slate);
	color: var(--au-text-on-dark);
	border-color: var(--au-slate);
	box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18);
}

.order-lines-bulk-bar .au-btn[aria-pressed="true"]:hover,
.order-lines-bulk-bar .au-btn[aria-pressed="true"]:focus-visible {
	background: var(--au-slate);
	color: var(--au-text-on-dark);
}

.order-lines-bulk-bar .au-btn[aria-pressed="true"]::before {
	content: "\2713";
	font-weight: 700;
}

/* Explains which lines a bulk status skipped, so a partial apply does not read
   as a broken button. Sits between the bulk bar and the lines it describes. */
.order-lines-status-notice {
	margin-bottom: var(--au-space-2);
	cursor: default;
}

.order-lines-bulk-bar__manual-eta {
	display: grid;
	grid-template-columns: 140px minmax(142px, auto) auto;
	align-items: center;
	flex: 0 1 auto;
	gap: var(--au-space-1);
}

.order-lines-bulk-bar__manual-eta-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.order-lines-bulk-bar__manual-eta .form-control,
.order-lines-bulk-bar__manual-eta .au-time-select--sm .au-time-select__controls .form-select {
	height: 28px;
	min-height: 28px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: var(--au-font-size-sm);
	line-height: 1.2;
	background-color: var(--au-surface);
	border-color: gray;
	box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.06);
}

.order-lines-bulk-bar__manual-eta .form-control {
	width: 100%;
}

.order-lines-bulk-bar__manual-eta .au-time-select--sm .au-time-select__controls .form-select {
	width: 64px;
	padding-left: 10px;
	padding-right: 2.25rem;
}

.order-lines-bulk-bar__manual-eta-error {
	grid-column: 1 / -1;
	margin-top: 0;
	color: var(--au-danger);
}

.order-lines-bulk-bar__manual-eta-error:not([hidden]) {
	display: block;
}

/* Bootstrap's invalid-state exclamation glyph crowds the compact calendar and
   hour/minute controls. Keep the validation border/message without that icon. */
.order-lines-bulk-bar__manual-eta .form-control.is-invalid {
	padding-right: 0.5rem;
	background-image: none;
}

.order-lines-bulk-bar__manual-eta .form-select.is-invalid {
	--bs-form-select-bg-icon: none;
	padding-right: 2.25rem;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

@media (max-width: 575.98px) {
	.order-lines-bulk-bar__manual-eta {
		grid-template-columns: minmax(0, 1fr);
		flex-basis: 100%;
	}

	.order-lines-bulk-bar__manual-eta .au-btn {
		width: 100%;
	}
}

.order-lines-bulk-bar__clear {
	margin-left: auto;
	border: none;
	background: transparent;
	color: var(--au-text-muted);
	font-size: var(--au-font-size-sm);
	cursor: pointer;
	text-decoration: underline;
}

.order-lines-bulk-bar__clear:hover,
.order-lines-bulk-bar__clear:focus-visible {
	color: var(--au-slate);
}

/* ---------- Line list ---------- */
.order-lines {
	--order-line-grid: 24px minmax(130px, 1.7fr) 56px minmax(70px, 0.75fr) minmax(78px, 0.8fr) minmax(100px, 1.2fr) minmax(150px, 1.3fr) 20px;
	background: var(--au-surface);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow: hidden;
}

.order-lines__scroll {
	overflow: auto;
	max-height: min(62vh, 640px);
	padding: var(--au-space-2);
}

.order-lines__header {
	display: grid;
	grid-template-columns: var(--order-line-grid);
	align-items: center;
	gap: 0 var(--au-space-2);
	min-width: 720px;
	padding: var(--au-space-2) var(--au-space-3);
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--au-bg-alt);
	border-bottom: 1px solid var(--au-border);
	font-size: var(--au-font-size-sm);
	font-weight: 700;
	color: var(--au-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.order-line {
	margin-bottom: var(--au-space-2);
	background: var(--au-surface);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius-sm);
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.order-line:last-child {
	margin-bottom: 0;
}

.order-line--selected {
	border-color: var(--au-slate);
}

.order-line--queue-match {
	border-left: 4px solid var(--au-info);
	box-shadow: inset 3px 0 0 rgba(15, 94, 102, 0.08);
}

/* Sits in the status cell in place of the old line-status pill. */
.order-line__queue-badge {
	align-self: center;
	text-align: center;
}

/* Tint the whole card (collapsed row + expanded panel) by the line's current
   reply status, so the state is visible at a glance without opening the row. */
.order-line[data-line-status="QUOTED"],
.order-line[data-line-status="SHIPPED"] {
	background: var(--au-info-bg);
}

.order-line[data-line-status="DELIVERED"],
.order-line[data-effective-status="APPROVED"] {
	background: var(--au-success-bg);
}

.order-line[data-line-status="BACKORDERED"],
.order-line[data-line-status="RFC"] {
	background: var(--au-warning-bg);
}

.order-line[data-line-status="RETURNED"] {
	background: var(--au-neutral-bg);
}

.order-line[data-line-status="UNAVAILABLE"],
.order-line[data-line-status="CANCELLED"] {
	background: var(--au-danger-bg);
}

.order-line__row {
	display: grid;
	grid-template-columns: var(--order-line-grid);
	align-items: center;
	gap: 0 var(--au-space-2);
	min-width: 720px;
	padding: var(--au-space-2) var(--au-space-3);
	cursor: pointer;
	background: var(--au-surface);
	transition: background-color 0.15s ease;
	border-radius: 10px;
}

/* Collapsed rows highlight under the pointer so the whole row reads as the
   click target, the same feedback a dimmed card gives while another row is
   expanded. The expanded row keeps its own teal fill (rule further down). */
.order-line:not(.order-line--expanded) .order-line__row:hover,
.order-line:not(.order-line--expanded) .order-line__row:focus-within {
	background: var(--teal-100);
}

.order-line__select,
.order-line__select-all {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.order-line__locked-select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--au-text-muted);
}

.order-line__summary-part {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.order-line__summary-desc {
	font-size: var(--au-font-size);
	font-weight: 600;
	color: var(--au-text);
	overflow-wrap: anywhere;
}

.order-line__summary-supplier-part {
	margin-right: var(--au-space-2);
	color: var(--au-text-muted);
	font-weight: 700;
	white-space: nowrap;
}

.order-line__summary-qty,
.order-line__summary-ex-vat,
.order-line__summary-price {
	font-size: var(--au-font-size-sm);
	font-weight: 600;
	color: var(--au-text);
}

.order-line__summary-eta {
	font-size: var(--au-font-size-sm);
	color: var(--au-text-muted);
}

.order-line__status-summary {
	display: flex;
	align-items: center;
}

.order-line__chevron {
	font-size: 16px;
	color: var(--au-text-muted);
	text-align: center;
	transition: transform 0.15s ease;
}

.order-line--expanded .order-line__chevron {
	transform: rotate(90deg);
}

/* ---------- Expanded reply panel ---------- */
/* While a card is open the other cards fade back and lose their status tint,
   so the row being edited owns the attention. They stay clickable — clicking
   a dimmed card just moves the accordion to it. The shadow below fits inside
   the 8px gap between cards, so it never bleeds onto a neighbour. */
.order-lines--has-expanded .order-line:not(.order-line--expanded) {
	opacity: 0.45;
	filter: grayscale(0.9);
}

.order-lines--has-expanded .order-line:not(.order-line--expanded):hover,
.order-lines--has-expanded .order-line:not(.order-line--expanded):focus-within {
	opacity: 0.8;
	filter: grayscale(0.35);
}

/* The card being edited is outlined in the header's forest green and filled a
   shade darker than the page, so the white inputs inside it read as the work
   area. Doubled up on the class so it beats the status tints above. */
.order-line.order-line--expanded {
	/* background: var(--teal-100) !important; */
	background: var(--au-line-expanded-bg);
	border: 2px solid var(--au-forest);
	border-radius: var(--au-radius);
}

.order-line--expanded .order-line__row {
	background: var(--teal-100);
	border-radius: var(--au-radius-sm) var(--au-radius-sm) 0 0;
}

.order-lines--has-expanded .order-line--expanded {
	box-shadow: 0 2px 6px rgba(15, 23, 32, 0.14);
}

.order-line__panel {
	display: none;
	flex-direction: column;
	gap: var(--au-space-3);
	padding: 2px var(--au-space-3) var(--au-space-3) 10px;
	animation: order-line-fade-in 0.12s ease-out;
}

.order-line--expanded .order-line__panel {
	display: flex;
	background: var(--teal-100);
	border-radius: 10px;
}

.order-line__requested {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-1) var(--au-space-2);
}

.order-line__requested-description {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--au-font-size-sm);
	color: var(--au-text-muted);
	overflow-wrap: anywhere;
}

/* Requested description sits beside the Description label and truncates rather than widening the field. */
.order-line__label-row {
	display: flex;
	align-items: baseline;
	gap: var(--au-space-1);
	min-width: 0;
}

.order-line__label-row .form-label {
	flex: 0 0 auto;
}

.order-line__requested-inline {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	color: var(--au-text-muted);
}

.order-line__commercial-lock {
	display: inline-flex;
	align-items: center;
	gap: var(--au-space-1);
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--au-warning-bg);
	color: var(--au-warning);
	font-size: var(--au-font-size-sm);
	font-weight: 600;
}

.order-line--awaiting-approval .form-control:disabled,
.order-line--awaiting-approval .form-select:disabled,
.order-line__inputs .form-control:disabled {
	background: var(--au-neutral-bg);
	color: var(--au-text-muted);
	cursor: not-allowed;
}

.order-line__inputs {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--au-space-2);
}

.order-line__inputs .order-line__field--part { grid-column: span 2; }
.order-line__inputs .order-line__field--wide { grid-column: span 5; }

@media (max-width: 767.98px) {
	.order-line__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.order-line__inputs .order-line__field--part,
	.order-line__inputs .order-line__field--wide { grid-column: 1 / -1; }
}

.order-line__field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.order-line__field .form-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--au-text-muted);
	margin-bottom: 0;
}

.order-line__field .form-control,
.order-line__field .form-select {
	width: 100%;
	min-height: 34px;
	padding: 6px 8px;
	font-size: var(--au-font-size);
	line-height: 1.25;
}

.order-line__field .form-select {
	padding-right: 28px;
	background-position: right 8px center;
}

/* The unit value is where the supplier actually prices the line — unit x available
   fills the Ex VAT field beside it — so it is picked out in gold against the
   plain white inputs it drives. */
.order-line__field--unit .form-label {
	color: var(--au-gold);
}

.order-line__field--unit .form-control {
	background: #FFFDF2;
	border: 1px solid var(--au-gold);
	font-weight: 600;
}

.order-line__field--unit .form-control:focus {
	border-color: var(--au-gold);
	box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.25);
}

.order-line__field-hint {
	font-size: 10px;
	line-height: 1.2;
	color: var(--au-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-line__eta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--au-space-3);
}

.order-line__field--eta-time {
	min-width: 148px;
}

.order-line__field .au-time-select__controls .form-select {
	width: 68px;
	height: 34px;
	min-height: 34px;
	padding: 6px 28px 6px 8px;
	font-size: var(--au-font-size);
	line-height: 1.25;
	background-position: right 8px center;
}

.order-line__eta-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-bottom: 1px;
}

.order-line__eta-actions {
	display: flex;
	align-items: flex-end;
	gap: var(--au-space-2);
	margin-left: auto;
}

.order-line__eta-actions .au-add-comment {
	flex: 0 0 auto;
	margin-bottom: 5px;
}

.order-line__field--status {
	min-width: 170px;
}

.order-line__comment-row {
	padding-top: var(--au-space-2);
	border-top: 1px dashed var(--au-border);
}

.order-line__comment-fields .form-label {
	display: block;
	font-size: var(--au-font-size);
}

.order-line__comment-fields textarea.form-control {
	width: 100%;
	min-height: 52px;
	padding: 6px 8px;
	font-size: var(--au-font-size);
	resize: vertical;
}

.order-line__decision {
	display: block;
	margin-top: var(--au-space-1);
	color: var(--au-text-muted);
}

/* Quick-pick reasons and the reason prompt only concern a line the supplier has
   just cancelled on its own — a whole-order cancellation is explained once in the
   order comment instead. */
.order-line__reason-picks,
.order-line__reason-hint {
	display: none;
}

.order-line--needs-reason .order-line__reason-picks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-1) var(--au-space-2);
	margin-top: var(--au-space-2);
}

.order-line--needs-reason .order-line__reason-hint {
	display: block;
	margin-top: var(--au-space-1);
	color: var(--au-danger);
}

.order-line__reason-picks-label {
	font-size: var(--au-font-size-sm);
	color: var(--au-text-muted);
}

/* ---------- Workshop-rejected/cancelled lines: read-only history ---------- */
.order-line--workshop-closed {
	margin-bottom: var(--au-space-2);
	padding: var(--au-space-3);
	background: var(--au-neutral-bg);
	color: var(--au-text-muted);
	border: 1px solid var(--au-border-strong);
	border-radius: var(--au-radius-sm);
}

.order-line--workshop-closed:last-child {
	margin-bottom: 0;
}

.order-line__eyebrow {
	font-size: var(--au-font-size-sm);
	line-height: 1.2;
	letter-spacing: 0.04em;
	opacity: 0.78;
}

.order-line__title {
	margin: 0;
	color: inherit;
	font-size: var(--au-font-size-lg);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.order-line--workshop-closed .order-line__title {
	color: var(--au-neutral);
}

/* Read-only records share the editable rows' column grid so the part, quantity
   and status read down the same columns as the sticky header. */
.order-line__closed {
	display: grid;
	grid-template-columns: var(--order-line-grid);
	align-items: center;
	gap: var(--au-space-1) var(--au-space-2);
	min-width: 720px;
}

/* The eyebrow labels the whole record, so it sits on its own row above the columns. */
.order-line__closed>.order-line__eyebrow {
	grid-column: 1 / -1;
}

.order-line__closed-details {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--au-space-1) var(--au-space-3);
	min-width: 0;
}

.order-line__closed-qty {
	grid-column: 3;
	font-size: var(--au-font-size-sm);
	font-weight: 600;
	color: var(--au-text);
}

.order-line__closed-reason {
	grid-column: 4 / -1;
	display: flex;
	align-items: flex-start;
	gap: var(--au-space-2) var(--au-space-4);
	min-width: 0;
	padding-left: var(--au-space-3);
	border-left: 1px solid var(--au-border-strong);
}

.order-line__closed-field {
	min-width: 0;
}

/* The status reads as a fixed-width stub so the reason keeps the remaining width. */
.order-line__closed-field--status {
	flex: 0 0 auto;
}

.order-line__closed-reason-label,
.order-line__closed-reason-text {
	display: block;
}

.order-line__closed-reason-label {
	margin-bottom: 2px;
	font-size: var(--au-font-size-sm);
	font-weight: 600;
}

.order-line__closed-reason-text {
	overflow-wrap: anywhere;
}

.au-add-comment {
	display: inline-flex;
	align-items: center;
	gap: var(--au-space-1);
	padding: 2px 10px;
	border: 1px dashed currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--au-slate-light);
	font-size: var(--au-font-size-sm);
	line-height: 1.4;
	cursor: pointer;
}

.au-add-comment:hover,
.au-add-comment:focus-visible {
	color: var(--au-slate);
}

.au-add-comment:focus-visible {
	outline: none;
	box-shadow: var(--au-focus-ring);
}

/* ---------- Reply footer (totals + order comment + actions) ---------- */
/* One band: totals on the left, comment toggle and the submit actions on the
   right. In the modal styles.css pins this under the scrolling line list. */
.order-reply__footer {
	margin-top: var(--au-space-3);
}

.order-reply__footer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--au-space-2) var(--au-space-4);
}

.order-reply__footer-bar .au-table-summary {
	flex: 0 1 auto;
	padding: 0;
	background: transparent;
	border-top: 0;
}

.order-reply__footer-bar .au-form-actions {
	flex: 1 1 auto;
	align-items: center;
	margin-top: 0;
}

.order-reply__add-comment {
	margin-top: 0;
}

/* ---------- Submit confirmation (read-back of the reply totals) ---------- */
.order-submit-confirm__lead {
	margin: 0 0 var(--au-space-3);
	color: var(--au-text-muted);
}

.order-submit-confirm__totals {
	margin: 0;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius-sm);
	overflow: hidden;
}

.order-submit-confirm__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--au-space-3);
	padding: var(--au-space-2) var(--au-space-3);
	border-bottom: 1px solid var(--au-border);
}

.order-submit-confirm__total:last-child {
	border-bottom: 0;
}

.order-submit-confirm__total dt {
	font-weight: 500;
	color: var(--au-text-muted);
}

.order-submit-confirm__total dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--au-slate);
}

.order-submit-confirm__total--headline {
	background: #F8F7F3;
}

.order-submit-confirm__total--headline dd {
	font-size: var(--au-font-size-lg);
}

.au-comment-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--au-space-2);
}

.au-remove-comment {
	display: inline-flex;
	align-items: center;
	gap: var(--au-space-1);
	padding: 2px 4px;
	border: 0;
	background: transparent;
	color: var(--au-text-muted);
	font-size: var(--au-font-size-sm);
	line-height: 1.4;
	cursor: pointer;
	border-radius: var(--au-radius-sm);
}

.au-remove-comment:hover,
.au-remove-comment:focus-visible {
	color: var(--au-danger);
}

.au-remove-comment:focus-visible {
	outline: none;
	box-shadow: var(--au-focus-ring);
}

.order-reply__comment {
	margin-top: var(--au-space-3);
}

.order-reply__comment textarea {
	min-height: 58px;
}

/* Shown only while every editable line is cancelled: this comment is then the
   reason sent against each of those lines. */
.order-reply__comment-hint {
	display: none;
}

.order-reply__comment--cancel-reason .order-reply__comment-hint {
	display: block;
	margin-top: var(--au-space-1);
	color: var(--au-danger);
}

/* Dedicated supplier-facing print documents (the picking slip and the supplier
   invoice). They stay out of the interactive order view and are revealed only by
   the browser's print media mode.

   An order page carries more than one of them but a print job is one document,
   so printing reveals only the document order-print.js has marked active. */
.picking-slip,
.supplier-invoice {
	display: none;
}

@media print {
	@page {
		size: A4 portrait;
		margin: 12mm;
	}

	body * {
		visibility: hidden !important;
	}

	.print-document--active,
	.print-document--active * {
		visibility: visible !important;
	}

	.print-document--active {
		display: block !important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #111;
		font-family: Arial, sans-serif;
		font-size: 10pt;
		line-height: 1.3;
	}

	.picking-slip__header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 12mm;
		padding-bottom: 4mm;
		border-bottom: 1px solid #cfd4da;
	}

	.picking-slip__supplier h1,
	.picking-slip__title h2,
	.picking-slip__notes h3 {
		margin: 0;
		color: #111;
	}

	.picking-slip__supplier h1 {
		font-size: 15pt;
		letter-spacing: 0.02em;
	}

	.picking-slip__supplier p {
		margin: 1mm 0 0;
		color: #444;
		font-size: 8.5pt;
	}

	.picking-slip__supplier .picking-slip__branch {
		font-weight: 700;
		color: #222;
	}

	.picking-slip__supplier-contact {
		display: flex;
		flex-wrap: wrap;
		gap: 0 3mm;
	}

	.picking-slip__supplier-contact span+span::before {
		content: "\00b7";
		margin-right: 3mm;
		color: #999;
	}

	.picking-slip__title {
		display: grid;
		justify-items: end;
		min-width: 43mm;
		text-align: right;
	}

	.picking-slip__title h2 {
		font-size: 15pt;
	}

	.picking-slip__title strong {
		font-size: 13pt;
	}

	.picking-slip__title span {
		margin-top: 1mm;
		font-size: 8.5pt;
	}

	.picking-slip__summary {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5mm;
		margin: 4mm 0 3mm;
	}

	.picking-slip__summary>div {
		min-height: 14mm;
		padding: 2.5mm 3mm;
		border: 1px solid #d9dde2;
		border-radius: 2mm;
	}

	.picking-slip__summary span,
	.picking-slip__summary strong {
		display: block;
	}

	.picking-slip__summary span {
		margin-bottom: 0.5mm;
		color: #606a75;
		font-size: 7.5pt;
		text-transform: uppercase;
	}

	.picking-slip__summary strong {
		font-size: 9pt;
		overflow-wrap: anywhere;
	}

	.picking-slip__lines {
		width: 100%;
		border-collapse: collapse;
		font-size: 9pt;
	}

	.picking-slip__lines thead {
		display: table-header-group;
	}

	.picking-slip__lines tr {
		break-inside: avoid;
	}

	.picking-slip__lines th {
		padding: 2mm 2.5mm;
		background: #f0f2f4 !important;
		border-bottom: 1px solid #cfd4da;
		font-weight: 700;
		text-align: left;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.picking-slip__lines td {
		padding: 2.5mm;
		border-bottom: 1px solid #e1e4e8;
		vertical-align: middle;
	}

	.picking-slip__line-number {
		width: 9mm;
		text-align: center !important;
	}

	.picking-slip__quantity {
		width: 18mm;
		text-align: right !important;
		white-space: nowrap;
	}

	.picking-slip__picked {
		width: 17mm;
		text-align: center !important;
	}

	.picking-slip__checkbox {
		display: inline-block;
		width: 4mm;
		height: 4mm;
		border: 1px solid #555;
		vertical-align: middle;
	}

	.picking-slip__notes {
		min-height: 25mm;
		margin-top: 4mm;
		padding: 3mm;
		border: 1px solid #d9dde2;
		border-radius: 2mm;
		break-inside: avoid;
	}

	.picking-slip__notes h3 {
		font-size: 9pt;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.picking-slip__notes p {
		margin: 2mm 0 0;
	}

	.picking-slip__signoff {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8mm;
		margin-top: 8mm;
		break-inside: avoid;
	}

	.picking-slip__signoff div {
		padding-top: 2mm;
		border-top: 1px solid #aeb5bd;
		color: #606a75;
		font-size: 8pt;
	}

	/* ---------- Supplier invoice ---------- */
	.supplier-invoice__header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 12mm;
		padding-bottom: 4mm;
		border-bottom: 1px solid #cfd4da;
	}

	.supplier-invoice__supplier h1,
	.supplier-invoice__title h2,
	.supplier-invoice__parties h3,
	.supplier-invoice__notes h3 {
		margin: 0;
		color: #111;
	}

	.supplier-invoice__supplier h1 {
		font-size: 15pt;
		letter-spacing: 0.02em;
	}

	.supplier-invoice__supplier p {
		margin: 1mm 0 0;
		color: #444;
		font-size: 8.5pt;
	}

	.supplier-invoice__supplier .supplier-invoice__branch {
		font-weight: 700;
		color: #111;
	}

	.supplier-invoice__supplier-contact span+span::before {
		content: " \00b7 ";
		color: #8a929b;
	}

	.supplier-invoice__title {
		display: grid;
		justify-items: end;
		gap: 1mm;
		text-align: right;
	}

	.supplier-invoice__title h2 {
		font-size: 13pt;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.supplier-invoice__title strong {
		font-size: 11pt;
	}

	.supplier-invoice__title span {
		color: #444;
		font-size: 9pt;
	}

	.supplier-invoice__parties {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8mm;
		margin-top: 5mm;
		break-inside: avoid;
	}

	.supplier-invoice__parties h3 {
		font-size: 8.5pt;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: #606a75;
	}

	.supplier-invoice__parties p {
		margin: 1mm 0 0;
		font-size: 9pt;
	}

	.supplier-invoice__parties span {
		display: inline-block;
		min-width: 22mm;
		color: #606a75;
	}

	.supplier-invoice__lines {
		width: 100%;
		margin-top: 6mm;
		border-collapse: collapse;
	}

	.supplier-invoice__lines thead {
		display: table-header-group;
	}

	.supplier-invoice__lines tr {
		break-inside: avoid;
	}

	.supplier-invoice__lines th {
		padding: 2mm 2mm 2mm 0;
		border-bottom: 1px solid #111;
		color: #111;
		font-size: 8.5pt;
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.supplier-invoice__lines td {
		padding: 2mm 2mm 2mm 0;
		border-bottom: 1px solid #e3e6ea;
		vertical-align: top;
	}

	.supplier-invoice__line-number {
		width: 8mm;
		color: #606a75;
	}

	.supplier-invoice__numeric {
		text-align: right !important;
		white-space: nowrap;
	}

	.supplier-invoice__lines tfoot th {
		border-bottom: none;
		border-top: 1px solid #e3e6ea;
		text-align: right;
		text-transform: none;
		letter-spacing: 0;
		font-size: 9.5pt;
	}

	.supplier-invoice__lines tfoot td {
		border-bottom: none;
		border-top: 1px solid #e3e6ea;
		font-weight: 700;
	}

	.supplier-invoice__lines .supplier-invoice__total-row th,
	.supplier-invoice__lines .supplier-invoice__total-row td {
		border-top: 1.5px solid #111;
		font-size: 11pt;
	}

	.supplier-invoice__notes {
		margin-top: 6mm;
		padding: 3mm;
		border: 1px solid #d9dde2;
		border-radius: 2mm;
		break-inside: avoid;
	}

	.supplier-invoice__notes h3 {
		font-size: 9pt;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.supplier-invoice__notes p {
		margin: 2mm 0 0;
	}

	.supplier-invoice__footer p {
		margin-top: 8mm;
		padding-top: 2mm;
		border-top: 1px solid #aeb5bd;
		color: #606a75;
		font-size: 8pt;
	}

	.order-line {
		break-inside: avoid;
	}

	/* The on-screen focus dimming must never reach paper. */
	.order-lines--has-expanded .order-line {
		opacity: 1;
		filter: none;
		box-shadow: none;
	}

	.order-lines__scroll {
		overflow: visible;
		max-height: none;
	}
}

/* ---------- Invoice number modal ---------- */
.order-invoice__field {
	margin-bottom: var(--au-space-3);
}

.order-invoice__hint {
	display: block;
	margin-top: var(--au-space-1);
	color: var(--au-text-muted);
}

.order-invoice__totals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--au-space-2);
	margin: 0 0 var(--au-space-2);
	padding: var(--au-space-3);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius-sm);
	background: var(--au-bg-alt);
}

.order-invoice__total dt {
	color: var(--au-text-muted);
	font-size: var(--au-font-size-sm);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.order-invoice__total dd {
	margin: 0;
	font-weight: 700;
}

.order-invoice__total--headline dd {
	font-size: 1.25rem;
}

.order-invoice__note {
	margin: 0;
	color: var(--au-text-muted);
	font-size: var(--au-font-size-sm);
}

/* ---------- RFC return modal ---------- */
.rfc-modal__intro {
	color: var(--au-text-muted);
	margin-bottom: var(--au-space-3);
}

.rfc-lines__list {
	display: flex;
	flex-direction: column;
	gap: var(--au-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rfc-lines__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-2) var(--au-space-3);
	margin-bottom: var(--au-space-2);
	font-size: var(--au-font-size-sm);
	font-weight: 700;
	color: var(--au-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rfc-lines__header-label {
	font-weight: 500;
}

.rfc-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--au-space-2) var(--au-space-3);
	background: var(--au-surface);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	padding: var(--au-space-2) var(--au-space-3);
}

.rfc-line--done {
	background: var(--au-neutral-bg);
}

.rfc-line__part {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--au-space-2);
	min-width: 0;
}

.rfc-line__qty {
	color: var(--au-text-muted);
	white-space: nowrap;
}

.rfc-line__description {
	color: var(--au-text-muted);
	min-width: 0;
	overflow-wrap: anywhere;
}

.rfc-line__reason {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--au-text-muted);
	overflow-wrap: anywhere;
}

.rfc-line__reason-label {
	font-weight: 600;
	margin-right: var(--au-space-2);
}

.rfc-line__action {
	grid-row: 1;
	grid-column: 2;
	justify-self: end;
}

.rfc-modal__actions {
	align-items: center;
}

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

	.rfc-line__action {
		grid-row: auto;
		grid-column: 1;
		justify-self: stretch;
	}

	.rfc-line__action .au-btn {
		width: 100%;
	}
}