html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#map {
	width: 100%;
	height: 100vh;
	background: #f8f9fa;
	z-index: 1;
}

/* --- Модуль линейки ruler.js --- */
.ruler-tooltip {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid #007bff;
	box-shadow: none;
	font-size: 11px;
	padding: 2px 5px;
}

.leaflet-control-ruler.active {
	background-color: #e9ecef !important;
	color: #007bff !important;
}

.ruler-cursor {
	cursor: crosshair !important;
}

.ruler-hint {
	pointer-events: none;
}

.bi-ruler {
	font-size: 1.2rem;
	vertical-align: middle;
}

/* --- Тёмный режим карты --- */
.leaflet-dark-mode {
	background: #000 !important;
}

.leaflet-dark-mode.dark-map-vector .leaflet-tile-pane {
	filter: invert(100%) grayscale(100%) brightness(75%);
}

.leaflet-dark-mode.dark-map-satellite .leaflet-tile-pane {
	filter: brightness(40%) contrast(120%) saturate(70%);
}

/* --- Информационная Bootstrap 5 панель ноды --- */
.node-info-panel {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 1000;
	width: 340px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease;
}

/* Плоские Windows-like кнопки в заголовке панели */
.node-info-panel .btn-panel-action {
	border: none !important;
	background: none !important;
	padding: 2px 10px !important;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.node-info-panel .btn-panel-action:hover {
	background-color: rgba(0, 0, 0, 0.08) !important;
}

.node-info-panel .btn-close-panel:hover {
	background-color: #dc3545 !important;
	color: white !important;
}

/* Анимация сворачивания: прячем тело, оставляем только header */
.node-info-panel.minimized {
	transform: translateY(calc(100% - 40px));
}

.node-info-panel.minimized .card-body {
	display: none !important;
}

/* --- Подписи коротких имен нод на карте (Leaflet Tooltip) --- */
.node-map-label {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid #999;
	font-weight: bold;
	color: #333;
	font-size: 11px;
	padding: 1px 4px;
	pointer-events: none; /* Подпись не перехватывает клики по карте */
}

.leaflet-dark-mode .node-map-label {
	background: rgba(33, 37, 41, 0.85);
	border: 1px solid #444;
	color: #f8f9fa;
}

/* --- Списки внутри Popup (при клике на серые точки замеров) --- */
.measure-popup-list a {
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 2px 0;
}

.measure-popup-list a:hover {
	text-decoration: underline;
}

/* --- Подсказки при наведении на замеры в режиме изоляции --- */
.packet-hover-tooltip {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #333;
	border-radius: 4px;
	padding: 6px 8px;
	font-family: monospace;
	font-size: 11px;
	color: #000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.leaflet-dark-mode .packet-hover-tooltip {
	background: rgba(33, 37, 41, 0.95);
	border: 1px solid #666;
	color: #f8f9fa;
}

/* --- Адаптивность для мобильных экранов --- */
@media (max-width: 767px) {
	.node-info-panel {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		border-radius: 12px 12px 0 0 !important;
		overflow: hidden;
	}

	/* На мобильных заголовок чуть выше из-за тач-зон, скрываем точно под край экрана */
	.node-info-panel.minimized {
		transform: translateY(calc(100% - 42px));
	}
}