/* Главная страница: первый экран с живой «диспетчерской» и плитки задач.
   Подключается только на index.html, общий styles.css не меняет.
   Цвета — переменные темы, карта сама переключается между светлой и
   тёмной схемой. Оживляет home.js; без скрипта видно статичный кадр. */

:root,
[data-theme="light"] {
  --home-land: #e8efe2;
  --home-field: #cfe3b8;
  --home-road: #c9d3dd;
  --home-city: #dde5ee;
  --home-danger: #dc2626;
}

[data-theme="dark"] {
  --home-land: #1c2721;
  --home-field: #2a3d27;
  --home-road: #3a4a5c;
  --home-city: #243244;
  --home-danger: #f87171;
}

.home-hero-sec { padding-top: 2.5rem; }

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 2.4rem;
  align-items: center;
}

.home-hero h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.13;
  margin: 0 0 1rem;
}

.home-hero__lead { color: var(--muted); font-size: 1.1rem; line-height: 1.6; max-width: 58ch; margin: 0 0 1.5rem; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.home-facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }

.home-facts li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}

.home-facts li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  color: var(--on-accent);
  background: var(--accent);
}

/* ---------- Диспетчерская ---------- */
.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-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); }

/* ---------- Какая у вас задача ---------- */
.home-tasks { margin-top: 2.6rem; }
.home-tasks__title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 0.9rem; }

.home-tasks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-task {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1rem;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.home-task:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.home-task__ico { font-size: 1.7rem; line-height: 1; }
.home-task h3 { margin: 0.35rem 0 0; font-size: 1.08rem; }
.home-task p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 0.93rem; }
.home-task__links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem !important; }

.home-task__links a {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-strong);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  transition: background var(--transition), color var(--transition);
}

.home-task__links a:hover { background: var(--accent); color: var(--on-accent); }

@media (max-width: 1000px) {
  .home-tasks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-disp { max-width: 640px; width: 100%; margin: 0 auto; }
}

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

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