/* ═══════════════════════════════════════════════
   REALTRAC PROTOTYPE — BASE
   Reset, кнопки, карточки, панель фильтров, бейджи, уведомление-тост.
   Карточка .card и панель .filters-bar — как в realtrac_partner/template_styles.css 1.5.0.
   Скругления — 0 (правило кабинета).
   Общие элементы для всех разделов; стили конкретных экранов — в shell.css, map.css, playback.css,
   directory.css, dashboard.css, module.css.
═══════════════════════════════════════════════ */

/* ── RESET ── */
/* Сброс отступов и box-sizing; кнопки наследуют шрифт и цвет, чтобы выглядеть как текст, пока им не задан класс */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
a, button, [role="button"] {
  transition: color var(--transition), background var(--transition),
              box-shadow var(--transition), border-color var(--transition);
}
/* Видимый фокус только с клавиатуры (focus-visible), чтобы клики мышью не рисовали рамку */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
/* Текст только для экранного диктора */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Дополнительные токены прототипа, которых нет в tokens.css сайта: предупреждение (жёлтые зоны,
   уровень WARNING) и «не в сети» (серые метки и точки). Для обеих тем */
:root {
  --color-warning:    #B26A00;
  --color-warning-bg: #FFF4E0;
  --color-offline:    #9AA0AE;
}
[data-theme="dark"] {
  --color-warning:    #FFB74D;
  --color-warning-bg: #2E2416;
  --color-offline:    #4A5263;
}

/* ── BUTTONS ── */
/* Базовая кнопка: inline-flex со значком 16 px; варианты — primary (действие), ghost (второстепенная, с рамкой),
   danger (общая тревога), block (во всю ширину) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg, .btn i { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-surface); }
.btn-ghost:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-highlight); }
.btn-danger { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
.btn-danger:hover { color: #fff; background: var(--color-error); }
.btn-block { width: 100%; }

/* Квадратная кнопка-значок 36 px (шапка, строки таблиц, карточки); aria-expanded="true" — открыт её список */
.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  position: relative;
  flex-shrink: 0;
}
.icon-btn svg, .icon-btn i { width: 18px; height: 18px; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--color-primary-highlight); color: var(--color-primary); }

/* ── CARD ── */
/* Карточка-контейнер блоков: белая поверхность, рамка и лёгкая тень; overflow hidden — чтобы содержимое
   (таблицы, карты Leaflet) не вылезало за рамку. Шапка карточки — заголовок со значком и действия справа */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: 0;
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  gap: var(--space-3);
}
.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.card-title svg, .card-title i { width: 17px; height: 17px; color: var(--color-primary); flex-shrink: 0; }

/* ── COUNTER BADGE ── */
/* Счётчик в заголовках и дереве; is-alert — красный (опасные), is-warn — жёлтый (предупреждения) */
.count {
  min-width: 22px;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
}
.count.is-alert { color: #fff; background: var(--rt-red); }
.count.is-warn { color: #1A1D23; background: var(--zone-notice); }   /* оранжевые — предупреждения */

/* ── FILTER BAR (компактный вариант для боковой панели) ── */
/* Полоса фильтров под шапкой карточки: поле поиска со значком внутри (search-wrap), кнопка очистки,
   группа кнопок-фильтров (filter-group / filter-btn, active — выбранная) */
.filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.search-wrap { position: relative; flex: 1 1 100%; min-width: 0; }
.search-wrap > svg, .search-wrap > i {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-faint);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: var(--space-2) calc(var(--space-3) * 2 + 16px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input::placeholder { color: var(--color-text-faint); }
.search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.search-clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-text-faint);
}
.search-clear:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
.search-clear svg { width: 14px; height: 14px; }
.filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.filter-btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: 0;
  white-space: nowrap;
}
.filter-btn:hover { background: var(--color-primary-highlight); color: var(--color-primary); border-color: var(--color-primary); }
.filter-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── STATUS DOT ── */
/* Квадратная точка статуса 8 px перед подписью: серая — не в сети, зелёная — в сети, красная — тревога,
   жёлтая — предупреждение. Цвет всегда рядом с текстом, не сам по себе */
.status-dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--color-offline); }
.status-dot.is-online { background: var(--color-success); }
.status-dot.is-alarm { background: var(--rt-red); }
.status-dot.is-warning { background: var(--color-warning); }

/* ── TOAST ── */
/* Сообщения ui.toast() в правом нижнем углу: стопка, не шире 380 px; is-error — красная полоса слева */
.toast-host {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(380px, calc(100vw - 2 * var(--space-4)));
}
.toast {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}
.toast.is-error { border-left-color: var(--color-error); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); }
.toast.is-error svg { color: var(--color-error); }

/* ── ОПАСНАЯ ТРЕВОГА: красная плашка под колокольчиком шапки (alerts.js) ── */
/* Положение (top / right / --arrow-right) считает alerts.placeUnderBell по колокольчику; при открытой карточке
   носителя плашки сдвигаются левее и стрелка убирается (no-arrow). Текст — кнопка (переход к носителю),
   крестик — закрыть; появление — короткое выезжание сверху */
.alarm-toasts {
  position: fixed; z-index: 1300;
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(380px, calc(100vw - 2 * var(--space-4)));
}
.alarm-toast {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  color: #fff; background: var(--rt-red);
  box-shadow: var(--shadow-md);
  animation: alarm-toast-in 180ms ease-out;
}
.alarm-toasts:not(.no-arrow) .alarm-toast:first-child::before {      /* стрелка к колокольчику */
  content: ''; position: absolute; top: -7px; right: var(--arrow-right, 24px);
  border: 7px solid transparent; border-top: 0; border-bottom-color: var(--rt-red);
}
.alarm-toast > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alarm-toast-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; text-align: left; font-size: var(--text-sm); line-height: 1.35; color: inherit; background: none; border: 0; cursor: pointer; }
.alarm-toast-text b { font-weight: 700; }
.alarm-toast-text:hover span { text-decoration: underline; }
.alarm-toast-close { display: flex; padding: 2px; color: inherit; background: none; border: 0; opacity: .85; cursor: pointer; }
.alarm-toast-close:hover { opacity: 1; }
.alarm-toast-close svg { width: 16px; height: 16px; }
@keyframes alarm-toast-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .alarm-toast { animation: none; } }