/* ===========================================================================
   Карта: Leaflet-контейнер, легенда, попап, тёмная тема тайлов.
   =========================================================================== */

/* --- Строка поиска нод (шапка, слева от переключателя темы) --------------- */
/* Кнопка-иконка открытия поиска: на десктопе скрыта, на мобильных — видна
   (медиа-правило здесь же, ниже по файлу — иначе его перекрывает этот
   display:none, map.css грузится после theme.css). */
#search-toggle { display: none; }

.searchbox { position: relative; }
@media (max-width: 640px) {
  /* Иконка-лупа видна только на мобильных. */
  #search-toggle { display: grid; }
  /* По умолчанию строка поиска на мобильных скрыта; открывается тапом
     по #search-toggle — разворачивается второй строкой шапки
     (.searchbox--open, топбар при этом flex-wrap). */
  .searchbox { display: none; flex: 1 1 100%; order: 99; }
  .searchbox.searchbox--open { display: block; }
  .searchbox__input { width: 100%; }
  /* Выпадающий список — под полем, поверх карты (шапка sticky, z-index 1000). */
  .searchbox__drop { max-height: 50vh; overflow-y: auto; }
}
.searchbox__input {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  width: 210px;
  transition: border-color 0.12s, background 0.12s;
}
.searchbox__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev);
}
.searchbox__input::-webkit-search-cancel-button { cursor: pointer; }

.searchbox__drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1500;
  width: 320px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
}
.searchbox__drop[hidden] { display: none; }
.searchbox__msg {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}
.searchbox__item {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 1px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  cursor: pointer;
}
.searchbox__item:hover, .searchbox__item--sel { background: var(--bg-elev-2); }
.searchbox__name { font-weight: 600; grid-row: span 2; align-self: center; }
.searchbox__long {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchbox__meta {
  color: var(--text-faint);
  font-size: 11px;
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchbox__nopos {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 10px;
  color: var(--text-faint);
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0; /* иначе flex-ребёнок не сжимается, карта ломает layout */
  z-index: 0;
}

/* Тулбар статуса над картой */
/* Тулбар статуса над картой (панель уже position:absolute — контекст есть) */
.panel__toolbar {
  position: absolute;
  /* Статус числа нод — внизу страницы, на уровне кнопок справа/масштаба
     слева (раньше висел сверху по центру и мешал обзору карты). */
  bottom: 24px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  pointer-events: none;
}
.panel__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-muted);
  box-shadow: var(--shadow);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dot--idle  { background: var(--text-faint); }
.dot--live  { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.dot--err   { background: var(--danger); }

/* --- Смягчение контраста ТОПО-тайлов (только OpenTopoMap/Alt) --------------
   OpenTopoMap контрастный: горизонтали и лес «съедают» гексагоны нод.
   Слегка блеклим: чуть ниже контраст и насыщенность, чуть выше яркость.
   Фильтр привязан к className слоёв OTM (zm-otp) — прочие слои (Esri,
   CyclOSM, OSM) и так светлые/приглушённые, им коррекция не нужна. */
.leaflet-tile-pane .zm-otp {
  filter: brightness(1.08) contrast(0.88) saturate(0.85);
}

/* --- Тёмная тема: затемнение OSM-тайлов фильтром --------------------------- */
[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.62) invert(1) hue-rotate(178deg)
          saturate(0.55) contrast(0.92);
}
[data-theme="dark"] .leaflet-container { background: #0a0e13; }
.leaflet-container { font: inherit; }

/* --- Попап ---------------------------------------------------------------- */
/* Специфичность .leaflet-popup + класс: leaflet.css с CDN грузится ПОСЛЕ
   map.css (блок head в index.html) и его дефолт background:white иначе
   перебивает тему — в тёмной теме попап был белым. */
.leaflet-popup .leaflet-popup-content-wrapper {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.leaflet-popup .leaflet-popup-tip {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: none;
}
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; }
.leaflet-popup-close-button { color: var(--text-faint) !important; }

.popup__head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.popup__name { font-weight: 600; font-size: 14px; }
.popup__sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.popup__row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.popup__k { color: var(--text-muted); }
.popup__v { font-variant-numeric: tabular-nums; text-align: right; }
.popup__v--muted { color: var(--text-faint); }
.popup__tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  margin-top: 4px;
}

/* Восклицательный знак внутри серого гексагона молчуна (>24 ч) */
.legend__excl {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
.stale-badge {
  background: transparent;
  border: 0;
  pointer-events: none;
  user-select: none;
}

/* Символ «!» внутри серого гексагона (>24 ч тишины) */
.stale-badge__excl {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 700;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9));
  pointer-events: none;
}

/* --- Колонка правых панелей карты (Трекинг над Легендой) ------------------ */
.map-side {
  position: absolute;
  bottom: 24px;
  right: 12px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 210px;
  max-width: 280px;
}

/* --- Легенда -------------------------------------------------------------- */
.legend {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 184px;
  overflow: hidden;
  transition: min-height 0.15s;
}
.legend__toggle {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.legend__title { color: var(--text-muted); }
.legend__chev { color: var(--text-faint); transition: transform 0.15s; }
.legend[data-collapsed="true"] .legend__chev { transform: rotate(-90deg); }

/* --- Состояние «значок» (свёрнуто до иконки, как контролы Leaflet) --------
   В значке — только иконка (заголовок/шеврон скрыты). При разворачивании
   иконка остаётся слева, заголовок появляется правее неё. */
.legend__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.legend__toggle:hover .legend__icon { color: var(--accent); }
.legend[data-collapsed="icon"] {
  min-width: 0;
  align-self: flex-end;
}
.legend[data-collapsed="icon"] .legend__toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}
.legend[data-collapsed="icon"] .legend__title,
.legend[data-collapsed="icon"] .legend__chev { display: none; }
/* Развёрнутая панель: иконка слева от заголовка (gap из legend__toggle). */
.legend[data-collapsed="false"] .legend__toggle { gap: 8px; }
.legend__body {
  padding: 0 12px 11px;
  border-top: 1px solid var(--border);
}
.legend[data-collapsed="true"] .legend__body,
.legend[data-collapsed="icon"] .legend__body { display: none; }
.legend__group + .legend__group { margin-top: 10px; }
.legend__sub { font-size: 11px; color: var(--text-faint); margin: 8px 0 4px; }
.legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legend__item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.swatch { flex: 0 0 auto; border-radius: 3px; }
/* Обводка образцов в легенде — белая, как у маркеров на карте (контур). */
.hex-stroke { stroke: #ffffff; stroke-width: 1.5; }

/* SVG-паттерны штриховки (используются и в легенде, и на маркерах) */
.pat-bg { fill: transparent; }
.pat-line { stroke: currentColor; stroke-width: 1; fill: none; }
[data-theme="dark"] .pat-line { color: rgba(255,255,255,0.75); }
[data-theme="light"] .pat-line { color: rgba(0,0,0,0.55); }

/* --- Зум-контролы в тёмной теме ------------------------------------------- */
[data-theme="dark"] .leaflet-bar a {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .leaflet-bar a:hover { background: var(--bg-elev-2); }

/* --- Переключатель слоёв (значок, правый верхний угол) -------------------- */
.leaflet-control-layers {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.leaflet-control-layers-expanded {
  font: inherit;
  font-size: 12px;
  padding: 8px 10px;
  min-width: 130px;
}
.leaflet-control-layers-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  cursor: pointer;
}
.leaflet-control-layers-list input { accent-color: var(--accent); }
.leaflet-control-layers-toggle {
  width: 30px !important;
  height: 30px !important;
  background-size: 18px 18px !important;
}
/* Кнопки масштаба — на уровне нижнего ряда панелей (Легенда/Трекинг
   справа, bottom 24px); дефолт Leaflet 10px слишком низко. */
.leaflet-bottom.leaflet-left .leaflet-control-zoom { margin-bottom: 14px; }

/* Тёмная тема: стандартная иконка слоёв тёмная — инвертируем фильтром. */
[data-theme="dark"] .leaflet-control-layers-toggle {
  filter: invert(1) brightness(1.6);
}
/* --- Значок настроек карты (под значком слоёв) ------------------------------ */
.zm-settings {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-top: 8px !important; /* отступ от значка слоёв */
}
.zm-settings__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.zm-settings__btn svg { display: block; margin: 0; }
.zm-settings__btn:hover { color: var(--accent); }
.zm-settings__panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px); /* панель раскрывается влево от значка */
  min-width: 170px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.zm-settings__panel[hidden] { display: none; }
.zm-settings__row {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.zm-settings__row input { accent-color: var(--accent); margin: 0; }

/* --- Attribution: минимум, без флага Leaflet ------------------------------ */
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent) !important;
  color: var(--text-faint) !important;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px 0 0 0;
}
.leaflet-control-attribution a { color: var(--text-muted) !important; }
/* Прячем флаг-префикс Leaflet (если бы остался) и сделаем attribution */
/* максимально ненавязчивым. OSM-атрибуция сохраняется (требование лицензии). */
.leaflet-control-attribution svg,
.leaflet-attribution-flag { display: none !important; }

/* --- Кнопки попапа ноды («Карточка ноды» / «Трекинг») --------------------- */
.popup__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.popup__actions .popup__card-btn {
  flex: 1 1 0;
  margin-top: 0;
}

/* --- Панель «Трекинг» ------------------------------------------------------ */
.tracking__body { display: grid; gap: 10px; }
.tracking__switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.tracking__switch input { accent-color: var(--accent); }
.tracking__modes {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.tracking__mode { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.tracking__mode input { accent-color: var(--accent); margin: 0; }
.tracking__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tracking__btn {
  appearance: none;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tracking__btn:hover { border-color: var(--accent); color: var(--text); }
.tracking__btn:disabled { opacity: 0.5; cursor: default; }
.tracking__btn--active {
  background: var(--accent-weak);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}
.tracking__custom {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
/* display:grid перебивает UA-правило [hidden]{display:none} — дублируем явно */
.tracking__custom[hidden] { display: none; }
.tracking__custom input[type="datetime-local"] {
  font: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  color-scheme: light dark;
}
.tracking__select {
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
.tracking__pbtns { display: flex; gap: 6px; margin-top: 6px; }
.tracking__pbtns .tracking__btn { flex: 1 1 0; padding: 5px 8px; font-size: 12px; }
.tracking__status {
  font-size: 11px;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.tracking__status--err { color: var(--danger); }

/* --- Прогресс воспроизведения ---------------------------------------------- */
.play-progress { margin-top: 8px; }
.play-progress__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.play-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.1s linear;
}
.play-progress__time {
  margin-top: 4px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
}

/* --- Маркер playback (точка + имя ноды) ------------------------------------ */
.play-marker {
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.play-marker__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 3px rgba(0,0,0,0.6);
  flex: 0 0 auto;
}
.play-marker__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elev) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* --- Tooltip точки трека ---------------------------------------------------- */
.track-tip {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 11px;
  padding: 6px 9px;
}
.track-tip::before { display: none; } /* убрать стрелку с цветом по умолчанию */
.track-tip__name { font-weight: 600; margin-bottom: 2px; }
.track-tip__row { font-variant-numeric: tabular-nums; }