/* ---- 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). Aliased to the MudBlazor palette so
	   the single source of truth stays SeverityColors.cs (via Theme.cs) and dark mode
	   gets its own values for free. */
	--lt-positive: var(--mud-palette-success);
	--lt-negative: var(--mud-palette-error);

	/* Display (slab) font for headline stats and card titles. */
	--lt-font-display: "Zilla Slab", serif;

	/* Stacking ladder for the app's overlays. Backdrops sit at calc(token - 1). */
	--lt-z-overlay: 1190; /* click-away overlays (app bar names, Compare add-area) */
	--lt-z-menu: 1199; /* AreaSelector browse menu */
	--lt-z-select: 1201; /* SearchSelect listbox (opens above the browse menu) */
}

/* ---- Headline stat values (KPI cards, data tiles, hero, Compare matrix) --- */
/* Size varies per context via --lt-stat-size. */
.lt-stat-value {
	font-family: var(--lt-font-display);
	font-size: var(--lt-stat-size, 1.125rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--mud-palette-text-primary);
}

/* ---- Screen-reader-only text ---------------------------------------------- */
/* In the DOM and in the accessibility tree, but not on screen. Used for the direction words on
   trend deltas, where an arrow glyph and a color carry meaning no assistive technology can read.
   Deliberately real text rather than aria-label: search crawlers index page content and ignore
   aria attributes, and the direction words matter for both audiences. */
.lt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ---- Trend delta (arrow + magnitude) -------------------------------------- */
/* Rendered by the shared TrendDelta component, and directly by table cells. */
.lt-delta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.lt-delta .mud-icon-root {
	font-size: 0.875rem;
}

.lt-delta.up {
	color: var(--lt-positive);
}

.lt-delta.down {
	color: var(--lt-negative);
}

.lt-delta.flat {
	color: var(--mud-palette-text-secondary);
}

/* ---- Data tables (analysis panel, Compare table view) --------------------- */
.lt-table-wrap {
	overflow-x: auto;
}

.lt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
}

.lt-table th,
.lt-table td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--mud-palette-table-lines);
	text-align: left;
}

.lt-table thead th {
	font-weight: 700;
	color: var(--mud-palette-text-secondary);
}

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

.lt-table tfoot td {
	font-weight: 600;
	border-top: 2px solid var(--mud-palette-table-lines);
	border-bottom: none;
}

.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-drawer--closed .mud-nav-link {
	padding-left: 14px !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: var(--lt-font-display);
	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;
}

/* ---- Definition button tooltip -------------------------------------------- *
 * Holds a term plus its one-clause gist, so it needs more room than MudBlazor's
 * default. MudTooltip portals out to the page root, so this can't be scoped. */
.def-btn-tip {
	max-width: 280px;
	text-align: left;
}

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