/* Живая карта-«диспетчерская»: SVG-сцены с машинами, точками и всплывающими событиями.
   Общий файл для главной (home.js) и отраслевых страниц industry-*.html
   (industry-live.js): главная подключает его вместе с home.css, отраслевые —
   вместе с industry.css. Префикс классов home- сложился на главной и сохранён,
   чтобы сцены были одинаковыми на всех страницах. Цвета — переменные темы,
   карта сама переключается между светлой и тёмной схемой. */

:root,
[data-theme="light"] {
  --home-land: #e8efe2;
  --home-field: #cfe3b8;
  --home-road: #c9d3dd;
  --home-city: #dde5ee;
  --home-danger: #dc2626;
  --home-sand: #eadfc8;
  --home-site: #f1ede4;
  --home-asphalt: #5b6470;
  --home-plant: #d9dee5;
  --home-forest: #6aa04d;
}

[data-theme="dark"] {
  --home-land: #1c2721;
  --home-field: #2a3d27;
  --home-road: #3a4a5c;
  --home-city: #243244;
  --home-danger: #f87171;
  --home-sand: #3d3627;
  --home-site: #232a24;
  --home-asphalt: #0d1217;
  --home-plant: #2b3646;
  --home-forest: #4e8a3a;
}

/* ---------- Панель «диспетчерской» ---------- */
.home-disp {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.home-disp__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.home-disp__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.home-disp__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #22c55e; animation: home-live 1.8s ease-out infinite; }

@keyframes home-live {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}

.home-map { display: block; width: 100%; height: auto; padding: 0.4rem; }
.home-land { fill: var(--home-land); }
.home-city rect { fill: var(--home-city); stroke: var(--line); stroke-width: 1; }
.home-street { fill: none; stroke: var(--home-road); stroke-width: 6; stroke-linejoin: round; }
.home-field { fill: var(--home-field); stroke: var(--line); stroke-width: 1.5; }
.home-rows { fill: none; stroke: #6aa04d; stroke-width: 2; stroke-dasharray: 2 6; opacity: 0.7; }
.home-road { fill: none; stroke: var(--home-road); stroke-width: 10; stroke-linecap: round; }
.home-road--minor { stroke-width: 7; }
.home-base { fill: var(--accent-light); stroke: var(--accent); stroke-width: 2; }
.home-place { fill: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.home-post rect { fill: var(--accent2); stroke: var(--card); stroke-width: 1.5; }
.home-post text { fill: var(--muted); font-size: 10px; font-weight: 700; }
.home-post.is-hit rect { fill: var(--accent2-strong); }

.home-veh circle:last-child { stroke: var(--card); stroke-width: 2.5; }
.home-veh.is-truck circle:last-child { fill: var(--accent); }
.home-veh.is-car circle:last-child { fill: #8b5cf6; }
.home-veh.is-tractor circle:last-child { fill: #4e8a3a; }
.home-veh.is-atz circle:last-child { fill: var(--accent2); }
.home-veh__ring { fill: none; stroke: var(--accent2); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.home-veh.is-hit .home-veh__ring { animation: home-ring 1.1s ease-out 2; }
.home-veh.is-alarm .home-veh__ring { stroke: var(--home-danger); }

@keyframes home-ring {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.8); }
}

.home-callout { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.home-callout.is-on { opacity: 1; }
.home-callout rect { fill: var(--card); stroke: var(--accent2); stroke-width: 1.5; }
.home-callout.is-alarm rect { stroke: var(--home-danger); }
.home-callout text { fill: var(--text); font-size: 11px; font-weight: 700; }

/* ---------- Сцены карт: агро, логистика, стройка, дороги ---------- */
.home-scen { display: flex; gap: 0.3rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.home-scen::-webkit-scrollbar { display: none; }
.home-scen button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600; line-height: 1.2; border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.home-scen button:hover { color: var(--text); border-color: var(--accent); }
.home-scen button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.home-scen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-scene { display: none; }
.home-scene.is-on { display: inline; animation: home-scene-in 0.45s ease-out; }
@keyframes home-scene-in { from { opacity: 0; } to { opacity: 1; } }
.home-road--hwy { stroke-width: 14; }
.home-wh rect { fill: var(--home-plant); stroke: var(--line); stroke-width: 1.5; }
.home-wh rect.home-wh__dock { fill: var(--accent2); stroke: none; }
.home-plant rect, .home-plant-r, .home-silo { fill: var(--home-plant); stroke: var(--line); stroke-width: 1.5; }
.home-quarry { fill: var(--home-sand); stroke: #c8b48a; stroke-width: 1.5; }
.home-quarry__step { fill: none; stroke: #c8b48a; stroke-width: 1.5; stroke-dasharray: 4 4; }
.home-site { fill: var(--home-site); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 4; }
.home-bld { fill: var(--home-city); stroke: var(--line); stroke-width: 1.5; }
.home-bld-lines { fill: none; stroke: var(--line); stroke-width: 1.5; }
.home-crane { fill: none; stroke: var(--accent2); stroke-width: 3; stroke-linecap: round; }
.home-asphalt { fill: var(--home-asphalt); }
.home-cone { fill: #f97316; }
.home-veh.is-reefer circle:last-child { fill: #0891b2; }
.home-veh.is-heavy circle:last-child { fill: #d97706; }
.home-veh.is-mixer circle:last-child { fill: #64748b; }

/* Лес на картах лесозаготовки */
.home-forest { fill: var(--home-forest); }

/* Генераторы и стационарные объекты: подсветка события по data-spot */
.home-gen rect { fill: var(--home-plant); stroke: var(--line); stroke-width: 1.5; }
.home-gen line { stroke: var(--muted); stroke-width: 1.5; }
.home-gen text { fill: var(--muted); font-size: 10px; font-weight: 700; }
.home-gen.is-hit rect { stroke: var(--accent2-strong); stroke-width: 3; }

.home-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: #0b1220; }
.home-kpis > div { padding: 0.6rem 0.75rem; border-right: 1px solid #1e293b; min-width: 0; }
.home-kpis > div:last-child { border-right: 0; }
.home-kpis dt { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-kpis dd { margin: 0.15rem 0 0; color: #cbd5e1; font-size: 0.76rem; white-space: nowrap; }
.home-kpis b { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 1.12rem; color: #fbbf24; font-variant-numeric: tabular-nums; }

.home-feed { list-style: none; margin: 0; padding: 0.35rem 0.5rem; display: grid; }
.home-feed li { border-bottom: 1px dashed var(--line); }
.home-feed li:last-child { border-bottom: 0; }
.home-feed li.is-new { animation: home-in 0.45s ease-out; }

@keyframes home-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.home-feed a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.4rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.35;
  border-radius: 0.5rem;
  transition: background var(--transition);
}

.home-feed a::after { content: '\2192'; color: var(--accent); opacity: 0; transition: opacity var(--transition), transform var(--transition); }
.home-feed a:hover { background: var(--alt); }
.home-feed a:hover::after { opacity: 1; transform: translateX(2px); }
.home-feed__ico { font-size: 1.05rem; text-align: center; }
.home-feed time { font: 600 0.76rem ui-monospace, Consolas, 'Courier New', monospace; color: var(--muted); margin-right: 0.35rem; }
.home-feed li.is-alarm a { color: var(--home-danger); font-weight: 600; }
.home-disp figcaption { font-size: 0.76rem; color: var(--muted); padding: 0.45rem 0.9rem 0.6rem; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .home-disp { max-width: 640px; width: 100%; margin: 0 auto; }
}

@media (max-width: 560px) {
  .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-scen { flex-wrap: wrap; }
  .home-kpis > div:nth-child(2) { border-right: 0; }
  .home-kpis > div:nth-child(-n + 2) { border-bottom: 1px solid #1e293b; }
}

@media (prefers-reduced-motion: reduce) {
  .home-disp__dot,
  .home-veh.is-hit .home-veh__ring,
  .home-feed li.is-new,
  .home-scene.is-on { animation: none !important; }
}