/*
Dashboard styles.

Written against the same custom properties the rest of the plugin uses, with a
fallback on every one, so the sections look deliberate under a theme that
defines none of them and take the site's own colours under a theme that does.

Logical properties throughout, so an Arabic or Urdu site needs no second
stylesheet. Every rule that positions something horizontally uses inline-start
and inline-end rather than left and right.
*/

.driveline-dashboard__inner {
	display: grid;
	gap: var(--driveline-space-l, 2rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48em) {
	.driveline-dashboard__inner {
		grid-template-areas:
			"header header"
			"nav body";
		grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
	}

	.driveline-dashboard__header {
		grid-area: header;
	}

	.driveline-dashboard__nav {
		grid-area: nav;
	}

	.driveline-dashboard__body {
		grid-area: body;
		min-width: 0;
	}
}

.driveline-dashboard__title {
	margin-block-end: 0.25em;
}

.driveline-dashboard__section-name {
	margin-block-start: 0;
	opacity: 0.75;
}

.driveline-dashboard__nav-heading {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	margin-block: var(--driveline-space-m, 1.5rem) 0.5rem;
	text-transform: uppercase;
}

.driveline-dashboard__nav-heading:first-child {
	margin-block-start: 0;
}

.driveline-dashboard__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.driveline-dashboard__nav-item a {
	border-inline-start: 3px solid transparent;
	display: block;
	padding-block: 0.4rem;
	padding-inline-start: 0.75rem;
	text-decoration: none;
}

.driveline-dashboard__nav-item a:hover,
.driveline-dashboard__nav-item a:focus {
	text-decoration: underline;
}

.driveline-dashboard__nav-item.is-current a {
	border-inline-start-color: currentColor;
	font-weight: 600;
}

.driveline-dashboard__lede,
.driveline-dashboard__note {
	opacity: 0.8;
}

.driveline-dashboard__note {
	font-size: 0.9375rem;
}

.driveline-dashboard__empty,
.driveline-dashboard__denied {
	border: 1px dashed currentColor;
	padding: var(--driveline-space-m, 1.5rem);
}

.driveline-dashboard__back {
	font-size: 0.9375rem;
}

.driveline-notice {
	border-inline-start: 4px solid currentColor;
	margin-block-end: var(--driveline-space-m, 1.5rem);
	padding: 0.75rem 1rem;
}

.driveline-notice p {
	margin: 0;
}

.driveline-notice--error {
	border-inline-start-color: var(--driveline-color-error, #b32d2e);
}

.driveline-notice--done {
	border-inline-start-color: var(--driveline-color-success, #1a7f37);
}

.driveline-table {
	border-collapse: collapse;
	inline-size: 100%;
	margin-block-end: var(--driveline-space-m, 1.5rem);
}

.driveline-table th,
.driveline-table td {
	border-block-end: 1px solid currentColor;
	padding: 0.6rem 0.5rem;
	text-align: start;
	vertical-align: top;
}

.driveline-table thead th {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 47.999em) {
	.driveline-table--bookings,
	.driveline-table--invoices,
	.driveline-table--documents,
	.driveline-table--fleet,
	.driveline-table--branches,
	.driveline-table--earnings,
	.driveline-table--requests {
		display: block;
	}

	.driveline-table--bookings thead,
	.driveline-table--invoices thead,
	.driveline-table--documents thead,
	.driveline-table--fleet thead,
	.driveline-table--branches thead,
	.driveline-table--earnings thead,
	.driveline-table--requests thead {
		clip: rect(1px, 1px, 1px, 1px);
		block-size: 1px;
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
	}

	.driveline-table--bookings tr,
	.driveline-table--invoices tr,
	.driveline-table--documents tr,
	.driveline-table--fleet tr,
	.driveline-table--branches tr,
	.driveline-table--earnings tr,
	.driveline-table--requests tr {
		border-block-end: 2px solid currentColor;
		display: block;
		margin-block-end: 1rem;
	}

	.driveline-table--bookings td,
	.driveline-table--bookings th,
	.driveline-table--invoices td,
	.driveline-table--invoices th,
	.driveline-table--documents td,
	.driveline-table--documents th,
	.driveline-table--fleet td,
	.driveline-table--fleet th,
	.driveline-table--branches td,
	.driveline-table--branches th,
	.driveline-table--earnings td,
	.driveline-table--earnings th,
	.driveline-table--requests td,
	.driveline-table--requests th {
		border-block-end: 0;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
	}

	.driveline-table [data-title]::before {
		content: attr(data-title);
		font-size: 0.8125rem;
		font-weight: 600;
		opacity: 0.7;
	}
}

.driveline-flag {
	border: 1px solid currentColor;
	border-radius: 999px;
	display: inline-block;
	font-size: 0.75rem;
	margin-inline-start: 0.5rem;
	padding: 0.05rem 0.5rem;
}

.driveline-detail {
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
	margin-block-end: var(--driveline-space-m, 1.5rem);
}

.driveline-detail dt {
	font-weight: 600;
}

.driveline-detail dd {
	margin: 0;
}

.driveline-panel {
	border: 1px solid currentColor;
	margin-block-end: var(--driveline-space-m, 1.5rem);
	padding: var(--driveline-space-m, 1.5rem);
}

.driveline-panel > :first-child {
	margin-block-start: 0;
}

.driveline-panel > :last-child {
	margin-block-end: 0;
}

.driveline-form {
	margin-block-end: var(--driveline-space-m, 1.5rem);
}

.driveline-form--inline {
	display: inline-block;
	margin-block-end: 0;
	margin-inline-end: 0.5rem;
}

.driveline-form__note {
	font-size: 0.9375rem;
	opacity: 0.8;
}

.driveline-field {
	display: grid;
	gap: 0.25rem;
	margin-block-end: 1rem;
	max-inline-size: 30rem;
}

.driveline-field--check {
	grid-template-columns: minmax(0, 1fr);
}

.driveline-field label {
	font-weight: 600;
}

.driveline-field input,
.driveline-field textarea {
	inline-size: 100%;
}

.driveline-field--check input {
	inline-size: auto;
	margin-inline-end: 0.5rem;
}

.driveline-field__hint {
	font-size: 0.875rem;
	opacity: 0.75;
}

.driveline-fieldset {
	border: 1px solid currentColor;
	margin-block-end: var(--driveline-space-m, 1.5rem);
	padding: var(--driveline-space-s, 1rem);
}

.driveline-fieldset legend {
	font-weight: 600;
	padding-inline: 0.4rem;
}

.driveline-cards {
	display: grid;
	gap: var(--driveline-space-m, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.driveline-card__title {
	font-size: 1.125rem;
	margin-block: 0.5rem;
}

.driveline-card__image img {
	block-size: auto;
	max-inline-size: 100%;
}

.driveline-calendar__nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-block-end: var(--driveline-space-s, 1rem);
}

.driveline-calendar__month {
	margin: 0;
}

/*
A month of day columns is wider than the column the account area gives it, so it
scrolls inside its own box rather than taking the page with it.

The two sizing properties are what keep that true wherever the box is dropped. A
flex or grid item's default minimum size is its own content, which is how a table
that is supposed to scroll ends up scrolling the whole document sideways instead;
these opt out of that before it can happen, rather than after somebody reports it.
*/
.driveline-calendar__scroll {
	max-inline-size: 100%;
	min-inline-size: 0;
	overflow-x: auto;
}

/*
Sized by its contents rather than stretched to fill, so a short month sits at its
natural width instead of spreading thirty-one columns across whatever space
happens to be there.
*/
.driveline-calendar__grid {
	inline-size: auto;
}

.driveline-calendar__grid th,
.driveline-calendar__grid td {
	padding: 0.3rem;
	white-space: nowrap;
}

.driveline-calendar__grid tbody th {
	max-inline-size: 16rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.driveline-calendar__cell {
	background: var(--driveline-calendar-free, transparent);
	min-inline-size: 1.4rem;
}

.driveline-calendar__cell--booked {
	background: var(--driveline-calendar-booked, #0f3057);
}

.driveline-calendar__cell--hold {
	background: var(--driveline-calendar-hold, #e8b64c);
}

.driveline-calendar__cell--blocked {
	background: var(--driveline-calendar-blocked, #6b7280);
}

.driveline-calendar__cell--maintenance {
	background: var(--driveline-calendar-maintenance, #9a3412);
}

.driveline-calendar__key {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin-block: var(--driveline-space-s, 1rem);
	padding: 0;
}

.driveline-calendar__swatch {
	border: 1px solid currentColor;
	display: inline-block;
	block-size: 1rem;
	inline-size: 1rem;
	margin-inline-end: 0.35rem;
	vertical-align: text-bottom;
}

.driveline-earnings__total {
	margin-block-end: var(--driveline-space-m, 1.5rem);
}

.driveline-earnings__amount {
	display: block;
	font-size: 2rem;
	font-weight: 700;
}

.driveline-earnings__caption {
	opacity: 0.75;
}

.driveline-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.driveline-review {
	border-block-end: 1px solid currentColor;
	margin-block-end: var(--driveline-space-m, 1.5rem);
	padding-block-end: var(--driveline-space-m, 1.5rem);
}

.driveline-review.is-held {
	border-inline-start: 4px solid currentColor;
	padding-inline-start: 1rem;
}

.driveline-review__vehicle {
	font-size: 1.0625rem;
	margin-block: 0 0.25rem;
}

.driveline-review__meta {
	font-size: 0.875rem;
	margin-block: 0 0.75rem;
	opacity: 0.8;
}

.driveline-review__body {
	margin-inline: 0;
}

.driveline-review__actions {
	margin-block-end: 0.75rem;
}

.driveline-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.driveline-pagination__count {
	margin: 0;
	opacity: 0.75;
}

.driveline-button {
	border: 1px solid currentColor;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	padding: 0.45rem 1rem;
	text-decoration: none;
}

.driveline-button--quiet {
	background: transparent;
	font-size: 0.9375rem;
	padding-block: 0.3rem;
}

.driveline-button--danger {
	border-color: var(--driveline-color-error, #b32d2e);
	color: var(--driveline-color-error, #b32d2e);
}

.driveline-button:hover,
.driveline-button:focus {
	text-decoration: underline;
}