/* =============================================================
   SYNAPSETRONIC SCADA — Mobile (Android)
   Material 3 Expressive design system
   ============================================================= */

/* ===== Fonts ============================================== */
@font-face {
  font-family: "BrunoAceSC";
  src: url("./assets/fonts/BrunoAceSC-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "KodeMono";
  src: url("./assets/fonts/KodeMono-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "KodeMono";
  src: url("./assets/fonts/KodeMono-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Oswald";
  src: url("./assets/fonts/Oswald-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Oswald";
  src: url("./assets/fonts/Oswald-Medium.ttf") format("truetype");
  font-weight: 500;
}

/* ===== M3 Tokens ========================================== */
:root {
  /* Surface tiers (M3 dark) */
  --surface-dim:        #0F0F10;
  --surface:            #131416;
  --surface-bright:     #1B1D1F;
  --surface-container-lowest: #0A0B0C;
  --surface-container-low:    #16181A;
  --surface-container:        #1B1D1F;
  --surface-container-high:   #232628;
  --surface-container-highest:#2D3033;

  /* On-surface */
  --on-surface:         #E6E1E5;
  --on-surface-variant: #A8A8A8;
  --on-surface-muted:   #6B6B6B;
  --outline:            #2A2D30;
  --outline-variant:    #1F2123;

  /* Primary (мятно-зелёный с мокапов) */
  --primary:            #A6E8C7;
  --on-primary:         #00382A;
  --primary-container:  #1F4D3B;
  --on-primary-container:#A6E8C7;

  /* Semantic statuses (синхронизированы с Desktop ComputedStatus) */
  --c-ok:       #00E676;   /* зелёный — норма / готов / активен */
  --c-active:   #448AFF;   /* синий — активен */
  --c-active-2: #0088CC;
  --c-warn:     #FFAB00;   /* жёлтый — внимание / ручной */
  --c-warn-2:   #FF9100;
  --c-crit:     #FF1744;   /* красный — авария */
  --c-crit-2:   #FF5252;
  --c-offline:  #6B6B6B;

  /* Status backgrounds (тёмные подложки) */
  --c-ok-bg:    rgba(0, 230, 118, 0.08);
  --c-warn-bg:  rgba(255, 171, 0, 0.10);
  --c-crit-bg:  rgba(255, 23, 68, 0.10);
  --c-active-bg:rgba(68, 138, 255, 0.10);

  /* Fonts */
  --font-display: "BrunoAceSC", sans-serif;
  --font-mono:    "KodeMono", "Consolas", monospace;
  --font-label:   "Oswald", sans-serif;
  --font-body:    "Roboto", "Segoe UI", system-ui, sans-serif;

  /* Radii (M3 Expressive — крупные) */
  --r-pill:     999px;
  --r-card:     16px;
  --r-chip:     12px;
  --r-button:   20px;
  --r-sheet:    28px 28px 0 0;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Layout */
  --topbar-h:    56px;
  --bottomnav-h: 80px;
  --sai-top:     env(safe-area-inset-top, 0px);
  --sai-bottom:  env(safe-area-inset-bottom, 0px);

  /* Elevation (M3) */
  --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);
}

/* ===== Reset / Base ====================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--surface-dim);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

/* Scrollbars (тонкие, под тёмную тему) */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 2px; }

/* ===== App shell ========================================= */
/* Top-bar убран — экраны идут от safe-area сразу. Принцип «чистоты
 * информации»: каждый view сам решает, что вынести в верхнюю часть. */

#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--bottomnav-h) + var(--sai-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--sai-top) + var(--sp-4)) var(--sp-4) var(--sp-4);
  -webkit-overflow-scrolling: touch;
}

#app.full-bleed {
  bottom: 0;
  padding: 0;
}

#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottomnav-h) + var(--sai-bottom));
  padding-bottom: var(--sai-bottom);
  background: var(--surface-container);
  display: flex;
  align-items: stretch;
  z-index: 100;
  border-top: 1px solid var(--outline-variant);
}

#bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--on-surface-variant);
  font-size: 11px;
  font-family: var(--font-body);
  position: relative;
}

#bottom-nav .nav-item .nav-icon {
  width: 64px;
  height: 32px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#bottom-nav .nav-item .nav-icon svg {
  width: 22px;
  height: 22px;
}

#bottom-nav .nav-item.active {
  color: var(--on-surface);
}

#bottom-nav .nav-item.active .nav-icon {
  background: var(--primary);
  color: var(--on-primary);
}

#bottom-nav .nav-item.active .nav-icon svg {
  color: var(--on-primary);
}

/* Hide app shell while login overlay is active */
body.no-chrome #bottom-nav { display: none; }

body.no-chrome #app {
  bottom: 0;
  padding: 0;
}

/* ===== M3 Primitives ===================================== */

/* Filled button (pill) */
.m3-btn {
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0 var(--sp-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: filter 0.15s, transform 0.05s;
  width: 100%;
}

.m3-btn:active {
  filter: brightness(0.9);
  transform: scale(0.98);
}

.m3-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.m3-btn-tonal {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

.m3-btn-text {
  background: transparent;
  color: var(--primary);
  height: 48px;
}

.m3-btn-outlined {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline);
}

/* Filter chip */
.m3-chip {
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  white-space: nowrap;
}

.m3-chip.selected {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.m3-chip .chip-count {
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}

.m3-chip:not(.selected) .chip-count {
  background: var(--surface-container-high);
}

/* Card */
.m3-card {
  background: var(--surface-container-low);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  border: 1px solid var(--outline-variant);
}

.m3-card-elevated {
  background: var(--surface-container);
  box-shadow: var(--elev-1);
  border: none;
}

/* Text field */
.m3-field {
  width: 100%;
  height: 56px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline);
  border-radius: var(--r-button);
  padding: 0 var(--sp-4);
  color: var(--on-surface);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}

.m3-field:focus {
  outline: none;
  border-color: var(--primary);
  border-width: 2px;
  padding: 0 calc(var(--sp-4) - 1px);
}

.m3-field::placeholder {
  color: var(--on-surface-muted);
}

/* Segmented button */
.m3-segmented {
  display: flex;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 0;
  border: 1px solid var(--outline);
  overflow: hidden;
}

.m3-segmented .seg {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--on-surface);
  border-right: 1px solid var(--outline);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.m3-segmented .seg:last-child { border-right: none; }

.m3-segmented .seg.selected {
  background: var(--primary);
  color: var(--on-primary);
}

/* Status pill */
.m3-pill {
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.m3-pill-ok      { background: var(--c-active-2); color: #fff; }
.m3-pill-ready   { background: var(--c-ok); color: #002817; }
.m3-pill-warn    { background: var(--c-warn); color: #2c1d00; }
.m3-pill-crit    { background: var(--c-crit); color: #fff; }
.m3-pill-offline { background: var(--surface-container-high); color: var(--on-surface-variant); }
.m3-pill-info    { background: var(--surface-container-high); color: var(--on-surface); }

/* Bottom sheet */
.m3-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottomnav-h) + var(--sai-bottom));
  background: var(--surface-container);
  border-radius: var(--r-sheet);
  box-shadow: var(--elev-3);
  /* Поверх Leaflet pane'ов (до 700) и поверх .map-controls (1000). */
  z-index: 1100;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
  max-height: 60vh;
  overflow-y: auto;
}

.m3-bottom-sheet.open {
  transform: translateY(0);
}

.m3-bottom-sheet .sheet-handle {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--outline);
  margin: 0 auto var(--sp-3);
}

/* Modal */
.m3-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.m3-modal {
  background: var(--surface-container-high);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  width: 100%;
  max-width: 360px;
  box-shadow: var(--elev-3);
}

.m3-modal h3 {
  margin: 0 0 var(--sp-3);
  font-size: 18px;
  font-weight: 500;
}

.m3-modal .modal-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-5);
}

.m3-modal .modal-actions .m3-btn,
.m3-modal .modal-actions .m3-btn-text {
  width: auto;
  min-width: 90px;
}

/* Section header */
.m3-section-label {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  margin: var(--sp-5) var(--sp-2) var(--sp-2);
  font-weight: 500;
}

/* Loading / empty */
.m3-empty {
  text-align: center;
  padding: var(--sp-7);
  color: var(--on-surface-variant);
  font-size: 14px;
}

/* Alarm strip on top of cards (внутри m3-card вверху) */
.alarm-strip {
  background: var(--c-crit-bg);
  color: var(--c-crit-2);
  font-size: 12px;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-chip);
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.alarm-strip.warn {
  background: var(--c-warn-bg);
  color: var(--c-warn);
}

/* Вердикт из закрытого окна доказательств — пунктиром, см. десктопный
   близнец .err-latched. Время съёма стоит в самом тексте. */
.alarm-strip.latched {
  border: 1px dashed currentColor;
  opacity: 0.92;
}

/* Badges */
.m3-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 36px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--outline);
  font-size: 11px;
  font-weight: 600;
  color: var(--on-surface-variant);
  font-family: var(--font-mono);
}

.m3-badge.ok   { color: var(--c-ok);   border-color: var(--c-ok); }
.m3-badge.warn { color: var(--c-warn); border-color: var(--c-warn); }
.m3-badge.crit { color: var(--c-crit); border-color: var(--c-crit); }
/* K1 без обратной связи, подтверждено оператором: постоянный жёлтый пунктир —
   не авария, но и не норма. */
.m3-badge.ack {
  color: var(--c-warn);
  border-color: var(--c-warn);
  border-style: dashed;
}
/* Автоматы: «не готов» должен читаться на телефоне без раскрытия карточки. */
.m3-badge.blink-crit { animation: m3-badge-blink 0.8s steps(1, end) infinite; }
.m3-badge.blink-warn { animation: m3-badge-blink 0.8s steps(1, end) infinite; }
@keyframes m3-badge-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* =============================================================
   MOBILE SEARCH — динамический поиск ШУНО (monitor / map)
   ============================================================= */
.mobile-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-4);
  background: var(--surface-container-low);
  border: 1px solid var(--outline);
  border-radius: var(--r-pill);
}
.mobile-search:focus-within { border-color: var(--c-active); }
.mobile-search__ico { display: flex; color: var(--on-surface-variant); }
.mobile-search__ico svg { width: 18px; height: 18px; }
.mobile-search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.3px;
}
.mobile-search__input::placeholder { color: var(--on-surface-muted); }

/* =============================================================
   EVENT ALERTS — centred modal notifications (monitor)
   ============================================================= */
.event-alerts-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(0, 0, 0, 0.6);
}
.event-alerts-stack {
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-high);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--elev-3);
  overflow: hidden;
}
.event-alerts-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--outline);
  background: var(--surface-container);
}
.event-alerts-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.6px;
  color: var(--on-surface);
}
.event-alerts-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #fff;
  background: var(--c-crit);
  border-radius: var(--r-pill);
  padding: 1px 9px;
  min-width: 22px;
  text-align: center;
}
.event-alerts-closeall {
  margin-left: auto;
  display: none;
  background: var(--surface-container-highest);
  border: 1px solid var(--outline);
  color: var(--on-surface-variant);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.event-alerts-overlay.multi .event-alerts-closeall { display: inline-block; }
.event-alerts-list {
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.event-alert {
  display: flex;
  background: var(--surface-container-low);
  border: 1px solid var(--outline);
  border-radius: var(--r-chip);
  overflow: hidden;
}
.event-alert__bar { width: 5px; flex: 0 0 5px; }
.event-alert.sev-crit { border-color: rgba(255, 23, 68, 0.5); }
.event-alert.sev-crit .event-alert__bar { background: var(--c-crit); }
.event-alert.sev-crit .event-alert__title { color: var(--c-crit-2); }
.event-alert.sev-warn { border-color: rgba(255, 171, 0, 0.5); }
.event-alert.sev-warn .event-alert__bar { background: var(--c-warn); }
.event-alert.sev-warn .event-alert__title { color: var(--c-warn); }
.event-alert.sev-info { border-color: rgba(68, 138, 255, 0.5); }
.event-alert.sev-info .event-alert__bar { background: var(--c-active); }
.event-alert.sev-info .event-alert__title { color: var(--c-active); }
.event-alert__msg { font-size: 12px; color: var(--text-primary); margin-bottom: var(--sp-3); line-height: 1.35; }
.event-alert__body { flex: 1; padding: var(--sp-3) var(--sp-4); min-width: 0; }
.event-alert__title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.event-alert__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 13px;
}
.event-alert__id { color: var(--on-surface); font-weight: 700; }
.event-alert__name {
  color: var(--on-surface-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-alert__time { margin-left: auto; color: var(--on-surface-muted); font-size: 11px; }
.event-alert__actions { display: flex; gap: var(--sp-2); }
.event-alert__btn {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
}
.event-alert__btn.map {
  background: var(--c-active-bg);
  border: 1px solid var(--c-active);
  color: var(--c-active);
}
.event-alert__btn.close {
  background: var(--surface-container-highest);
  border: 1px solid var(--outline);
  color: var(--on-surface-variant);
}
.event-alert__btn:active { filter: brightness(0.85); transform: scale(0.97); }

/* ═══════════════════════ PWA ═══════════════════════ */

/* Плашка обновления. Сидит над bottom-nav, чтобы не перекрывать навигацию,
   и учитывает home indicator через --sai-bottom. */
.pwa-update-bar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--bottomnav-h) + var(--sai-bottom) + var(--sp-3));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--r-chip);
  box-shadow: var(--elev-3);
}

.pwa-update-text {
  flex: 1;
  font-size: 13px;
}

.pwa-update-btn {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-chip);
  font-size: 13px;
  font-weight: 600;
}

.pwa-update-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--on-primary-container);
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
}

/* Подсказка «На экран Домой» — внутри стандартной .m3-modal. */
.pwa-hint-text {
  margin: 0 0 var(--sp-3);
  font-size: 14px;
  color: var(--on-surface-variant);
}

.pwa-hint-steps {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-surface);
}