/* МАЯК · map screen styles (filters / layers / clusters / scrubber / ruler) */

/* ─────────────────────────────────────────
   FILTER BAR — top of map
   ───────────────────────────────────────── */
.fchip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fchip:hover { color: var(--fg); background: var(--bg-sub); }
.fchip.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-line);
}
.fchip .mono-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: inherit;
  opacity: .7;
}
/* ─────────────────────────────────────────
   LEAFLET (реальная карта OSM) — задача 1
   ───────────────────────────────────────── */
.map-widget-leaflet { cursor: default; }
.map-leaflet {
  position: absolute; inset: 0;
  z-index: 0;                     /* локальный контекст наложения: панели leaflet
                                     не должны перекрывать marker-card/списки */
  background: var(--map-bg);
}
.map-leaflet .leaflet-container {
  background: var(--map-bg);
  font: inherit;
}

/* Тёмная тема для ВСЕХ leaflet-карт (главная карта + геозоны и пр.):
   растровые тайлы светлые — инвертируем только слой тайлов; маркеры, геозоны,
   треки лежат в других панах leaflet и остаются в своих цветах. */
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.85);
}
/* Фон контейнера и ещё НЕ загруженных тайлов — тёмный. Дефолт leaflet (#ddd)
   иначе виден как светло-серые квадраты на тёмной теме. */
:root[data-theme="dark"] .leaflet-container {
  background: #0b0e11;
}

/* divIcon-маркер маяка */
.leaflet-div-icon.lf-mk,
.leaflet-div-icon.lf-pel {
  background: transparent;
  border: 0;
}
.lf-mk-core {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.lf-mk-sel .lf-mk-core { width: 14px; height: 14px; }
.lf-mk-ring {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .22);
}
.lf-pel-core {
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.lf-pel-sel .lf-pel-core { width: 13px; height: 13px; }
.lf-pel-ring {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 2px solid #a06bd6;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(160, 107, 214, .22);
}

/* мини-легенда (лево-низ) */
/* переключатель диапазона трека (верх-право, появляется при выборе) */
.map-track-range {
  position: absolute;
  right: 14px; top: 14px;
  z-index: 500;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-md);
}
.map-track-range .mtr-label {
  font-size: 11px; color: var(--muted); padding: 0 4px 0 2px;
}
.mtr-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 11.5px; font-family: var(--font-mono);
  color: var(--muted); padding: 3px 7px; border-radius: var(--r-1);
  transition: background var(--t-fast), color var(--t-fast);
}
.mtr-btn:hover { background: var(--bg-sub); color: var(--text); }
.mtr-btn.active { background: var(--accent); color: #fff; }
@media (max-width: 640px) {
  .map-track-range { right: 8px; top: 8px; }
}

.map-legend {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 500;
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-md);
  font-size: 11.5px;
  max-width: calc(100% - 28px);
}
.map-legend .cnt {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 6px;
  border-right: 1px solid var(--line);
}
.map-legend .cnt:last-child { border-right: 0; }
.map-legend .cnt b { font-family: var(--font-mono); font-weight: 600; }
.map-legend .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex-shrink: 0; }

@media (max-width: 720px) {
  .map-legend { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
}

/* Регулятор прозрачности LBS-окружности */
.map-lbs-ctl {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 500;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-md);
}
.map-lbs-ctl .mlbs-dot {
  width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0;
  background: #f0a020; box-shadow: 0 0 0 3px rgba(240, 160, 32, 0.22);
}
.map-lbs-ctl .mlbs-label {
  font-size: 11px; color: var(--muted); font-family: var(--font-mono);
}
.map-lbs-ctl input[type="range"] { width: 92px; accent-color: #f0a020; cursor: pointer; }
@media (max-width: 720px) {
  .map-lbs-ctl { right: 8px; bottom: 8px; }
  .map-lbs-ctl input[type="range"] { width: 70px; }
}

/* ── скраббер трека (низ карты, только в режиме «Трек») ── */
.map-track-scrub {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 500;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-md);
}
.map-track-scrub .mts-range { flex: 1; min-width: 60px; accent-color: var(--accent); cursor: pointer; }
.map-track-scrub .mts-step {
  border: 0; background: var(--bg-sub); color: var(--text);
  width: 28px; height: 24px; border-radius: var(--r-1); cursor: pointer;
  font-size: 11px; line-height: 1; flex-shrink: 0;
}
.map-track-scrub .mts-step:hover:not(:disabled) { background: var(--accent); color: #fff; }
.map-track-scrub .mts-step:disabled { opacity: .4; cursor: default; }
.map-track-scrub .mts-time { font-size: 11.5px; color: var(--text); white-space: nowrap; }
.map-track-scrub .mts-count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.map-track-scrub .mts-empty { font-size: 12px; color: var(--muted); }

/* при открытой карточке устройства — правые контролы уходят левее карточки,
   чтобы не перекрывать её (карточка: right:16px, width до 460px) */
@media (min-width: 721px) {
  .map-widget[data-selected="on"] .map-track-range,
  .map-widget[data-selected="on"] .map-lbs-ctl,
  .map-widget[data-selected="on"] .map-track-scrub { right: calc(460px + 30px); }
}
/* в режиме трека: LBS-регулятор поднимаем над скраббером, легенду скрываем */
.map-widget[data-track="on"] .map-lbs-ctl { bottom: 62px; }
.map-widget[data-track="on"] .map-legend { display: none; }