/* переключатель темы и тёмная тема
   Вынесено из index.html в фазе 3. Порядок подключения в <head> значим:
   файлы идут ровно в том порядке, в каком эти правила шли внутри <style>. */
/* ===== Кнопки темы ===== */
/* Прямой угол: круглых элементов в панели больше нет — круг живёт внутри знаков и в марке. */
/* Ход 9: кнопки не висят абсолютом поверх шапки, а стоят соседями шаринга в правой
   группе .brand-actions — поэтому ни координат, ни z-index здесь нет. Размер, посадку
   и заливку выбранной кнопки задаёт .brand-act (panel.css), тут остаётся только знак. */
.theme-toggle svg { width: 14px; height: 14px; }

/* ===== Тёмная тема =====
   Подложка карты — отдельные тайлы (см. TILES), поэтому здесь только интерфейс. */
/* Токены переопределяются целиком — правила выше написаны через них и не дублируются.
   Красная краска не меняется: на тёмной подложке #d33a20 читается так же. */
html.dark {
  --eh-ink:    #f2f3f5;
  --eh-body:   #d8dade;
  --eh-muted:  #7d838c;
  --eh-faint:  #7d838c;
  --eh-line:   #33373e;
  --eh-line-2: #2a2c31;
  --eh-hover:  #262a31;
  --eh-head:   #9aa0a8;
  /* Ход 12: «чернила» в тёмной теме светлые, «бумага» — тёмная, поэтому выворот
     чёрного в белое работает сам собой, без зеркальных правил на каждый элемент. */
  --eh-paper:  #16171a;
  --eh-row-hover: #262a31;
  --eh-rule:   #4a4f57;
  --eh-x:      #4a4f57;
  --eh-ctl-off:     #45474e;
  --eh-ctl-blocked: #4f5158;
}
html.dark body { background: #16171a; color: #e6e7ea; }
html.dark #sidebar { background: #16171a; border-left-color: #2a2c31; color: #e6e7ea; }
html.dark .brand-bar, html.dark .panel-top { background: #16171a; }
/* Выбранная кнопка шапки залита «чернилами темы», то есть светлым, а знак на ней —
   тёмный: то же правило, что у включённого фильтра. Под курсором она выворачивается
   обратно (ход 12) — поэтому у :hover своё правило, а не общее с покоем. */
html.dark .brand-act.on { background: var(--eh-ink); color: #16171a; }
html.dark .brand-act.on:hover { background: var(--eh-paper); color: var(--eh-ink); }
/* Блок ссылки накрывает колонку тем же цветом, что и сама колонка, — размытие
   делает его слоем, а не вторым фоном. */
html.dark .share-sheet { background: rgba(22,23,26,0.74); }
html.dark .share-url { color: var(--eh-ink); }
html.dark .share-note { color: var(--eh-body); }
html.dark .panel-top { box-shadow: 0 1px 0 #16171a; }
/* Прибитая шапка списка перекрывает уезжающие под неё строки — значит непрозрачна
   и в тёмной теме тоже. */
html.dark .list-head { background: #16171a; }
html.dark .hint { color: var(--eh-muted); }
html.dark .row.unavailable .ctl .eh-icon { color: #5c6069; }
html.dark .panel-search { color: #e6e7ea; }
html.dark .panel-search::placeholder { color: var(--eh-muted); }
/* Фильтры: включённый — чернилами темы, то есть светлым, текст на нём тёмный. */
html.dark .filter { background: #1c1f24; color: var(--eh-body); }
html.dark .filter:hover { background: var(--eh-ink); color: var(--eh-paper); border-color: var(--eh-ink); }
html.dark .filter.active { background: var(--eh-ink); color: #16171a; border-color: var(--eh-ink); }
html.dark .filter.active:hover { background: var(--eh-paper); color: var(--eh-ink); }
/* Число на залитом чипе живёт на токенах (--eh-paper вполсилы) и в тёмной теме
   считается само — отдельного правила больше не нужно. */
html.dark .list-act { border-bottom-color: #4a4f57; }
html.dark .request-layer { background: #1c1f24; }
html.dark .request-layer:hover { background: var(--eh-ink); border-color: var(--eh-ink); color: var(--eh-paper); }
html.dark .btn { background: #1c1f24; color: var(--eh-body); }
html.dark .btn:hover { background: var(--eh-ink); color: var(--eh-paper); border-color: var(--eh-ink); }
/* Активная заливка — чернила; в тёмной теме они светлые, поэтому текст тёмный.
   Фон переопределяем здесь же: `html.dark .btn` весит больше, чем `.btn.active`. */
html.dark .btn.active, html.dark .btn.ink { background: var(--eh-ink); color: #16171a; border-color: var(--eh-ink); }
html.dark .btn.active:hover, html.dark .btn.ink:hover { background: var(--eh-paper); color: var(--eh-ink); border-color: var(--eh-ink); }
html.dark .request-btn { background: #1c1f24; color: var(--eh-body); }
html.dark .request-btn:hover { background: var(--eh-ink); color: var(--eh-paper); border-color: var(--eh-ink); }
html.dark .sidebar-handle { background: #1c1f24; border-color: #33373e; color: #b9bec6; }
html.dark .sidebar-handle:hover { background: #262a31; color: #fff; }
/* Акцентная кнопка не должна тонуть в общем тёмном: специфичность выше, чем у .btn. */
html.dark .btn.primary { background: var(--eh-action); border-color: var(--eh-action); color: #fff; }
html.dark .btn.primary:hover { background: var(--eh-action-hi); border-color: var(--eh-action-hi); }
/* Цвет знака в покое и под курсором живёт на токенах .brand-act (panel.css):
   --eh-head и выворот в --eh-paper в тёмной теме считаются сами. */
/* Стрелка «вернуть свой набор» — белая на красном и в тёмной теме тоже. Правило здесь
   обязательно, хотя в panel.css уже написано `color: #fff`: строка выше весит больше
   (html + .dark + .brand-act против .brand-act.link-back), и без этой знак выходил
   серым по красному — поймано в браузере, не в голове.
   Заливка своего правила не просит: у ЗАЛИВКИ красный на тёмном не светлеет — то же,
   что у .btn.primary выше. Светлеет до #e04a2e только тонкое: буквы марки и обводки. */
html.dark .brand-act.link-back, html.dark .brand-act.link-back:hover { color: #fff; }
/* Блок «Новая метка» — чернилами темы (светлый), текст тёмный. */
html.dark .flag-state { color: #16171a; }
html.dark .flag-state-mark, html.dark .flag-state-foot span { color: #5c6069; }
html.dark .flag-state-cancel { color: #16171a; border-bottom-color: #16171a; }
html.dark .sym-opt { background: #1c1f24; color: var(--eh-body); }
html.dark .sym-opt:hover { background: var(--eh-ink); color: var(--eh-paper); border-color: var(--eh-ink); }
html.dark .sym-opt.selected { background: var(--eh-ink); color: #16171a; }
html.dark .sym-opt.selected:hover { background: var(--eh-paper); color: var(--eh-ink); }
html.dark .flag-name, html.dark .flag-rename { color: #e6e7ea; }
html.dark .flag-rename { background: #1c1f24; }
html.dark .legend, html.dark .hint-banner { background: #1c1f24; color: #e6e7ea; }
html.dark .empty-state { background: rgba(28,31,36,0.95); color: #d8dade; }
html.dark .empty-state .es-btn { background: #1c1f24; }
html.dark .empty-state .es-btn:hover { background: var(--eh-ink); color: #16171a; }
html.dark .empty-state .es-never { border-color: #e04a2e; color: #e04a2e; }
html.dark .empty-state .es-never:hover { background: #e04a2e; border-color: #e04a2e; color: #fff; }
html.dark .legend .g-labels, html.dark .legend .lg-sub, html.dark .legend .legend-summary { color: #9aa0a8; }
html.dark .legend .lg-cov td { border-color: #33373e; }
html.dark .legend .lg-cov-title { border-color: #d8dade; }
html.dark .legend.has-heat .legend-layers { border-color: #33373e; }
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip { background: #1c1f24; color: #e6e7ea; }
html.dark .leaflet-popup-content-wrapper { color: #d8dade; }
html.dark .leaflet-popup-content a { color: #e6e7ea; }
/* Карточка (ход 14): волоски между строками и чипы — на тёмных токенах;
   чёрная линия под шапкой на тёмном — светлая, как чернила темы. */
html.dark .ec-card .ec-chip { background: #262a31; color: #d8dade; }
html.dark .ec-head { border-color: #d8dade; }
html.dark .ec-foot, html.dark .ec-row, html.dark .ec-actions, html.dark .ec-item { border-color: #33373e; }
html.dark .ec-item { color: #e6e7ea; }
html.dark .ec-item-place { color: #9aa0a8; }
html.dark .ec-kind, html.dark .ec-place, html.dark .ec-section, html.dark .ec-more { color: #9aa0a8; }
html.dark .ec-popup .leaflet-popup-content-wrapper { border-color: #33373e; }
html.dark .ec-btn { background: #1c1f24; color: #e6e7ea; border-color: #33373e; }
html.dark .ec-btn:hover { background: #262a31; }
html.dark .ec-btn.primary { border-color: var(--eh-action); color: #f2a08e; }
html.dark .ec-btn.primary:hover { background: var(--eh-action); color: #fff; }
/* Большая карточка по клику (details-card.js): те же тёмные подложка и волоски,
   что у попапа; бежевая плашка — на полтона светлее подложки. */
html.dark .dc-host {
  --dc-bg: #1c1f24; --dc-bar: #22262c; --dc-grey: #9aa0a8; --dc-dash: #4a4f57;
  --dc-soft: #b9bdc4; --dc-rule: #33373e; --dc-hair: #2a2c31; --dc-x: #7d838c; --dc-grip: #4a4f57;
}
html.dark .dc { box-shadow: 0 2px 14px rgba(0,0,0,.5); }
html.dark .dc-sheet .dc { box-shadow: 0 -2px 18px rgba(0,0,0,.5); }
html.dark .ec-bar-track { background: #33373e; }
html.dark .ec-bar-fill { background: #d8dade; }
html.dark .point-marker.hollow { background: #1c1f24 !important; }
/* Подсказка по наведению (ж/д, тепловые слои): тот же тёмный, что у попапа;
   стрелка подсказки рисуется рамкой псевдоэлемента, поэтому её цвет задаётся
   отдельно по каждой стороне. */
html.dark .leaflet-tooltip { background: #1c1f24; color: #e6e7ea; border-color: #33373e; }
html.dark .leaflet-tooltip small { color: #9aa0a8; }
html.dark .leaflet-tooltip-top::before { border-top-color: #1c1f24; }
html.dark .leaflet-tooltip-bottom::before { border-bottom-color: #1c1f24; }
html.dark .leaflet-tooltip-left::before { border-left-color: #1c1f24; }
html.dark .leaflet-tooltip-right::before { border-right-color: #1c1f24; }
html.dark .leaflet-control-zoom a,
html.dark .leaflet-control-zoom-level { background: #1c1f24; color: #d8dade; border-color: #33373e; }
html.dark .leaflet-control-zoom a:hover { background: #262a31; }
html.dark .leaflet-control-attribution { background: rgba(28,31,36,.85); color: #9aa0a8; }
html.dark .leaflet-control-attribution a { color: #7aa7e6; }