/* ==========================================================================
   main.css — consolidated, deduplicated, with bug fixes noted inline
   ========================================================================== */

/* --- Reset / Base --------------------------------------------------------- */
html, body {
	height: 100%;
	margin: 0;
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.4;
}

input, select, button, textarea {
	font-size: 1rem;
	line-height: 1.2;
}

button,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select {
	min-height: 44px;
}

/* --- Map ------------------------------------------------------------------ */
div#leafletmap {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* --- Header --------------------------------------------------------------- */
/* CONSOLIDATED: was defined twice; now one clean rule */
div#header {
	display: inline-block;
	position: fixed;
	top: 10px;
	left: 10px;
	width: fit-content;
	max-width: 90vw;
	border: 1px solid lightgray;
	border-radius: 10px;
	padding: 5px 5px 0 5px;
	margin: 0;
	background-color: #edededbd;
	z-index: 1000;
}

/* CONSOLIDATED: three contradicting rules merged; final intent: normal weight */
div#header h1 {
	display: inline;
	position: relative;
	bottom: 6px;
	font-weight: 400;
	letter-spacing: normal;
	font-stretch: normal;
	font-family: inherit;
}

span#versionsub {
	font-size: xx-small;
	font-weight: lighter;
}

h3 {
	margin: 0;
	position: relative;
	top: -5px;
	font-weight: normal;
}
/* --- Year + play container ------------------------------------------------ */
/* CHANGED: container wraps year badge and play button in a single flex row;
   positioned by JS to the right of the Leaflet zoom control, below the header */
   #year_play_container {
	position: fixed;
	left: 60px;                     /* JS will override based on zoom control position */
	top: 90px;                      /* JS will override based on header bottom */
	z-index: 1000;
	display: inline-flex;
	align-items: stretch;           /* CHANGED: both children match the tallest element's height */
	gap: 0;                         /* CHANGED: no gap — button joins the badge seamlessly */
}

/* CHANGED: year badge is now static inside the flex container;
   right border/radius removed so it joins the play button cleanly */
#year_play_container .year-badge {
	position: static;               /* CHANGED: container handles positioning */
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: #ffffffcc;
	border: 1px solid lightgray;
	border-right: none;             /* CHANGED: shared border with play button */
	border-radius: 12px 0 0 12px;  /* CHANGED: rounded only on left side */
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.1;
}

/* CHANGED: play button styled to match year badge — same background, border,
   height (via stretch). Rounded only on the right side. */
#year_play_container #year_play_toggle {
	display: grid;
	place-items: center;
	padding: 0 10px;
	background: #ffffffcc;
	border: 1px solid lightgray;
	border-left: none;              /* CHANGED: shared border with badge */
	border-radius: 0 12px 12px 0;  /* CHANGED: rounded only on right side */
	cursor: pointer;
	min-height: 0;                  /* CHANGED: override global button min-height */
	-webkit-appearance: none;
	appearance: none;
}

/* CHANGED: play/pause icon sized to match the year badge font-size */
#year_play_container #year_play_toggle img.icon {
	width: 1.35rem;                 /* CHANGED: matches year badge font-size exactly */
	height: 1.35rem;
	display: block;
	object-fit: contain;
	pointer-events: none;
}

/* CHANGED: disabled state — faded out, no pointer */
#year_play_container #year_play_toggle:disabled {
	opacity: 0.4;
	cursor: default;
}

/* CHANGED: subtle hover feedback when enabled */
#year_play_container #year_play_toggle:not(:disabled):hover {
	background: #e8e8e8cc;
}


/* --- Zoom control --------------------------------------------------------- */
/* CHANGED: margin-top is now set dynamically by position_header_zoom_year() in JS;
   only margin-left remains as a static CSS value */
   #leafletmap .leaflet-top.leaflet-left {
	margin-top: 90px;              /* fallback; JS overrides on load */
	margin-left: 10px;
}


/* --- Feature info popup --------------------------------------------------- */
div#feature_info_popup {
	display: none;
	position: fixed;
	top: 200px;
	left: 200px;
	border: 1px solid lightgray;
	border-radius: 10px;
	background-color: #edededbd;
	padding: 10px;
	z-index: 1000;
}

div.map_info_label {
	display: block;
	top: -20px;
	left: -35px;
	border: 1px solid lightgray;
	border-radius: 10px;
	background-color: #edededbd;
	padding: 10px;
	width: auto;
	height: auto;
}

/* --- Dataset loader ------------------------------------------------------- */
div#datasetloader_dialog {
	display: none;
	min-width: 500px;
}

div#datasetloader_content {
	padding: 5px;
}
div#datasetloader_content p {
	margin-top: 0;
	margin-bottom: 3px;
}
div#datasetloader_content label {
	display: inline-block;
	min-width: 50px;
	margin-bottom: 10px;
}
div#datasetloader_content select {
	position: absolute;
	left: 9em;
	width: 25em;
}
div#datasetloader_close_button {
	display: none;
}

/* --- Tables (table_view, statistics_view) --------------------------------- */
div#table_view table,
div#statistics_view table {
	border-collapse: collapse;
}
div#table_view tr.header,
div#statistics_view th {
	background-color: #00000055;
}
div#table_view tr.odd,
div#statistics_view tr.odd {
	background-color: #edededbd;
}
div#table_view tr.even,
div#statistics_view tr.even {
	background-color: #00000033;
}
div#table_view td.number,
div#statistics_view td.number {
	text-align: right;
}
div#table_view td,
div#table_view th,
div#statistics_view td,
div#statistics_view th {
	border: 1px solid;
}
div#table_heading_arrow {
	position: absolute;
	right: 0;
}
div#table_view_data th {
	position: relative;
}

/* --- Action buttons (CONSOLIDATED: was defined 4x) ----------------------- */
div.action_button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	right: -1px;
	width: 40px;
	height: 40px;
	border: 1px solid lightgray;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 0;
	margin: 0;
	background-color: #edededbd;
	z-index: 1000;
}

/* Inner <button> fills container — CONSOLIDATED: was defined 4x */
div.action_button > button {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* SVG / img inside action buttons */
div.action_button img.icon {
	width: 70%;
	height: 70%;
	display: block;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}
div.action_button > svg {
	width: 70%;
	height: 70%;
}
div.action_button i {
	font-size: 22px;
	line-height: 1;
	display: inline-block;
}

div#menu_toggle_button  { top:  40px; }
div#classification_button { top:  90px; }
div#zoom_home_fab       { top: 140px; }
div#map_bg_fab          { top: 190px; }
/* REMOVED: div#year_play_fab — play button moved into #year_play_container */


/* Hide legacy buttons that no longer exist in the UI */
div#dataset_load_button,
div#statistics_button,
div#table_button,
div#barchart_button {
	display: none !important;
}

/* CONSOLIDATED: was repeated 3x */
#mobile_menu_toggle {
	display: none !important;
}

/* --- Selection box (burger menu sidebar) ---------------------------------- */
div#selection_box {
	position: fixed;
	top: 70px;
	right: 50px;
	left: auto;
	bottom: auto;
	width: max-content;
	max-width: min(520px, 46vw);
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid lightgray;
	border-radius: 10px;
	background-color: #edededbd;
	box-shadow: 0 8px 18px rgba(0,0,0,0.25);
	z-index: 1200;
	transform: translateX(110%);
	visibility: hidden;
	pointer-events: none;
	will-change: transform;
	transition: transform 0.25s ease;
}
div#selection_box.open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
}

/* Checkbox/radio alignment inside sidebar */
#selection_box .control-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#selection_box input[type="checkbox"],
#selection_box input[type="radio"] {
	min-height: 0;
	width: 1.1em;
	height: 1.1em;
	vertical-align: middle;
	margin: 0;
}
#selection_box label {
	display: inline-block;
	vertical-align: middle;
	line-height: 1.2;
}

input#area_inside_selector {
	margin-left: 0;
}

/* --- Viewcomponents (shared base) ----------------------------------------- */
div.viewcomponent {
	display: none;
	position: fixed;
	top: 100px;
	left: 200px;
	margin-left: 15%;
	min-width: 300px;
	min-height: 40px;
	background-color: rgb(234, 234, 234);
	border: 3px solid;
	padding: 0;
	z-index: 1000;
}

div.view_content {
	margin: 10px;
	max-height: 700px;
	max-width: 1000px;
	overflow: auto;
}

div.close_button {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 25px;
	height: 25px;
}

h2.title_bar {
	margin: 0 0 5px 0;
	background-color: #00000066;
	padding: 3px 0;
	width: 100%;
	height: 20px;
	text-align: center;
	font-size: larger;
	font-weight: bold;
}

/* --- Settings panel (classification_view) — slide-in override ------------- */
div#classification_view {
	display: block;
	position: fixed;
	top: 70px;
	right: 50px;
	left: auto;
	bottom: auto;
	width: max-content;
	max-width: min(520px, 46vw);
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding: 0;
	margin-left: 0;
	min-width: 300px;
	border: 1px solid lightgray;
	border-radius: 10px;
	background-color: #edededbd;
	box-shadow: 0 8px 18px rgba(0,0,0,0.25);
	z-index: 1200;
	transform: translateX(110%);
	visibility: hidden;
	pointer-events: none;
	will-change: transform;
	transition: transform 0.25s ease;
}
div#classification_view.open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
}

#classification_view .title_bar {
	background-color: transparent;
	margin-bottom: 2px;
}

/* Left-align settings content */
#classification_view_data {
	text-align: left;
	padding-left: 12px;
	padding-right: 12px;
}
#classification_view_data select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
#classification_view_data input[type="number"] {
	display: inline-block;
	width: 6em;
	text-align: right;
}
#classification_view_data .classification_overall_toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#classification_view_data input[type="radio"],
#classification_view_data .color_gradient {
	vertical-align: middle;
}
#classification_view_data .classborder_label {
	text-align: right;
}

div#classification_message {
	display: none;
}

/* --- Legend view ----------------------------------------------------------- */
div#legend_view {
	display: none;
	position: fixed;
	right: 50px;
	bottom: 30px;
	min-width: 100px;
	min-height: 0;
	background-color: #edededbd;
	border: 1px solid lightgray;
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	z-index: 1000;
}

div#legend_content {
	margin-left: 0;
}

#legend_view .title_bar {
	background-color: transparent !important;
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
	padding: 8px 14px;
	height: auto;
	line-height: 1.2;
	text-align: left;
	position: static;
	margin: 0;
	width: auto;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: color 0.15s ease;
	color: #333;
}
#legend_view .title_bar:hover {
	color: #000;
}
#legend_view .title_bar:focus-visible {
	outline: 2px solid #356184;
	outline-offset: 2px;
	border-radius: 4px;
}

#legend_view .legend_chevron {
	width: 18px;
	height: 18px;
	display: block;
	flex-shrink: 0;
	transition: transform 0.25s ease;
	color: #666;
}
#legend_view .title_bar:hover .legend_chevron {
	color: #333;
}
#legend_view.collapsed .legend_chevron {
	transform: rotate(180deg);
}

/* REMOVED: .legend_toggle button styles — button element no longer exists */

/* Accordion animation */
#legend_view #legend_content {
	overflow: hidden;
	max-height: 600px;
	opacity: 1;
	transition: max-height 0.3s ease,
	            opacity 0.2s ease,
	            margin 0.3s ease,
	            padding 0.3s ease;
}
#legend_view.collapsed #legend_content {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	margin: 0;
	padding: 0;
}
#legend_view.collapsed {
	min-height: 0;
}

/* --- Credits -------------------------------------------------------------- */
/* CONSOLIDATED: was defined 3+ times with conflicting rules */
div#credits {
	display: flex;
	align-items: center;
	position: fixed;
	left: -1px;
	bottom: -1px;
	border: 1px solid lightgray;
	border-top-right-radius: 5px;
	padding: 5px;
	margin: 0;
	background-color: #edededbd;
	z-index: 1000;
}
div#credits img {
	float: none;
	height: 40px;
	padding-right: 5px;
	margin-right: 6px;
}
div#credits_text {
	height: 40px;
	max-height: 40px;
	overflow: hidden;
	display: flex;
	align-items: center;
}
div#text_with_links {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: auto;
}
div#credits_text #text_with_links span {
	font-size: 12px;
	line-height: 1.1;
	display: block;
	overflow: hidden;
	white-space: normal;
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
	max-height: none;
	flex: 0 1 auto;
	width: auto;
}
/* Hide 3rd <br> to keep exactly 3 visible lines */
div#credits_text #text_with_links span br:nth-of-type(3) {
	display: none;
}
div#credits_text br {
	display: inline;
}
div#link_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2px;
	font-size: 12px;
	line-height: 1.1;
	margin-left: 12px;
}
div#link_container a {
	margin-bottom: 5px;
}

/* --- Misc UI elements ----------------------------------------------------- */
div#legend {
	display: none;
}
div#years_selection {
	display: none;
}
option.year_option {
	padding-left: 5px;
	padding-right: 15px;
}
fieldset#data_interpretation {
	border: none;
	display: none;
}
label.classborder_label {
	display: inline-block;
	width: 9.5em;
}
div.color_gradient {
	display: inline-block;
	width: 100px;
	height: 1em;
}
div.gradient_color {
	display: inline-block;
	width: 1px;
	height: 1em;
}

/* --- Load indicator ------------------------------------------------------- */
div#load_indicator {
	display: none;
	position: fixed;
	top: 100px;
	left: 100px;
	margin-top: 15%;
	margin-left: 30%;
	background-color: #edededbd;
	border: 3px solid;
	padding: 5px;
	z-index: 1000;
}
div#load_indicator_text {
	text-align: center;
}
div#load_inidicator_blocks {
	width: 100%;
	margin-top: 10px;
}
div.load_inidicator_block {
	float: left;
	padding: 0;
	margin: 1px;
	width: 20px;
	height: 10px;
	border: 1px solid;
}

/* --- Barchart (MOVED from inline <style> in charts.js) -------------------- */
.barchart-container {
	width: 100%;
	resize: both;
	overflow: auto;
	min-height: 100px;
	min-width: 300px;
	max-width: 100%;
	max-height: 500px;
}
.barchart-wrapper {
	margin-top: 20px;
	width: 100%;
	overflow-y: auto;
	max-height: 450px;
}
.barchart-row {
	display: flex;
	margin-bottom: 8px;
	align-items: center;
	width: 100%;
}
.barchart-label {
	width: 150px;
	text-align: right;
	padding-right: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}
.barchart-bar-container {
	flex-grow: 1;
	background-color: #f0f0f0;
	position: relative;
	height: 24px;
}
.barchart-bar {
	height: 100%;
	position: relative;
	transition: width 0.3s ease-in-out;
}
.barchart-bar.right  { margin-left: 0; }
.barchart-bar.left   { margin-left: auto; margin-right: 0; }
.barchart-value {
	position: absolute;
	padding: 0 5px;
	font-size: 12px;
	line-height: 24px;
	color: black;
	white-space: nowrap;
}
.barchart-bar.right .barchart-value { left: 5px; }
.barchart-bar.left .barchart-value  { right: 5px; }

/* ==========================================================================
   Responsive — CONSOLIDATED: all @media (max-width: 768px) into one block
   ========================================================================== */
@media (max-width: 768px) {
	/* Compact header */
	div#header {
		top: 8px;
		left: 8px;
		max-width: calc(100% - 16px);
		padding: 4px 6px;
	}
	h1 { font-size: 1.1rem; }
	h3 { font-size: 0.95rem; }
	span#versionsub { font-size: 0.6rem; }

		/* Hide ALL action buttons by default, then show the ones we need */
		div.action_button { display: none; }
		#menu_toggle_button,
		#classification_button,
		#zoom_home_fab,
		#map_bg_fab {
			display: flex !important;
		}
		/* REMOVED: #year_play_fab — play button is now in #year_play_container */
	
		/* CHANGED: year+play container responsive adjustments */
		#year_play_container {
			left: 8px;
		}
	

	/* Credits: hidden on mobile */
	#credits,
	#credits * {
		display: none !important;
		visibility: hidden !important;
	}

	/* Legend: smaller, above FABs */
	div#legend_view {
		right: 8px;
		bottom: 70px;
		max-width: 65%;
	}

	/* Popups */
	div#feature_info_popup {
		font-size: 0.9rem;
		padding: 8px;
	}

	/* Viewcomponents become near-full-width sheets */
	div.viewcomponent {
		left: 8px;
		right: 8px;
		top: auto;
		bottom: 8px;
		width: auto;
		max-width: calc(100% - 16px);
		max-height: 70vh;
		overflow: auto;
		margin-left: 0;
	}
	h2.title_bar {
		height: auto;
		font-size: 1rem;
		padding: 6px 0;
	}

	/* Selection box (burger menu) */
	div#selection_box {
		top: 64px;
		right: 10px;
		left: auto;
		bottom: auto;
		max-width: min(92vw, 520px);
		max-height: calc(100vh - 120px);
	}

	/* Settings panel */
	div#classification_view {
		top: 64px;
		right: 10px;
		left: auto;
		bottom: auto;
		max-width: min(92vw, 520px);
		max-height: calc(100vh - 120px);
	}

	/* Readable controls */
	select.selector, input.selector, input.filter,
	select.filter, button.selector,
	fieldset#data_interpretation {
		font-size: 1rem;
		min-height: 44px;
	}
	#year_selector {
		max-height: 35vh;
		overflow-y: auto;
	}

	/* Load indicator centered */
	div#load_indicator {
		top: auto;
		left: 50%;
		bottom: 30%;
		transform: translateX(-50%);
		margin: 0;
		width: 90%;
	}

	/* Compact gradients */
	div.color_gradient  { width: 80px; height: 0.8em; }
	div.gradient_color  { height: 0.8em; }
}

@media (max-width: 600px) {
	div#credits {
		flex-direction: column;
		align-items: flex-start;
	}
	div#credits img {
		margin-bottom: 5px;
	}
}
/* ===================================================================
   Legend — columnar grid layout.
   Lower bound, dash, and upper bound each sit in their own column.
   "0" uses the same 4-column layout (value in the lo column).
   "Keine Daten" spans the 3 text columns.

   FONT SIZE: To adjust the legend font size, change the font-size
   property on .geostats-legend below. The current value "inherit"
   keeps it identical to the parent (legend panel). Change it to
   e.g. "0.85em" or "14px" to make legend text smaller/larger.
   =================================================================== */

   .geostats-legend {
    display: inline-grid;
    grid-template-columns: auto auto auto auto;   /* [block] [lo] [dash] [hi] */
    row-gap: 3px;
    column-gap: 6px;
    align-items: center;
    font-size: 0.9em;           /* ← CHANGE THIS to adjust legend font size */
    line-height: 1.3;
}

/* Override any geostats.css defaults on the color block */
.geostats-legend .geostats-legend-block {
    width: 20px;
    height: 14px;
    border: 1px solid #ccc;       /* visible border, especially for white blocks */
    display: block;
    margin: 0;
    margin-left: 8px;             /* CHANGED: left margin on coloured boxes */
}

/* Lower bound — right-aligned so decimal points line up across rows */
.geostats-legend .legend-lo {
    text-align: right;
    white-space: nowrap;
}

/* Dash separator — centered in its narrow column */
.geostats-legend .legend-dash {
    text-align: center;
    white-space: nowrap;
}

/* Upper bound — left-aligned */
.geostats-legend .legend-hi {
    text-align: left;
    white-space: nowrap;
}

/* Special labels ("Keine Daten") span all 3 text columns */
.geostats-legend .legend-label {
    grid-column: 2 / 5;           /* span columns 2–4 */
    white-space: nowrap;
}