*,
*::before,
*::after
{
    box-sizing: border-box;
}

:root
{
	--mobile-map-height: 60vh;
	--ui-font: sans-serif;
}

html,
body
{
	height: 100%;
	margin: 0;
	font-family: var(--ui-font);
}

button,
input,
select
{
	font: inherit;
}

#container {
	display: flex;
	height: 100%;
}
@media (max-width:768px)
{
    #container
    {
        display:block;
    }
}

#map {
	flex: 1;
    position: relative;
}
@media (max-width:768px)
{
    #map
    {
        height: var(--mobile-map-height);
    }
}

#map-tools
{
	position: absolute;
	top: 15px;
	right: 15px;
	display: flex;
	gap: 6px;

	z-index: 1000;
}

@media (max-width: 768px)
{
	#map-tools
	{
		top: auto;
		bottom: 15px;
		left: 15px;
	}
}


#loading-panel
{
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	z-index: 2000;

	width: min(420px, calc(100% - 40px));
	padding: 24px;

	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #bbb;
	border-radius: 10px;

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#sidebar {
	width: 320px;
	padding: 15px;
	border-left: 1px solid #bbb;
	overflow: auto;
	position: relative;
}
@media (max-width:768px)
{
    #sidebar
    {
        width:100%;
        height:40vh;

        padding:12px;

        border-left:none;
        border-top:1px solid #bbb;
    }
}

#app-panel
{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.search-box
{
    position: relative;
    display: none;
}

.search-box.open
{
    display: block;
}

#search-results
{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;

	margin: 4px 0 0;
	padding: 0;

	background: white;
	border: 1px solid #bbb;
	border-radius: 6px;

	list-style: none;

	max-height: 250px;
	overflow-y: auto;

	z-index: 1000;
}

#search-results li
{
	margin: 0;
	padding: 0;
}

#search-results a
{
	display: block;

	padding: 6px 10px;

	color: #222;
	text-decoration: none;

	font-size: 0.9rem;
	line-height: 1.3;
}

#search-results a:hover
{
	background: #f2f2f2;
}

#search-results a.selected
{
	background: #0a84ff;
	color: white;
}

#search
{
	width: 100%;
	box-sizing: border-box;

	height: 38px;
	padding: 0 10px;

	border: 1px solid #bbb;
	border-radius: 6px;

	background: white;
	color: #222;

	font: inherit;
	font-size: 0.95rem;

	outline: none;
}

#search::placeholder
{
	color: #888;
}

#search:focus
{
	border-color: #888;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.keycol-icon
{
    background: none;
    border: none;
}

.keycol-icon svg
{
    display: block;
}

.keycol-icon.water-transition-in svg
{
	animation: keycolWaterIn 700ms ease-out;
}

.keycol-icon.water-transition-out svg
{
	animation: keycolWaterOut 500ms ease-out;
}


@keyframes keycolWaterIn
{
	0% {
		transform: scale(1);
		opacity: 1;
	}

	40% {
		transform: scale(1.7);
		opacity: 0.55;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}


@keyframes keycolWaterOut
{
	0% {
		transform: scale(1);
		opacity: 1;
	}

	40% {
		transform: scale(1.35);
		opacity: 0.75;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.peak-icon
{
    background: none;
    border: none;
}

.peak-icon svg
{
    display: block;
}

#peak-panel
{
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

.panel-header
{
	display: flex;
	align-items: center;
	gap: 8px;

	margin-bottom: 8px;
}
@media (max-width: 768px)
{
	.panel-header
	{
		display: none;
	}

	#app-panel:not(:has(.search-box.open)):not(:has(.prom-filter-box.open))
	{
		display: none;
	}

	#peak-panel
	{
		margin-top: 0;
		padding-top: 12px;
	}
}

.panel-header h1
{
	margin: 0;

	font-size: 1.1rem;
	font-weight: 700;
}

.peak-header
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.peak-header h1
{
	flex: 1;
	min-width: 0;

	margin: 0;

	font-size: 1.1rem;
	font-weight: 700;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.peak-header button
{
	width: 32px;
	height: 32px;

	padding: 0;

	border: 1px solid #bbb;
	border-radius: 6px;

	background: white;
	color: #222;

	font: inherit;
	font-size: 18px;
	line-height: 1;

	cursor: pointer;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.peak-header button:hover
{
	background: #f2f2f2;
}

.peak-header button:active
{
	background: #e5e5e5;
}

.concept-info-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 22px;
	height: 22px;
	padding: 0;

	margin-left: 4px;

	border: 1px solid #aaa;
	border-radius: 4px;

	background: white;
	color: #333;

	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;

	cursor: pointer;
	vertical-align: middle;
}

.concept-info-button:hover
{
	background: #f2f2f2;
}

.concept-info-button:active
{
	background: #e5e5e5;
}

.info-title
{
	display: flex;
	align-items: center;
	gap: 6px;
}

.sidebar-section
{
    margin-bottom: 1em;
}

#help-modal
{
	position: fixed;
	inset: 0;

	z-index: 3000;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;

	background: rgba(0, 0, 0, 0.45);
}

#help-modal.hidden
{
	display: none;
}

#help-modal .modal-window
{
	position: relative;

	width: min(900px, 100%);
	max-height: calc(100vh - 48px);

	overflow-y: auto;

	box-sizing: border-box;

	padding: 32px;

	background: white;
	border: 1px solid #bbb;
	border-radius: 8px;

	color: #222;

	font: inherit;
	font-size: 16px;
	line-height: 1.5;
}

#help-content
{
	max-width: 760px;
	margin: 0 auto;
}

#help-content p
{
	margin: 0 0 16px;
}

#help-content ul
{
	margin: 0 0 20px;
	padding-left: 24px;
}

#help-content h2
{
	margin: 28px 0 12px;

	font-size: 1.35rem;
	line-height: 1.25;
}

#help-content img
{
	display: block;

	width: 100%;
	max-width: 100%;
	height: auto;

	margin: 20px auto;
}
@media (min-width: 769px)
{
	#help-content img
	{
		width: 70%;
		max-width: 560px;
		margin: 20px auto;
	}
}

#help-close
{
	position: absolute;
	top: 12px;
	right: 12px;

	width: 32px;
	height: 32px;

	padding: 0;

	border: 1px solid #bbb;
	border-radius: 6px;

	background: white;
	color: #222;

	font: inherit;
	font-size: 20px;
	line-height: 1;

	cursor: pointer;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#help-close:hover
{
	background: #f2f2f2;
}

#help-close:active
{
	background: #e5e5e5;
}

.tooltip-header
{
    display: flex;
    align-items: center;
    gap: .4em;
    margin-bottom: .3em;
}

.tooltip-header svg
{
    width: 12px;
    height: 12px;
    flex: none;
}

.icon-text
{
    display: inline-flex;
    align-items: center;
    gap: .35em;
}

.icon-text svg
{
    width: 12px;
    height: 12px;
    flex: none;
}

.leaflet-interactive:focus {
    outline: none;
}

.leaflet-interactive {
    -webkit-tap-highlight-color: transparent;
}

#map-tools button
{
	width: 42px;
	height: 42px;

	padding: 0;

	border: 1px solid #bbb;
	border-radius: 6px;

	background: white;
	cursor: pointer;

	font-size: 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#map-tools button:hover
{
	background: #f2f2f2;
}

#map-tools button:active
{
	background: #e5e5e5;
}

#flooding-toggle[aria-pressed="true"]
{
	background: #dceeff;
	border-color: #78aee0;
}

/* --------------------------------------------------
   Vízszint vezérlő
   -------------------------------------------------- */

#water-level-control
{
	position: absolute;

	right: 8px;
	top: 70px;
	bottom: 30px;

	z-index: 1000;

	display: none;
	flex-direction: column;
	align-items: center;

	width: 32px;

	box-sizing: border-box;
}

#water-level-slider-box
{
	position: relative;

	flex: 1;

	width: 100%;
	min-height: 0;

	margin-top: 8px;
	margin-bottom: 8px;	
}

#water-level-slider
{
	position: absolute;

	left: 0;
	top: 0;

	width: 100%;
	height: 100%;

	margin: 0;

	writing-mode: vertical-lr;
	direction: rtl;
}

#water-level-control button
{
	width: 24px;
	height: 24px;

	padding: 0;

	border: none;
	border-radius: 3px;

	background: rgba(255, 255, 255, 0.75);

	cursor: pointer;

	font-size: 16px;
	line-height: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#water-level-control button:hover
{
	background: rgba(255, 255, 255, 0.95);
}

#water-level-control button:active
{
	background: rgba(230, 230, 230, 0.95);
}

#water-level-value
{
	position: absolute;

	top: 50%;
	right: 34px;

	transform: translateY(-50%);

	padding: 2px 4px;

	background: rgba(255, 255, 255, 0.75);
	border-radius: 3px;

	font-size: 11px;
	line-height: 1;

	white-space: nowrap;

	pointer-events: none;
}


.prom-filter-box
{
	position: relative;
	display: none;
}

.prom-filter-box.open
{
	display: block;
}

.prom-filter-box label
{
	display: block;
	margin-bottom: 8px;

	color: #444;
	font-size: 0.9rem;
}

.prom-filter-box input[type="range"]
{
	display: block;
	width: 100%;
	height: 4px;

	margin: 0;

	cursor: pointer;
}

.keycol-row td
{
	vertical-align: top;
}

.loading-ready
{
	color: #060;
}

.loading-ready::before
{
	content: "✓ ";
}

#concept-info-panel
{
	position: fixed;
	z-index: 3000;

	display: none;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: min(320px, calc(100% - 30px));
	padding: 18px;

	background: white;
	border: 1px solid #bbb;
	border-radius: 8px;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

	font-size: 0.95rem;
	line-height: 1.45;
}

#concept-info-panel.open
{
	display: block;
}

#concept-info-close
{
	position: absolute;
	top: 8px;
	right: 8px;

	width: 28px;
	height: 28px;
	padding: 0;

	border: 0;
	border-radius: 6px;

	background: transparent;
	color: #444;

	font: inherit;
	font-size: 22px;
	line-height: 1;

	cursor: pointer;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#concept-info-close:hover
{
	background: #f2f2f2;
}

#concept-info-title
{
	margin-bottom: 8px;

	font-size: 1.1rem;
	font-weight: 700;
}

#concept-info-text
{
	margin-bottom: 14px;
}

#concept-info-more
{
	padding: 5px 10px;

	border: 1px solid #bbb;
	border-radius: 6px;

	background: white;
	color: #222;

	font: inherit;
	font-weight: 600;

	cursor: pointer;
}

#concept-info-more:hover
{
	background: #f2f2f2;
}

#concept-info-more:active
{
	background: #e5e5e5;
}

#peak-panel a
{
	cursor: pointer;
}

#peak-panel table
{
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

#peak-panel table td
{
	padding: 4px 0;
	vertical-align: middle;
}

#peak-panel table td:first-child
{
	padding-right: 12px;

	color: #666;
	font-size: 0.9rem;
	white-space: nowrap;
}

#peak-panel table td:last-child
{
	text-align: right;
}

#peak-panel table a
{
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #999;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#peak-panel table a:hover
{
	text-decoration-color: #222;
}

#children-list
{
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

#children-list th,
#children-list td
{
	padding: 4px 0;
}

#children-list th
{
	color: #666;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid #ddd;
	white-space: nowrap;
}

#children-list th[data-sort]
{
	cursor: pointer;
	user-select: none;
}

#children-list th[data-sort]:hover
{
	color: #222;
}

#children-list .sort-arrow
{
	display: inline-block;
	width: 1em;
	margin-left: 2px;
}

#children-list td
{
	font-size: 0.9rem;
}

#children-list th:first-child,
#children-list td:first-child
{
	width: 28px;
	color: #888;
	text-align: right;
	padding-right: 8px;
}

#children-list th:nth-child(3),
#children-list th:nth-child(4),
#children-list td:nth-child(3),
#children-list td:nth-child(4)
{
	text-align: right;
}

#children-list a
{
	color: inherit;
	text-decoration: none;
}

#children-list a:hover
{
	text-decoration: underline;
}

#children-list td:nth-child(2)
{
	font-size: 0.9rem;
}

#children-list tbody tr
{
	border-bottom: 1px solid #eee;
}

#children-list tbody tr:last-child
{
	border-bottom: none;
}

#children-more
{
	display: flex;
	justify-content: center;

	margin-top: 8px;
}

.children-more-button
{
	padding: 5px 12px;

	border: 1px solid #bbb;
	border-radius: 6px;

	background: white;
	color: #444;

	font: inherit;
	font-size: 0.85rem;

	cursor: pointer;
}

.children-more-button:hover
{
	background: #f2f2f2;
}

.children-more-button:active
{
	background: #e5e5e5;
}

#map-tools button:focus-visible,
.peak-header button:focus-visible,
.concept-info-button:focus-visible,
#concept-info-more:focus-visible,
#concept-info-close:focus-visible
{
	outline: 2px solid #888;
	outline-offset: 1px;
}

.help-icon
{
	display: inline-flex;
	width: 18px;
	height: 18px;

	vertical-align: -3px;
}

.help-icon svg
{
	width: 100%;
	height: 100%;
}

.panel-map-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}

.panel-map-icon svg
{
	width: 18px;
	height: 18px;
}

.panel-map-icon:hover
{
	transform: scale(1.15);
}