/* Fleet Home — desk neutrals + Kijani green accent */

/* Kijani fleet accent tokens — the single source for indicator colours across
   the fleet desk UI. JS must reference var(--kf-*) instead of hardcoding hex. */
:root {
	--kf-green: #2e7d32;
	--kf-orange: #ef6c00;
	--kf-red: #c62828;
	--kf-yellow: #f9a825;
	--kf-blue: #1565c0;
	--kf-grey: #78909c;
}

.fleet-home {
	--fh-green: var(--kf-green);
	--fh-border: var(--border-color, #e0e0e0);
	--fh-muted: var(--text-muted, #6c757d);
	--fh-surface: var(--card-bg, #fff);
	--fh-hover: var(--bg-light-gray, rgba(127, 127, 127, 0.08));
	padding: 0.75rem 0.25rem 1.5rem;
}

.fleet-home-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--fh-border);
}

.fleet-home-title {
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: 1.35rem;
}

.fleet-home-subtitle {
	max-width: 40rem;
	line-height: 1.4;
}

.fleet-home-actions {
	margin-bottom: 1rem;
}

.fleet-home-actions-empty {
	padding: 0.55rem 0.75rem;
	border: 1px dashed var(--fh-border);
	border-radius: 8px;
	background: var(--fh-surface);
}

.fleet-home-list-empty {
	padding: 0.75rem 0.85rem;
	border: 1px dashed var(--fh-border);
	border-radius: 8px;
}

.fleet-home-section-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fh-muted);
	margin-bottom: 0.5rem;
}

.fleet-home-next-actions {
	margin-bottom: 1.25rem;
}

.fleet-home-action-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border: 1px solid var(--fh-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--fh-surface);
}

.fleet-home-action {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.85rem;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--fh-border);
}

.fleet-home-action:last-child {
	border-bottom: none;
}

.fleet-home-action:hover {
	background: var(--bg-light-gray, #f7f7f7);
	text-decoration: none;
}

.fleet-home-action-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.fleet-home-action-label {
	flex: 1;
}

.fleet-home-action-count {
	min-width: 1.5rem;
	text-align: center;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.fleet-home-card {
	height: 100%;
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-top: 3px solid var(--fh-green);
	border-radius: 6px;
	padding: 0.85rem 1rem;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
	min-width: 0;
	overflow-wrap: anywhere;
}

.fleet-home-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.fleet-home-card-label {
	font-size: 0.8rem;
	color: var(--fh-muted);
	margin-bottom: 0.25rem;
}

.fleet-home-card-value {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--text-color, #212121);
}

.fleet-home-card-hint {
	font-size: 0.72rem;
	color: var(--fh-muted);
	margin-top: 0.2rem;
}

.fleet-home-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.75rem;
	width: 100%;
	margin-bottom: 1.25rem;
}

.fleet-home-hero {
	margin-bottom: 1rem;
}

.fleet-home-hero-card {
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-radius: 8px;
	padding: 0.9rem 1rem;
}

.fleet-home-hero-q {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fleet-home-hero-summary {
	color: var(--fh-muted);
	margin-top: 0.25rem;
	font-size: 0.9rem;
}

.fleet-home-empty {
	border: 1px dashed var(--fh-border);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	color: var(--fh-muted);
	background: var(--fh-surface);
}

.fleet-home-work {
	margin-bottom: 1.25rem;
}

.fleet-home-work-card {
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-radius: 8px;
	padding: 0.85rem 1rem;
}

.fleet-home-work-split {
	display: grid;
	grid-template-columns: minmax(160px, 220px) 1fr;
	gap: 0.75rem;
}

.fleet-home-map-teaser {
	display: block;
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	text-decoration: none;
	color: inherit;
	min-height: 7rem;
}

.fleet-home-map-teaser:hover {
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.fleet-home-map-teaser-title {
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.fleet-home-map-teaser-stats {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--kf-green);
	margin-bottom: 0.35rem;
}

.fleet-home-work-row {
	flex-wrap: wrap;
	gap: 0.45rem;
}

.fleet-home-list-actions .btn {
	margin-right: 0.35rem;
}

@media (max-width: 768px) {
	.fleet-home-work-split {
		grid-template-columns: 1fr;
	}

	.fleet-home-action,
	.fleet-home-map-teaser,
	.fleet-home-work-card,
	.fleet-home-empty {
		min-height: 44px;
	}

	.ndugu-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 0.55rem;
	}
}

/* Shared responsive stat / summary cards (desk + portal) */
.ndugu-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.75rem;
	width: 100%;
}

.ndugu-stat-card {
	min-width: 0;
	background: var(--fh-surface, var(--card-bg, #fff));
	border: 1px solid var(--fh-border, var(--border-color, #e0e0e0));
	border-radius: 6px;
	padding: 0.75rem 0.9rem;
	overflow-wrap: anywhere;
}

.ndugu-stat-card .ndugu-stat-label,
.ndugu-stat-card .text-muted {
	font-size: 0.8rem;
	color: var(--fh-muted, var(--text-muted, #6c757d));
	margin-bottom: 0.2rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.ndugu-stat-card .ndugu-stat-value,
.ndugu-stat-card .fs-4 {
	font-size: clamp(1.15rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	word-break: break-word;
}

.ndugu-stat-card.is-green {
	background: #f1f8e9;
	border-color: #dcedc8;
}

.ndugu-stat-card.is-amber {
	background: #fff3e0;
	border-color: #ffe0b2;
}

.fleet-home-charts {
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}

.fleet-home-chart-card {
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-radius: 6px;
	padding: 0.75rem 0.85rem 0.5rem;
	height: 100%;
}

.fleet-home-chart-title {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.fleet-home-awareness {
	margin: 0.5rem 0 1.25rem;
}

.fleet-home-awareness-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.fleet-home-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fleet-home-chip {
	display: flex;
	flex-direction: column;
	min-width: 6.5rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--fh-border);
	border-left: 3px solid var(--fh-green);
	border-radius: 6px;
	background: var(--fh-surface);
	text-decoration: none;
	color: inherit;
}

.fleet-home-chip:hover {
	text-decoration: none;
	background: var(--bg-light-gray, #f7f7f7);
}

.fleet-home-chip-value {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

.fleet-home-chip-label {
	font-size: 0.72rem;
	color: var(--fh-muted);
}

.fleet-home-shortcuts {
	margin-bottom: 1.25rem;
}

.fleet-home-shortcut-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.fleet-home-list-card {
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-radius: 6px;
	overflow: hidden;
	height: 100%;
}

.fleet-home-list-head {
	padding: 0.65rem 0.85rem;
	font-weight: 600;
	border-bottom: 1px solid var(--fh-border);
	background: var(--bg-light-gray, #fafafa);
}

.fleet-home-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fleet-home-list li {
	padding: 0.55rem 0.85rem;
	border-bottom: 1px solid var(--fh-border);
}

.fleet-home-list li:last-child {
	border-bottom: none;
}

/* Tabbed status steps — underline chrome matching Frappe form tabs / dark desk. */
.kijani-stepper-wrap {
	padding: 2px 4px 0;
	margin: 0 0 8px;
	border-bottom: 1px solid var(--border-color, #3a3a3a);
}

.kijani-stepper {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow-x: auto;
}

.kijani-step {
	appearance: none;
	background: transparent;
	border: 0;
	position: relative;
	padding: 10px 16px 12px;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-muted, #9e9e9e);
	white-space: nowrap;
	cursor: default;
}

.kijani-step.is-done {
	color: var(--text-muted, #9e9e9e);
}

.kijani-step.is-active {
	color: var(--heading-color, var(--text-color, #fff));
	font-weight: 500;
}

.kijani-step.is-active::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 2px;
	background: var(--heading-color, var(--text-color, #fff));
	border-radius: 1px;
}

.kijani-stepper-halt {
	align-self: center;
	background: var(--kf-red, #c62828);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 11px;
	margin-right: 8px;
	white-space: nowrap;
}

.fleet-home-shortcut-row .btn {
	border-radius: 4px;
	font-size: 0.8rem;
	padding: 0.25rem 0.65rem;
}

.fleet-home-shortcut-row .btn-setup {
	border-color: var(--kf-blue);
	color: var(--kf-blue);
}

.fleet-home-action.is-setup .fleet-home-action-label {
	font-weight: 600;
}

/* ---- Form section stepper (desk wizard) — underline tabs ---- */
.kf-section-step-hidden {
	display: none !important;
}

.kf-form-stepper {
	margin: 0 0 0.85rem;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.kf-form-stepper-rail {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: thin;
	padding: 2px 4px 0;
	margin: 0 0 0.55rem;
	border-bottom: 1px solid var(--border-color, #3a3a3a);
	scroll-snap-type: x proximity;
}

.kf-form-step {
	appearance: none;
	display: inline-flex;
	align-items: center;
	position: relative;
	border: 0;
	background: transparent;
	padding: 10px 16px 12px;
	margin: 0;
	cursor: pointer;
	color: var(--text-muted, #9e9e9e);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.kf-form-step:hover {
	color: var(--heading-color, var(--text-color, inherit));
}

.kf-form-step-num {
	display: none;
}

.kf-form-step.is-done {
	color: var(--text-muted, #9e9e9e);
}

.kf-form-step.is-active {
	color: var(--heading-color, var(--text-color, #fff));
	font-weight: 500;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.kf-form-step.is-active::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 2px;
	background: var(--heading-color, var(--text-color, #fff));
	border-radius: 1px;
}

.kf-form-step-label {
	font-size: 13px;
	max-width: 11rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kf-form-stepper.is-compact .kf-form-step-label {
	display: none;
	max-width: 8rem;
}

.kf-form-stepper.is-compact .kf-form-step.is-active .kf-form-step-label,
.kf-form-stepper.is-compact .kf-form-step:hover .kf-form-step-label,
.kf-form-stepper.is-compact .kf-form-step:focus-visible .kf-form-step-label {
	display: inline;
}

.kf-form-stepper.is-compact .kf-form-step {
	padding: 10px 12px 12px;
}

.kf-form-step-sep {
	display: none;
}

.kf-form-stepper-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0 4px;
}

.kf-form-stepper-nav .btn {
	border-radius: 8px;
}

.kf-form-stepper-progress {
	font-size: 0.75rem;
	color: var(--text-muted, #6c7680);
	font-weight: 600;
	margin-right: auto;
}

/* Fleet sidebar — consistent icon column on every link (desk-wide) */
.body-sidebar[data-title="fleet"] .sidebar-item-icon,
.body-sidebar[data-title="Fleet"] .sidebar-item-icon {
	flex: 0 0 28px;
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.body-sidebar[data-title="fleet"] .sidebar-item-icon svg,
.body-sidebar[data-title="Fleet"] .sidebar-item-icon svg {
	width: 16px;
	height: 16px;
}

.body-sidebar[data-title="fleet"] .item-anchor,
.body-sidebar[data-title="Fleet"] .item-anchor {
	gap: 4px;
}

/* Workspace shortcut / widget cards stay usable on narrow desks */
.codex-editor .widget.shortcut-widget-box,
.workspace-sidebar-skeleton ~ .layout-main-section .widget.shortcut-widget-box,
[data-page-container="Workspace"] .widget.shortcut-widget-box {
	min-width: 0;
}

@media (max-width: 991px) {
	.codex-editor .ce-block .ce-block__content .widget.shortcut-widget-box,
	.workspace-page .widget.shortcut-widget-box {
		min-height: 44px;
	}
}

/* ---- Mobile / field form UX ---- */
@media (max-width: 768px) {
	.fleet-home-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.65rem;
	}

	.fleet-home-card {
		padding: 0.75rem 0.85rem;
	}

	.fleet-home-card-value {
		font-size: 1.45rem;
	}

	.fleet-home-chart-card,
	.fleet-home-list-card {
		min-width: 0;
	}

	.ndugu-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 0.55rem;
	}

	/* Bootstrap col-* cards inside Ndugu pages: never overflow the viewport */
	.fleet-home-cards > [class*="col-"],
	.fleet-home-charts > [class*="col-"],
	.fleet-home-lists > [class*="col-"],
	#stats > [class*="col-"] {
		min-width: 0;
	}

	.kf-form-stepper {
		position: sticky;
		top: 0;
		z-index: 20;
		margin: 0 -0.25rem 0.75rem;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
		background: var(--bg-color, var(--card-bg, #fff));
	}

	.kf-form-stepper-rail {
		padding: 2px 4px 0;
		margin-bottom: 0.45rem;
		-webkit-overflow-scrolling: touch;
	}

	.kf-form-step {
		min-height: 40px;
		padding: 10px 12px 12px;
	}

	.kf-form-stepper .kf-form-step-label {
		display: none;
	}
	.kf-form-stepper .kf-form-step.is-active .kf-form-step-label {
		display: inline;
		max-width: 9rem;
		font-size: 13px;
	}

	.kf-form-stepper-nav {
		gap: 0.4rem;
	}

	.kf-form-stepper-nav .btn {
		min-height: 44px;
		padding: 0.55rem 1rem;
		font-size: 14px;
		font-weight: 600;
		border-radius: 10px;
		flex: 1 1 auto;
	}

	.kf-form-stepper-nav .kf-step-toggle {
		display: none;
	}

	.kf-form-stepper-nav .kf-step-next {
		flex: 1.4 1 auto;
	}

	/* Desk form controls — larger tap targets */
	.form-layout .frappe-control .form-control,
	.form-layout .frappe-control .input-with-feedback,
	.form-layout .frappe-control textarea.form-control {
		min-height: 44px;
		font-size: 16px; /* avoid iOS zoom */
	}

	.form-layout .frappe-control .control-label,
	.form-layout .frappe-control label {
		font-size: 13px;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	.form-layout .btn.btn-primary.primary-action,
	.page-head .btn-primary,
	.standard-actions .btn-primary {
		min-height: 44px;
		font-size: 15px;
		font-weight: 600;
	}

	/* Hide low-value chrome on phones for request forms */
	[data-doctype="Fleet Request"] .form-dashboard,
	[data-doctype="Transport Booking"] .form-dashboard {
		display: none;
	}
}

/* Geolocation helper button on desk */
.kf-geo-btn {
	margin-top: 0.35rem;
}
.kf-geo-btn .btn {
	min-height: 40px;
}
.kf-field-hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 12px;
	color: var(--text-muted, #6c7680);
}

/* ---- Shared pills / insights kit ---- */
.ndugu-section-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted, #6c757d);
	margin-bottom: 0.45rem;
}

.ndugu-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid var(--kf-green, #2e7d32);
	color: var(--kf-green, #1b5e20);
	background: #fff;
	white-space: nowrap;
}
.ndugu-pill:hover { text-decoration: none; }
.ndugu-pill.is-sm { font-size: 0.7rem; padding: 0.1rem 0.55rem; }
.ndugu-pill-muted {
	border-color: #cfd8dc;
	color: #78909c;
	background: #f7f7f7;
	letter-spacing: 0.04em;
}
.ndugu-pill-green { background: #e8f5e9; }
.ndugu-pill-outline { color: #1b5e20; }
.ndugu-pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.85rem; }

.ndugu-rank {
	display: inline-flex;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	background: #90a4ae;
}
.ndugu-rank-gold { background: #c9a227; }
.ndugu-rank-silver { background: #90a4ae; }
.ndugu-rank-bronze { background: #a1887f; }

.ndugu-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 0.7rem;
	border: 2px solid #fff;
	flex-shrink: 0;
	line-height: 1;
}
.ndugu-avatar-stack {
	display: inline-flex;
	align-items: center;
}
.ndugu-avatar-stack .ndugu-avatar { margin-left: -6px; }
.ndugu-avatar-stack .ndugu-avatar:first-child { margin-left: 0; }

.ndugu-insight {
	background: #f5f5f5;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 10px;
	padding: 0.85rem 1rem 0.75rem;
	margin-bottom: 1rem;
}
.ndugu-insight-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.ndugu-insight-title { font-weight: 600; }
.ndugu-insight-bullets { margin: 0 0 0.65rem 1.1rem; padding: 0; color: #37474f; }
.ndugu-callout {
	background: #eceff1;
	border-radius: 8px;
	padding: 0.65rem 0.8rem;
	border-left: 4px solid var(--kf-green, #2e7d32);
	margin-bottom: 0.5rem;
}
.ndugu-callout-title { font-weight: 700; }
.ndugu-callout-body { color: #607d8b; font-size: 0.9rem; }

.ndugu-metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: 0.65rem;
	margin-bottom: 1rem;
}
.ndugu-metric-card {
	background: #fff;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
	padding: 0.7rem 0.8rem;
}
.ndugu-metric-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #90a4ae;
	font-weight: 600;
}
.ndugu-metric-value { font-size: 1.45rem; font-weight: 700; color: #1565c0; line-height: 1.2; }
.ndugu-metric-footer { font-size: 0.75rem; color: #90a4ae; }

.ndugu-nudges {
	background: #fff;
	border: 1px solid var(--border-color, #e0e0e0);
	border-left: 4px solid var(--kf-orange, #ef6c00);
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
	margin-bottom: 1rem;
}
.ndugu-nudges-title {
	font-weight: 700;
	color: #455a64;
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ndugu-nudge-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
	padding: 0.4rem 0;
	border-bottom: 1px solid #f0f0f0;
	min-height: 2.5rem;
}
.ndugu-nudge-row:last-child { border-bottom: none; }
.ndugu-nudge-row:hover { text-decoration: none; background: #fafafa; }
.ndugu-nudge-count {
	font-weight: 700;
	min-width: 1.6rem;
	text-align: center;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--kf-orange, #ef6c00);
	color: #fff;
	font-size: 0.75rem;
}
.ndugu-nudge-row.is-high .ndugu-nudge-count { background: var(--kf-red, #c62828); }
.ndugu-nudge-row.is-low .ndugu-nudge-count { background: var(--kf-blue, #1565c0); }

.ndugu-score { margin-bottom: 1.1rem; }
.ndugu-score-value { font-size: 1.75rem; font-weight: 700; color: var(--kf-green, #2e7d32); }
.ndugu-score-bar {
	height: 10px;
	background: #eceff1;
	border-radius: 999px;
	overflow: hidden;
	margin: 0.35rem 0;
}
.ndugu-score-bar > span {
	display: block;
	height: 100%;
	background: var(--kf-green, #2e7d32);
}
.ndugu-score-peer, .ndugu-score-formula { font-size: 0.8rem; color: #78909c; }
.ndugu-score-formula { font-family: ui-monospace, monospace; margin: 0.25rem 0 0.5rem; }
.ndugu-score-row {
	display: grid;
	grid-template-columns: 11rem 1fr 3rem;
	gap: 0.5rem;
	align-items: center;
	margin: 0.25rem 0;
	font-size: 0.85rem;
}
.ndugu-score-row-bar { height: 6px; background: #eceff1; border-radius: 999px; overflow: hidden; }
.ndugu-score-row-bar > span { display: block; height: 100%; background: #c9a227; }
.ndugu-score-row-pts { color: #c62828; font-weight: 700; text-align: right; }

.ndugu-badge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.65rem;
	margin-bottom: 1rem;
}
.ndugu-badge-card {
	border: 1px solid var(--kf-green, #2e7d32);
	border-radius: 8px;
	padding: 0.7rem 0.8rem;
	background: #fff;
}
.ndugu-badge-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--kf-green, #2e7d32);
	margin-bottom: 0.25rem;
}
.ndugu-badge-metric { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem; }
.ndugu-badge-blurb { font-size: 0.8rem; color: #607d8b; margin-top: 0.35rem; }
.ndugu-badge-peer {
	margin-top: 0.45rem;
	background: #e8f5e9;
	border-radius: 6px;
	padding: 0.35rem 0.45rem;
	font-size: 0.75rem;
}

.ndugu-timeline {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding: 0.5rem 0 0.85rem;
	margin-bottom: 1rem;
}
.ndugu-timeline-item { min-width: 11rem; position: relative; padding-top: 0.7rem; }
.ndugu-timeline-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--kf-green, #2e7d32);
	position: absolute; top: 0; left: 0.85rem;
}
.ndugu-timeline-card {
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
	padding: 0.55rem 0.65rem;
	background: #fff;
}
.ndugu-timeline-date { font-size: 0.75rem; color: #90a4ae; }
.ndugu-timeline-title { font-weight: 700; }
.ndugu-timeline-ref, .ndugu-timeline-meta { font-size: 0.75rem; color: #78909c; }

.ndugu-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.ndugu-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ndugu-table th {
	text-align: left;
	background: #eceff1;
	padding: 0.45rem 0.6rem;
	font-weight: 600;
}
.ndugu-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid #eee; }

.ndugu-hub { margin-bottom: 1rem; }
.ndugu-hub h5 { color: var(--kf-green, #2e7d32); font-size: 0.95rem; margin: 0.75rem 0 0.35rem; }
.ndugu-hub-list { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }

.fleet-home-shortcut-row .btn { position: relative; }
.fleet-home-shortcut-count {
	display: inline-flex;
	min-width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.35rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--kf-green, #2e7d32);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	align-items: center;
	justify-content: center;
}

.ndugu-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.85rem;
}
.ndugu-controls .btn-primary {
	background: var(--kf-green, #2e7d32);
	border-color: var(--kf-green, #2e7d32);
	border-radius: 999px;
}

.ndugu-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.65rem;
}
.ndugu-filter-bar input, .ndugu-filter-bar select {
	min-height: 34px;
	border-radius: 8px;
}

@media (max-width: 768px) {
	.ndugu-score-row { grid-template-columns: 1fr 2.5rem; }
	.ndugu-score-row-bar { display: none; }
	.fleet-home-header { flex-direction: column; gap: 0.5rem; }
	.fleet-home-meta { align-self: flex-start; }
	.ndugu-nudge-row { min-height: 44px; }
	.ndugu-controls { flex-wrap: wrap; }
	.ndugu-controls .btn { min-height: 44px; }
}

.kf-field-hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 12px;
	color: var(--text-muted, #6c7680);
}

.fleet-home-skel-row {
	height: 56px;
	border-radius: 8px;
	margin-bottom: 0.65rem;
	background: linear-gradient(90deg, var(--fh-hover), var(--fh-surface), var(--fh-hover));
	background-size: 200% 100%;
	animation: fleet-home-shimmer 1.2s ease-in-out infinite;
}

@keyframes fleet-home-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.fleet-home-awareness-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	gap: 0.75rem;
}

.fleet-home-map {
	margin: 0 0 1.25rem;
}

.fleet-home-map-card {
	background: var(--fh-surface);
	border: 1px solid var(--fh-border);
	border-radius: 8px;
	padding: 0.75rem 0.85rem 0.85rem;
}

.fleet-home-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

.fleet-home-map-canvas {
	height: 280px;
	min-height: 280px;
	border: 1px solid var(--fh-border);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}
.fleet-home-map-canvas.mapboxgl-map,
.fleet-home-map-canvas .mapboxgl-canvas-container,
.fleet-home-map-canvas .mapboxgl-canvas {
	width: 100% !important;
	height: 100% !important;
}

.fleet-home-map-empty {
	margin-top: 0.45rem;
}

.fmdot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: middle;
	background: var(--kf-green);
}

.fmdot.is-fresh { background: var(--kf-green); }
.fmdot.is-stale { background: var(--kf-red); }
.fmdot.is-none { background: var(--kf-grey); }
.fmdot.is-trail { background: var(--kf-blue); }
.fmdot.is-route { background: #5c6bc0; }

.fleet-map-wrap {
	padding: 0.15rem 0.15rem 1rem;
}

.fleet-map-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}

.fleet-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-left: auto;
	align-items: center;
}

.fleet-map-routes-label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.fleet-map-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid var(--border-color, #cfd8dc);
	border-top-color: var(--kf-blue);
	border-radius: 50%;
	animation: fleet-map-spin 0.7s linear infinite;
	flex: 0 0 auto;
}

.fleet-map-spinner[hidden] {
	display: none !important;
}

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

.fleet-map-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0.35rem 0 0.75rem;
}

.fleet-map-search {
	max-width: 22rem;
	min-height: 36px;
}

.fleet-map-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.fleet-map-chip {
	border: 1px solid var(--border-color, #e0e0e0);
	background: var(--card-bg, var(--fg-color, #fff));
	color: inherit;
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	min-height: 32px;
	cursor: pointer;
	font-size: 0.82rem;
}

.fleet-map-chip:hover {
	background: var(--bg-light-gray, rgba(127, 127, 127, 0.08));
}

.fleet-map-chip.is-active {
	background: color-mix(in srgb, var(--kf-blue) 14%, transparent);
	border-color: var(--kf-blue);
	color: var(--kf-blue);
	font-weight: 600;
}

.fleet-map-chip:focus-visible {
	outline: 2px solid var(--kf-blue);
	outline-offset: 2px;
}

.fleet-map-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: end;
	margin-bottom: 8px;
}

.fleet-map-field {
	min-width: 190px;
}

.fleet-map-filters .frappe-control {
	margin-bottom: 0;
}

.fleet-map-body {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
}

.fleet-map-canvas-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.fleet-map-canvas {
	height: 70vh;
	min-height: 420px;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
	overflow: hidden;
}

.fleet-map-canvas .leaflet-container,
.fleet-home-map-canvas .leaflet-container {
	height: 100%;
	width: 100%;
	border-radius: 8px;
}

.fleet-map-canvas .leaflet-popup-content {
	font-size: 12px;
}

.fleet-map-canvas a,
.fleet-home-map-canvas a {
	color: var(--kf-blue);
}

.fleet-map-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--card-bg, #fff) 88%, transparent);
	border-radius: 8px;
	z-index: 500;
	pointer-events: none;
}

.fleet-map-empty a {
	pointer-events: auto;
}

.fleet-map-empty[hidden] {
	display: none !important;
}

.fleet-map-empty-title {
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.fleet-map-list-card {
	width: 280px;
	flex: 0 0 280px;
	max-height: 70vh;
	overflow: auto;
	background: var(--card-bg, var(--fg-color, #fff));
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
}

.fleet-map-list-head {
	padding: 0.65rem 0.75rem;
	font-weight: 600;
	border-bottom: 1px solid var(--border-color, #e0e0e0);
	background: var(--bg-light-gray, var(--subtle-fg, #fafafa));
	position: sticky;
	top: 0;
	z-index: 1;
}

.fleet-map-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fleet-map-list-item {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.55rem 0.7rem;
	cursor: pointer;
	min-height: 44px;
	border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.fleet-map-list-item:last-child {
	border-bottom: none;
}

.fleet-map-list-item:hover {
	background: var(--bg-light-gray, rgba(127, 127, 127, 0.08));
}

.fleet-map-list-item.is-active {
	background: color-mix(in srgb, var(--kf-blue) 12%, transparent);
}

.fleet-map-list-title {
	font-weight: 600;
	font-size: 0.85rem;
}

.fleet-map-list-empty {
	padding: 0.75rem;
}

.fleet-map-pill {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 600;
	background: var(--bg-light-gray, rgba(127, 127, 127, 0.12));
	color: var(--text-muted, #6c7680);
	vertical-align: middle;
}

.fleet-map-pill.is-fresh {
	background: color-mix(in srgb, var(--kf-green) 18%, transparent);
	color: var(--kf-green);
}

.fleet-map-pill.is-stale {
	background: color-mix(in srgb, var(--kf-red) 18%, transparent);
	color: var(--kf-red);
}

@media (max-width: 768px) {
	.fleet-home-map-canvas {
		height: 220px;
		min-height: 220px;
	}

	.fleet-map-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.fleet-map-search {
		max-width: none;
	}

	.fleet-map-legend {
		margin-left: 0;
	}

	.fleet-map-body {
		flex-direction: column;
	}

	.fleet-map-list-card {
		width: 100%;
		flex: 1 1 auto;
		max-height: 240px;
	}

	.fleet-map-canvas {
		min-height: 320px;
		height: 50vh;
	}

	.fleet-map-chip,
	.fleet-map-search {
		min-height: 44px;
	}
}

/* ---- Process rail (Home / portal / map story) ---- */
.kf-process-rail {
	display: flex;
	align-items: stretch;
	gap: 0.35rem;
	overflow-x: auto;
	scrollbar-width: thin;
	margin: 0 0 1rem;
	padding: 0.15rem 0;
	scroll-snap-type: x proximity;
}

.kf-process-stage {
	display: flex;
	flex-direction: column;
	min-width: 5.5rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border-color, #e0e0e0);
	border-left: 3px solid var(--kf-grey, #78909c);
	border-radius: 8px;
	background: var(--card-bg, #fff);
	text-decoration: none;
	color: inherit;
	scroll-snap-align: start;
	flex: 0 0 auto;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

a.kf-process-stage:hover {
	text-decoration: none;
	background: var(--bg-light-gray, #f7f7f7);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.kf-process-stage.is-active {
	border-left-color: var(--kf-blue, #1565c0);
	background: color-mix(in srgb, var(--kf-blue, #1565c0) 8%, transparent);
}

.kf-process-stage.is-done {
	border-left-color: var(--kf-green, #2e7d32);
}

.kf-process-stage-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted, #6c757d);
	margin-bottom: 0.15rem;
}

.kf-process-stage-count {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--text-color, #212121);
}

.kf-process-stage-hint {
	font-size: 0.7rem;
	color: var(--text-muted, #6c757d);
	margin-top: 0.1rem;
}

.fleet-home-process {
	margin-bottom: 0.5rem;
}

/* ---- Proof chips ---- */
.kf-proof-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.3;
	border: 1px solid transparent;
	margin: 0.1rem 0.2rem 0.1rem 0;
	white-space: nowrap;
}

.kf-proof-chip.is-pass {
	background: color-mix(in srgb, var(--kf-green, #2e7d32) 14%, transparent);
	color: var(--kf-green, #2e7d32);
	border-color: color-mix(in srgb, var(--kf-green, #2e7d32) 35%, transparent);
}

.kf-proof-chip.is-fail {
	background: color-mix(in srgb, var(--kf-red, #c62828) 12%, transparent);
	color: var(--kf-red, #c62828);
	border-color: color-mix(in srgb, var(--kf-red, #c62828) 35%, transparent);
}

.kf-proof-chip.is-warn {
	background: color-mix(in srgb, var(--kf-orange, #ef6c00) 12%, transparent);
	color: var(--kf-orange, #ef6c00);
	border-color: color-mix(in srgb, var(--kf-orange, #ef6c00) 35%, transparent);
}

.kf-proof-chip.is-unknown {
	background: var(--bg-light-gray, #f5f5f5);
	color: var(--kf-grey, #78909c);
	border-color: var(--border-color, #e0e0e0);
}

/* ---- Dossier timeline ---- */
.kf-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 0.25rem;
	border-left: 2px solid var(--border-color, #e0e0e0);
}

.kf-timeline-item {
	position: relative;
	padding: 0 0 0.85rem 1rem;
	margin-left: 0.15rem;
}

.kf-timeline-item::before {
	content: "";
	position: absolute;
	left: -0.42rem;
	top: 0.35rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kf-green, #2e7d32);
	border: 2px solid var(--card-bg, #fff);
	box-shadow: 0 0 0 1px var(--border-color, #e0e0e0);
}

.kf-timeline-item.is-repair::before {
	background: var(--kf-orange, #ef6c00);
}

.kf-timeline-item.is-dispatch::before {
	background: var(--kf-blue, #1565c0);
}

.kf-timeline-when {
	font-size: 0.72rem;
	color: var(--text-muted, #6c757d);
}

.kf-timeline-title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0.1rem 0;
}

.kf-timeline-meta {
	font-size: 0.8rem;
	color: var(--text-muted, #6c757d);
}

.kf-timeline-proofs {
	margin-top: 0.35rem;
}

/* ---- Fleet Map side panel ---- */
.fleet-map-side {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.fleet-map-side .fleet-map-list-card {
	width: 100%;
	flex: 1 1 auto;
	max-height: 50vh;
}

.fleet-map-panel {
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
	background: var(--card-bg, #fff);
	padding: 0.75rem 0.85rem;
	display: none;
}

.fleet-map-panel.is-open {
	display: block;
}

.fleet-map-panel-title {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.15rem;
}

.fleet-map-panel-sub {
	font-size: 0.8rem;
	color: var(--text-muted, #6c757d);
	margin-bottom: 0.65rem;
}

.fleet-map-panel-row {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.82rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.fleet-map-panel-row:last-child {
	border-bottom: none;
}

.fleet-map-panel-actions {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.fleet-map-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: middle;
}

.fmdot.is-dispatch { background: var(--kf-blue); }
.fmdot.is-repair { background: var(--kf-orange); }
.fmdot.is-finance { background: var(--kf-yellow); }
.fmdot.is-flagged { background: var(--kf-red); }
.fmdot.is-idle { background: var(--kf-green); }

@media (max-width: 900px) {
	.fleet-map-side {
		flex: 1 1 auto;
		width: 100%;
	}

	.fleet-map-panel {
		max-width: none;
		width: 100%;
	}
}

/* Portal / web cards — keep padding and grids usable on phones */
@media (max-width: 576px) {
	.ndugu-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.container .card.card-body,
	#booking-form.card,
	#maint-form.card {
		padding: 1rem 0.85rem;
	}

	.container .row > [class*="col-"] {
		min-width: 0;
	}
}

/* Transport itinerary Mapbox widget */
.ndugu-itinerary-map {
	margin: 0.5rem 0 1rem;
}
.ndugu-map-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}
.ndugu-map-toolbar .ndugu-map-history {
	flex: 1 1 220px;
	min-width: 180px;
}
.ndugu-map-toolbar .ndugu-map-add-typed {
	flex: 2 1 280px;
}
.ndugu-map-hint {
	margin-bottom: 0.35rem;
}
.ndugu-map-canvas {
	height: 320px;
	min-height: 240px;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 6px;
	overflow: hidden;
}
.ndugu-map-marker {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1b4332;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.ndugu-map-stop-list {
	margin-top: 0.5rem;
}
.ndugu-map-stop-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	border-bottom: 1px dotted var(--border-color, #ddd);
}
.ndugu-map-stop-idx {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #e8f5e9;
	color: #1b4332;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ndugu-map-stop-label {
	flex: 1;
	font-size: 13px;
}
.ndugu-map-disabled {
	padding: 0.75rem;
	border: 1px dashed var(--border-color, #ccc);
	border-radius: 6px;
	background: var(--subtle-fg, #fafafa);
}
.fleet-map-canvas.mapboxgl-map {
	height: 70vh;
	min-height: 420px;
}