/* Report metric dropdowns must clear DataTables' fixed/sticky headers */
.metric-menu {
	z-index: 100000;
}
/* Bootstrap 5 Link Color Override - Using CSS Custom Properties */
:root {
	--bs-link-color: var(--bs-body-color);
	--bs-link-hover-color: var(--bs-primary);
	--bs-link-color-rgb: var(--bs-body-color-rgb);
	--bs-link-hover-color-rgb: var(--bs-primary-rgb);
}
/* Ensure links inherit the active theme */
a {
	color: var(--bs-link-color);
	text-decoration: none;
}
a:hover {
	color: var(--bs-link-hover-color);
	text-decoration: underline;
}
/* Anchor tags with .btn: no underline on hover (Bootstrap has no utility for this; global a:hover overrides .btn) */
a.btn:hover {
	text-decoration: none;
}
/* Navbar brand logo — swap mark for header tone (orange in the logo needs a non-orange bar). */
header .navbar .navbar-brand-logo {
	max-height: 36px;
	width: auto;
	height: auto;
	display: none;
	vertical-align: middle;

	&.navbar-brand-logo--light-bg {
		display: block;
	}

	&.navbar-brand-logo--dark-bg {
		display: none;
	}
}

html[data-time-header-tone="dark"] header .navbar .navbar-brand-logo--light-bg,
:root[data-bs-theme="dark"] header .navbar .navbar-brand-logo--light-bg {
	display: none;
}

html[data-time-header-tone="dark"] header .navbar .navbar-brand-logo--dark-bg,
:root[data-bs-theme="dark"] header .navbar .navbar-brand-logo--dark-bg {
	display: block;
}

html[data-time-header-tone="light"] header .navbar .navbar-brand-logo--light-bg {
	display: block;
}

html[data-time-header-tone="light"] header .navbar .navbar-brand-logo--dark-bg {
	display: none;
}

/* Navigation links */
.navbar a,
.nav-link {
	color: var(--bs-navbar-color, var(--bs-body-color));
}
.navbar a:hover,
.nav-link:hover {
	color: var(--bs-navbar-hover-color, var(--bs-primary));
}
/* Modal headers – BS5.3: title left, close right (justify between) */
.modal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.modal-header .modal-title {
    order: 1;
    margin-right: 0.5rem;
}
.modal-header .btn-close {
    order: 2;
    margin: 0 0 0 auto;
}
/* Ensure Select2 dropdown appears above Bootstrap modals */
.modal .select2-dropdown {
    z-index: 1055 !important;
}
.modal .select2-container--open {
    z-index: 1055;
}
/* ===== Select2 Styling aligned to Bootstrap 5.3 form controls ===== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.select2-container--default .select2-selection--single {
    min-height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
    line-height: calc(1.5em + 0.75rem);
    padding-left: 0.75rem;
    padding-right: 2rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
    width: 2rem;
    right: 1px;
    top: 1px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}
/* The clear control is position:static, so it flowed to the rendered span's
   right edge — which is exactly where the absolutely-positioned caret sits,
   putting the two on top of each other. Park it just inboard of the caret. */
.select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	top: 50%;
	/* Caret is 2rem wide sitting at right:1px, so it begins 33px in — the clear
	   has to end before that or the two touch. */
	right: 2.25rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	line-height: 1;
	color: var(--bs-secondary-color);

	&:hover,
	&:focus-visible {
		background-color: var(--bs-secondary-bg);
		color: var(--bs-body-color);
	}
}

/* Keep long values clear of BOTH controls rather than just the caret. */
.select2-container--default .select2-selection--single.select2-selection--clearable .select2-selection__rendered {
	padding-right: 3.6rem;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: rgba(var(--bs-primary-rgb), 0.65);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.2);
    outline: 0;
}
.select2-container--default .select2-selection--multiple {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(1.5em + 0.75rem + 2px);
	padding: 0.25rem 1.75rem 0.25rem 0.5rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	line-height: 1;
	color: var(--bs-secondary-color);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	/* NOT width:100% — the <ul> is empty until something is selected, and a full
	   width basis made it reserve ~87px of a 197px control, pushing the search
	   field (which carries the placeholder) right and truncating it. */
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	max-width: 100%;
	background-color: rgba(var(--bs-primary-rgb), 0.12);
	border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
	border-radius: 999px;
	color: var(--bs-body-color);
	line-height: 1.25;
	margin: 0;
	padding: 0.15rem 0.55rem 0.15rem 0.35rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	padding: 0;
	line-height: inherit;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 1.1em;
	width: 1.1em;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	color: var(--bs-secondary-color);
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
	background: transparent;
	color: var(--bs-danger);
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
	display: inline-flex;
	align-items: center;
	/* Fill whatever the chips leave, so the placeholder is never clipped. */
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
	margin-top: 0;
	min-height: 1.5em;
	line-height: 1.5;
}
.select2-dropdown {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    background-color: var(--bs-body-bg);
}
.select2-container--default.select2-container--open .select2-dropdown {
    border-color: rgba(var(--bs-primary-rgb), 0.65);
}
.select2-container--default .select2-search--dropdown {
    padding: 0.5rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.65);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.2);
    outline: 0;
}
.select2-container--default .select2-results__option--selected {
    background-color: var(--bs-tertiary-bg);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: #fff;
}
/* Disabled state */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--bs-secondary-bg);
    cursor: not-allowed;
}
/* DataTables footer spacing */
.dt-container {
	padding-bottom: 8px;
}
/* Card tables: add small horizontal breathing room at outer edges */
.card .table > :not(caption) > * > *:first-child {
	padding-left: calc(var(--bs-table-cell-padding-x, 0.5rem) + 5px);
}
.card .table > :not(caption) > * > *:last-child {
	padding-right: calc(var(--bs-table-cell-padding-x, 0.5rem) + 5px);
}
/* DataTables dark-mode header readability.
   Was written three times over: `html.dark` and `:root[data-theme="dark"]` are
   never set by anything (theme-mode.js sets data-theme-mode + data-bs-theme),
   and `.dataTables_wrapper` is the DataTables 1.x container — 2.3.8 emits
   .dt-container. Only the combination below was ever matching.
   The tr.dt-column-filters rules are gone entirely: nothing emits that class. */
:root[data-bs-theme="dark"] .dt-container table.table {
	thead.table-light {
		--bs-table-bg: var(--admin-surface-2);
		--bs-table-color: var(--admin-text-strong);

		> tr > :is(th, td) {
			background-color: var(--admin-surface-2) !important;
			color: var(--admin-text-strong);
			border-color: var(--bs-border-color);
		}
	}

	thead .dt-column-order {
		&::before,
		&::after {
			color: var(--admin-text-muted);
		}
	}
}
/* Content pages table cards (towns, faqs, brands, pages, tyre_ranges, users, car_manufacturers, cs_faqs) */
.card .table-responsive .dt-layout-full {
	padding: 0;
}

/* Printable directory (directory/print.twig) — was an inline <style> block.
   Genuinely custom: Bootstrap has no @page utilities. */
@media print {
	@page { margin: 0; }

	body {
		margin: 1cm 0.2cm;
		background-color: #fff;
	}
}

/* ===== Select2 size variants =====
   Select2 renders its own box, so Bootstrap's .form-select-sm / -lg on the
   original <select> never reaches it. theme.js copies the size onto the
   container as .select2--sm / .select2--lg; these match Bootstrap's own
   metrics so a select2 sits flush with a native select beside it. */
.select2-container--default .select2-selection--single.select2--sm,
.select2-container--default .select2-selection--multiple.select2--sm {
	min-height: calc(1.5em + 0.5rem + 2px);
	border-radius: var(--bs-border-radius-sm);
	font-size: 0.875rem;
}

.select2-container--default .select2-selection--single.select2--sm {
	.select2-selection__rendered {
		line-height: calc(1.5em + 0.5rem);
		padding-left: 0.5rem;
		padding-right: 1.75rem;
	}

	.select2-selection__arrow {
		height: calc(1.5em + 0.5rem);
		width: 1.75rem;
	}
}

.select2-container--default .select2-selection--multiple.select2--sm {
	padding: 0.125rem 1.5rem 0.125rem 0.375rem;

	.select2-selection__choice {
		font-size: 0.8125rem;
	}
}

.select2--sm .select2-results__option,
.select2--sm .select2-search--dropdown .select2-search__field {
	font-size: 0.875rem;
}

.select2-container--default .select2-selection--single.select2--lg,
.select2-container--default .select2-selection--multiple.select2--lg {
	min-height: calc(1.5em + 1rem + 2px);
	border-radius: var(--bs-border-radius-lg);
	font-size: 1.25rem;
}

.select2-container--default .select2-selection--single.select2--lg {
	.select2-selection__rendered {
		line-height: calc(1.5em + 1rem);
		padding-left: 1rem;
	}

	.select2-selection__arrow {
		height: calc(1.5em + 1rem);
	}
}

/* Select2 renders a .select2-selection__arrow only for SINGLE selects — a
   multiple gets no arrow element at all, so it read as a text box rather than a
   dropdown. Draw the same caret so both select2 variants match. */
.select2-container--default .select2-selection--multiple {
	padding-right: 2rem;

	/* Select2's base CSS sets cursor:pointer on both variants, then its default
	   theme overrides multiples to cursor:text because they contain a real
	   <textarea> for type-to-search. That made the department filter feel like a
	   text box next to the client one. Put it back to pointer so both read as
	   dropdowns — typing to search still works, it just isn't hinted. */
	cursor: pointer;

	.select2-selection__rendered,
	.select2-search--inline,
	.select2-search__field {
		cursor: pointer;
	}

	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0.75rem;
		margin-top: -2px;
		border-style: solid;
		border-width: 5px 4px 0 4px;
		border-color: #888 transparent transparent transparent;
		pointer-events: none;
	}

	/* Clear button sits inboard of the caret rather than under it. */
	.select2-selection__clear {
		right: 2rem;
	}
}

/* Flip the caret while open, matching the single select's behaviour. */
.select2-container--default.select2-container--open .select2-selection--multiple::after {
	border-width: 0 4px 5px 4px;
	border-color: transparent transparent #888 transparent;
}

.select2-container--default .select2-selection--multiple.select2--sm {
	padding-right: 1.75rem;

	&::after {
		right: 0.625rem;
	}
}

/* Small variant: caret is narrower, so the clear control moves in with it. */
.select2-container--default .select2-selection--single.select2--sm {
	.select2-selection__clear {
		right: 2rem;
		width: 1.1rem;
		height: 1.1rem;
	}

	&.select2-selection--clearable .select2-selection__rendered {
		padding-right: 3.2rem;
	}
}

/* --- Client create/edit form ------------------------------------------------
   Only what Bootstrap utilities cannot express: a sticky offset, the small
   group headings in the section list, and keeping Save reachable on a phone.

   Written as flat BEM selectors on purpose. Native CSS nesting is not Sass:
   `&` is a real reference to the parent selector, not a string you can
   concatenate onto, so `&__legend` inside `.client-form` does not compose
   `.client-form__legend` — it is invalid and the whole rule is dropped. Nest
   for compound and descendant selectors (`&:hover`, `&.active`), never to
   build a class name. */

/* Section strip: wraps onto a second row rather than scrolling.

   A one-line scrolling strip needs shift+wheel on a mouse, which nobody
   discovers — the sections past the fold may as well not be there. Wrapping
   costs one row of height once; a sidebar cost a quarter of the width on
   every screen. */
.client-form__nav-strip {
	flex-wrap: wrap;
	gap: 0.25rem;

	.nav-link {
		white-space: nowrap;
	}
}

/* Group boundaries, carried over from the sidebar's headings — a label per
   cluster would double the strip's height. */
.client-form__nav-divider {
	flex: 0 0 auto;
	align-self: stretch;
	width: 1px;
	margin: 0.25rem 0.35rem;
	background: var(--bs-border-color);
}

.client-form__legend {
	float: none;
	/* Full width so the rule reads as a divider between field groups rather
	   than an underline under a word — Reboot's shrink-to-fit legend does the
	   latter. */
	width: 100%;
	margin-bottom: 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--bs-border-color);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

/* The form is long enough that Save would otherwise sit a scroll away from
   whatever was just changed. Only worth it where the screen is short. */
.client-form__actions .btn {
	width: 100%;
}

@media (min-width: 768px) {
	.client-form__actions .btn {
		width: auto;
	}
}

/* Pinned, not sticky. `position: sticky; bottom: 0` does nothing here: the
   actions are the last child of the form, so there is no room below them to
   stick against and sticky quietly degrades to static — it looked correct
   scrolled to the bottom and vanished everywhere else. Fixed needs the form to
   reserve clearance so the last field is not sitting underneath it. */
@media (max-width: 767.98px) {
	.client-form__actions {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1020;
		padding: 0.75rem;
		background: var(--bs-body-bg);
		border-top: 1px solid var(--bs-border-color);
		box-shadow: 0 -0.125rem 0.5rem rgb(0 0 0 / 8%);
	}

	.client-form__fields {
		padding-bottom: 5rem;
	}
}

/* Section tables scroll on a phone rather than being squeezed.

   .table-responsive only supplies overflow-x: auto — with nothing setting a
   width, the browser still shrinks columns to fit the container, so an email
   column ends up rendering one character per line instead of the table
   scrolling sideways. A min-width is what actually makes it scroll. */
@media (max-width: 767.98px) {
	.client-section .table-responsive > .table {
		min-width: 44rem;
	}
}

/* Assigned-staff cards: View and Remove fade in over the card.

   Reveal is on :focus-within as well as :hover so the two buttons are
   reachable by keyboard — they are real links inside the card, and hover-only
   would make them focusable but invisible. */
.staff-card {
	position: relative;

	.contact-card {
		transition: opacity 0.15s ease;
	}

	/* Dimmed, not erased. At 0.15 the name disappeared, which is the one thing
	   you want still legible while reaching for Remove. The buttons are solid
	   so they carry over it regardless. */
	&:hover .contact-card,
	&:focus-within .contact-card {
		opacity: 0.4;
	}

	&:hover .staff-card__actions,
	&:focus-within .staff-card__actions {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Right-aligned rather than centred: centred put both buttons straight over
   the name, so the one thing you need to read while reaching for Remove was
   the one thing covered. */
.staff-card__actions {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-right: 0.75rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Touch: nothing reveals on hover, and a card whose actions only appear on an
   interaction the device cannot perform is a card with no actions. Show them. */
@media (hover: none) {
	.staff-card .contact-card {
		opacity: 1;
	}

	.staff-card__actions {
		position: static;
		justify-content: flex-end;
		margin-top: 0.5rem;
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.staff-card .contact-card,
	.staff-card__actions {
		transition: none;
	}
}


/* Count on a section pill. Inherits the pill's colour so it reads as part of
   the button in both states rather than fighting the active fill. */
.client-form__nav-count {
	background: rgb(0 0 0 / 8%);
	color: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.15rem 0.4rem;

	.nav-link.active & {
		background: rgb(255 255 255 / 25%);
	}
}

/* A row or card on its way out. Height and margin are set inline by
   client_removals.js — a box sized `auto` has nothing to animate from, so the
   script pins the measured height first and then drops it. Table rows only
   fade: a <tr> ignores height. */
.is-removing {
	overflow: hidden;
	opacity: 0;
	transform: scale(0.98);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		height 0.25s ease,
		margin-top 0.25s ease;
}

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