/* Shared UI pieces (tokens, cards, titles, icon tiles, stats, forms, tabs); loads before page CSS so pages can override them. */

:root {
	--ui-surface: #fff;
	--ui-border: #e6e1e1;
	--ui-divider: #efeaea;
	--ui-row-divider: #f0ebeb;
	--ui-input-border: #ddd6d6;
	--ui-control-border: #e3dddd;
	--ui-hover: #f6f2f2;
	--ui-text-2: #3b3535;
	--ui-muted: #6b6262;
	--ui-shadow: 0 1px 2px rgba(20, 12, 12, .04);
	--ui-radius: 12px;
}

/* Checkboxes, radios and range sliders everywhere (modals included) use the brand red */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
	accent-color: var(--brand-theme, #a92022);
}

/* ---------- Dropdowns: our own chevron, inset from the edge (the browser's sits tight against the border) ---------- */

#page select.form-control:not([multiple]):not([size]),
#page .ui-form .select-wrapper select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b6262' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 12px;
}

/* ---------- Paged dropdown list (paged-select.js): filter, 20 options at a time, Load more ----------
   It hangs off <body> so table clipping can't cut it off, hence no #page prefix */

.paged-select-panel {
	position: fixed;
	z-index: 1070;
	display: flex;
	flex-direction: column;
	max-height: 360px;
	overflow: hidden;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 12, 12, .12);
	font-size: 14px;
}

.paged-select-filter {
	flex: none;
	height: 34px;
	margin: 8px;
	padding: 0 10px;
	border: 1px solid var(--ui-input-border);
	border-radius: 8px;
	outline: 0;
	font-size: 14px;
}

.paged-select-filter:focus {
	border-color: var(--brand-theme, #a92022);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 16%, transparent);
}

.paged-select-list {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0 4px 4px;
	overflow-y: auto;
	list-style: none;
}

.paged-select-item {
	overflow: hidden;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--hdr-graphite, #1c1a1a);
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.paged-select-item:hover,
.paged-select-item.is-active {
	background: var(--ui-hover);
}

.paged-select-item.is-selected {
	color: var(--brand-theme, #a92022);
	font-weight: 600;
}

.paged-select-footer {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-top: 1px solid var(--ui-divider);
	color: var(--ui-muted);
	font-size: 12px;
}

.paged-select-more {
	height: 28px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--ui-control-border);
	border-radius: 6px;
	color: var(--ui-text-2);
	font-size: 12px;
	font-weight: 600;
}

.paged-select-more:hover {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

/* ---------- Toast (ui-toast.js): a short confirmation at the bottom centre, like the inspection save toast ---------- */

.ui-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 1080;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 32px);
	padding: 10px 18px 10px 12px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(20, 12, 12, .22), 0 2px 6px rgba(20, 12, 12, .08);
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity .2s ease-out, transform .2s ease-out;
}

.ui-toast.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

.ui-toast-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	font-family: FontAwesome;
	font-size: 12px;
	font-weight: 400;
}

.ui-toast.is-success .ui-toast-icon {
	background: #2e9a4b;
}

.ui-toast.is-success .ui-toast-icon::before {
	content: "\f00c";
}

.ui-toast.is-error {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 35%, #fff);
	color: var(--brand-theme, #a92022);
}

.ui-toast.is-error .ui-toast-icon {
	background: var(--brand-theme, #a92022);
}

.ui-toast.is-error .ui-toast-icon::before {
	content: "\f12a";
}

.ui-toast.is-info .ui-toast-icon {
	background: var(--hdr-graphite, #1c1a1a);
}

.ui-toast.is-info .ui-toast-icon::before {
	content: "\f129";
}

@media (prefers-reduced-motion: reduce) {
	.ui-toast {
		transform: translate(-50%, 0);
		transition: opacity .01s;
	}
}

/* ---------- Time list picker (time-list.js): same panel as the paged dropdowns ---------- */

.time-list-panel {
	position: fixed;
	z-index: 1070;
	display: flex;
	flex-direction: column;
	max-height: 264px;
	overflow: hidden;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 12, 12, .12);
	font-size: 14px;
}

/* Positioned, so each time's offsetTop is measured from the list when scrolling to it */
.time-list-items {
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
}

.time-list-item {
	padding: 7px 12px;
	border-radius: 6px;
	color: var(--hdr-graphite, #1c1a1a);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.time-list-item:hover,
.time-list-item.is-active {
	background: var(--ui-hover);
}

.time-list-item.is-selected {
	color: var(--brand-theme, #a92022);
	font-weight: 600;
}

/* ---------- Suggestion list (suggest-list.js): same panel as the paged dropdowns, with an optional colour swatch ---------- */

.suggest-list-panel {
	position: fixed;
	z-index: 1070;
	display: flex;
	flex-direction: column;
	max-height: 320px;
	overflow: hidden;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 12, 12, .12);
	font-size: 14px;
}

/* Positioned, so each suggestion's offsetTop is measured from the list when scrolling to it */
.suggest-list-items {
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
}

.suggest-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--hdr-graphite, #1c1a1a);
	cursor: pointer;
	white-space: nowrap;
}

.suggest-list-item:hover,
.suggest-list-item.is-active {
	background: var(--ui-hover);
}

.suggest-list-swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 4px;
}

.suggest-list-footer {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-top: 1px solid var(--ui-divider);
	color: var(--ui-muted);
	font-size: 12px;
}

.suggest-list-more {
	height: 28px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--ui-control-border);
	border-radius: 6px;
	color: var(--ui-text-2);
	font-size: 12px;
	font-weight: 600;
}

.suggest-list-more:hover {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

/* ---------- select2 dropdowns (report filters): same panel as the paged dropdowns above ---------- */
/* The dropdown is appended to <body>, outside #page; the doubled .select2-container outranks select2.css, which loads later */

.select2-container.select2-container--default .select2-dropdown {
	overflow: hidden;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 12, 12, .12);
	font-size: 14px;
}

.select2-container.select2-container--default .select2-dropdown--below {
	margin-top: 4px;
}

.select2-container.select2-container--default .select2-dropdown--above {
	margin-top: -4px;
}

.select2-container.select2-container--default .select2-search--dropdown {
	padding: 8px;
}

.select2-container.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--ui-input-border);
	border-radius: 8px;
	outline: 0;
}

.select2-container.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--brand-theme, #a92022);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 16%, transparent);
}

.select2-container.select2-container--default .select2-results > .select2-results__options {
	max-height: 300px;
	padding: 4px;
}

.select2-container.select2-container--default .select2-results__option {
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--hdr-graphite, #1c1a1a);
}

.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--ui-hover);
	color: var(--hdr-graphite, #1c1a1a);
}

.select2-container.select2-container--default .select2-results__option--selected {
	background: none;
	color: var(--brand-theme, #a92022);
	font-weight: 600;
}

.select2-container.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
	background: var(--ui-hover);
	color: var(--brand-theme, #a92022);
}

.select2-container.select2-container--default .select2-results__message {
	color: var(--ui-muted);
}

/* Placeholder ("-- Pick a Tech --"): light text like other empty fields */
.select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container.select2-container--default .select2-search--inline .select2-search__field::placeholder {
	color: #9a9292;
	opacity: 1;
}

/* Load more row of paged lists (paged-select2.js) */
.select2-container.select2-container--default .select2-results__option.paged-select2-footer {
	position: sticky;
	bottom: -4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 4px -4px -4px;
	padding: 8px 10px;
	background: var(--ui-surface);
	border-top: 1px solid var(--ui-divider);
	border-radius: 0;
	color: var(--ui-muted);
	font-size: 12px;
	cursor: default;
}

.paged-select2-more {
	height: 28px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--ui-control-border);
	border-radius: 6px;
	color: var(--ui-text-2);
	font-size: 12px;
	font-weight: 600;
}

.paged-select2-more:hover {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

/* ---------- Modals: centred, quick fade, no slide ---------- */

/* Same centred position while opening and once open, so Bootstrap's slide-down is gone.
   max() keeps a dialog taller than the screen at the top, where it scrolls as before. */
.modal.fade .modal-dialog,
.modal.in .modal-dialog {
	transform: translate(0, max(0px, calc(50vh - 50% - 30px)));
	transition: none;
}

/* Bootstrap's dialog margin is 10px on phones, 30px from 768px up */
@media (max-width: 767px) {
	.modal.fade .modal-dialog,
	.modal.in .modal-dialog {
		transform: translate(0, max(0px, calc(50vh - 50% - 10px)));
	}
}

.modal.fade,
.modal-backdrop.fade {
	transition: opacity .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.modal.fade,
	.modal-backdrop.fade {
		transition: none;
	}
}

/* ---------- Dialogs: one look for every Bootstrap modal (corners, title, padding, buttons, fields, search lists) ---------- */

.modal-content {
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(20, 12, 12, .18);
}

.modal-content > .modal-header {
	padding: 20px 24px 12px;
	border-bottom: 1px solid var(--ui-divider);
}

.modal-content .modal-title {
	padding-right: 24px;
	color: var(--hdr-graphite, #1c1a1a);
	font-family: var(--hdr-font-display, sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
}

.modal-content .modal-title .fa {
	margin-right: 4px;
	color: var(--ui-muted);
	font-size: 17px;
}

div.modal .modal-content > div.modal-header button.close {
	top: 20px;
	right: 20px;
	margin-top: 0;
	font-size: 24px;
}

.modal-content > .modal-body {
	padding: 20px 24px;
}

.modal-content > .modal-footer {
	padding: 16px 24px 20px;
	border-top: 1px solid var(--ui-divider);
}

.modal-content > .modal-footer .btn {
	height: 38px;
	padding: 0 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.modal-content > .modal-body > .alert {
	margin-bottom: 14px;
}

/* ---------- Prompt dialogs (bootstrapAlerts.dialog, confirm, alert): tone icon beside the title, message under it, buttons on the right ---------- */

.ui-dialog {
	--ui-dialog-tone: #a5670d;
	--ui-dialog-tone-bg: #fcf1de;
}

.ui-dialog-danger {
	--ui-dialog-tone: var(--brand-theme, #a92022);
	--ui-dialog-tone-bg: color-mix(in srgb, var(--brand-theme, #a92022) 10%, #fff);
}

.ui-dialog-info {
	--ui-dialog-tone: #3d5a78;
	--ui-dialog-tone-bg: #e8eef5;
}

.ui-dialog-success {
	--ui-dialog-tone: #2b7149;
	--ui-dialog-tone-bg: #e3f2e9;
}

@media (min-width: 768px) {
	.ui-dialog .modal-dialog.modal-sm {
		width: 420px;
	}
}

.ui-dialog .modal-content > .modal-header {
	padding: 22px 24px 0;
	border-bottom: 0;
}

.ui-dialog .modal-content .modal-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 19px;
	line-height: 24px;
}

.ui-dialog .ui-dialog-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ui-dialog-tone-bg);
	color: var(--ui-dialog-tone);
}

.ui-dialog .modal-content .modal-title .ui-dialog-icon .fa {
	margin: 0;
	color: inherit;
	font-size: 16px;
}

/* Message lines up with the title text, past the icon (24 padding + 36 icon + 12 gap) */
.ui-dialog .modal-content > .modal-body {
	padding: 6px 24px 0 72px;
	color: var(--ui-text-2);
	font-size: 14px;
	line-height: 21px;
}

.ui-dialog .modal-content > .modal-body strong {
	color: var(--hdr-graphite, #1c1a1a);
	font-weight: 600;
}

.ui-dialog .modal-content > .modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 22px 24px 22px;
	border-top: 0;
}

.ui-dialog .modal-content > .modal-footer .btn + .btn {
	margin-left: 0;
}

/* Fields in dialog forms (Form-builder markup: label column + field) */
.modal .form-horizontal .control-label {
	padding-top: 10px;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
}

.modal .form-control,
.modal .bootstrap-select > .btn {
	height: 38px;
	background-color: #fff;
	border: 1px solid var(--ui-input-border);
	border-radius: 8px;
	box-shadow: none;
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 14px;
	transition: border-color .15s, box-shadow .15s;
}

.modal textarea.form-control {
	height: auto;
	min-height: 76px;
}

.modal .form-control:focus,
.modal .bootstrap-select > .btn:focus,
.modal .bootstrap-select.open > .btn {
	border-color: var(--brand-theme, #a92022);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 16%, transparent);
}

.modal .form-control::placeholder {
	color: #9a9292;
}

/* Search lists (pick a customer, vehicle, ...): search box on top, compact rows below */
.modal .list-select {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ui-input-border);
	border-radius: 10px;
}

.modal .list-select > .list-group-item {
	padding: 10px;
	border: 0;
	border-radius: 0;
}

.modal .list-select > .list-items-container {
	padding: 0;
	border-top: 1px solid var(--ui-divider);
}

.modal .list-select .list-items {
	margin: 0;
	border: 0;
	box-shadow: none;
}

.modal .list-select .list-items > .list-group-item {
	padding: 10px 14px;
	border: 0;
	border-top: 1px solid var(--ui-row-divider);
	border-radius: 0;
}

.modal .list-select .list-items > .list-group-item:first-child {
	border-top: 0;
}

.modal .list-select .list-items > .list-group-item:hover {
	background: var(--ui-hover);
}

.modal .list-select .list-items > .list-group-item.active,
.modal .list-select .list-items > .list-group-item.active:hover {
	background: var(--ui-hover);
	box-shadow: inset 3px 0 0 var(--brand-theme, #a92022);
	color: var(--hdr-graphite, #1c1a1a);
}

.modal .list-select .i-list-item .container-fluid,
.modal .list-select .i-list-item .row,
.modal .list-select .i-list-item [class*="col-"] {
	margin: 0;
	padding: 0;
}

.modal .list-select .list-group-item-heading {
	margin: 0 0 2px;
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 15px;
	font-weight: 600;
}

.modal .list-select .list-group-item-text {
	margin: 0;
	color: var(--ui-muted);
	font-size: 13px;
}

/* ---------- Date / time picker (jQuery UI datepicker + timepicker add-on) ---------- */
/* Doubled .ui-datepicker.ui-widget selectors: the picker sits outside #page and jQuery UI's CSS loads after this file */

/* !important beats the inline z-index: 1 jQuery UI writes (it left the picker under cards); 1060 also clears dialogs */
.ui-datepicker.ui-widget {
	z-index: 1060 !important;
	width: 288px;
	margin-top: 4px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(20, 12, 12, .16);
	color: var(--hdr-graphite, #1c1a1a);
	font-family: inherit;
	font-size: 13px;
}

.ui-datepicker.ui-widget .ui-datepicker-header {
	padding: 0 0 4px;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--hdr-graphite, #1c1a1a);
}

.ui-datepicker.ui-widget .ui-datepicker-title {
	margin: 0 40px;
	font-family: var(--hdr-font-display, sans-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}

/* Month arrows: chevrons in round-cornered buttons instead of the sprite icons */
.ui-datepicker.ui-widget .ui-datepicker-prev,
.ui-datepicker.ui-widget .ui-datepicker-next {
	display: grid;
	place-items: center;
	top: 0;
	width: 28px;
	height: 28px;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--ui-muted);
	cursor: pointer;
}

.ui-datepicker.ui-widget .ui-datepicker-prev {
	left: 0;
}

.ui-datepicker.ui-widget .ui-datepicker-next {
	right: 0;
}

.ui-datepicker.ui-widget .ui-datepicker-prev:hover,
.ui-datepicker.ui-widget .ui-datepicker-next:hover {
	background: var(--ui-hover);
	color: var(--brand-theme, #a92022);
}

.ui-datepicker.ui-widget .ui-datepicker-prev .ui-icon,
.ui-datepicker.ui-widget .ui-datepicker-next .ui-icon {
	display: none;
}

.ui-datepicker.ui-widget .ui-datepicker-prev::before,
.ui-datepicker.ui-widget .ui-datepicker-next::before {
	content: "\f053";
	font-family: FontAwesome;
	font-size: 12px;
}

.ui-datepicker.ui-widget .ui-datepicker-next::before {
	content: "\f054";
}

.ui-datepicker.ui-widget table {
	margin: 0;
	font-size: 13px;
}

.ui-datepicker.ui-widget th {
	padding: 4px 0;
	color: var(--ui-muted);
	font-size: 12px;
	font-weight: 600;
}

.ui-datepicker.ui-widget td {
	padding: 1px;
}

.ui-datepicker.ui-widget td .ui-state-default {
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--hdr-graphite, #1c1a1a);
	font-weight: 500;
	line-height: 28px;
	text-align: center;
}

.ui-datepicker.ui-widget td .ui-state-default.ui-state-hover,
.ui-datepicker.ui-widget td .ui-state-default:hover {
	background: var(--ui-hover);
	color: var(--brand-theme, #a92022);
}

.ui-datepicker.ui-widget td .ui-state-default.ui-state-highlight {
	box-shadow: inset 0 0 0 1px var(--brand-theme, #a92022);
	color: var(--brand-theme, #a92022);
}

.ui-datepicker.ui-widget td .ui-state-default.ui-state-active {
	background: var(--brand-theme, #a92022);
	color: #fff;
	font-weight: 600;
}

/* Time: hour and minute sliders */
.ui-datepicker.ui-widget .ui-timepicker-div {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--ui-divider);
}

.ui-datepicker.ui-widget .ui-timepicker-div dl {
	margin: 0;
}

.ui-datepicker.ui-widget .ui-timepicker-div dl dt {
	margin-bottom: 6px;
	padding: 0;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

/* Time row hidden to keep the picker short; the field already shows the time */
.ui-datepicker.ui-widget .ui-timepicker-div dl .ui_tpicker_time_label,
.ui-datepicker.ui-widget .ui-timepicker-div dl .ui_tpicker_time {
	display: none;
}

/* Each slider row is as tall as its label, so labels and sliders stay lined up */
.ui-datepicker.ui-widget .ui-timepicker-div dl dd {
	height: 20px;
	margin: 0 8px 6px 30%;
	line-height: 20px;
}

.ui-datepicker.ui-widget .ui-timepicker-div dl .ui_tpicker_time {
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ui-datepicker.ui-widget .ui-slider.ui-widget-content {
	top: 8px;
	height: 4px;
	background: var(--ui-divider);
	border: 0;
	border-radius: 2px;
}

.ui-datepicker.ui-widget .ui-slider .ui-slider-handle {
	top: -6px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	background: #fff;
	border: 2px solid var(--brand-theme, #a92022);
	border-radius: 50%;
	cursor: grab;
}

.ui-datepicker.ui-widget .ui-slider .ui-slider-handle:focus {
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 16%, transparent);
}

/* Now / Done */
.ui-datepicker.ui-widget .ui-datepicker-buttonpane {
	display: flex;
	justify-content: space-between;
	margin: 2px 0 0;
	padding: 10px 0 0;
	background: none;
	border-top: 1px solid var(--ui-divider);
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane::before,
.ui-datepicker.ui-widget .ui-datepicker-buttonpane::after {
	display: none;
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-state-default {
	float: none;
	height: 30px;
	margin: 0;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--ui-control-border);
	border-radius: 8px;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
	opacity: 1;
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-state-default:hover {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-priority-primary {
	background: var(--brand-theme, #a92022);
	border-color: var(--brand-theme, #a92022);
	color: #fff;
}

.ui-datepicker.ui-widget .ui-datepicker-buttonpane button.ui-priority-primary:hover {
	background: var(--brand-nav, #cb2027);
	border-color: var(--brand-nav, #cb2027);
	color: #fff;
}

/* ---------- Print preview dialog: optional document switcher, preview frame, Open in new tab / Cancel / Print ---------- */

/* Wide enough for report printouts, so the preview doesn't scroll sideways */
@media (min-width: 992px) {
	#page .ui-print-modal .modal-dialog {
		width: min(1100px, calc(100vw - 40px));
	}
}

/* Placed with margins rather than the dialogs' centring transform: Chrome repaints a scrolled iframe inside a
   transformed parent with dark patches */
#page .ui-print-modal.fade .modal-dialog,
#page .ui-print-modal.in .modal-dialog {
	margin-top: max(20px, calc(15vh - 70px));
	transform: none;
}

#page .ui-print-modal .modal-content {
	overflow: hidden;
	border: 1px solid var(--ui-border);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(20, 12, 12, .18);
}

/* Title, then the document switcher, then the close button */
#page .ui-print-modal .modal-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ui-divider);
}

#page .ui-print-modal .modal-header::before,
#page .ui-print-modal .modal-header::after {
	display: none;
}

#page .ui-print-modal .modal-title {
	order: 1;
	color: var(--hdr-graphite, #1c1a1a);
	font-family: var(--hdr-font-display, sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
}

#page .ui-print-modal .ui-print-docs {
	order: 2;
	margin-left: auto;
}

/* Without a switcher the close button takes the far right itself */
#page .ui-print-modal .modal-header:not(:has(.ui-print-docs)) .close {
	margin-left: auto;
}

/* The app pins modal close buttons to the corner; here it sits in the header row after the switcher */
#page .ui-print-modal .modal-header .close {
	order: 3;
	position: static;
	float: none;
	margin: 0;
	font-size: 24px;
}

#page .ui-print-docs .btn {
	height: 34px;
	padding: 0 14px;
	background: #fff;
	border-color: var(--ui-control-border);
	box-shadow: none;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
}

#page .ui-print-docs .btn:hover {
	color: var(--brand-theme, #a92022);
}

/* No focus outline or pressed shadow on click; keyboard focus still gets a soft ring */
#page .ui-print-docs .btn:focus,
#page .ui-print-docs .btn:active,
#page .ui-print-docs .btn.active:focus {
	outline: 0;
	box-shadow: none;
}

#page .ui-print-docs .btn:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 25%, transparent);
}

#page .ui-print-docs .btn.active,
#page .ui-print-docs .btn.active:hover {
	position: relative;
	z-index: 2;
	background: var(--brand-theme, #a92022);
	border-color: var(--brand-theme, #a92022);
	color: #fff;
}

#page .ui-print-modal .modal-body {
	position: relative;
	padding: 0;
	background: #f3f0f0;
}

#page .ui-print-frame {
	display: block;
	width: 100%;
	height: 70vh;
	border: 0;
	background: #fff;
}

/* Covers the frame until the chosen document has loaded */
#page .ui-print-loading {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	margin: 0;
	background: #f3f0f0;
	color: var(--ui-muted);
}

#page .ui-print-modal.is-loading .ui-print-loading {
	display: flex;
}

/* Open in new tab on the left, Cancel and Print on the right */
#page .ui-print-modal .modal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--ui-divider);
}

#page .ui-print-modal .modal-footer::before,
#page .ui-print-modal .modal-footer::after {
	display: none;
}

#page .ui-print-modal .modal-footer .btn + .btn {
	margin-left: 0;
}

#page .ui-print-modal .ui-print-open {
	margin-right: auto;
}

#page .ui-print-modal .modal-footer .btn {
	height: 38px;
	padding: 0 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 36px;
}

@media (max-width: 600px) {
	#page .ui-print-modal .modal-header .close {
		margin-left: auto;
	}

	#page .ui-print-modal .ui-print-docs {
		display: flex;
		order: 4;
		width: 100%;
		margin-left: 0;
		overflow-x: auto;
	}

	#page .ui-print-docs .btn {
		flex: 1 0 auto;
	}

	#page .ui-print-frame {
		height: 60vh;
	}
}

/* ---------- Dialog forms: labelled fields, Cancel / Save row; put .ui-form .ui-modal-form on the form inside the modal ---------- */

/* Dialogs holding one of these forms are a fixed narrower width */
@media (min-width: 768px) {
	.modal-dialog:has(.ui-modal-form) {
		width: 440px;
	}
}

.modal-content:has(.ui-modal-form) > .modal-header {
	padding-bottom: 4px;
	border-bottom: 0;
}

.modal-content:has(.ui-modal-form) > .modal-body {
	padding-top: 12px;
}

#page .ui-modal-form .ui-field {
	margin: 0 0 14px;
}

#page .ui-modal-form .ui-field > label {
	display: block;
	margin: 0 0 6px;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
}

/* Two short fields side by side (quantity / price, start / end) */
#page .ui-modal-form .ui-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* A checkbox beside a field sits on the field's line */
#page .ui-modal-form .ui-field--check {
	align-self: end;
	padding-bottom: 9px;
}

/* Dollar sign inside the amount field */
#page .ui-modal-form .ui-input-money {
	position: relative;
}

#page .ui-modal-form .ui-input-money::before {
	content: "$";
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: var(--ui-muted);
	font-size: 14px;
	pointer-events: none;
}

#page .ui-modal-form .ui-input-money .form-control {
	padding-left: 26px;
}

/* Tag box (task parts) grows with its tags */
#page .ui-modal-form .taggle-container {
	height: auto;
	min-height: 76px;
	padding: 6px 8px;
	overflow: auto;
}

#page .ui-modal-form .ui-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ui-divider);
}

#page .ui-modal-form .ui-modal-actions .btn {
	height: 38px;
	padding: 0 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

@media (max-width: 480px) {
	#page .ui-modal-form .ui-field-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	#page .ui-modal-form .ui-field--check {
		padding-bottom: 0;
	}
}

/* ---------- Alerts (Bootstrap .alert): soft tinted card; buttons inside are quiet ---------- */

#page .alert {
	padding: 16px 20px;
	border: 1px solid;
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
	font-size: 14px;
	line-height: 20px;
}

#page .alert h4 {
	margin: 0 0 4px;
	color: inherit;
	font-family: var(--hdr-font-display, sans-serif);
	font-style: normal;
	font-weight: 700;
	font-size: 17px;
	line-height: 22px;
}

#page .alert p {
	margin: 0;
}

#page .alert-warning {
	background: #fff8eb;
	border-color: #f1dfb6;
	color: #6b4d12;
}

#page .alert-info {
	background: #eef5fb;
	border-color: #d3e4f3;
	color: #1d4f7a;
}

#page .alert-success {
	background: #edf7f0;
	border-color: #cfe7d6;
	color: #1f6b3a;
}

#page .alert-danger {
	background: #fdf0ef;
	border-color: #f2d0cc;
	color: #8a1f17;
}

/* Secondary buttons inside an alert: white with the alert's own colour, not Bootstrap's blue/teal fills */
#page .alert .btn:not(.btn-primary):not(.close) {
	background: #fff;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 8px;
	color: inherit;
	font-weight: 600;
	box-shadow: none;
}

#page .alert .btn:not(.btn-primary):not(.close):hover {
	background: color-mix(in srgb, currentColor 8%, #fff);
}

/* ---------- Card ---------- */

#page .ui-card {
	padding: 20px 24px;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
}

#page .ui-card--compact {
	padding: 16px 20px;
}

/* ---------- Titles ---------- */

#page .ui-card-title,
#page .ui-section-title {
	padding: 0;
	border: 0;
	color: var(--hdr-graphite, #1c1a1a);
	font-family: var(--hdr-font-display, sans-serif);
	font-style: normal;
	font-weight: 700;
}

#page .ui-card-title {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 24px;
}

#page .ui-section-title {
	margin: 32px 0 12px;
	font-size: 22px;
	line-height: 28px;
}

/* ---------- Icon tile: tinted square holding an icon or initials ---------- */

#page .ui-icon-tile {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--brand-theme, #a92022) 10%, #fff);
	color: var(--brand-theme, #a92022);
	font-size: 18px;
}

#page .ui-icon-tile--lg {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .04em;
}

/* ---------- Link tiles: a grid of cards that each open a page (.ui-tile-group > .ui-section-title + .ui-tiles > a.ui-card.ui-tile) ---------- */

#page .ui-tile-group {
	margin-bottom: 28px;
}

#page .ui-tile-group > .ui-section-title {
	margin-top: 4px;
}

#page .ui-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

#page .ui-tile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	color: var(--hdr-graphite, #1c1a1a);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}

#page .ui-tile:hover,
#page .ui-tile:focus {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-border));
	box-shadow: 0 6px 18px rgba(20, 12, 12, .08);
	color: var(--hdr-graphite, #1c1a1a);
	text-decoration: none;
	outline: 0;
}

#page .ui-tile:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 22%, transparent);
}

#page .ui-tile-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#page .ui-tile-name {
	font-family: var(--hdr-font-display, sans-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
}

#page .ui-tile-desc {
	color: var(--ui-muted);
	font-size: 13px;
	line-height: 18px;
}

#page .ui-tile-go {
	color: var(--ui-muted);
	font-size: 12px;
}

#page .ui-tile:hover .ui-tile-go {
	color: var(--brand-theme, #a92022);
}

@media (max-width: 991px) {
	#page .ui-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	#page .ui-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Detail page: facts card + media card on top, then sections ---------- */

#page .ui-detail {
	display: grid;
	/* minmax(0, ...) so wide tables scroll inside their cards instead of widening the page */
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	margin-bottom: 24px;
}

#page .ui-detail-top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 20px;
}

/* Detail page titles are a step between card and section size */
#page .ui-detail .ui-card-title,
#page .ui-detail .ui-section-title {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 26px;
}

/* Icon tile, record name and Edit button in one row */
#page .ui-profile-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

#page .ui-profile-name {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--hdr-graphite, #1c1a1a);
	font-family: var(--hdr-font-display, sans-serif);
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
}

#page .ui-edit-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--ui-control-border);
	border-radius: 8px;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}

#page .ui-edit-btn:hover {
	background: var(--ui-hover);
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

/* A th/td property table inside the card, shown as label / value rows */
#page .ui-facts .table {
	margin: 0;
	background: none;
}

#page .ui-facts .table > tbody > tr {
	background: none;
}

#page .ui-facts .table > tbody > tr > th,
#page .ui-facts .table > tbody > tr > td {
	padding: 9px 0;
	border-top: 1px solid var(--ui-row-divider);
	vertical-align: middle;
}

#page .ui-facts .table > tbody > tr:first-child > th,
#page .ui-facts .table > tbody > tr:first-child > td {
	border-top: 0;
}

#page .ui-facts .table > tbody > tr > th {
	width: 110px;
	color: var(--ui-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#page .ui-facts .table > tbody > tr > td {
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 14px;
}

/* Last row holds the action button */
#page .ui-facts .table > tbody > tr:last-child > td {
	padding-top: 16px;
}

/* Small status pill, e.g. Active / Inactive */
#page .ui-badge {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--ui-hover);
	color: var(--ui-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

#page .ui-badge--success {
	background: #e7f6ec;
	color: #1f7a3d;
}

#page .ui-badge--warning {
	background: #fff4e0;
	color: #a15c07;
}

#page .ui-badge--danger {
	background: #fdecec;
	color: #b42318;
}

#page .ui-badge--muted {
	background: var(--ui-hover);
	color: var(--ui-muted);
}

#page .ui-badge--purple {
	background: #f1ebfb;
	color: #6b3fb3;
}

#page .ui-badge--blue {
	background: #e8f1fd;
	color: #1d5fb8;
}

/* Bootstrap labels inside a facts table read as quiet pills */
#page .ui-facts .label {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ui-hover);
	color: var(--ui-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
}

#page .ui-facts .label-primary {
	background: color-mix(in srgb, var(--brand-theme, #a92022) 10%, #fff);
	color: var(--brand-theme, #a92022);
}

#page .ui-facts .label-info {
	background: #e6f1fb;
	color: #1d5c94;
}

/* Section title with a button that comes after the table in the markup; flex order lifts it beside the title */
#page .ui-section-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
}

#page .ui-section-actions > .ui-section-title {
	flex: 1;
	margin-bottom: 12px;
}

#page .ui-section-actions > .btn {
	order: 1;
	margin: 0 0 12px;
}

#page .ui-section-actions > .data-view-wrapper {
	order: 2;
	flex-basis: 100%;
	margin-bottom: 0;
}

/* ---------- Stats ---------- */

/* Label / big number tiles (e.g. workorder status counts) */
#page .ui-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border: 1px solid var(--ui-divider);
	border-radius: 10px;
}

#page .ui-stat {
	padding: 10px 12px;
}

#page .ui-stat + .ui-stat {
	border-left: 1px solid var(--ui-divider);
}

#page .ui-stat-label {
	color: var(--ui-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

#page .ui-stat-value {
	margin: 2px 0 0;
	color: var(--hdr-graphite, #1c1a1a);
	font-family: var(--hdr-font-display, sans-serif);
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	font-variant-numeric: tabular-nums;
}

/* ---------- Form: label column + fields, for Form-builder (form-horizontal) markup; add .ui-form to the form ---------- */

/* Rows: label column, then one field or two (first/last name) */
#page .ui-form .form-group {
	display: grid;
	grid-template-columns: 132px repeat(2, minmax(0, 1fr));
	column-gap: 12px;
	align-items: center;
	margin: 0 0 12px;
}

#page .ui-form .form-group::before,
#page .ui-form .form-group::after {
	display: none;
}

#page .ui-form .form-group > [class*="col-"] {
	grid-column: 2 / -1;
	float: none;
	width: auto;
	padding: 0;
}

/* A row with two field columns (e.g. first / last name) puts them side by side; labels carry col- classes too, hence div */
#page .ui-form .form-group > div[class*="col-"]:has(+ div[class*="col-"]),
#page .ui-form .form-group > div[class*="col-"] + div[class*="col-"] {
	grid-column: auto;
}

/* Labels of tall fields line up with the first line, not the middle */
#page .ui-form .form-group:has(textarea) > label.control-label {
	align-self: start;
	padding-top: 9px;
}

#page .ui-form .form-group > label.control-label {
	grid-column: 1;
	padding: 0;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	text-align: left;
}

/* Save row spans the card (inside a form-group, or placed straight in the card) */
#page .ui-form .form-group > .text-right,
#page .ui-form .ui-card > .text-right {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--ui-divider);
}

#page .ui-form .form-control,
#page .ui-form .select-wrapper select,
#page .ui-form .bootstrap-select > .btn {
	height: 38px;
	padding: 0 12px;
	background-color: #fff;
	border: 1px solid var(--ui-input-border);
	border-radius: 8px;
	box-shadow: none;
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 14px;
	transition: border-color .15s, box-shadow .15s;
}

/* Textareas keep their rows instead of the single-line input height */
#page .ui-form textarea.form-control {
	height: auto;
	min-height: 76px;
	padding: 8px 12px;
	line-height: 20px;
}

#page .ui-form .form-control::placeholder {
	color: #9a9292;
}

#page .ui-form .form-control:focus,
#page .ui-form .select-wrapper select:focus,
#page .ui-form .bootstrap-select > .btn:focus,
#page .ui-form .bootstrap-select.open > .btn {
	border-color: var(--brand-theme, #a92022);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 16%, transparent);
}

#page .ui-form .bootstrap-select {
	width: 100% !important;
}

/* The Form builder gives checkboxes the form-control class; keep them checkbox-sized */
#page .ui-form input[type="checkbox"].form-control,
#page .ui-form input[type="radio"].form-control {
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	box-shadow: none;
	accent-color: var(--brand-theme, #a92022);
	cursor: pointer;
}

#page .ui-form .form-control:disabled,
#page .ui-form span.form-control {
	background-color: #f6f3f3;
	color: var(--ui-muted);
	cursor: not-allowed;
}

/* Read-only value shown as a field (e.g. the login email copied from the contact email) */
#page .ui-form span.form-control {
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: default;
}

#page .ui-form .checkbox {
	margin: 0;
	padding: 0;
	color: var(--ui-text-2);
	font-size: 14px;
}

#page .ui-form .btn-lg {
	padding: 9px 28px;
	font-size: 15px;
}

/* ---------- Form card: a whole form in one card (form.ui-form.ui-card.ui-form-card); h3.page-header splits it into sections ---------- */

#page .ui-form-card {
	max-width: 900px;
	margin-bottom: 24px;
}

#page .ui-form-card .form-group {
	grid-template-columns: 160px repeat(2, minmax(0, 1fr));
}

#page .ui-form-card h3.page-header,
#page .ui-form-card .ui-card-title {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	color: var(--hdr-graphite, #1c1a1a);
	font-family: var(--hdr-font-display, sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
}

/* A divider above every section title that has fields before it */
#page .ui-form-card :not([type="hidden"]) + h3.page-header {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--ui-divider);
}

/* Save row: across the card, button on the right */
#page .ui-form-card > .text-right,
#page .ui-form-card .form-group:has([type="submit"]) {
	grid-template-columns: minmax(0, 1fr);
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ui-divider);
}

#page .ui-form-card .form-group:has([type="submit"]) > label {
	display: none;
}

#page .ui-form-card .form-group:has([type="submit"]) > [class*="col-"] {
	grid-column: 1 / -1;
	text-align: right;
}

#page .ui-form-card [type="submit"].btn {
	min-width: 104px;
	padding: 9px 28px;
	font-size: 15px;
}

/* ---------- Plain tables (BSTable) in the list card: pass class "data-view" and data-sticky_header "false", wrap in .data-view-wrapper ---------- */

#page .data-view-wrapper > .table-responsive {
	margin: 0;
	border: 0;
}

/* Long text (descriptions) wraps instead of widening the table */
#page .data-view-wrapper table.data-view.ui-table-wrap td {
	white-space: normal;
}

/* Save row under a table of settings */
#page .data-view-wrapper > .ui-table-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--ui-divider);
}

/* ---------- Customer / vehicle pickers: side by side; .ui-parties--stacked puts them one above the other ---------- */

#page .ui-parties {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

#page .ui-parties .form-group {
	display: block;
	margin: 0;
}

#page .ui-parties .form-group > label.control-label {
	display: none;
}

/* Picker heading reads like a field label */
#page .ui-parties .simple-list-widget > h3 {
	margin: 0 0 8px;
	color: var(--ui-text-2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
}

#page .ui-parties .simple-list-widget > h3 .fa {
	margin-right: 4px;
	color: var(--ui-muted);
}

/* Chosen record and its search / new buttons in one rounded box */
#page .ui-parties .simple-list-widget > .list-group {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ui-input-border);
	border-radius: 10px;
}

#page .ui-parties .simple-list-widget > .list-group > .list-group-item {
	padding: 12px 14px;
	border: 0;
	border-radius: 0;
}

#page .ui-parties .simple-list-widget > .list-group > .list-group-item + .list-group-item {
	border-top: 1px solid var(--ui-divider);
	background: var(--ui-hover);
}

#page .ui-parties .i-list-item .container-fluid,
#page .ui-parties .i-list-item .row,
#page .ui-parties .i-list-item [class*="col-"] {
	margin: 0;
	padding: 0;
}

#page .ui-parties .list-group-item-heading {
	margin: 0 0 2px;
	color: var(--hdr-graphite, #1c1a1a);
	font-size: 16px;
	font-weight: 600;
}

#page .ui-parties .list-group-item-text,
#page .ui-parties .list-group-item-footer {
	margin: 0;
	color: var(--ui-muted);
	font-size: 13px;
}

#page .ui-parties .list-group-item > .btn {
	height: 34px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--ui-control-border);
	border-radius: 8px;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 500;
}

#page .ui-parties .list-group-item > .btn:hover {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

/* Customer above vehicle, each under its field label (the vehicle list has no heading of its own) */
#page .ui-parties--stacked {
	grid-template-columns: minmax(0, 1fr);
}

#page .ui-parties--stacked .form-group > label.control-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 8px;
	padding: 0;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

#page .ui-parties--stacked .form-group > div[class*="col-"] {
	float: none;
	width: auto;
	padding: 0;
}

#page .ui-parties--stacked .simple-list-widget > h3 {
	display: none;
}

/* ---------- Choice chips: a radio group as a row of pills (label.ui-choice > input + span) ---------- */

#page .ui-choice-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#page .ui-choice {
	position: relative;
	margin: 0;
	cursor: pointer;
}

#page .ui-choice > input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

#page .ui-choice > span {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--ui-control-border);
	border-radius: 999px;
	color: var(--ui-text-2);
	font-size: 13px;
	font-weight: 500;
	transition: border-color .15s, background-color .15s, color .15s;
}

#page .ui-choice:hover > span {
	border-color: color-mix(in srgb, var(--brand-theme, #a92022) 40%, var(--ui-control-border));
	color: var(--brand-theme, #a92022);
}

#page .ui-choice > input:checked + span {
	background: color-mix(in srgb, var(--brand-theme, #a92022) 10%, #fff);
	border-color: var(--brand-theme, #a92022);
	color: var(--brand-theme, #a92022);
	font-weight: 600;
}

#page .ui-choice > input:focus-visible + span {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-theme, #a92022) 16%, transparent);
}

/* ---------- Tabs ---------- */

/* Bootstrap card stack (tabs + panes) as one card; wrap it in .ui-tabs. Page-level tab bars (no card) take .ui-page-tabs on the ul */
/* jQuery UI also styles .ui-tabs (0.2em padding) on pages that load it */
#page .ui-tabs {
	padding: 0;
}

#page .ui-tabs .cardstack {
	background: #fff;
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	box-shadow: var(--ui-shadow);
}

#page .ui-tabs .cardstack > .nav-tabs,
#page .ui-page-tabs {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0 16px;
	border-bottom: 1px solid var(--ui-divider);
}

#page .ui-tabs .cardstack > .nav-tabs::before,
#page .ui-tabs .cardstack > .nav-tabs::after,
#page .ui-page-tabs::before,
#page .ui-page-tabs::after {
	display: none;
}

#page .ui-tabs .cardstack > .nav-tabs > li,
#page .ui-page-tabs > li {
	float: none;
	margin: 0 0 -1px;
}

#page .ui-tabs .cardstack > .nav-tabs > li > a,
#page .ui-page-tabs > li > a {
	margin: 0;
	padding: 14px 12px 12px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--ui-muted);
	font-family: var(--hdr-font-display, sans-serif);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
}

#page .ui-tabs .cardstack > .nav-tabs > li > a:hover,
#page .ui-page-tabs > li > a:hover {
	background: none;
	color: var(--hdr-graphite, #1c1a1a);
}

#page .ui-tabs .cardstack > .nav-tabs > li.active > a,
#page .ui-tabs .cardstack > .nav-tabs > li.active > a:hover,
#page .ui-tabs .cardstack > .nav-tabs > li.active > a:focus,
#page .ui-page-tabs > li.active > a,
#page .ui-page-tabs > li.active > a:hover,
#page .ui-page-tabs > li.active > a:focus {
	background: none;
	border: 0;
	border-bottom: 2px solid var(--brand-theme, #a92022);
	color: var(--hdr-graphite, #1c1a1a);
}

#page .ui-tabs .cardstack > .tab-content {
	padding: 16px;
}

/* The page tab bar lines up with the content edge and leaves room above the panes */
#page .ui-page-tabs {
	margin-bottom: 20px;
	padding: 0;
}

#page .ui-tabs .tab-pane > .data-view-wrapper {
	margin-bottom: 12px;
	box-shadow: none;
}

#page .ui-tabs .tab-pane > p {
	margin: 0;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 991px) {
	#page .ui-detail-top,
	#page .ui-parties {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	#page .ui-detail .ui-card {
		padding: 16px;
	}

	/* Labels above fields on phones */
	#page .ui-form .form-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 6px;
	}

	#page .ui-form .form-group > label.control-label {
		grid-column: 1 / -1;
	}

	#page .ui-form .form-group > [class*="col-"] {
		grid-column: 1 / -1;
	}

	#page .ui-form .form-group > div[class*="col-"]:has(+ div[class*="col-"]),
	#page .ui-form .form-group > div[class*="col-"] + div[class*="col-"] {
		grid-column: auto;
	}

	#page .ui-form .form-group:has(textarea) > label.control-label {
		padding-top: 0;
	}

	#page .ui-tabs .cardstack > .nav-tabs,
	#page .ui-page-tabs {
		overflow-x: auto;
		padding: 0 8px;
	}

	/* Labels stay on one line; the bar scrolls sideways instead */
	#page .ui-tabs .cardstack > .nav-tabs > li > a,
	#page .ui-page-tabs > li > a {
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	#page .ui-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#page .ui-stat:nth-child(3) {
		border-left: 0;
	}

	#page .ui-stat:nth-child(n+3) {
		border-top: 1px solid var(--ui-divider);
	}
}