/* =============================================================
   m3-expressive.css — дизайн-система мобильного клиента 3.2.0.

   Material Design 3 + M3 Expressive поверх style.css. Подключается после
   него и переопределяет токены и вид; имена классов, на которые смотрит
   логика страниц, не меняются.

   Те же правила, что у десктопа (client/desktop/src/redesign.css):

   1. Норма тихая. Цвет получают отклонения: ошибка (error) — только авария,
      жёлтый — внимание и ручной режим, primary — «горит» и действия,
      tertiary — ночная пауза. «Готов» и «в норме» — нейтральные.
   2. Числа — моноширинным, ID шкафа — BrunoAce, всё остальное — системный
      Roboto (на Android он и есть системный шрифт).
   3. Касание не меньше 48 dp, подписи не мельче 12 sp.

   M3 Expressive здесь — это: крупные скругления (extra-large 28 dp у
   листов, 20–24 dp у карточек), кнопки-«пилюли», которые при нажатии
   морфятся в скруглённый квадрат, пружинная анимация (spring) вместо
   линейной, акцентная типографика заголовков и навигационная панель
   высотой 64 dp с индикатором-пилюлей.

   Android 15+ (edge-to-edge): содержимое рисуется под системными панелями,
   отступы — из --sai-* (ниже, в :root). Высоты — в dvh, чтобы не прыгать
   при появлении клавиатуры и жестовой панели.
   ============================================================= */

:root {
  color-scheme: dark;

  /* --- M3 dark scheme, seed — синий десктопа (#448AFF) --- */
  --primary: #AAC7FF;
  --on-primary: #0A305F;
  --primary-container: #284777;
  --on-primary-container: #D6E3FF;
  --secondary: #BEC6DC;
  --secondary-container: #3E4759;
  --on-secondary-container: #DAE2F9;
  --tertiary: #DDBCE0;
  --tertiary-container: #573E5C;
  --on-tertiary-container: #FAD8FD;
  --error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;
  --on-error-container: #FFDAD6;

  --surface-dim: #111318;
  --surface: #111318;
  --surface-bright: #37393E;
  --surface-container-lowest: #0C0E13;
  --surface-container-low: #191C20;
  --surface-container: #1D2024;
  --surface-container-high: #282A2F;
  --surface-container-highest: #33353A;
  --on-surface: #E2E2E9;
  --on-surface-variant: #C4C6D0;
  --on-surface-muted: #8E9099;
  --outline: #8E9099;
  --outline-variant: #44474E;

  /* --- статусы (общие с десктопом по смыслу) --- */
  --st-lit: #AAC7FF;          /* горит по графику */
  --st-pause: #DDBCE0;        /* ночная пауза */
  --st-warn: #FFB951;         /* внимание, ручной */
  --st-warn-container: #3D2E00;
  --st-crit: #FF5449;         /* авария */
  --st-crit-container: #5C0B12;
  --st-door: #4DD0E1;         /* дверь открыта: событие, не неисправность */
  --st-ok: #8BD3A8;           /* «в порядке» там, где это надо сказать явно */

  /* Старые имена — на новые значения: страницы, ещё не переписанные под
     эту систему, сразу получают тихую палитру. */
  --c-ok: var(--st-ok);
  --c-active: var(--primary);
  --c-active-2: var(--primary-container);
  --c-warn: var(--st-warn);
  --c-warn-2: var(--st-warn);
  --c-crit: var(--st-crit);
  --c-crit-2: var(--error);
  --c-offline: var(--on-surface-muted);
  --c-ok-bg: rgba(139, 211, 168, 0.10);
  --c-warn-bg: rgba(255, 185, 81, 0.12);
  --c-crit-bg: rgba(255, 84, 73, 0.14);
  --c-active-bg: rgba(170, 199, 255, 0.12);
  --text-primary: var(--on-surface);

  /* --- форма (M3 Expressive shape scale) --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-lg-inc: 20px;
  --r-xl: 28px;
  --r-xl-inc: 32px;
  --r-pill: 999px;
  --r-card: 20px;
  --r-chip: 8px;
  --r-button: var(--r-pill);
  --r-sheet: 28px 28px 0 0;

  /* --- движение (M3 Expressive motion: spring) --- */
  --spring-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);     /* пространственное, быстрое */
  --spring-default: cubic-bezier(0.38, 1.21, 0.22, 1);    /* пространственное */
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);                /* эффекты: цвет, прозрачность */
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 500ms;

  /* --- каркас --- */
  --font-body: "Roboto", "Google Sans", system-ui, sans-serif;
  --topbar-h: 64px;
  --bottomnav-h: 64px;
  /* Отступы системных панелей. На Android 15+ приложение рисуется от края
     до края. В APK их подставляет Capacitor 8 (плагин SystemBars,
     insetsHandling: "css") переменными --safe-area-inset-*: так они верны
     и на WebView старше 140, где env() отдаёт нули. В PWA — env(). */
  --sai-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sai-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sai-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sai-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ===== База ===== */
html, body {
  background: var(--surface);
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { min-height: 100dvh; }
button, [role="button"], .m3-chip, .seg { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#app {
  bottom: calc(var(--bottomnav-h) + var(--sai-bottom));
  padding: calc(var(--sai-top) + 8px) calc(16px + var(--sai-right)) 24px calc(16px + var(--sai-left));
  overscroll-behavior-y: contain;
  scroll-padding-top: calc(var(--sai-top) + 8px);
}

/* ===== Верхняя панель страницы (M3 top app bar, small) =====
   Заголовок слева, действия справа. Липкая: при прокрутке остаётся
   на месте и получает фон контейнера. */
.m3-topbar {
  position: sticky;
  top: calc(-1 * (var(--sai-top) + 8px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--topbar-h);
  margin: calc(-1 * (var(--sai-top) + 8px)) -16px 4px;
  padding: var(--sai-top) 8px 0 16px;
  background: var(--surface);
  transition: background var(--dur-fast) var(--ease-emph);
}
.m3-topbar.scrolled { background: var(--surface-container); }
.m3-topbar__title {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;          /* emphasized headline */
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m3-topbar__sub { display: block; font-size: 13px; font-weight: 400; color: var(--on-surface-variant); }
.m3-topbar__actions { display: flex; align-items: center; gap: 4px; }

/* ===== Кнопка-значок (icon button), 48 dp ===== */
.m3-icon-btn {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--on-surface-variant);
  transition: border-radius var(--dur-med) var(--spring-fast), background var(--dur-fast) var(--ease-emph);
}
.m3-icon-btn svg { width: 24px; height: 24px; }
.m3-icon-btn:active { background: rgba(226, 226, 233, 0.12); border-radius: var(--r-md); }
.m3-icon-btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.m3-icon-btn.on { background: var(--primary); color: var(--on-primary); }

/* ===== Навигационная панель (M3 Expressive: 64 dp, индикатор-пилюля) ===== */
#bottom-nav {
  height: calc(var(--bottomnav-h) + var(--sai-bottom));
  padding: 0 var(--sai-right) var(--sai-bottom) var(--sai-left);
  background: var(--surface-container);
  border-top: none;
}
#bottom-nav .nav-item {
  gap: 4px;
  min-width: 48px;
  padding-top: 6px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
}
#bottom-nav .nav-item .nav-icon {
  width: 56px;
  height: 32px;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease-emph), width var(--dur-med) var(--spring-fast);
}
#bottom-nav .nav-item .nav-icon svg { width: 24px; height: 24px; }
#bottom-nav .nav-item.active { color: var(--on-surface); font-weight: 700; }
#bottom-nav .nav-item.active .nav-icon { background: var(--secondary-container); color: var(--on-secondary-container); width: 64px; }
#bottom-nav .nav-item.active .nav-icon svg { color: var(--on-secondary-container); }
/* Счётчик аварий на «Мониторе» — значок M3 (badge) на иконке. */
.nav-badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--st-crit);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.nav-badge:empty { display: none; }

/* ===== Кнопки: пилюля, при нажатии морфится в скруглённый квадрат ===== */
.m3-btn, .m3-btn-tonal, .m3-btn-outlined, .m3-btn-text {
  height: 48px;
  min-height: 48px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: border-radius var(--dur-med) var(--spring-fast), background var(--dur-fast) var(--ease-emph), transform var(--dur-fast) var(--spring-fast);
}
.m3-btn:active, .m3-btn-tonal:active, .m3-btn-outlined:active, .m3-btn-text:active {
  border-radius: var(--r-md);
  transform: none;
  filter: none;
}
.m3-btn { background: var(--primary); color: var(--on-primary); }
.m3-btn-tonal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.m3-btn-outlined { border: 1px solid var(--outline-variant); color: var(--on-surface); }
.m3-btn-text { color: var(--primary); padding: 0 12px; }
.m3-btn-danger { background: var(--error-container); color: var(--on-error-container); }
.m3-btn-warn { background: var(--st-warn-container); color: var(--st-warn); }
.m3-btn svg, .m3-btn-tonal svg { width: 20px; height: 20px; }

/* ===== Чипы фильтра ===== */
.m3-chip {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-chip);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  transition: border-radius var(--dur-med) var(--spring-fast), background var(--dur-fast) var(--ease-emph);
}
.m3-chip.selected { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; border-radius: var(--r-md); }
.m3-chip .chip-count { background: transparent; padding: 0; font-family: var(--font-mono); font-size: 13px; }
.m3-chip:not(.selected) .chip-count { background: transparent; }
.m3-chip[data-filter="warning"] .chip-count:not(:empty) { color: var(--st-warn); }
.m3-chip[data-filter="critical"] .chip-count:not(:empty) { color: var(--st-crit); }

/* ===== Сегментированная группа (M3 Expressive: connected button group) ===== */
.m3-segmented {
  gap: 2px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.m3-segmented .seg {
  height: 48px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--surface-container-high);
  color: var(--on-surface);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: border-radius var(--dur-med) var(--spring-fast), background var(--dur-fast) var(--ease-emph);
}
.m3-segmented .seg:first-child { border-radius: var(--r-pill) var(--r-sm) var(--r-sm) var(--r-pill); }
.m3-segmented .seg:last-child { border-radius: var(--r-sm) var(--r-pill) var(--r-pill) var(--r-sm); }
.m3-segmented .seg.selected { background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill); }
.m3-segmented .seg:active { border-radius: var(--r-md); }
.m3-segmented .seg:disabled, .m3-segmented .seg.disabled { opacity: 0.38; }

/* ===== Карточки ===== */
.m3-card {
  background: var(--surface-container-low);
  border: none;
  border-radius: var(--r-card);
}
.m3-card-elevated { background: var(--surface-container); box-shadow: none; }

/* ===== Поле ввода ===== */
.m3-field {
  height: 56px;
  background: var(--surface-container-highest);
  border: none;
  border-bottom: 1px solid var(--on-surface-variant);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  font-size: 16px;           /* 16 и больше — WebView не зумит при фокусе */
}
.m3-field:focus { border-width: 0 0 2px; border-bottom-color: var(--primary); padding: 0 16px; }

/* ===== Пилюли режима: тихая норма ===== */
.m3-pill { height: 32px; padding: 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
.m3-pill-ok { background: var(--primary-container); color: var(--on-primary-container); }
.m3-pill-ready { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.m3-pill-warn { background: var(--st-warn); color: #2C1D00; }
.m3-pill-crit { background: var(--st-crit); color: #fff; }
.m3-pill-offline, .m3-pill-info { background: var(--surface-container-highest); color: var(--on-surface-variant); }

/* ===== Плашки аварий ===== */
.alarm-strip {
  border-radius: var(--r-md);
  background: var(--st-crit-container);
  color: var(--on-error-container);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
}
.alarm-strip.warn { background: var(--st-warn-container); color: var(--st-warn); }
.alarm-strip.stale { background: var(--surface-container-lowest); color: var(--on-surface-variant); }
.alarm-strip [data-icon] svg { width: 18px; height: 18px; flex: none; }

/* ===== Значки Q1/Q2/K1 ===== */
.m3-badge { height: 26px; min-width: 40px; border-radius: var(--r-sm); border-color: var(--outline-variant); font-size: 12px; }
.m3-badge.ok { color: var(--on-surface-variant); border-color: var(--outline-variant); }
.m3-badge.warn { background: var(--st-warn-container); }
.m3-badge.crit { background: var(--st-crit-container); color: #fff; }

/* ===== Нижний лист (M3 bottom sheet) =====
   Над навигационной панелью, с ручкой; тянется вниз, чтобы закрыть
   (utils/sheet.js). Затемнение — отдельным слоем .m3-scrim. */
.m3-bottom-sheet {
  left: var(--sai-left);
  right: var(--sai-right);
  bottom: 0;
  padding: 0 16px calc(16px + var(--sai-bottom));
  background: var(--surface-container-low);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 85dvh;
  box-shadow: var(--elev-3);
  transition: transform var(--dur-med) var(--spring-default);
  overscroll-behavior: contain;
}
.m3-bottom-sheet .sheet-handle {
  width: 32px;
  height: 4px;
  margin: 0 auto;
  background: var(--on-surface-variant);
  opacity: 0.4;
  border-radius: 2px;
  /* Область захвата — 48 dp, сама ручка — 4 dp. */
  box-sizing: content-box;
  border: 22px solid transparent;
  border-left-width: 40px;
  border-right-width: 40px;
  background-clip: padding-box;
  touch-action: none;
}
.m3-bottom-sheet.dragging { transition: none; }
.m3-scrim {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-emph);
}
.m3-scrim.open { opacity: 1; pointer-events: auto; }

/* ===== Диалог ===== */
.m3-modal { background: var(--surface-container-high); border-radius: var(--r-xl); padding: 24px; }
.m3-modal h3 { font-size: 22px; font-weight: 600; line-height: 28px; }
.m3-modal-overlay { padding: 24px; background: rgba(0, 0, 0, 0.5); }

/* ===== Переключатель (M3 switch) ===== */
.m3-switch { width: 52px; height: 32px; }
.m3-switch-track {
  border-radius: var(--r-pill) !important;
  background: var(--surface-container-highest) !important;
  border: 2px solid var(--outline) !important;
}
.m3-switch-thumb {
  width: 16px !important;
  height: 16px !important;
  top: 6px !important;
  left: 6px !important;
  background: var(--outline) !important;
  transition: transform var(--dur-med) var(--spring-fast), width var(--dur-fast), height var(--dur-fast) !important;
}
.m3-switch input:checked + .m3-switch-track { background: var(--primary) !important; border-color: var(--primary) !important; }
.m3-switch input:checked + .m3-switch-track .m3-switch-thumb {
  width: 24px !important;
  height: 24px !important;
  top: 2px !important;
  left: 2px !important;
  transform: translateX(20px) !important;
  background: var(--on-primary) !important;
}

/* ===== Подпись раздела ===== */
.m3-section-label {
  margin: 24px 4px 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
  color: var(--primary);
}

/* ===== Поиск (M3 search bar) ===== */
.mobile-search {
  height: 56px;
  padding: 0 16px;
  background: var(--surface-container-high);
  border: none;
  border-radius: var(--r-pill);
}
.mobile-search:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
.mobile-search__input { font-size: 16px; font-family: var(--font-body); }
.mobile-search__ico svg { width: 24px; height: 24px; }

/* ===== Пустое состояние ===== */
.m3-empty { padding: 48px 24px; color: var(--on-surface-variant); font-size: 15px; }

/* ===== Уведомления о событиях ===== */
.event-alerts-stack { border: none; border-radius: var(--r-xl); background: var(--surface-container-high); }
.event-alerts-head { background: transparent; border-bottom: 1px solid var(--outline-variant); }
.event-alerts-title { font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.event-alert { border: none; border-radius: var(--r-lg); background: var(--surface-container); }
.event-alert__title { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.event-alert__btn { min-height: 40px; font-family: var(--font-body); font-weight: 600; }

/* ===== Плашка обновления PWA ===== */
.pwa-update-bar { border-radius: var(--r-lg); }

/* ===== Меньше движения — по настройке системы ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== Планшет и раскладушка в развёрнутом виде: шире 600 dp ===== */
@media (min-width: 600px) {
  #app { padding-left: calc(24px + var(--sai-left)); padding-right: calc(24px + var(--sai-right)); }
  .m3-topbar { margin-left: -24px; margin-right: -24px; padding-left: 24px; }
}

/* Подписи сегментов и чипов — с прописной, как в M3, а не капсом. */
.m3-segmented .seg { text-transform: none; letter-spacing: 0.1px; font-size: 14px; }