/**
 * Rental Assist — front-end desk widgets.
 *
 * Layout only.
 *
 * Elementor injects a widget's control styles before this file loads, so at
 * equal specificity anything declared here beats the control and the control
 * silently stops working. Every colour, padding, radius, border, shadow and
 * font therefore lives on a control default in src/Elementor/Widgets/, and this
 * file restricts itself to display, flex, grid, position, overflow, cursor and
 * transition — properties no control touches.
 *
 * Two table rules worth keeping in mind when editing:
 * — Row backgrounds are set on `td`, never `tr`. A `tr` background is painted
 *   over by its own cells and never appears.
 * — Decoration goes on `.ra-table-wrap`, never `.ra-table`. Safari ignores
 *   `overflow: hidden` on a table and a radius on one is dropped by spec.
 */

.ra-w {
	box-sizing: border-box;
	width: 100%;
}

.ra-w *,
.ra-w *::before,
.ra-w *::after {
	box-sizing: inherit;
}

.ra-w__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ra-w__title {
	margin: 0;
	min-width: 0;
}

.ra-w__meta {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ra-empty,
.ra-summary,
.ra-help {
	margin: 0;
}

.ra-help {
	margin-top: 4px;
}

.ra-summary {
	margin-bottom: 10px;
}

/* Fleet filter buttons ------------------------------------------------- */

.ra-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ra-filter {
	border: 0;
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ra-locked__text {
	margin: 0 0 12px;
}

/* Buttons -------------------------------------------------------------- */

.ra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ra-btn:disabled,
.ra-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.6;
}

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

/* Map ------------------------------------------------------------------ */

/*
 * Grid rather than flex, so the list's width can come from a custom property.
 * A flex-basis set by a control would still be in force once the media query
 * below stacks the two, where basis means height rather than width — and the
 * control's specificity means the media query could not take it back.
 */
.ra-map-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

.ra-map-layout--side {
	grid-template-columns: minmax(0, 1fr) var(--ra-list-width, 340px);
}

.ra-map {
	min-width: 0;
	/* Leaflet needs a positioning context and a painted area of its own. */
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.ra-map-layout--side .ra-alerts {
	/* Both needed for the scroll: a grid item will not shrink below its
	   content without min-height: 0. */
	min-height: 0;
	overflow-y: auto;
}

.ra-alerts {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ra-alert {
	display: block;
	width: 100%;
	text-align: left;
	min-width: 0;
	cursor: pointer;
	/* Longhand on purpose: the stripe's width and colour come from controls,
	   and a `border-left` shorthand here would reset both at parse time. */
	border-left-style: solid;
	transition: background-color 0.15s ease;
}

/*
 * Compact alerts: one line each, opening when pressed.
 *
 * A button rather than a div with a click handler, so it is reachable by
 * keyboard and announced as expandable without any of that being reinvented.
 * Buttons do not inherit typography, hence `font: inherit` — which is also why
 * no control sets type on this element. See add_summary_style_controls().
 */
.ra-alert__summary {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	min-width: 0;
}

.ra-alert__lead {
	flex: 1 1 auto;
	min-width: 0;
	/* One line, whatever the plate and the customer's name add up to. The
	   whole point of the collapsed row is that its height never varies. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ra-alert__when {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ra-alert__chevron {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.55;
	transition: transform 0.15s ease;
}

.ra-alert.is-open .ra-alert__chevron {
	transform: rotate(180deg);
}

.ra-alert__body[hidden] {
	display: none;
}

.ra-alert--compact .ra-alert__body {
	margin-top: 10px;
}

/* The summary already says which car and which customer, and carries the
   type badge. Repeating both immediately underneath is noise. */
.ra-alert--compact .ra-alert__who,
.ra-alert--compact .ra-alert__head .ra-badge {
	display: none;
}

.ra-alert__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ra-alert__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow-wrap: break-word;
}

.ra-alert__ref {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ra-alert__who {
	margin: 6px 0 0;
	overflow-wrap: break-word;
}

.ra-alert__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 6px 0 0;
}

.ra-alert__device,
.ra-alert__nolocation,
.ra-alert__ack {
	margin: 6px 0 0;
	overflow-wrap: break-word;
}

.ra-alert__photo {
	display: block;
	margin-top: 10px;
}

.ra-alert__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.ra-alert__note {
	margin: 8px 0 0;
	overflow-wrap: break-word;
}

/* Who you can reach ---------------------------------------------------- */

.ra-contacts {
	margin-top: 10px;
}

.ra-contacts__lead {
	display: block;
}

.ra-contacts__none {
	margin: 0;
}

.ra-contacts__list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.ra-contact {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
}

.ra-contact__number {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ra-contact__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.ra-alert__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ra-popup {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.ra-badge {
	display: inline-block;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Tables --------------------------------------------------------------- */

.ra-table-wrap {
	/* Clips the corners so the radius control has something to bite on.
	   Scrolling lives on the child, not here. */
	overflow: hidden;
}

.ra-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ra-table {
	width: 100%;
	/* `separate` rather than `collapse`: visually identical at zero spacing,
	   but it lets cell backgrounds and the wrapper's radius both work. */
	border-collapse: separate;
	border-spacing: 0;
}

.ra-table th,
.ra-table td {
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}

.ra-table th {
	white-space: nowrap;
}

.ra-col--actions,
.ra-col--status {
	white-space: nowrap;
	width: 1%;
}

.ra-table td.ra-empty {
	text-align: center;
}

.ra-device-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pager ---------------------------------------------------------------- */

.ra-pager {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.ra-pager__count {
	white-space: nowrap;
}

.ra-nowrap {
	white-space: nowrap;
}

/* Check-in form -------------------------------------------------------- */

.ra-form {
	display: grid;
	align-items: start;
}

.ra-field-row {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ra-field-row--full {
	grid-column: 1 / -1;
}

.ra-label {
	display: block;
	margin-bottom: 4px;
}

.ra-field {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ra-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

/* Type-to-filter car picker -------------------------------------------- */

.ra-combo {
	position: relative;
	min-width: 0;
}

.ra-combo__list {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ra-combo__list[hidden] {
	display: none;
}

.ra-combo__option {
	cursor: pointer;
	overflow-wrap: break-word;
}

.ra-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.ra-form__message:empty {
	display: none;
}

/* Statistic tiles ------------------------------------------------------ */

.ra-tiles {
	display: grid;
}

.ra-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ra-tile__value,
.ra-tile__label {
	display: block;
	overflow-wrap: break-word;
}

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

@media (max-width: 767px) {
	/* Side-by-side stops making sense long before the map is unusable, so the
	   list drops under it rather than being squeezed into a column. */
	.ra-map-layout--side {
		grid-template-columns: minmax(0, 1fr);
	}

	.ra-map-layout--side .ra-alerts {
		overflow-y: visible;
	}
}