/* Project overrides on top of the vendored Simple.css, see assets/vendor/simple.css. */

/* Zebra stripes and a hover highlight, so long rows stay readable. */
tbody tr:nth-child(even) {
	background: var(--bg);
}
tbody tr:hover {
	background: var(--accent-bg);
}

/* Header row: heavier separation from the data rows. */
thead th {
	border-bottom: 2px solid var(--accent);
	padding: 0.5rem 0.6rem;
}

td {
	padding: 0.35rem 0.6rem;
}

/* Numeric count columns: right-aligned with tabular digits. */
th.n, td.n {
	text-align: right;
	font-variant-numeric: tabular-nums;
	min-width: 5rem;
}

/* Textmarker yellow highlights on the spelling differences in "Straße in OSM". */
mark {
	background-color: #ffe86e;
	color: inherit;
}

/* Visited links turn muted lila instead of the accent blue, so the OSM links
   show which ones were opened already. CSS :visited allows color changes only. */
a:visited {
	color: #7a3f8f;
}

/* Navigation links are exempt: always accent blue, never lila. */
nav a,
nav a:visited {
	color: var(--accent);
	text-decoration: none;
}

/* Totals row: styled like the header so it reads as a summary, not a data row. */
tfoot td {
	background-color: var(--accent-bg);
	font-weight: 700;
}

/* Sortable tables: clickable headers with an asc/desc indicator. */
thead th {
	cursor: pointer;
	user-select: none;
}
th[data-sort]::after {
	font-size: 0.75em;
	color: var(--accent);
}
th[data-sort="asc"]::after {
	content: " ▲";
}
th[data-sort="desc"]::after {
	content: " ▼";
}

/* Category pill: the outcome of each row as a colored label. */
.pill {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	font-size: 0.85rem;
	white-space: nowrap;
}
.pill.found { background: #e3efd8; color: #2d6a1e; }
.pill.addr-street { background: #fdf1d7; color: #8a5a00; }
.pill.missing { background: #fbddd9; color: #a5261a; }
.pill.addr-place { background: #ece2f7; color: #5b2d8f; }

/* The OSM object column holds a list of links; wrap instead of widening the row. */
td.links {
	white-space: normal;
	max-width: 30rem;
}

/* A street found only in an adjacent municipality: a muted note per line,
   the object links keep the accent color. */
div.neighbor-note {
	color: var(--text-light, #666);
	font-size: 0.9em;
}

/* Simple.css lays out body as a grid with a 45rem center column; the site
   needs a wider container, so this override switches back to block layout. */
body {
	display: block;
}

/* Tables grow with their content but stop short of the container width,
   full-width rows would hurt readability. */
table {
	max-width: 80rem;
}

/* Page head and table container: centered with breathing room, but wide
   enough for a big screen; readable means stopping short of full width. */
main {
	max-width: 90rem;
	margin: 0 auto;
}

/* Simple.css ships a huge heading scale (h1 3rem, h2 2.6rem); next to the
   sticky nav the pages want a compact one. h2 follows so the alias page's
   section titles stay below their page title. */
h1 {
	font-size: 1.9rem;
}
h2 {
	font-size: 1.6rem;
}

/* Sticky top navigation with a breadcrumb, so long tables stay navigable. */
nav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
nav a.home,
nav .active {
	font-weight: bold;
}
nav .sep {
	color: var(--text-light, #666);
}
nav .spacer {
	margin-left: auto;
}

/* Small unobtrusive footer with the build metadata. */
footer {
	margin-top: 1.5rem;
	border-top: 1px solid var(--border);
	padding-top: 0.5rem;
	color: var(--text-light, #666);
}

/* The map and its legend sit below nav + h1 only; the cap keeps 75vh on tall
   windows while shorter ones shrink the map so it stays fully in view. */
#map {
	height: min(75vh, calc(100vh - 15rem));
	border: 1px solid var(--border);
	border-radius: 0.3rem;
}
#map-legend {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	margin: 0.6rem 0;
	color: var(--text-light, #666);
}
#map-legend .swatch {
	width: 1.6rem;
	height: 0.8rem;
	display: inline-block;
	border-radius: 0.15rem;
}
.map-label span {
	background: rgba(255, 255, 255, 0.85);
	padding: 0.05rem 0.25rem;
	border-radius: 0.2rem;
	font-size: 0.75rem;
	white-space: nowrap;
	color: #222;
}
.map-pin span {
	display: block;
	min-width: 1.4rem;
	text-align: center;
	background: var(--accent, #205b6d);
	color: #fff;
	font-weight: 700;
	border-radius: 1rem 1rem 1rem 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Sticky tooltip on hover (level 1 districts and level 2 municipalities). */
.leaflet-tooltip.map-hover-tooltip {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #999;
	border-radius: 0.2rem;
	padding: 0.1rem 0.35rem;
	font-size: 0.75rem;
	color: #222;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

/* Permanent label above a pin (level 2 municipality name). */
.leaflet-tooltip.map-pin-label {
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid #bbb;
	border-radius: 0.2rem;
	padding: 0.05rem 0.25rem;
	font-size: 0.7rem;
	color: #222;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}
.map-popup em {
	display: block;
	margin: 0.2rem 0 0.4rem;
	color: var(--text-light, #666);
	font-style: normal;
}
.map-popup ul {
	max-height: 12rem;
	overflow-y: auto;
	margin: 0;
	padding-left: 1.1rem;
}