/* ============================================================
   AERONAV — Screens v2
   ops (map-first) / mission lifecycle / flight video HUD /
   emergency overlay / replay
   ============================================================ */

/* ---------- Map surface (shared) ---------- */
.map-surface { position: relative; width: 100%; height: 100%; background: var(--map-bg); border-radius: var(--radius-card); overflow: hidden; }
.map-surface.bare { border-radius: 0; }
.leafletmap { position: absolute; inset: 0; }
.leaflet-container { background: var(--map-bg) !important; font-family: var(--font-ui) !important; }
[data-theme="night"] .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.map-overlay { position: absolute; z-index: 500; }
.map-overlay.bl { bottom: 14px; left: 14px; }
.map-legend { background: var(--surface-elevated); border:1px solid var(--border-default); border-radius:12px; box-shadow: var(--elev-card); padding:10px 12px; min-width:180px; }
.legend-row { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; color: var(--text-secondary); }
.legend-row .sw { width:14px; height:14px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.08); }

/* ============================================================
   ОПЕРАЦИИ — карта во весь экран, панели плавают (FlightHub-паттерн)
   ============================================================ */
.ops-stage { position: absolute; inset: 0; }
.fpanel {
  position: absolute; z-index: 600; display: flex; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--surface-primary) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--border-default); border-radius: var(--radius-float);
  box-shadow: var(--elev-overlay);
  animation: fadeUp var(--motion-slow) var(--ease);
}
.fp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); flex: none; font-weight: 600; }
.fp-body { overflow-y: auto; padding: 10px; flex: 1; }
.fp-foot { padding: 10px 12px; border-top: 1px solid var(--border-subtle); flex: none; }

.fpanel.missions { top: 16px; left: 16px; width: 324px; max-height: calc(100% - 116px); }
.fpanel.alerts   { top: 16px; right: 16px; width: 330px; max-height: calc(100% - 120px); }

/* компактная карточка миссии */
.mcard {
  padding: 11px 12px; border-radius: 11px; border: 1px solid var(--border-default);
  background: var(--surface-primary); cursor: pointer; margin-bottom: 8px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}
.mcard:hover { border-color: var(--blue); box-shadow: var(--elev-card); transform: translateY(-1px); }
.mcard .mc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mcard .mc-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.mcard .mc-name { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.mcard .mc-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }

/* лента флота снизу по центру */
.fleet-strip {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 600; max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: center;
}
.fchip {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer;
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-default); border-radius: 13px; box-shadow: var(--elev-card);
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.fchip:hover { border-color: var(--blue); transform: translateY(-2px); }
.fchip .fc-id { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.fchip .fc-name { font-size: 11px; color: var(--text-tertiary); }
.fchip .fc-batt { width: 44px; }

/* ============================================================
   МИССИЯ — жизненный цикл (Обзор → Маршрут → Предполётная → Разбор)
   ============================================================ */
.mission-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.mission-head .backbtn { flex: none; }
.mission-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.stage-tabs { margin-bottom: var(--sp-4); }

.route-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-4); align-items: start; }
.route-grid .mapcard { min-height: 460px; display: flex; flex-direction: column; }
.wp-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; }
.wp-row:hover { background: var(--surface-secondary); }
.wp-row .wp-idx { width: 22px; height: 22px; border-radius: 999px; background: var(--surface-tertiary); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.wp-row.origin .wp-idx { background: var(--green); color: #fff; }

/* ---------- Предполётная ---------- */
.preflight-grid { display: grid; grid-template-columns: 290px 1fr 320px; gap: var(--sp-4); align-items: start; }
.check-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.check-item .ci-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.check-item .ci-ic.ok { background: var(--green-wash); color: var(--green); }
.check-item .ci-ic.warn { background: var(--amber-wash); color: var(--amber); }
.check-item .ci-ic.fail { background: var(--red-wash); color: var(--red); }

/* ============================================================
   ПОЛЁТ — реальное видео + HUD
   ============================================================ */
.flight-stage { position: relative; height: 100%; display: grid;
  grid-template-columns: 172px 1fr 300px; grid-template-rows: 1fr 210px;
  grid-template-areas: "left video right" "left map right"; gap: 1px; background: #05090d; }
.hud-video { grid-area: video; position: relative; background: #060c10; overflow: hidden; }
.hud-video video, .hud-video #sim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display:block; }
.hud-video .vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%); }
.hud-layer { position: absolute; inset: 0; pointer-events: none; }
.hud-tape-left { grid-area: left; background: #0a1218; border-right: 1px solid #1a2731; padding: 12px; overflow: auto; }
.hud-side-right { grid-area: right; background: #0a1218; border-left: 1px solid #1a2731; padding: 12px; overflow: auto; }
.hud-map { grid-area: map; position: relative; background: var(--map-bg); }
.hud-badge { position: absolute; z-index: 6; background: rgba(8,14,18,.66); backdrop-filter: blur(4px);
  border: 1px solid rgba(120,160,180,.28); border-radius: 10px; padding: 8px 12px; color: #dfeaef; box-shadow: var(--elev-hud); }
.hud-badge .hb-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8ba7b5; }
.hud-badge .hb-v { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-mode-strip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; }
.hud-pill { background: rgba(8,14,18,.66); border: 1px solid rgba(120,160,180,.28); color: #dfeaef;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); white-space: nowrap; }
.hud-pill.arm { color: #3dd068; border-color: rgba(61,208,104,.4); }
.hud-pill.btn-like { cursor: pointer; pointer-events: auto; }
.hud-pill.btn-like:hover { border-color: #4c9bff; color: #9fc9ff; }
.hud-block { color: #c8d8df; }
.hud-block .hbk { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #7f9aa8; margin: 12px 0 6px; }
.hud-metric { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #16222b; }
.hud-metric .m { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: #eaf3f7; }
.hud-metric .m.warn { color: var(--amber); } .hud-metric .m.crit { color: #ff6b5c; }

/* адаптив полёта: на малых экранах убираем левую колонку в оверлей */
@media (max-width: 1440px) {
  .flight-stage { grid-template-columns: 150px 1fr 260px; grid-template-rows: 1fr 180px; }
}
@media (max-width: 1200px) {
  .flight-stage { grid-template-columns: 1fr 250px; grid-template-rows: 1fr 170px;
    grid-template-areas: "video right" "map right"; }
  .hud-tape-left { display: none; }
}

/* ============================================================
   АВАРИЙНЫЙ СЦЕНАРИЙ — оверлей поверх всего (состояние, не страница)
   ============================================================ */
.ov-scrim { position: fixed; inset: 0; background: rgba(8,12,18,.55); backdrop-filter: blur(5px);
  z-index: 900; display: grid; place-items: center; animation: fadeIn var(--motion-mid) var(--ease); padding: 20px; }
.ov-panel { width: min(1280px, 96vw); max-height: 94vh; overflow: auto;
  background: var(--surface-secondary); border: 1px solid var(--border-default);
  border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.5); padding: var(--sp-6);
  animation: fadeUp var(--motion-slow) var(--ease); }
.emg-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px;
  background: linear-gradient(90deg, var(--red-emergency), #8f1a12); color: #fff;
  box-shadow: 0 8px 28px rgba(180,35,24,.4); margin-bottom: var(--sp-4); }
.emg-banner .ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; flex: none; animation: pulseRing 1.6s infinite; }
.emg-banner .ico svg { width: 24px; height: 24px; }
.emg-banner .big { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.emg-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-4); }
.decision-node { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-default); background: var(--surface-primary); }
.decision-node.rec { border-color: var(--green); background: var(--green-wash); }
.decision-node.danger { border-color: var(--red); }
.pad-option { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-primary); }
.pad-option.best { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
@media (max-width: 1200px) { .emg-grid { grid-template-columns: 1fr; } }

/* ============================================================
   РАЗБОР (Replay)
   ============================================================ */
.replay-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); min-height: 380px; }
.replay-grid .mapcard { display: flex; flex-direction: column; min-height: 380px; }
.timeline { margin-top: var(--sp-4); background: var(--surface-primary); border: 1px solid var(--border-default);
  border-radius: var(--radius-card); padding: var(--sp-4); box-shadow: var(--elev-card); }
.tl-scrub { position: relative; height: 8px; border-radius: 999px; background: var(--surface-tertiary); margin: 14px 0; cursor: pointer; }
.tl-scrub > .played { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--blue); }
.tl-scrub > .head { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 999px; background: #fff;
  border: 3px solid var(--blue); transform: translate(-50%,-50%); box-shadow: var(--elev-card); }
.tl-track { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; height: 28px; }
.tl-track .lane { position: relative; height: 14px; background: var(--surface-secondary); border-radius: 5px; }
.tl-ev { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 3px; border: 2px solid var(--surface-primary); cursor: pointer; }

/* ---------- Прочее ---------- */
.chart { width: 100%; display: block; }
.sparkbar { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.sparkbar > i { flex: 1; background: var(--blue); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.doc-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-tertiary); display: grid; place-items: center; color: var(--text-secondary); flex: none; }
.empty { display: grid; place-items: center; height: 100%; color: var(--text-tertiary); text-align: center; gap: 8px; }

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--text-primary); color: var(--surface-primary); padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500; box-shadow: var(--elev-overlay); animation: fadeUp var(--motion-mid) var(--ease); }

/* ============================================================
   Адаптация экранов под разные ПК
   ============================================================ */
@media (max-width: 1440px) {
  .fpanel.missions { width: 292px; }
  .fpanel.alerts { width: 300px; }
  .preflight-grid { grid-template-columns: 260px 1fr; }
  .preflight-grid > :last-child { grid-column: 1 / -1; }
  .route-grid { grid-template-columns: 270px 1fr; }
}
@media (max-width: 1200px) {
  .fpanel.missions { top: auto; bottom: 84px; left: 12px; max-height: 44%; width: 272px; }
  .fpanel.alerts { top: 12px; right: 12px; width: 276px; max-height: 42%; }
  .fleet-strip { left: auto; right: 12px; transform: none; bottom: 12px; flex-direction: column; align-items: flex-end; }
  .fchip .fc-name { display: none; }
  .replay-grid { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2,1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 2200px) {
  .fpanel.missions { width: 380px; }
  .fpanel.alerts { width: 380px; }
  .mcard .mc-name { font-size: 14.5px; }
}


/* ============================================================
   НАВИГАТОР БПЛА — «стеклянная кабина» (ночная тема как основная)
   Кнопки в стиле многофункционального дисплея: безель + свечение
   ============================================================ */
[data-theme="night"] .btn {
  background: linear-gradient(180deg, #1a2632, #141e28);
  border-color: #2e4050; color: #d5e2ea;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 3px rgba(0,0,0,.45);
}
[data-theme="night"] .btn:hover { border-color: #4c9bff; color: #eaf3f7; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 10px rgba(76,155,255,.25); }
[data-theme="night"] .btn.primary { background: linear-gradient(180deg, #2f80ed, #1e63c8); border-color: #4c9bff; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 14px rgba(76,155,255,.35); }
[data-theme="night"] .btn.success { background: linear-gradient(180deg, #2aa64f, #1d8a3e); border-color: #3dd068; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 12px rgba(61,208,104,.3); }
[data-theme="night"] .btn.danger { background: linear-gradient(180deg, #d3352a, #a8231a); border-color: #ff5c4d; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 12px rgba(255,92,77,.3); }
[data-theme="night"] .btn.ghost { background: transparent; box-shadow: none; }
[data-theme="night"] .fchip, [data-theme="night"] .fpanel {
  background: color-mix(in srgb, #0e161f 82%, transparent);
  border-color: #24333f;
}
[data-theme="night"] .mcard { background: #121c26; border-color: #24333f; }
[data-theme="night"] .mcard:hover { border-color: #4c9bff; box-shadow: 0 0 12px rgba(76,155,255,.18); }
[data-theme="night"] .commandbar { background: linear-gradient(180deg,#131d27,#101923); }
[data-theme="night"] .tab.active { color: #4c9bff; }
[data-theme="night"] .navitem.active { box-shadow: inset 0 0 0 1px rgba(76,155,255,.25); }


/* ============================================================
   СИНТЕТИЧЕСКОЕ ВИДЕНИЕ (вместо видео): горизонт живёт,
   сетка земли бежит навстречу — симуляция полёта
   ============================================================ */
.svs-scene { position: absolute; inset: -20%; transform-origin: center; will-change: transform;
  transition: transform .12s linear; }
.svs-sky { position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, #071722 0%, #0d2f45 55%, #1d5876 92%, #7fb6c9 100%); }
.svs-halo { position: absolute; left: 0; right: 0; top: 44%; height: 12%;
  background: radial-gradient(60% 100% at 50% 50%, rgba(150,220,235,.28), transparent 70%); }
.svs-hills { position: absolute; left: 0; right: 0; top: 44.5%; height: 8%; width: 100%; }
.svs-ground { position: absolute; left: 0; right: 0; top: 50%; bottom: 0;
  background: linear-gradient(180deg, #123222 0%, #0d2418 30%, #081710 100%);
  perspective: 380px; overflow: hidden; }
.svs-grid { position: absolute; left: -60%; right: -60%; top: -8%; height: 260%;
  transform-origin: top center; transform: rotateX(74deg);
  background:
    repeating-linear-gradient(90deg, rgba(110,220,160,.13) 0 1.5px, transparent 1.5px 90px),
    repeating-linear-gradient(0deg, rgba(110,220,160,.16) 0 1.5px, transparent 1.5px 64px);
  animation: svsmove 1.1s linear infinite; }
@keyframes svsmove { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 64px; } }
.hud-glow { filter: drop-shadow(0 0 3px rgba(140,240,180,.35)); }
.hud-glow text { paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2.5px; }


/* лёгкая «видео»-текстура поверх реального ролика (тонкие строки + затемнение краёв) */
.hud-video .scan { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .5; }
.hud-video video { filter: saturate(1.05) contrast(1.03); }
.hud-glow { filter: drop-shadow(0 0 2px rgba(120,255,180,.35)); }
.hud-glow text { paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 2.6px; }
.race-ch { filter: drop-shadow(0 0 4px rgba(226,85,226,.6)); }


/* подложная навигация: слой распознавания объектов-опор */
.track-layer { z-index: 4; }
.track-layer g { transition: opacity .25s linear; }
.track-layer text { paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2.4px; }
.trk-status { z-index: 6; }


/* ---- Пилотаж: приборы крупно и чётко ---- */
.hud-tape-left .ah-box { display:block; margin:6px auto 8px; }
.hud-tape-left .ah-box svg { width:100%; height:auto; max-width:150px; display:block; margin:0 auto; }
.veh-layer { z-index:4; }
.veh-layer text { paint-order:stroke; stroke:rgba(0,0,0,.6); stroke-width:2.4px; }

/* ---- 3D-карта: наклон спутникового слоя даёт объёмную перспективу ---- */
.hud-map.map3d { perspective: 720px; overflow:hidden; position:relative; }
.hud-map.map3d .leafletmap {
  transform: rotateX(44deg) scale(1.18); transform-origin: 50% 52%;
  filter: saturate(1.05) contrast(1.05); }
.hud-map.map3d .map3d-fog { position:absolute; inset:0; pointer-events:none; z-index:5;
  background: linear-gradient(180deg, rgba(8,14,20,.85) 0%, rgba(8,14,20,.25) 22%, transparent 42%, transparent 78%, rgba(8,14,20,.4) 100%); }
.hud-map.map3d .leaflet-control-container { display:none; }