/*
================================================
The vehicle page at a glance (issue #671)
================================================

bmwDetails.xhtml used to draw every reading at the same weight: a card each for the address,
the altitude, "No fault codes" and "agrees", the tyres twice, a map of half of Europe. It is now
ordered by how often each part is looked at - the car's state and a line of status chips first,
the controls, the plan, today, the last drives and the month's charging after it, and the
details of the car last, one line each until one is opened.

A chip turns amber or red when something needs a look, and the detail behind it is then drawn
open under the car instead of waiting at the bottom of the page.

Everything is scoped under .bmw-glance so no other page changes. The same file in both modules.
*/

.bmw-glance {
	--bg-ink: #1b1f2a;
	--bg-muted: #5b6272;
	--bg-line: #e1e4ec;
	--bg-soft: #f4f5f9;
	--bg-blue: #1d5fd1;
	--bg-green: #2e8b57;
	--bg-green-ink: #1e6b3e;
	--bg-amber-ink: #8a4b06;
	--bg-red-ink: #a1231a;
	--bg-sun: #e8a317;
}

.bmw-glance .glance-card {
	background: #fff;
	border: 1px solid var(--bg-line);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 20px;
}

.bmw-glance .glance-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: var(--bg-ink);
}

.bmw-glance .glance-muted {
	color: var(--bg-muted);
	font-size: 13px;
}

.bmw-glance .glance-big {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bg-ink);
	line-height: 1.1;
}

.bmw-glance .glance-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* ── the car switcher ─────────────────────────────── */

.bmw-glance .glance-switch {
	display: inline-flex;
	border: 1px solid #cbd2e0;
	border-radius: 10px;
	overflow: hidden;
	vertical-align: middle;
}

.bmw-glance .glance-switch a {
	padding: 7px 16px;
	font-size: 14px;
	color: #3a4150;
	border-right: 1px solid var(--bg-line);
	background: #fff;
}

.bmw-glance .glance-switch a:last-child {
	border-right: 0;
}

.bmw-glance .glance-switch a.active {
	background: var(--bg-blue);
	color: #fff;
}

/* ── the banner: this car's own warnings from the plan ── */

.bmw-glance .glance-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	background: #fdf3e3;
	border: 1px solid #f2d29b;
	color: #6b3a04;
}

.bmw-glance .glance-banner.high {
	background: #fcebea;
	border-color: #f3c1bc;
	color: #7f1d16;
}

.bmw-glance .glance-banner .glance-date {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	font-weight: 600;
	white-space: nowrap;
}

.bmw-glance .glance-banner .glance-dismiss {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	padding: 0 4px;
	opacity: 0.6;
	cursor: pointer;
}

.bmw-glance .glance-banner .glance-dismiss:hover {
	opacity: 1;
}

/* ── the hero: photo, battery, plug and lock ─────── */

.bmw-glance .glance-hero {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 260px);
	gap: 32px;
	align-items: center;
}

.bmw-glance .glance-photo img {
	width: 100%;
	height: auto;
	max-height: 170px;
	object-fit: contain;
}

.bmw-glance .glance-soc {
	font-size: 52px;
}

.bmw-glance .glance-range {
	font-size: 22px;
	color: var(--bg-green-ink);
	margin-left: 12px;
}

.bmw-glance .glance-bar {
	position: relative;
	height: 14px;
	border-radius: 7px;
	background: #e6e9f0;
	margin: 14px 0 8px;
}

.bmw-glance .glance-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 7px;
	background: var(--bg-green);
}

.bmw-glance .glance-bar-mark {
	position: absolute;
	top: -6px;
	width: 2px;
	height: 26px;
	margin-left: -1px;
	background: var(--bg-ink);
}

.bmw-glance .glance-bar-mark.car {
	width: 3px;
	background: #b45309;
}

.bmw-glance .glance-state {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.bmw-glance .glance-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
	background: var(--bg-soft);
	color: #3a4150;
}

.bmw-glance .glance-icon.ok {
	background: #eaf6ef;
	color: var(--bg-green-ink);
}

.bmw-glance .glance-icon.warn {
	background: #fdf3e3;
	color: var(--bg-amber-ink);
}

/* 698: the fault codes are folded even when there are some, so a folded line can be red */
.bmw-glance .glance-icon.bad {
	background: #fcebea;
	color: var(--bg-red-ink);
}

.bmw-glance .glance-icon.info {
	background: #e8eefb;
	color: var(--bg-blue);
}

/* ── the chips ────────────────────────────────────── */

.bmw-glance .glance-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #eef0f4;
}

.bmw-glance .glance-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--bg-line);
	background: var(--bg-soft);
	color: #3a4150;
	text-decoration: none;
}

.bmw-glance a.glance-chip:hover {
	text-decoration: none;
	filter: brightness(0.97);
}

.bmw-glance .glance-chip.ok {
	background: #eaf6ef;
	border-color: #bfe3cc;
	color: var(--bg-green-ink);
}

.bmw-glance .glance-chip.warn {
	background: #fdf3e3;
	border-color: #f2d29b;
	color: var(--bg-amber-ink);
}

.bmw-glance .glance-chip.bad {
	background: #fcebea;
	border-color: #f3c1bc;
	color: var(--bg-red-ink);
}

/* ── an issue drawn open under the car ────────────── */

.bmw-glance .glance-card.issue-warn {
	border-color: #f2d29b;
}

.bmw-glance .glance-card.issue-bad {
	border-color: #f3c1bc;
}

/* ── the remote controls, one card ───────────────── */

.bmw-glance .glance-remote .goe-setting-row:last-child {
	border-bottom: 0;
}

.bmw-glance .glance-remote .glance-sub {
	background: #f7f8fb;
	border-radius: 10px;
	padding: 4px 14px;
	margin: 4px 0 8px;
}

/* ── the plan's week strip ───────────────────────── */

.bmw-glance .glance-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin-top: 16px;
}

.bmw-glance .glance-day {
	border: 1px solid var(--bg-line);
	border-radius: 10px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 78px;
}

.bmw-glance .glance-day.today {
	border: 2px solid var(--bg-blue);
}

.bmw-glance .glance-day-bar {
	height: 8px;
	border-radius: 4px;
	background: var(--bg-sun);
}

/* ── the calendar, one click away ────────────────── */

.bmw-glance details.glance-fold > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
}

.bmw-glance details.glance-fold > summary::-webkit-details-marker {
	display: none;
}

.bmw-glance details.glance-fold > summary::after {
	content: "\25BE";
	margin-left: auto;
	color: var(--bg-muted);
	transition: transform .15s;
}

.bmw-glance details.glance-fold[open] > summary::after {
	transform: rotate(180deg);
}

.bmw-glance .glance-details details.glance-fold {
	border-bottom: 1px solid #eef0f4;
}

.bmw-glance .glance-details details.glance-fold:last-child {
	border-bottom: 0;
}

.bmw-glance .glance-fold-body {
	padding: 0 0 18px 52px;
}

/* ── the tables ──────────────────────────────────── */

.bmw-glance .glance-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── narrow screens: one column ──────────────────── */

@media (max-width: 991px) {
	.bmw-glance .glance-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.bmw-glance .glance-photo {
		max-width: 260px;
	}

	.bmw-glance .glance-week {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bmw-glance .glance-fold-body {
		padding-left: 0;
	}
}

@media (max-width: 575px) {
	.bmw-glance .glance-card {
		padding: 16px;
	}

	.bmw-glance .glance-soc {
		font-size: 40px;
	}
}

/* ── the tyres (602), moved here from the page's inline style block ──
   The plan view of the car. Four wheels take the colour of their own state, so the picture says
   what the table says. Not under .bmw-glance: the panel is an include and keeps its own names. */

.tyre-plan { max-width: 190px; width: 100%; height: auto; }
.tyre-body { fill: #e6e9f3; stroke: #c7cddf; stroke-width: 2; }
.tyre-glass { fill: #cfd6e8; }
.tyre-mark { fill: #949bb5; font-size: 11px; letter-spacing: .1em; }
.tyre-fill-success { fill: #28a745; }
.tyre-fill-warning { fill: #e8710a; }
.tyre-fill-danger { fill: #dc3545; }
.tyre-fill-muted { fill: #adb5bd; }
.tyre-tile { border-left: 4px solid #dee2e6; padding-left: .75rem; }
.tyre-tile-success { border-left-color: #28a745; }
.tyre-tile-warning { border-left-color: #e8710a; }
.tyre-tile-danger { border-left-color: #dc3545; }
.tyre-tile-muted { border-left-color: #adb5bd; }

/* ── the folded calendar: by height, so FullCalendar still lays itself out ── */

.bmw-glance .glance-collapse {
	height: 0;
	overflow: hidden;
}

.bmw-glance .glance-collapse.open {
	height: auto;
	overflow: visible;
}