/* ═══════════════════════════════════════════════
   REALTRAC PROTOTYPE — PLAYBACK
   Раздел «История перемещений»: период, выбор носителей, сводка, треки и проигрыватель.
   Цвета треков: синий (акцент), фиолетовый, бирюзовый. Красный и оранжевый/жёлтый не используются —
   они означают нахождение носителя в красной или жёлтой зоне (метка перекрашивается в цвет зоны).
   Раскладка наследует map.css (.map-layout, .map-panel, .map-stage, .carrier-pin); здесь — только
   своё: проигрыватель, правая панель, треки, тепловые слои, сводка и отметки на шкале.
═══════════════════════════════════════════════ */

/* Цвета трёх треков — переменные на корне раздела: ими пользуются и линии (SVG), и метки, и образцы
   в списке, и полоса наличия данных (читается из CSS в playback.js). В тёмной теме — светлее,
   чтобы читались на тёмной подложке */
.playback {
  --track-1: #0070B8;
  --track-2: #7C3AED;
  --track-3: #0E9384;
}
[data-theme="dark"] .playback {
  --track-1: #4DA3E0;
  --track-2: #A78BFA;
  --track-3: #2DD4BF;
}

/* ── Период ── */
/* Блок «Период»: пресеты, два поля даты-времени и подсказка с лимитом сервера или ошибкой */
.pb-period { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.pb-field { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
/* Поле datetime-local: встроенный календарь браузера — в цвет темы (color-scheme) */
.search-input.pb-input { padding: var(--space-2) var(--space-3); color-scheme: light; }
[data-theme="dark"] .search-input.pb-input { color-scheme: dark; }
.pb-hint { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.pb-hint.is-error { color: var(--color-error); }
/* Пресет недоступен для такого числа носителей (72 ч — только для одного) */
.filter-btn:disabled { opacity: .4; cursor: not-allowed; }
.filter-btn:disabled:hover { background: var(--color-surface-offset); color: var(--color-text-muted); border-color: var(--color-border); }

/* ── Выбор носителей ── */
/* Выбраны трое — остальные строки заблокированы */
.pb-pick:disabled { opacity: .45; cursor: not-allowed; }
.pb-pick:disabled:hover { background: none; }
/* Образец цвета слева от носителя: пустой квадрат — не выбран, цвет трека с галочкой — выбран */
.pb-swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: #fff;
}
.pb-swatch svg { width: 12px; height: 12px; stroke-width: 3; }
.pb-swatch.track-c1 { background: var(--track-1); border-color: var(--track-1); }
.pb-swatch.track-c2 { background: var(--track-2); border-color: var(--track-2); }
.pb-swatch.track-c3 { background: var(--track-3); border-color: var(--track-3); }

/* ── Загрузка ── */
/* Кнопка «Загрузить историю» (во время загрузки — «Отменить»), полоса хода по кускам и строка итога */
.pb-load { display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.pb-progress { height: 4px; background: var(--color-surface-offset); }
.pb-progress span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width var(--transition); }

/* ── Сводка ── */
/* По блоку на носителя: заголовок с образцом цвета, строка «Сейчас», показатели парами,
   места (полоски длины пропорционально времени) и время в зонах */
.pb-sum { padding: var(--space-3) var(--space-4); }
.pb-sum + .pb-sum { border-top: 1px solid var(--color-divider); }
.pb-sum-head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.pb-sum-head .pb-swatch { width: 12px; height: 12px; }
/* «Сейчас: место, скорость» — обновляется при проигрывании; min-height, чтобы блок не прыгал */
.pb-now { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-primary); min-height: 1.4em; }
.pb-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); }
.pb-stats dt { color: var(--color-text-muted); }
.pb-stats dd { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Места, где был дольше всего: название, время и полоска цвета трека */
.pb-places { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.pb-place { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-2); font-size: var(--text-xs); }
.pb-place-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-place-time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pb-place-bar { grid-column: 1 / -1; height: 3px; }
.pb-place-bar.track-c1 { background: var(--track-1); }
.pb-place-bar.track-c2 { background: var(--track-2); }
.pb-place-bar.track-c3 { background: var(--track-3); }

/* ── Треки и метки ── */
/* Весь трек — бледный (.35), чтобы не спорить с планом; последние 5 минут — яркий хвост поверх.
   Метка — .carrier-pin из map.css, перекрашенная в цвет трека; без данных в этот момент — серая */
.track { fill: none; stroke-opacity: .35; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; }
.track-tail { fill: none; stroke-opacity: .95; stroke-linecap: round; stroke-linejoin: round; }
.track.track-c1, .track-tail.track-c1 { stroke: var(--track-1); }
.track.track-c2, .track-tail.track-c2 { stroke: var(--track-2); }
.track.track-c3, .track-tail.track-c3 { stroke: var(--track-3); }
.carrier-pin.track-c1 { background: var(--track-1); }
.carrier-pin.track-c1::after { border-top-color: var(--track-1); }
.carrier-pin.track-c2 { background: var(--track-2); }
.carrier-pin.track-c2::after { border-top-color: var(--track-2); }
.carrier-pin.track-c3 { background: var(--track-3); }
.carrier-pin.track-c3::after { border-top-color: var(--track-3); }
.carrier-pin.track-pin.is-offline { background: var(--color-offline); }
.carrier-pin.track-pin.is-offline::after { border-top-color: var(--color-offline); }

/* ── Пустое состояние ── */
/* Подсказка «Выберите носителей…» поверх карты сверху по центру; клики проходят сквозь неё к карте */
.pb-empty {
  position: absolute;
  left: 50%;
  top: var(--space-6);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.pb-empty svg { width: 18px; height: 18px; color: var(--color-primary); }

/* ── Проигрыватель ── */
/* Панель внизу поверх карты: пуск, время, шкала (полоса данных + отметки + ползунок), скорость,
   кнопка правой панели. Сосед .map-canvas, а не его ребёнок — иначе Leaflet перехватывал бы ползунок */
.player {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;              /* над .map-canvas (isolation: isolate) */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.player-play { background: var(--color-primary); color: #fff; }
.player-play:hover { background: var(--color-primary-hover); color: #fff; }
.player-time { min-width: 150px; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Шкала: холст наличия данных сверху, отметки над ним, ползунок ниже — всё в одной колонке */
.player-track { position: relative; flex: 1; min-width: 120px; height: 36px; display: flex; flex-direction: column; justify-content: center; }
.player-density { position: absolute; left: 0; right: 0; top: 2px; width: 100%; height: 12px; opacity: .8; }
.player-slider { position: relative; width: 100%; margin-top: 14px; accent-color: var(--color-primary); }
.player-speed { flex-shrink: 0; }
/* Элементы карты — над проигрывателем */
.playback .leaflet-bottom { bottom: 64px; }

/* Узкий экран: шкала переносится на вторую строку во всю ширину */
@media (max-width: 900px) {
  .player { flex-wrap: wrap; }
  .player-track { order: 3; flex-basis: 100%; }
  .player-time { min-width: 0; flex: 1; }
  .playback .leaflet-bottom { bottom: 104px; }
}

/* ── Отображение: треки / тепловой след / тепловая карта ── */
/* Блок в правой панели: три переключателя и под каждым слоем — его настройки и легенда */
.pb-view { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.pb-view .filter-btn { display: inline-flex; align-items: center; gap: var(--space-1); }
.pb-view .filter-btn svg { width: 13px; height: 13px; }
.pb-heat-opts { display: flex; flex-direction: column; gap: var(--space-3); }
.pb-legend { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Те же цвета, что у слоя (heat.js, GRADIENT) */
.pb-legend-bar { height: 8px; background: linear-gradient(90deg, #7CC4F0 0%, #0070B8 30%, #F5C518 58%, #F08A24 78%, #D01F27 100%); }
.pb-legend-labels { display: flex; justify-content: space-between; }
.pb-legend-max { color: var(--color-text); font-weight: 500; }
/* Тепло — под треками и метками, над подложками */
.playback .leaflet-heatmap-layer { opacity: .85; }
/* Подпись группы настроек слоя — капителью, как подписи фильтров в кабинете */
.pb-heat-opts .filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Правая панель: отображение и сводка (слева — только что загрузить) ── */
/* Та же .map-panel, что слева, но с границей слева; на узком экране — выезжает справа поверх карты */
.map-panel.pb-right { width: 320px; border-right: 0; border-left: 1px solid var(--color-border); }
@media (max-width: 900px) {
  .map-panel.pb-right { inset: 0 0 0 auto; width: min(320px, 88vw); }
}

/* Кнопка «Следить» в заголовке блока «Объекты» */
#pb-follow { display: inline-flex; align-items: center; gap: var(--space-1); }
#pb-follow svg { width: 13px; height: 13px; }

/* Метка в красной или жёлтой зоне — цвет зоны поверх цвета носителя (как на карте) */
.carrier-pin.track-pin.is-zone-danger { background: var(--rt-red); }
.carrier-pin.track-pin.is-zone-danger::after { border-top-color: var(--rt-red); }
.carrier-pin.track-pin.is-zone-notice { background: var(--zone-notice); color: #1A1D23; }
.carrier-pin.track-pin.is-zone-notice::after { border-top-color: var(--zone-notice); }

/* ── Участки трека в цветных зонах ── */
/* Поверх бледного трека, чуть толще и почти непрозрачно: видно, где именно носитель был в зоне */
.track-zone { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .9; }
.track-zone.is-danger { stroke: var(--rt-red); }
.track-zone.is-notice { stroke: var(--zone-notice); }

/* ── Отметки на шкале времени: входы в зоны (полосы) и тревоги (ромбы) ── */
/* Слой отметок не ловит клики сам (pointer-events: none), чтобы не мешать ползунку; ловят только
   отметки. Положение — left в процентах периода (playback.js, renderMarks) */
.player-marks { position: absolute; left: 0; right: 0; top: 0; height: 16px; pointer-events: none; }
.pmark { position: absolute; top: 0; transform: translateX(-50%); pointer-events: auto; padding: 0; cursor: pointer; }
.pmark-zone { width: 4px; height: 16px; }
.pmark-zone.is-danger { background: var(--rt-red); }
.pmark-zone.is-notice { background: var(--zone-notice); }
/* Тревога — ромб над шкалой: красный — опасная, жёлтый — предупреждение и уведомление */
.pmark-alarm { top: -5px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); border: 1.5px solid var(--color-surface); background: var(--rt-red); }
.pmark-alarm.level-WARNING, .pmark-alarm.level-NOTICE { background: var(--zone-notice); }
.pmark:hover, .pmark:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; z-index: 1; }

/* ── Время в зонах в сводке ── */
/* Итоги по красным и жёлтым зонам (пилюли) и список заходов: точка цвета зоны, название,
   длительность, под ними время входа–выхода; строка — кнопка «перейти к входу» */
.pb-zones { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.pb-zone-totals { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pb-zone-none { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.pb-visits { list-style: none; display: flex; flex-direction: column; }
.pb-visit { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); text-align: left; font-size: var(--text-xs); }
.pb-visit:hover { background: var(--color-primary-highlight); }
.pb-visit .status-dot { grid-row: 1 / span 2; align-self: center; }
.pb-visit-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-visit-dur { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pb-visit-time { grid-column: 2 / -1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }