:root {
	color-scheme: light;
	--bg: #f4f6fa;
	--surface: #ffffff;
	--fg: #0a0a0a;
	--muted: #5b6270;
	--ink: #0a0a0a;
	--ink-2: #1a1a1a;
	--brass: #1a6dff;
	--accent: #1a6dff;
	--border: #dde1e8;
	--danger: #b42318;
	--ok: #1f7a4d;
	--warn: #a15c00;
	--radius: 6px;
	--space: 1rem;
	--font: "Public Sans", "Segoe UI", Roboto, sans-serif;
	--display: "Archivo", "Arial Narrow", sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.shell {
	max-width: 42rem;
	margin: 0 auto;
	padding: calc(var(--space) * 3) var(--space);
}

h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	letter-spacing: -0.02em;
}

.lede {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.hint {
	margin: 0;
	color: var(--muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn-secondary {
	background: transparent;
	color: var(--fg);
	border-color: var(--border);
}

.card {
	padding: var(--space);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
}

.input,
.select,
.textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
}

.field {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.35rem;
	margin-bottom: var(--space);
}

.field > label {
	font-size: 0.875rem;
	color: var(--muted);
}

/*
 * 390px-safe, like .grid below. A grid with no column list gets one implicit
 * auto column, and an auto column is never narrower than its widest item's
 * min-content width. One nowrap scrolling strip (days, time slots) anywhere
 * inside an item therefore widened the whole column past the screen: the page
 * scrolled sideways instead of the strip scrolling on its own. minmax(0, 1fr)
 * caps the column at the container; the min-width rule keeps a child from
 * bringing the same floor back if an app redefines the columns. :where() adds
 * no specificity, so a min-width the app sets on a child still wins.
 */
.stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space);
}

:where(.field, .stack, .list) > * {
	min-width: 0;
}

.row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/*
 * 390px-safe. An unclamped minmax track overflows a 390px viewport once the
 * shell padding is subtracted, and nothing in the pipeline ever looked at a
 * phone-width layout, so every generated app inherited the horizontal scroll.
 * min() clamps the track to the container instead.
 */
.grid {
	display: grid;
	gap: var(--space);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 0.6rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.table th {
	font-size: 0.8125rem;
	color: var(--muted);
	font-weight: 600;
}

.empty {
	padding: calc(var(--space) * 2);
	text-align: center;
	color: var(--muted);
}

.empty-title {
	margin: 0 0 0.25rem;
	color: var(--fg);
	font-weight: 600;
}

/* Loading. Every fetch has one; without a primitive each app invented its own. */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: calc(var(--space) * 1.5);
	color: var(--muted);
}

.spinner {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: fab-spin 0.7s linear infinite;
}

@keyframes fab-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Placeholder for content whose shape is known before its data arrives. */
.skeleton {
	display: block;
	height: 1rem;
	border-radius: calc(var(--radius) / 2);
	background: linear-gradient(90deg, var(--border), transparent, var(--border));
	background-size: 200% 100%;
	animation: fab-shimmer 1.2s linear infinite;
}

@keyframes fab-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* Error strip: a failure the user can see and retry, never a silent no-op. */
.alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-left: 3px solid var(--muted);
	border-radius: var(--radius);
}

.alert-error {
	border-left-color: var(--danger);
	color: var(--danger);
}

.badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--muted);
}

/*
 * The scaffold had exactly one @media rule (prefers-color-scheme) and no width
 * breakpoint at all, so the shell was a 42rem column at every size.
 * Mobile-first stays the default; these only widen it.
 */
@media (min-width: 48rem) {
	.shell {
		max-width: 52rem;
		padding: calc(var(--space) * 3) calc(var(--space) * 1.5);
	}
}

@media (min-width: 64rem) {
	.shell {
		max-width: 64rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinner,
	.skeleton {
		animation: none;
	}
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- Dispatch app ---------- */
h1,
h2,
h3 {
	font-family: var(--display);
	letter-spacing: -0.01em;
}

h2 {
	margin: 0 0 1rem;
	font-size: 1.35rem;
}

.card {
	background: var(--surface);
}

.btn {
	min-height: 44px;
	background: var(--accent);
	font-weight: 600;
}

.btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.btn-block {
	width: 100%;
	justify-content: center;
}

.btn-ghost {
	background: transparent;
	color: #dfe4ec;
	border-color: rgba(255, 255, 255, 0.25);
	min-height: 40px;
}

.input,
.select,
.textarea {
	background: var(--surface);
	min-height: 44px;
}

.hint.small,
.small {
	font-size: 0.85rem;
}

.center {
	text-align: center;
	margin-top: -1rem;
	padding-bottom: 1rem;
}

.link-btn {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	color: var(--muted);
	font: inherit;
	font-size: 0.875rem;
	text-decoration: underline;
	cursor: pointer;
	min-height: 44px;
}

.link-btn:hover {
	color: var(--danger);
}

/* Login */
.login-wrap {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: var(--ink);
	background-image: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

.login {
	width: 100%;
	max-width: 24rem;
	padding: 2rem 1.5rem;
	border-top: 4px solid var(--brass);
}

.login h1 {
	font-size: 2.6rem;
	font-weight: 800;
}

/* Top bar */
.topbar {
	background: var(--ink);
	color: #f2f4f7;
	border-bottom: 3px solid var(--brass);
}

.topbar-inner {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0.85rem 1rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--brass);
}

.brand span {
	color: #fff;
}

.stats {
	justify-content: flex-start;
	gap: 1.75rem;
	padding-top: 1.25rem;
}

.stat {
	display: flex;
	flex-direction: column;
}

.stat-num {
	font-family: var(--display);
	font-weight: 800;
	font-size: 2.75rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.stat:first-child .stat-num {
	color: var(--brass);
}

.stat-label {
	font-size: 0.8rem;
	color: #aab3c2;
}

.tabs {
	justify-content: flex-start;
	gap: 0.25rem;
	padding-top: 1rem;
}

.tab {
	background: none;
	border: 0;
	color: #aab3c2;
	font: inherit;
	font-weight: 600;
	padding: 0.7rem 0.9rem;
	min-height: 44px;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
}

.tab.active {
	color: #fff;
	border-bottom-color: #fff;
}

.app .shell {
	padding-top: 1.5rem;
}

/* Toolbar + chips */
.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.chips {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.chip {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: 0.9rem;
	padding: 0.45rem 0.8rem;
	border-radius: 4px;
	min-height: 40px;
	cursor: pointer;
}

.chip.active {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

/* Forms */
.form-card {
	border-top: 3px solid var(--brass);
	scroll-margin-top: 1rem;
}

.form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 1rem;
}

@media (min-width: 40rem) {
	.form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.span-2 {
		grid-column: span 2;
	}
}

/* Sign-in roles */
.role-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.25rem;
	margin: 0.75rem 0 0.5rem;
	padding: 0.25rem;
	background: #eef0f4;
	border-radius: 10px;
}

.role-tab {
	border: 0;
	background: transparent;
	padding: 0.55rem 0.4rem;
	border-radius: 8px;
	font: inherit;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
}

.role-tab.active {
	background: var(--surface);
	color: var(--accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.role-badge {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid currentColor;
	opacity: 0.85;
	white-space: nowrap;
}

.team-driver {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0.75rem;
	display: grid;
	gap: 0.75rem;
}

.team-driver-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.link-text {
	word-break: break-all;
	font-weight: 600;
}

/* Customer confirmation */
.confirm-panel {
	display: grid;
	gap: 0.45rem;
	margin-top: 0.85rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #f7f8fa;
}

.confirm-panel.ready {
	background: #eef7f1;
	border-color: #9fd3b2;
}

.confirm-panel .hint {
	margin: 0;
}

.confirm-title {
	margin: 0;
	font-weight: 700;
}

.conf-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.25rem 1rem 3rem;
	display: grid;
	gap: 1rem;
}

.conf-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.conf-sheet {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	color: #14171c;
}

.conf-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background: #12161d;
	color: #fff;
	border-bottom: 4px solid var(--brass);
}

.conf-brand {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.conf-sub {
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.conf-code {
	display: grid;
	text-align: right;
}

.conf-code span {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.conf-code strong {
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
}

.conf-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border);
}

.conf-hero strong {
	display: block;
	font-size: 1.15rem;
}

.conf-label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #6a7383;
	margin-bottom: 0.15rem;
}

.conf-route {
	display: grid;
	gap: 0.85rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border);
}

.conf-stop {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.conf-stop p {
	margin: 0;
	font-weight: 600;
}

.conf-pin {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: #12161d;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.conf-pin.stop {
	background: #6a7383;
}

.conf-pin.end {
	background: var(--brass);
}

.conf-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 0.9rem 1.25rem;
	margin: 0;
	padding: 1.25rem 1.5rem;
}

.conf-details dt {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #6a7383;
}

.conf-details dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

.conf-total dd {
	font-size: 1.3rem;
	font-weight: 800;
}

.conf-foot {
	padding: 1rem 1.5rem;
	background: #f4f5f7;
	font-size: 0.9rem;
	border-top: 1px solid var(--border);
}

@media print {
	@page {
		margin: 12mm;
	}

	body {
		background: #fff !important;
	}

	.no-print {
		display: none !important;
	}

	.conf-wrap {
		padding: 0;
		max-width: none;
	}

	.conf-sheet {
		border: 0;
		border-radius: 0;
	}

	.conf-head,
	.conf-pin,
	.conf-foot {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* In-app dispatch */
.send.send-app {
	background: #111827;
	color: #fff;
	border-color: #111827;
	font-weight: 700;
}
.payout-line {
	flex-basis: 100%;
	margin: 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: #eff6ff;
	color: #1e3a8a;
	font-size: 0.88rem;
	font-weight: 600;
}
.collected-line {
	background: #eaf1ff;
	color: #0b4fcc;
}
.collect-pick {
	flex-wrap: wrap;
	gap: 8px;
}
.receipt-box {
	display: grid;
	gap: 6px;
}
.receipt-read {
	font-weight: 600;
	color: #0b4fcc;
}
.receipt-err {
	color: #b42318;
	font-weight: 600;
}
.receipt-check {
	flex-basis: 100%;
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-left: 4px solid var(--border);
	border-radius: 10px;
	background: #fff;
	font-size: 0.88rem;
}
.receipt-match {
	border-left-color: #12805c;
}
.receipt-mismatch {
	border-left-color: #b42318;
	background: #fff5f4;
}
.receipt-mismatch > strong {
	color: #b42318;
}
.receipt-figs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	margin: 0;
}
.receipt-figs dt {
	color: #5b6472;
}
.receipt-figs dd {
	margin: 0;
	font-weight: 600;
}
.receipt-text {
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 220px;
	overflow: auto;
	font-size: 0.8rem;
	background: #f4f6fa;
	padding: 8px;
	border-radius: 8px;
	margin: 6px 0 0;
}
.check-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}
.check-row input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--accent);
	flex-shrink: 0;
}
.need-receipt {
	color: #b42318;
	font-weight: 600;
}
.correct-box {
	display: grid;
	gap: 8px;
	margin-top: 4px;
}
.correct-form {
	display: grid;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #f7f9fd;
}
.correct-actions {
	flex-wrap: wrap;
	gap: 8px;
}
.corrected-note {
	margin: 0;
	color: var(--accent);
	font-weight: 600;
}
.cancel-panel,
.extras-box {
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--line, #e3e6ee);
	border-radius: 12px;
	background: #f8faff;
}
.extras-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}
.check-list {
	display: grid;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.check-list > li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--line, #e3e6ee);
	border-radius: 10px;
	background: #fff;
}
.check-issues {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.badge-ok {
	background: #e6f7ec;
	color: #18733a;
}
.badge-warn {
	background: #fff1dc;
	color: #9a5b00;
}
.btn-small {
	padding: 6px 10px;
	font-size: 0.85rem;
}
.week-paid {
	color: #18733a;
	font-weight: 600;
}
.rule-list {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 4px;
}
.wrap {
	flex-wrap: wrap;
}
.repeat-box {
	border: 1px solid var(--line, #e3e6ee);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 14px 0;
	display: grid;
	gap: 10px;
	min-width: 0;
}
.fold-list {
	display: grid;
	gap: 8px;
	margin: 12px 0;
	align-items: start;
}
@media (min-width: 720px) {
	.fold-list {
		grid-template-columns: 1fr 1fr;
	}
	.fold[open] {
		grid-column: 1 / -1;
	}
}
.fold {
	border: 1px solid var(--line, #e3e6ee);
	border-radius: 12px;
	background: #fff;
	min-width: 0;
}
.fold > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.92rem;
	list-style: none;
}
.fold > summary::-webkit-details-marker {
	display: none;
}
.fold > summary::after {
	content: "+";
	font-size: 1.2rem;
	color: var(--accent, #1a6dff);
	flex: none;
}
.fold[open] > summary::after {
	content: "−";
}
.fold > summary small {
	margin-left: auto;
	font-weight: 500;
	color: #6b7280;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.fold-body {
	padding: 0 14px 14px;
	display: grid;
	gap: 10px;
}
.fold-body.repeat-box {
	border: 0;
	margin: 0;
	padding-top: 0;
}
.repeat-box legend {
	font-weight: 700;
	padding: 0 6px;
}
.check-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.repeat-count {
	justify-self: start;
}
.cancel-edit-form {
	margin-top: 8px;
	align-items: flex-end;
}
.sign-name {
	font-weight: 700;
}
.setup-card {
	border: 2px solid var(--accent);
	border-radius: 14px;
	padding: 16px;
	background: #fff;
	display: grid;
	gap: 8px;
}
.setup-card.setup-denied {
	border-color: #d92d20;
}
.setup-title {
	font-size: 1.1rem;
	margin: 0;
}
.setup-steps {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 4px;
}
.noshow-form {
	display: grid;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border: 1px solid #f0c36d;
	background: #fffaf0;
	border-radius: 12px;
}
.noshow-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.noshow-photos img,
.noshow-thumb img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.noshow-thumb {
	position: relative;
}
.noshow-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 0;
	background: #111;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}
.noshow-note {
	margin: 4px 0;
	font-style: italic;
}
.cancel-info {
	display: grid;
	gap: 6px;
	padding: 12px;
	border-radius: 10px;
	background: #fff4f4;
	border: 1px solid #f3c2c2;
}
.tip-ask {
	display: grid;
	gap: 10px;
	flex-basis: 100%;
	padding: 12px;
	border-radius: 10px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}
.earn-figs dd.owes {
	color: #b91c1c;
}
.declined-note {
	margin: 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fef2f2;
	color: #991b1b;
	font-size: 0.9rem;
	font-weight: 600;
}
.new-run-banner {
	padding: 12px 14px;
	border-radius: 10px;
	background: #1a6dff;
	color: #fff;
	font-weight: 700;
	animation: run-pulse 1.6s ease-in-out 3;
}
@keyframes run-pulse {
	50% {
		box-shadow: 0 0 0 6px rgba(26, 109, 255, 0.3);
	}
}
.alert-on {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 10px;
	background: #fff;
}

/* Quick send fare */
.qs-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.qs-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.qs-pay {
	border: 0;
	padding: 0;
	margin: 0;
}
.qs-pay legend {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.qs-saved {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: #ecfdf3;
	color: #116b3a;
	font-size: 0.9rem;
}

/* Live location */
.loc-strip {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.7rem 0.9rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	font-size: 0.88rem;
}

.loc-dot {
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 0.3rem;
	border-radius: 50%;
	background: #9aa3b2;
}

.loc-on .loc-dot {
	background: #1e9e5a;
	box-shadow: 0 0 0 4px rgba(30, 158, 90, 0.18);
}

.loc-denied {
	background: #fdecea;
	border-color: #f2b8b5;
}

.loc-denied .loc-dot {
	background: #c62828;
}

.live-grid {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.live-card {
	display: grid;
	gap: 0.7rem;
}

.live-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.live-head h3 {
	margin: 0;
}

.live-badge {
	background: #e3f5ea;
	color: #146c3d;
}

.live-badge.stale {
	background: #f1f2f5;
	color: var(--muted);
}

.live-map {
	width: 100%;
	height: 220px;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.btn-ghost-dark {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--border);
}

.invite-row {
	flex-wrap: wrap;
}

/* Dispatch priority */
.dispatch-alert {
	display: grid;
	gap: 0.4rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius);
	background: #fff4e5;
	border: 1px solid #f0b45a;
	color: #6b3d00;
}

.dispatch-alert p {
	margin: 0;
}

.dispatch-alert .btn {
	justify-self: start;
}

.late-alert {
	display: grid;
	gap: 0.45rem;
	padding: 0.9rem 1rem;
	border-radius: var(--radius);
	background: #c62828;
	color: #fff;
	border: 2px solid #8e0000;
	animation: late-pulse 1.6s ease-in-out infinite;
}

.late-alert strong {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.late-alert .btn {
	justify-self: start;
	background: #fff;
	color: #a11d1d;
}

@keyframes late-pulse {
	50% { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
	.late-alert { animation: none; }
}

.trip.prio-late {
	border-left-color: #c62828;
	border-left-width: 6px;
	background: #fff5f5;
}

.prio-flag-late {
	background: #c62828;
	color: #fff;
}

.trip.prio-priority {
	border-left-color: #e65100;
}

.prio-flag-priority {
	background: #fff0e0;
	color: #9a3b00;
}

.alarm-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.alarm-muted {
	font-weight: 600;
}

.alarm-check {
	margin-bottom: 16px;
}
.alarm-check h2 {
	margin: 0 0 6px;
	font-size: 1.05rem;
}
.alarm-result {
	flex-basis: 100%;
}
.deleted-row {
	display: grid;
	gap: 2px;
}
.deleted-log .check-list {
	max-height: 420px;
	overflow-y: auto;
}
.form-save-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: #fff;
	padding: 12px 0;
	margin-bottom: -12px;
	border-top: 1px solid #e3e8f0;
	box-shadow: 0 -6px 12px rgba(10, 20, 40, 0.06);
}
.trip-search {
	display: grid;
	gap: 8px;
	margin-bottom: 12px;
}
.trip-search label {
	font-weight: 600;
}
.trip-search .chips {
	flex-wrap: wrap;
}
.search-count {
	margin: 0;
}
.hour-check {
	display: grid;
	gap: 4px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid #1a6dff;
	background: #eaf2ff;
	color: #0b2a66;
}
.hour-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.hour-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.trip.prio-urgent {
	border-left-color: #c62828;
}

.card-box {
	border: 1px solid #d6e2f5;
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	margin: 0.6rem 0;
	background: #f6f9ff;
}

.card-box summary {
	cursor: pointer;
	font-weight: 600;
	color: #0b4fcc;
}

.card-box[open] summary {
	margin-bottom: 0.5rem;
}

.card-box-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.5rem;
}

.dash-priority {
	border-left: 4px solid #7b3fc4;
}

.trip.prio-group {
	border-left-color: #7b3fc4;
}

.prio-flag-group {
	background: #f1e9fb;
	color: #5a2a96;
}

.trip.prio-tomorrow {
	border-left-color: #e08a00;
}

.prio-flag {
	display: block;
	padding: 0.3rem 0.85rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.prio-flag-urgent {
	background: #fdecea;
	color: #a11d1d;
}

.prio-flag-tomorrow {
	background: #fff4e5;
	color: #8a5100;
}

/* Trips */
.trip-list {
	display: grid;
	gap: 0.85rem;
}

.trip {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 5px solid var(--brass);
	border-radius: var(--radius);
	overflow: hidden;
}

.trip.status-dispatched {
	border-left-color: var(--accent);
}

.trip.status-confirmed {
	border-left-color: var(--ok);
}

.trip.status-completed,
.trip.status-cancelled {
	border-left-color: var(--border);
	opacity: 0.8;
}

.trip-when {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	padding: 0.85rem 1rem 0;
}

.trip-time {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.trip-date {
	font-weight: 600;
	color: var(--muted);
}

.trip-code {
	font-size: 0.8rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 44rem) {
	.trip {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
	.trip-when {
		flex-direction: column;
		gap: 0.3rem;
		padding: 1rem;
		background: #f6f7f9;
		border-right: 1px solid var(--border);
	}
}

.trip-body {
	padding: 0.85rem 1rem 0.5rem;
	display: grid;
	gap: 0.65rem;
	min-width: 0;
}

.trip-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.trip-head h3 {
	margin: 0;
	font-size: 1.2rem;
}

.status-select {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.35rem 0.5rem;
	min-height: 36px;
	border-radius: 4px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg);
}

.status-select.s-new {
	color: var(--warn);
	border-color: #e6c48f;
	background: #fff8ec;
}

.status-select.s-dispatched {
	color: var(--accent);
	border-color: #b5cde2;
	background: #eef5fb;
}

.status-select.s-confirmed,
.status-select.s-completed {
	color: var(--ok);
	border-color: #b6dcc7;
	background: #eef8f2;
}

.route {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.route li {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	overflow-wrap: anywhere;
}

.route-dot {
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: 2px solid var(--ink);
	transform: translateY(1px);
}

.route-dot.end {
	background: var(--ink);
	border-radius: 1px;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: 0.9rem;
	color: var(--muted);
}

.meta a {
	color: var(--accent);
}

.notes {
	margin: 0;
	padding: 0.5rem 0.7rem;
	background: #f6f7f9;
	border-radius: 4px;
	font-size: 0.92rem;
	overflow-wrap: anywhere;
}

.dispatch {
	display: grid;
	gap: 0.55rem;
	padding-top: 0.65rem;
	border-top: 1px dashed var(--border);
}

.dispatch .hint {
	margin: 0;
}

.driver-pick {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.driver-pick .select {
	max-width: 18rem;
	color: var(--fg);
}

.send-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
}

@media (min-width: 40rem) {
	.send-row {
		grid-template-columns: repeat(4, auto);
		justify-content: start;
	}
}

.send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.45rem 0.9rem;
	border-radius: 4px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	text-align: center;
}

.send-email {
	background: var(--ink-2);
}

.send-sms {
	background: var(--accent);
}

.send-wa {
	background: #187a4a;
}

.send-lr {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--brass);
}

.check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-size: 0.9rem;
	cursor: pointer;
}

.check input {
	width: 1.15rem;
	height: 1.15rem;
}

.send:disabled,
.send.disabled {
	background: #e7eaef;
	color: #8a93a2;
	cursor: not-allowed;
	pointer-events: none;
}

.send:not(.disabled):hover {
	filter: brightness(1.1);
}

.client-label {
	margin: 0.4rem 0 0;
	color: var(--muted);
	font-weight: 600;
}

.field-label {
	font-weight: 600;
	font-size: 0.9rem;
}

.type-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.type-toggle button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-height: 44px;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.type-toggle button small {
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--muted);
}

.type-toggle button.active {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.service-tag {
	font-weight: 600;
}

.service-tag.hourly {
	color: var(--accent);
}

.client-field {
	position: relative;
}

.suggest {
	position: absolute;
	top: calc(100% - 1.4rem);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.suggest button {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.suggest button:hover,
.suggest button:focus-visible {
	background: rgba(29, 92, 143, 0.08);
}

.suggest button span {
	color: var(--muted);
	font-size: 0.85rem;
}

.client-list {
	display: grid;
	gap: 0.6rem;
}

.client-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.client-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.client-info h3 {
	margin: 0;
	font-size: 1rem;
}

.fare-input {
	max-width: 10rem;
}

.earn-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.75rem;
}

.earn-head h2 {
	margin: 0;
}

.earn-date {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.hint.warn {
	color: #9a5b00;
}

.earn-totals {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.earn-totals .stat {
	display: flex;
	flex-direction: column;
	min-width: 8rem;
}

.earn-totals .stat-num {
	font-size: 1.3rem;
	font-weight: 700;
	color: inherit;
}

.earn-totals .stat-label {
	font-size: 0.8rem;
	color: var(--muted);
}

.earn-list {
	display: grid;
	gap: 0.75rem;
}

.earn-row {
	padding: 0.85rem;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.earn-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.earn-name h3 {
	margin: 0;
	font-size: 1rem;
}

.earn-figs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin: 0;
}

.earn-figs div {
	display: flex;
	flex-direction: column;
}

.earn-figs dt {
	font-size: 0.8rem;
	color: var(--muted);
}

.earn-figs dd {
	margin: 0.1rem 0;
	font-size: 1.2rem;
	font-weight: 700;
}

.pct-list {
	display: grid;
	gap: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--border);
}

.pct-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.pct-row label {
	flex: 1 1 10rem;
	font-weight: 600;
}

.pct-input {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.pct-input .input {
	width: 8.5rem;
}

.sent-log {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ok);
	font-weight: 600;
}

.trip-foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.trip-foot details {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.6rem 0;
}

.trip-foot summary {
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--muted);
}

.message {
	margin: 0.5rem 0 0;
	padding: 0.75rem;
	background: #f6f7f9;
	border-radius: 4px;
	font-family: var(--font);
	font-size: 0.875rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Drivers */
.driver {
	background: var(--surface);
}

.driver strong {
	margin-right: 0.5rem;
}

.driver-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.driver-contact a {
	color: var(--accent);
}

/* Logo */
.app-link-missing { border: 2px solid #d97706; background: #fffbeb; }
.app-link-row { flex-wrap: wrap; gap: 8px; }
.app-link-row .input { flex: 1 1 220px; min-width: 0; }
.show-pw { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 6px; font-weight: 500; }
.office-close { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line, #d6dbe4); border-radius: 12px; margin-top: 8px; }
.office-close-open { margin-top: 8px; }
.tip-breakdown { display: block; }
.pay-split { margin-top: 10px; padding: 12px 14px; border: 1px solid #dbe4f3; border-radius: 10px; background: #f6f9ff; font-size: 14px; }
.pay-split dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 8px 0 0; }
.pay-split dt { color: #475569; }
.pay-split dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pay-split .pay-split-total { font-weight: 700; color: #0f172a; border-top: 1px solid #dbe4f3; padding-top: 4px; }
.done-run { display: block; padding: 0; }
.done-run details > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.done-run details > summary::-webkit-details-marker { display: none; }
.done-run details > summary::after { content: "▾"; color: #64748b; margin-left: 4px; }
.done-run details[open] > summary::after { content: "▴"; }
.done-run-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.done-run-body { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; padding: 0 14px 14px; font-size: 14px; }
.done-run-body dt { color: #64748b; }
.done-run-body dd { margin: 0; overflow-wrap: anywhere; }
.done-run-pay { display: flex; flex-direction: column; gap: 2px; }
.earlier-runs { margin-top: 12px; }
.trip-sum { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--brass); border-radius: 8px; padding: 0.75rem 0.9rem; box-shadow: 0 1px 2px rgba(13, 17, 23, 0.06); }
.trip-sum:hover { border-color: #1a6dff; }
.trip-sum.status-new { border-left-color: #d97706; }
.trip-sum.status-completed, .trip-sum.status-cancelled { border-left-color: var(--border); opacity: 0.8; }
.trip-sum.prio-late, .trip-sum.prio-priority { border-left-color: #d92d20; background: #fff6f5; }
.trip-sum-when { display: flex; flex-direction: column; min-width: 4.6rem; font-variant-numeric: tabular-nums; }
.trip-sum-when strong { font-size: 1.05rem; }
.trip-sum-when span { font-size: 0.78rem; color: var(--muted); }
.trip-sum-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.trip-sum-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.trip-sum-route, .trip-sum-meta { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.trip-sum-route { color: inherit; }
.trip-sum-status { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: #eef2f7; }
.trip-sum-status.s-new { background: #fff4e5; color: #8a5100; }
.trip-sum-status.s-dispatched, .trip-sum-status.s-confirmed { background: #e8f0ff; color: #1a4fb8; }
.trip-sum-status.s-completed { background: #e7f6ec; color: #17663a; }
.trip-sum-status.s-cancelled { background: #f1f1f1; color: #666; }
.trip-sum-chev { font-size: 1.6rem; color: var(--muted); }
.trip-open-wrap { display: grid; gap: 0.4rem; }
.left-open { border-left: 5px solid #d97706; }
.left-open h3 { margin: 0 0 0.25rem; }
.left-open-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.left-open-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.left-open-info { min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; font-size: 0.9rem; }
.left-open-btn { padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.corrected-pay { margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-radius: 6px; background: #fff4e5; color: #6b3f00; font-size: 0.88rem; }
.trip-collapse { justify-self: start; font-size: 0.85rem; padding: 0.35rem 0.8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo-mark { flex: none; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.08em; color: #fff; }
.logo-word b { color: var(--brass); font-weight: 800; }
.logo-sub { font-family: var(--font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8d97a8; margin-top: 0.2rem; }
.login-logo { margin-bottom: 1.25rem; padding: 0.9rem 1rem; background: #000; border-radius: 8px; }
.conf-brandrow { display: flex; align-items: center; gap: 0.75rem; }
.conf-brand span { color: var(--brass); }

/* Sharper surfaces */
.topbar { background: #000; border-bottom: 3px solid #1a6dff; }
.card, .trip { border-radius: 8px; box-shadow: 0 1px 2px rgba(13, 17, 23, 0.06); }
.tab.active { border-bottom-color: var(--brass); }

/* Make the selected menu tab and filter impossible to miss */
.tab.active {
	background: #1a6dff;
	color: #fff;
	border-radius: 6px 6px 0 0;
	border-bottom-color: #fff;
	box-shadow: inset 0 -3px 0 #fff;
}
.tab:not(.active):hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.chip.active {
	background: #1a6dff;
	border-color: #1a6dff;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a6dff;
}
.chip.active::before { content: "✓ "; }
.chip:not(.active):hover { border-color: #1a6dff; color: #1a6dff; }
.quick-text { white-space: pre-wrap; }
.copy-booking { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line, #c9d3e6); border-radius: 10px; margin: 8px 0; }
.copy-booking-row { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-booking-btn { justify-self: start; }
.copy-booking-text { width: 100%; font-family: inherit; font-size: 0.9rem; white-space: pre-wrap; }
.qs-ai-row { align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.qs-ai-note { color: #1d4ed8; font-weight: 600; }
.books-block { display: grid; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--line, #e3e7ef); }
.books-label { font-size: 0.9rem; }
.books-list { margin: 0; display: grid; gap: 0.3rem; }
.books-list > div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.books-list dt { color: #5b6270; }
.books-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.books-net { padding-top: 0.35rem; border-top: 1px dashed #cfd6e3; font-weight: 700; }
.books-net dd { color: #1a6dff; font-size: 1.1rem; }

/* Driver summary */
.drv-summary { padding: 1rem; }
.drv-sum-title { margin: 0 0 0.75rem; font-size: 1.1rem; }
.drv-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.drv-sum-box { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: #f5f8ff; min-width: 0; }
.drv-sum-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.drv-sum-num { font-size: 1.5rem; color: #0b0f17; overflow-wrap: anywhere; }
.drv-sum-pay { font-size: 0.9rem; color: #1a6dff; font-weight: 600; }
.drv-sum-total { background: #1a6dff; border-color: #1a6dff; }
.drv-sum-total .drv-sum-label, .drv-sum-total .drv-sum-num, .drv-sum-total .drv-sum-pay { color: #fff; }

/* Calendar */
.cal { padding: 1rem; }
.cal-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: center; }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cal-arrow { font-size: 1.3rem; padding: 0.3rem 0.8rem; }
.cal-title { margin: 0 0 0 0.4rem; font-size: 1.1rem; font-family: var(--display); }
.cal-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); min-height: 40px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.9rem 0 0.25rem; font-size: 0.85rem; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-legend-item i, .cal-meta i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0.9rem; }
.cal-dow { display: none; }
.cal-day { border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; background: #fafbfc; min-width: 0; }
.cal-day.today { border-color: var(--brass); box-shadow: inset 0 3px 0 var(--brass); }
.cal-day.outside { opacity: 0.5; }
.cal-month .cal-day.empty-day { display: none; }
.cal-day-head { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.4rem; }
.cal-dname { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.cal-dnum { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.cal-count { margin-left: auto; font-size: 0.72rem; background: var(--ink); color: #fff; border-radius: 10px; padding: 0 0.45rem; }
.cal-items { display: flex; flex-direction: column; gap: 0.35rem; }
.cal-trip { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; min-width: 0; font: inherit;
	background: #fff; border: 1px solid var(--border); border-left: 4px solid; border-radius: 4px; padding: 0.35rem 0.5rem; cursor: pointer; }
.cal-trip:hover { background: #f3f5f8; }
.cal-trip.st-cancelled { opacity: 0.55; text-decoration: line-through; }
.cal-trip.st-completed { background: #f2f7f4; }
.cal-time { font-weight: 700; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.cal-pax { font-size: 0.85rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-route { font-size: 0.78rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-meta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--muted); }
.cal-more { background: none; border: 0; color: var(--accent); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: left; padding: 0.2rem 0; }
.cal-week .cal-day.empty-day .cal-items::after { content: "No rides"; font-size: 0.78rem; color: #a3abb8; }
@media (min-width: 56rem) {
	.cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.cal-week .cal-day { min-height: 12rem; }
	.cal-month { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.cal-month .cal-dow { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; padding: 0 0.25rem; }
	.cal-month .cal-day.empty-day { display: block; min-height: 5.5rem; }
	.cal-month .cal-day { min-height: 5.5rem; }
}

/* Every section tab visible at once, wrapping onto extra rows */
.tabs { flex-wrap: wrap; overflow: visible; row-gap: 0.15rem; }
.tab { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 40rem) {
		.tab { padding: 0.55rem 0.65rem; font-size: 0.92rem; }
}

/* Menu tabs in an even grid: same width, lined up in rows and columns */
.tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; }
.tabs .tab { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 56rem) {
	.tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
	.tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tabs .tab { padding: 0.55rem 0.3rem; font-size: 0.85rem; }
}
.grow { flex: 1 1 12rem; min-width: 0; }
.pearson-box { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed #d6dbe4; }
.pearson-box .hint { margin: 0.3rem 0 0; }
.airport-fee-box { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid #c9dafc; border-radius: 10px; background: #f3f7ff; }
.airport-fee-box .row { gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.airport-fee-box .input { max-width: 9rem; }
.airport-fee-box p { margin: 0.35rem 0 0; }
.driver-expenses { margin: 0.6rem 0 0; border: 1px solid #c9dafc; border-radius: 10px; background: #f3f7ff; }
.driver-expenses > summary { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; cursor: pointer; font-weight: 600; color: #0b4fcc; }
.driver-expenses > summary strong { color: var(--fg); }
.expense-list { display: grid; gap: 0.85rem; padding: 0 0.85rem 0.85rem; }
.expense-row { display: grid; gap: 0.35rem; min-width: 0; }
.expense-row > label { font-size: 0.9rem; font-weight: 600; }
.expense-input { display: flex; gap: 0.5rem; align-items: stretch; }
.expense-input .input { flex: 1 1 auto; min-width: 0; max-width: 12rem; }
.expense-row .hint { margin: 0; }
.expense-ok { margin: 0; color: #1b7a3a; }
.expense-err { margin: 0; color: #a11d1d; }
/* Driver: money he paid on a ride (Pearson airport fees, gas/water/snacks on big vehicles) */
.driver-expenses { margin: 0.75rem 0 0; border: 1px solid #c9dafc; border-radius: 10px; background: #f3f7ff; }
.driver-expenses > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; cursor: pointer; font-weight: 600; color: #0b4fcc; list-style: none; }
.driver-expenses > summary::-webkit-details-marker { display: none; }
.driver-expenses > summary::after { content: "▾"; color: #64748b; }
.driver-expenses[open] > summary::after { content: "▴"; }
.driver-expenses > summary strong { margin-left: auto; color: var(--fg); }
.done-run .driver-expenses { margin: 0 14px 14px; }
.expense-list { display: grid; gap: 0.85rem; padding: 0 0.85rem 0.85rem; }
.expense-row { display: grid; gap: 0.35rem; min-width: 0; }
.expense-row > label { font-size: 0.875rem; font-weight: 600; color: var(--fg); }
.expense-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: stretch; }
.expense-input .btn { min-height: 44px; }
.expense-row p { margin: 0; }
.expense-ok { color: #157347; }
.expense-err { color: #a11d1d; }
/* Office extras: label, box and note stacked and lined up in each column */
.extras-grid .driver-pick { display: grid; grid-template-rows: auto auto auto; align-items: start; gap: 0.3rem; min-width: 0; }
.extras-grid .driver-pick > span:first-child { font-weight: 600; color: var(--fg); }
.extras-grid .driver-pick .input { max-width: none; }
/* Line up labels, boxes and buttons across the app */
.field > label, .rate-row label, .driver-pick > span { text-align: left; }
.input, .select, .textarea, .btn { box-sizing: border-box; vertical-align: middle; }
.row { align-items: center; }
.row > .input, .row > .select { flex: 1 1 10rem; min-width: 0; }
.check-row { align-items: center; }
/* Boxes in one row sit on the same line even when a label wraps */
:where(.grid, .fee-grid, .rate-row, .extras-grid, .form-grid) > .field { align-content: end; margin-bottom: 0; }
:where(.grid, .fee-grid, .rate-row, .extras-grid, .form-grid) { align-items: end; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; line-height: 1.2; }
.row > .btn { flex: 0 0 auto; }
.input[type="number"], .money-input { text-align: right; font-variant-numeric: tabular-nums; }
details > summary { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; cursor: pointer; min-height: 44px; }
details > summary > :last-child:not(:first-child) { margin-left: auto; }
.card h2, .card h3 { text-align: left; }
dl { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: 0.3rem 0.75rem; align-items: baseline; }
dl > dt { color: var(--muted); }
dl > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.run-details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 0.75rem; margin: 0.5rem 0; }
.run-details > summary { font-weight: 600; }
.run-details[open] { padding-bottom: 0.6rem; }
.permit-row { display: grid; gap: 0.45rem; }
.permit-title { font-weight: 600; }
.permit-form { display: grid; gap: 0.4rem; }
.permit-form label { font-size: 0.875rem; color: var(--muted); }
.permit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.permit-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.permit-saved > span { flex: 1 1 8rem; min-width: 0; }
.permit-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.permit-office { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.add-permit { justify-self: start; }
.wx { display: grid; gap: 0.6rem; }
.role-link-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid #e5e7eb; }
.role-link-text { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 14rem; }
.role-link-text .link-text { overflow-wrap: anywhere; font-size: 0.85rem; }
.login-role-title { margin: 0.5rem 0 0; text-align: center; font-size: 1.15rem; }
.wx-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.wx-head h2 { margin: 0; }
.wx-now { display: flex; align-items: center; gap: 0.85rem; }
.wx-icon { font-size: 2.6rem; line-height: 1; }
.wx-now-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wx-temp { font-size: 1.8rem; line-height: 1.1; }
.wx-tip { margin: 0; padding: 0.6rem 0.75rem; border-radius: 10px; background: #fff4e0; color: #8a4b00; font-weight: 600; }
.wx-ok { margin: 0; padding: 0.6rem 0.75rem; border-radius: 10px; background: #e7f5ee; color: #1f7a4d; font-weight: 600; }
.wx-error { margin: 0; color: #b42318; }
.wx-toggle { justify-self: start; color: #1a6dff; font-weight: 600; }
.wx-week { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wx-day { display: grid; grid-template-columns: minmax(5.5rem, auto) 1.8rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid #dde1e8; font-size: 0.92rem; }
.wx-day:first-child { border-top: 0; }
.wx-day.warn .wx-day-desc { color: #8a4b00; font-weight: 600; }
.wx-day-name { font-weight: 600; }
.wx-day-icon { font-size: 1.25rem; text-align: center; }
.wx-day-desc { min-width: 0; overflow-wrap: anywhere; }
.wx-day-temp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-updated { margin: 0; }
.team-add { border: 1px solid var(--line, #dbe3ef); border-radius: 12px; padding: 0.75rem 1rem; }
.team-add-summary { cursor: pointer; font-weight: 700; color: #1d4ed8; list-style: none; }
.team-add-summary::-webkit-details-marker { display: none; }
.team-add[open] .team-add-summary { margin-bottom: 0.75rem; }
.drv-payday { display: grid; gap: 0.6rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line, #e2e8f0); }
.drv-payday-next { margin: 0; font-size: 0.95rem; }
.drv-payday-next strong { color: #1d4ed8; }
.payday-note { margin: 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #eef4ff; color: #0b2a66; font-size: 0.95rem; }
.team-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.team-summary {
	display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; width: 100%;
	background: none; border: 0; padding: 0.25rem 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.team-summary strong { flex: 1 1 8rem; min-width: 0; }
.team-pill { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: #f4f4f5; color: #52525b; }
.team-pill.on { background: #dbeafe; color: #1d4ed8; }
.team-chev { font-size: 0.75rem; color: #1d4ed8; }
.focus-back { align-self: flex-start; }
.ride-in-progress {
	display: flex; flex-direction: column; gap: 0.2rem; width: 100%; text-align: left; cursor: pointer;
	padding: 0.9rem 1rem; border: 0; border-radius: 12px; background: #1d4ed8; color: #fff; font: inherit;
}
.ride-in-progress span { font-size: 0.85rem; opacity: 0.9; }
.arrived-panel { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
.arrived-sign {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
	width: 100%; padding: 1.25rem 1rem; border: 3px solid #1d4ed8; border-radius: 14px;
	background: #fff; color: #0a0a0a; cursor: pointer; text-align: center;
}
.arrived-name {
	font-size: clamp(2.25rem, 11vw, 4.5rem); font-weight: 800; line-height: 1.05;
	text-transform: uppercase; overflow-wrap: anywhere;
}
.arrived-hint { font-size: 0.85rem; color: #1d4ed8; font-weight: 600; }
.arrived-sign.full {
	position: fixed; inset: 0; z-index: 1000; border: 0; border-radius: 0; padding: 1.5rem;
}
.arrived-sign.full .arrived-name { font-size: clamp(3rem, 18vw, 9rem); }
.arrived-map { display: block; width: 100%; height: 300px; min-height: 300px; border: 1px solid #d4d4d8; border-radius: 12px; background: #f4f4f5; }
.arrived-open-map { width: 100%; justify-content: center; text-align: center; }
.arrived-map-wait { text-align: center; margin: 0; }
.chips.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; width: 100%; }
.chips.filter-grid .chip { width: 100%; justify-content: center; text-align: center; }
.row.book-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem; width: 100%; }
.row.book-actions .btn { width: 100%; justify-content: center; }
.unpaid-pay { border-top: 4px solid #1a6dff; }
.unpaid-weeks { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.4rem; }
.unpaid-weeks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #e5e9f2; }
.unpaid-weeks li span { flex: 1 1 12rem; min-width: 0; }
.unpaid-weeks .owes, .badge.owes { color: #b42318; }
.unpaid-all { margin-top: 0.25rem; }
.msg-dispatch { gap: 0.5rem; flex-wrap: wrap; }
.msg-dispatch .btn { flex: 1 1 9rem; text-align: center; justify-content: center; }
.period-chips { flex-wrap: wrap; }
.period-pick { gap: 0.75rem; flex-wrap: wrap; }
.period-pick .field { flex: 1 1 9rem; min-width: 0; }
.period-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.period-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid #e3e8f2; border-radius: 10px; flex-wrap: wrap; }
.period-row > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.period-pay { text-align: right; align-items: flex-end; }
.period-pay .owes, .period-row .owes { color: #b42318; }
.call-dispatch { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 12px; background: #1d4ed8; color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25); }
.call-dispatch:hover { background: #1e40af; }
.call-dispatch:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.call-dispatch-text { display: flex; flex-direction: column; line-height: 1.25; }
.call-dispatch-text span { font-size: 0.9rem; opacity: 0.9; }
.driver-search { display: grid; gap: 0.4rem; }
.driver-search label { font-weight: 600; }
.search { max-width: 18rem; }

/* Today dashboard */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.dash-head h2 { margin: 0; font-family: var(--display); font-size: 1.8rem; letter-spacing: -0.01em; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 48rem) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 3px solid var(--ink); min-width: 0; }
.kpi-alert { border-top-color: var(--brass); }
.kpi-num { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-money { font-size: 1.3rem; }
.kpi-label { font-size: 0.78rem; color: var(--muted); }
.dash-card { background: var(--surface); }
.dash-card h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.dash-list, .dash-drivers, .clash-list, .fleet-list, .fleet-trips, .pay-list, .rank-list, .brand-chips { list-style: none; margin: 0; padding: 0; }
.dash-list li + li { border-top: 1px solid var(--border); }
.dash-row { width: 100%; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.15rem 0.75rem; align-items: center; padding: 0.6rem 0.2rem; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.dash-row:hover { background: #f6f7f9; }
.dash-time { font-weight: 700; font-variant-numeric: tabular-nums; grid-row: span 2; }
.dash-time small { display: block; font-weight: 500; color: var(--muted); font-size: 0.75rem; }
.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-main span { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-driver { font-size: 0.82rem; color: var(--muted); }
.step-badge { justify-self: start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 3px; background: #eef0f3; color: var(--ink); }
.step-badge.st-new { background: #fff3dc; color: var(--warn); }
.step-badge.st-completed { background: #e5f3ec; color: var(--ok); }
.step-badge.rs-on_way, .step-badge.rs-arrived, .step-badge.rs-onboard { background: #e3eef8; color: var(--accent); }
@media (min-width: 40rem) {
	.dash-row { grid-template-columns: 4.6rem minmax(0, 1fr) auto 9rem; }
	.dash-time { grid-row: auto; }
}
.dash-drivers li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.45rem 0; border-top: 1px solid var(--border); }
.dash-drivers li:first-child { border-top: 0; }
.dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #c3c9d3; display: inline-block; flex: 0 0 auto; }
.dot-on { background: var(--ok); }
.dot-busy { background: var(--accent); box-shadow: 0 0 0 3px rgba(26, 109, 255, 0.18); }
.clash-list { margin-top: 0.4rem; font-size: 0.9rem; }

/* Trip card additions */
.trip-brand { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1a6dff; margin-bottom: 0.2rem; }
.route-dot.stop { background: var(--brass); }
.ride-live { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0; font-weight: 600; color: var(--accent); font-size: 0.9rem; }
.card-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.extend { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.extend .chip { min-height: 34px; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.edit-box { border: 1px solid var(--border); border-left: 3px solid var(--brass); border-radius: var(--radius); padding: 0.9rem; margin-bottom: 0.8rem; background: #fafbfc; }
.stop-row { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.stop-row .input { flex: 1 1 auto; min-width: 0; }
.add-stop { justify-self: start; }
.paid-select.p-paid { color: var(--ok); font-weight: 600; }
.paid-select.p-unpaid { color: var(--danger); font-weight: 600; }
.paid-select.p-account { color: var(--accent); font-weight: 600; }

/* Driver ride steps */
.step-track { display: flex; gap: 0.25rem; width: 100%; flex-wrap: wrap; }
.step { flex: 1 1 5rem; font-size: 0.72rem; text-align: center; padding: 0.3rem 0.2rem; border-radius: 3px; background: #eef0f3; color: var(--muted); }
.step.done { background: var(--ink); color: #fff; }
.step-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.05rem; font-weight: 700; }
.nav-links { margin: 0.5rem 0; }
.nav-links .btn { text-decoration: none; }

/* Rates and company names */
.fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
@media (min-width: 48rem) { .fee-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.field-label { font-size: 0.875rem; color: var(--muted); }
.rate-list { display: grid; gap: 0.6rem; }
.rate-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem 0.75rem; margin: 0; background: var(--surface); min-width: 0; }
@media (min-width: 40rem) { .rate-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rate-row legend { font-weight: 700; padding: 0 0.3rem; font-size: 0.92rem; }
.rate-row label { display: grid; gap: 0.2rem; font-size: 0.78rem; color: var(--muted); min-width: 0; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.brand-chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); font-weight: 600; }

/* Fleet */
.fleet-list { display: grid; gap: 0.6rem; }
.fleet-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; background: var(--surface); }
.fleet-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.plate { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.4rem; border: 1.5px solid var(--ink); border-radius: 3px; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; }
.fleet-trips { margin-top: 0.4rem; font-size: 0.88rem; }

/* Payments */
.pick-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 0.75rem; background: var(--ink); color: #fff; border-radius: var(--radius); }
.pay-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem 0.6rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.pay-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.pay-main { display: flex; flex-direction: column; min-width: 0; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.pay-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-row .paid-select { grid-column: 2 / -1; width: auto; justify-self: start; }
@media (min-width: 40rem) {
	.pay-row { grid-template-columns: auto minmax(0, 1fr) auto 9rem; }
	.pay-row .paid-select { grid-column: auto; width: 100%; }
}

/* Reports */
.period-nav { display: flex; align-items: center; gap: 0.75rem; }
.bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.35rem; height: 11rem; align-items: end; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar { width: 100%; max-width: 2.6rem; background: linear-gradient(180deg, var(--brass), #0b4fcc); border-radius: 3px 3px 0 0; }
.bar-val { font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.bar-label { font-size: 0.66rem; color: var(--muted); margin-top: 0.25rem; white-space: nowrap; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 48rem) { .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report-grid .card { background: var(--surface); }
.report-grid h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.rank-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.rank-list li:first-child { border-top: 0; }
.statement-btn { margin-top: 0.6rem; }

/* Printable sheets: pay statements and invoices */
.print-overlay { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: #e4e7ec; }
.print-actions { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.7rem 1rem; background: var(--ink); color: #fff; font-weight: 600; }
.print-page { max-width: 52rem; margin: 1rem auto 3rem; padding: 0 0.75rem; }
.doc { background: #fff; padding: 1.5rem; border-radius: 4px; box-shadow: 0 2px 14px rgba(13, 17, 23, 0.12); color: #131a24; }
.doc .logo-word { color: var(--ink); }
.doc-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 3px solid var(--ink); }
.doc-company { margin: 0; font-family: var(--display); font-size: 1.5rem; }
.doc-meta { text-align: right; }
.doc-meta h2 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.3rem; }
.doc-meta p { margin: 0; font-size: 0.9rem; }
.doc-small { margin: 0.1rem 0 0; font-size: 0.78rem; color: #586274; }
.doc-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #586274; }
.doc-bill { display: flex; flex-direction: column; margin: 1rem 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 1rem 0; }
.doc-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #586274; border-bottom: 1px solid #c9ced6; padding: 0.4rem 0.3rem; }
.doc-table td { border-bottom: 1px solid #eceef2; padding: 0.5rem 0.3rem; vertical-align: top; overflow-wrap: anywhere; }
.doc-table .num { text-align: right; white-space: nowrap; }
.doc-totals { margin: 0 0 1rem auto; max-width: 20rem; }
.doc-totals div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; }
.doc-totals dt { color: #586274; }
.doc-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.doc-grand { border-top: 2px solid var(--ink); font-weight: 800; }
.doc-grand dt { color: var(--ink); }
.doc-sign { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 2.5rem; font-size: 0.8rem; color: #586274; }
.doc-sign span { border-top: 1px solid #586274; padding-top: 0.3rem; }
@media (max-width: 30rem) { .doc { padding: 1rem; } .doc-meta { text-align: left; } }
@media print {
	body.printing #root { display: none !important; }
	body.printing .print-overlay { position: static; overflow: visible; background: #fff; }
	body.printing .print-page { margin: 0; max-width: none; padding: 0; }
	body.printing .doc { box-shadow: none; padding: 0; }
	.doc-head, .doc-grand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Owner rule: every blue button reads in white only, including icons and inner text */
.btn:not(.btn-ghost):not(.btn-ghost-dark),
.btn:not(.btn-ghost):not(.btn-ghost-dark) *,
.btn:not(.btn-ghost):not(.btn-ghost-dark):hover,
.btn:not(.btn-ghost):not(.btn-ghost-dark):visited,
.tab.active, .tab.active *,
.chip.active, .chip.active *,
.ride-in-progress, .ride-in-progress *,
.call-dispatch, .call-dispatch *,
.new-run-banner, .new-run-banner * {
	color: #fff !important;
}
/* The white button on the red late alert is not blue, so it keeps its red text */
.late-alert .btn.btn, .late-alert .btn.btn * { color: #a11d1d !important; }