/* ---- Brand tokens derived from MudBlazor palette (auto light/dark) -------- */
:root {
	--lt-surface: color-mix(
		in srgb,
		var(--mud-palette-primary) 10%,
		var(--mud-palette-background)
	);
	--lt-nav-active-bg: color-mix(
		in srgb,
		var(--mud-palette-primary) 14%,
		var(--mud-palette-background)
	);
	--lt-forest-green: color-mix(
		in srgb,
		var(--mud-palette-primary) 30%,
		var(--mud-palette-text-primary)
	);
	--lt-olive-green: color-mix(
		in srgb,
		var(--mud-palette-primary) 60%,
		var(--mud-palette-text-primary)
	);

	/* Trend direction colors (KPI cards, data tiles) */
	--lt-positive: #4f7a3f;
	--lt-negative: #b03a2e;
}

.mud-app-bar .mud-icon-button {
	color: rgba(255, 255, 255, 0.75);
}

.mud-typography-overline {
	color: var(--mud-palette-gray-dark);
}

.mud-typography-body2 {
	color: var(--mud-palette-gray-darker);
}

/* ---- Nav links — v6 chrome style (global MudBlazor overrides) ------------ */
.mud-nav-link {
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--mud-palette-drawer-text) !important;
	border-left: 3px solid transparent !important;
	border-radius: 0 !important;
	transition:
		background 120ms,
		color 120ms !important;
}

.mud-nav-link:hover:not(.active) {
	background-color: var(--lt-surface) !important;
	color: var(--lt-forest-green) !important;
}

/* Active state: MudBlazor v8 applies .active on .mud-nav-link */
.mud-navmenu.mud-navmenu-default
	.mud-nav-link.active:not(.mud-nav-link-disabled) {
	background-color: var(--lt-nav-active-bg) !important;
	color: var(--lt-forest-green) !important;
	border-left-color: var(--mud-palette-primary) !important;
	font-weight: 600 !important;
}

.mud-nav-link .mud-icon-root {
	opacity: 0.7;
	transition: opacity 120ms;
}

.mud-nav-link:hover .mud-icon-root,
.mud-navmenu.mud-navmenu-default
	.mud-nav-link.active:not(.mud-nav-link-disabled)
	.mud-icon-root {
	opacity: 1;
}

.mud-navmenu.mud-navmenu-default
	.mud-nav-link.active:not(.mud-nav-link-disabled)
	.mud-icon-root {
	color: var(--lt-olive-green) !important;
}

.mud-nav-link.nested {
	padding-left: 34px !important;
	font-size: 13px !important;
}

.mud-chip {
	font-size: 0.875rem;
	font-weight: 600;
}

.mud-chip.mud-chip-size-small {
	padding: 4px 12px;
}

.mud-button {
	padding: 10px 24px;
	letter-spacing: 0.09em;
	font-size: 0.8rem;
	font-weight: 600;
}

.mud-button.mud-button-filled-size-small {
	padding: 6px 16px;
	letter-spacing: 0.09em;
	font-size: 0.7rem;
}

.mud-button-filled,
.mud-button-filled:hover {
	box-shadow: none;
	border-bottom-style: solid;
	border-bottom-width: 1.6px;
}

.mud-button-filled-primary:not(:disabled) {
	border-bottom-color: var(--mud-palette-success-darken);
}

.mud-button-filled-error:not(:disabled) {
	border-bottom-color: var(--mud-palette-error-darken);
}

.mud-card-header h6 {
	font-family: "Zilla Slab", serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

/* ---- Compare page: add-area popover -------------------------------------- *
 * MudPopover portals its root out to the MudPopoverProvider at the page root,
 * so it cannot be styled from Compare.razor.css (scoped). Width lives here. */
.cmp-add-popover {
	width: min(440px, 92vw);
	margin-top: 6px;
}

/* ---- App-bar overflow-names popover --------------------------------------- *
 * Lists the full set of counties when too many fit inline in the header.
 * MudPopover portals out to the page root, so its styling lives here (global). */
.appbar-names-popover {
	max-width: min(720px, 92vw);
	margin-top: 6px;
}

.appbar-names-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 4px 20px;
	padding: 14px 18px;
	max-height: 60vh;
	overflow-y: auto;
}

.appbar-names-item {
	font-size: 0.8125rem;
	color: var(--mud-palette-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}