/* Главная radar.sdvigid.ru — скин «Штаб» (сайт-версия дизайна мини-аппа MAX).
   Светлая тема базовая, тёмная — по системной prefers-color-scheme (без
   кнопки-переключателя: на главной он не нужен, в отличие от приложения).
   Палитра и приёмы скопированы из max-app/max-app.css, чтобы обе поверхности
   выглядели одним продуктом. Подключается из index.html как ?v=1. */

* { box-sizing: border-box; }
:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg: #eef1f5; --fg: #1a2530; --card: #ffffff; --line: #dfe5ec;
  --dim: #5c6b7d; --danger: #d92d20; --danger-dim: rgba(217, 45, 32, .12);
  --detect: #b54708; --detect-dim: rgba(181, 71, 8, .12);
  --blue: #1570cd; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --head-grad: linear-gradient(180deg, #ffffff, #eef1f5);
  --summary-bg: rgba(255, 255, 255, .88); --summary-fg: #5c6b7d; }

html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); }

/* Раскладка: карта слева на всё свободное место, сайдбар справа. */
#app { display: flex; height: 100vh; }
#map { flex: 1 1 auto; min-width: 0; background: #c4d3e6; }
#sidebar { flex: 0 0 380px; width: 380px; display: flex; flex-direction: column;
           background: var(--bg); border-left: 1px solid var(--line); }

/* Шапка сайдбара: строка бренда + LIVE, ниже крупный моносчётчик
   активных угроз (как .big-counter в мини-аппе), статус канала, навигация. */
#header { padding: 10px 14px 12px; background: var(--head-grad);
          border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-name { margin: 0; font-size: 15px; font-weight: 800;
              letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.brand-live { margin-left: auto; display: flex; align-items: center; gap: 5px;
              color: #e04a3d; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e04a3d;
            box-shadow: 0 0 8px #e04a3d; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.big-counter { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 8px;
               font-family: var(--mono); }
.big-counter b { font-size: 26px; line-height: 1; color: var(--fg); letter-spacing: .02em; }
.big-counter b.is-zero { color: var(--dim); }
.big-counter span { font-size: 10px; color: var(--dim); letter-spacing: .1em;
                    text-transform: uppercase; }
#status { font-family: var(--mono); font-size: 11px; color: var(--dim); }
#status.polling { color: var(--detect); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.site-nav a { color: var(--blue); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* Лента карточек угроз. */
#threats { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
           padding: 12px; display: grid; gap: 8px; align-content: start; }
.empty { text-align: center; color: var(--dim); padding: 24px 12px; }

/* Карточка: панель с левой кромкой ЦВЕТА ТИПА УГРОЗЫ (inline из app.js),
   статус — бейджем, «Опасность» дополнительно подсвечена градиентом. */
.threat { background: var(--card); border: 1px solid var(--line);
          border-left: 3px solid var(--detect); border-radius: 8px; padding: 9px 11px; }
.threat.danger { background: linear-gradient(90deg, var(--danger-dim), var(--card) 55%); }
.threat-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                font-weight: 700; font-size: 13.5px; letter-spacing: .01em; }
.threat-kind { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.threat-badge { margin-left: 8px; padding: 1px 7px; border-radius: 999px;
                font-size: 10px; font-weight: 700; letter-spacing: .06em;
                text-transform: uppercase; }
.threat-badge.danger { color: #b42318; background: var(--danger-dim); }
.threat-badge.detection { color: var(--detect); background: var(--detect-dim); }
.card-time { margin-left: auto; padding-left: 8px; color: var(--dim);
             font-family: var(--mono); font-size: 11px; font-weight: 500;
             white-space: nowrap; }
.threat .meta { margin: 5px 0 0; font-size: 12px; color: var(--dim);
                overflow-wrap: anywhere; }
.threat-note { margin: 4px 0 0; font-size: 13px; color: var(--fg);
               overflow-wrap: anywhere; }

/* Справочный блок и легенда карты. */
.about { padding: 12px; background: var(--card); border-top: 1px solid var(--line);
         font-size: 12px; color: var(--dim); max-height: 26vh; overflow-y: auto; }
.about h2 { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--dim); }
.about p { margin: 0 0 8px; line-height: 1.45; }
.about a { color: var(--blue); }
.legend { padding: 12px; background: var(--card); border-top: 1px solid var(--line);
          font-size: 12px; color: var(--dim); }
.legend-item { display: flex; align-items: center; margin-bottom: 4px; }
.legend-item:last-child { margin-bottom: 0; }
.legend-color { width: 14px; height: 14px; margin-right: 8px; border-radius: 3px;
                border: 1px solid var(--line); flex: 0 0 auto; }
/* Квадраты легенды = ровно те заливки регионов, что рисует app.js (COLORS). */
.legend-high { background: #f44336; }
.legend-low { background: #ffeb3b; }
.legend-none { background: #e0e0e0; }

/* Leaflet: попапы в системных цветах темы. */
.leaflet-container { font: inherit; }
.leaflet-popup-content { min-width: 190px; max-width: 280px; }
.popup-event + .popup-event { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.popup-event strong, .popup-event small { display: block; }
.popup-event small { color: var(--dim); }
.popup-event p { margin: 4px 0 0; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.leaflet-control-attribution { background: var(--summary-bg); color: var(--summary-fg); font-size: 10px; }
.leaflet-control-attribution a { color: var(--blue); }

/* Мобильная вёрстка: карта сверху, сайдбар снизу на всю ширину. */
@media (max-width: 720px) {
  #app { flex-direction: column; height: auto; min-height: 100vh; }
  #map { flex: 0 0 55vh; min-height: 260px; }
  #sidebar { flex: 0 0 auto; width: auto; border-left: 0;
             border-top: 1px solid var(--line); }
  .about { max-height: none; }
}

/* ===== Тёмная тема (системная) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14; --fg: #dfe7f0; --card: #121a23; --line: #1e2a38;
    --dim: #8a9bad; --danger: #ff4433; --danger-dim: rgba(255, 68, 51, .16);
    --detect: #ffb020; --detect-dim: rgba(255, 176, 32, .14);
    --blue: #29a3ff;
    --head-grad: linear-gradient(180deg, #121a23, #0b0f14);
    --summary-bg: rgba(11, 15, 20, .85); --summary-fg: #9fb0c3; }
  #map { background: #0b0f14; }
  .leaflet-tile { filter: brightness(.6) saturate(.55); }
  .leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #121a23; color: #dfe7f0; border: 1px solid #1e2a38;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
  .threat-badge.danger { color: #ff8a7d; }
  .threat-badge.detection { color: #ffb020; }
  .legend-color { border-color: #1e2a38; }
}

/* Квадраты легенды = заливка регионов по СТАТУСУ (как в мини-аппе):
   красный «Опасность», синий «Фиксация». */
.legend-high { background: #f44336; }
.legend-low { background: #2e90fa; }
.legend-none { background: #e0e0e0; }