/* Small layout utilities replacing static inline styles in Twig templates. */

.chart-h-300 {
	height: 300px;
}

.select-w-200 {
	width: 200px;
}

.calendar-minh-350 {
	min-height: 350px;
}

.icon-14 {
	width: 14px;
	height: 14px;
}

.gap-10 {
	gap: 10px;
}

.absence-legend-am {
	opacity: .6;
}

.absence-legend-pm {
	opacity: .3;
}

.error-overlay {
	z-index: 2;
}

.page-error-code {
	font-size: 750%;
	font-weight: 700;
}

.page-error-sub {
	font-size: 40%;
}

/* Toast status icons follow the toast colour instead of the grey sprite default. */
.toast-body .sa-icon {
	stroke: currentColor;
	fill: none;
}

/* All table cells vertically centered by default. */
.table > :not(caption) > * > * {
	vertical-align: middle;
}

/* Hand ordering of a dictionary table (/js/shared/reorder-table.js) */
.reorder-drag-handle {
	cursor: grab;
	color: var(--bs-secondary-color);
}
tr.reorder-dragging {
	opacity: 0.4;
}

/* Address picker: a long address must stay on one line (ellipsis), never overflow the form nor push the [+]. */
.address-picker .ts-wrapper {
	min-width: 0;
}
.address-picker .ts-control {
	flex-wrap: nowrap;
	overflow: hidden;
}
.address-picker .ts-control > .item {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Convention switcher: the label of a convention is long, and it must not push the control onto a second line. */
.agreement-switcher .ts-wrapper {
	min-width: 0;
	max-width: 32rem;
}
.agreement-switcher .ts-control {
	flex-wrap: nowrap;
	overflow: hidden;
}
.agreement-switcher .ts-control > .item {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Narrow confirmation / small-form modals. */
.modal-narrow {
	--bs-modal-width: 450px;
}
/* Address autocomplete results: scroll instead of pushing the form down. */
.address-search-results {
	max-height: 300px;
	overflow-y: auto;
}
/* Fixed-width planning filter select so a long option can't grow the header. */
.planning-filter-select {
	width: 200px;
}
/* Colour tag badge whose colour is passed per-instance via --tag-color. */
.tag-badge {
	background-color: var(--tag-color);
}
/* Dashboard KPI tile: a whole tile is one link to the list it counts. */
.kpi-tile:hover {
	opacity: .8;
}
/* Team tooltips list one intervenant per row, so they need room and left alignment. */
.tooltip-team .tooltip-inner {
	max-width: 22rem;
	text-align: left;
}
/* The one help icon: a hoverable explanation, wherever a figure needs one. */
.help-icon {
	width: 0.95rem;
	height: 0.95rem;
	cursor: help;
	vertical-align: text-bottom;
}
/* Tooltips carrying several lines - a balance breakdown, an occurrence's whole card: keep the
   breaks, and give them the room the default 200px does not, or every line wraps again. */
.tooltip-prewrap .tooltip-inner {
	white-space: pre-line;
	text-align: left;
	max-width: 22rem;
}

/* The card of a planning occurrence: a heading per block, a blank line between them, and the
   room to hold a customer line without wrapping it. */
.tooltip-occurrence .tooltip-inner {
	max-width: 24rem;
	text-align: left;
}
.tooltip-occurrence .tooltip-block + .tooltip-block {
	margin-top: 0.5rem;
}

/* A TomSelect dropdown rendered at body level sits at z-index 1000 by default, under a Bootstrap
   modal (1055): it opened invisible. Lifted once for the whole app, below the toasts (1090). */
.ts-dropdown {
	z-index: 1060;
}

/* A tooltip must never float over an open context menu: it would eat the click on its items. */
body.context-menu-open .tooltip {
	display: none;
}