/* ═══════════════════════════════════════════════════════════
   mobile-fix.css — адаптация под узкие экраны ≤ 980px
   Подключается последним, перекрывает конфликтующие правила.
   Правки 2026-04-10.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

  /* ═══════════════════════════════════════════════
     1. Убираем гигантскую псевдо-плашку "ОПЕРАТИВНАЯ КАРТА"
     Ее дублируют hud-theme.css и responsive.css — обе
     обрезаются на узких экранах до "ОПЕРАТ…" и конфликтуют
     с map-hudbar. Используем обычный brand (ATLAS).
     ═══════════════════════════════════════════════ */
  body.theme-hud .topbar::after,
  .topbar::after {
    display: none !important;
    content: none !important;
  }

  /* ═══════════════════════════════════════════════
     2. Возвращаем brand "ATLAS" в компактном виде
     ═══════════════════════════════════════════════ */
  body.theme-hud .topbar__left .brand,
  .topbar__left .brand {
    display: flex !important;
    align-items: center !important;
    margin: 0 6px !important;
    padding: 0 !important;
  }
  body.theme-hud .topbar__left .brand__subtitle,
  .topbar__left .brand__subtitle {
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    color: rgba(0, 242, 255, 0.94) !important;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.55) !important;
    text-transform: uppercase !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* ═══════════════════════════════════════════════
     3. Компактный верхний ряд без переноса
     ═══════════════════════════════════════════════ */
  body.theme-hud .topbar__row--1,
  .topbar__row--1 {
    min-height: 48px !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    align-items: center !important;
  }

  /* Floating toggle buttons — tighter spacing */
  body.theme-hud .topbar .floating-toggle-btn,
  .topbar .floating-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    margin: 0 2px !important;
    flex-shrink: 0 !important;
  }

  body.theme-hud .topbar__right,
  .topbar__right {
    gap: 4px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  body.theme-hud .topbar__right .btn,
  .topbar__right .btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ═══════════════════════════════════════════════
     4. Скрываем map-hudbar на мобиле
     (brand уже показывает контекст, двойных надписей не нужно)
     ═══════════════════════════════════════════════ */
  body.theme-hud .map-hudbar,
  .map-hudbar {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════
     5. Скрываем пустой "ПОЗЫВНОЙ" блок в bottom-sheet
     (main.js показывает его даже когда значение = "—")
     ═══════════════════════════════════════════════ */
  #hud-callsign-mobile {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════
     6. Leaflet zoom/layers controls: не перекрывать topbar
     ═══════════════════════════════════════════════ */
  .leaflet-top.leaflet-left {
    top: 8px !important;
    left: 8px !important;
  }
  .leaflet-top.leaflet-right {
    top: 8px !important;
    right: 8px !important;
  }

  /* ═══════════════════════════════════════════════
     7. Bottom sheet — меньше отступов сверху,
     больше контента за один взгляд
     ═══════════════════════════════════════════════ */
  body.theme-hud .sidebar--right .sidebar__scroll,
  body.theme-hud .sidebar--left #filters-body {
    padding-top: 4px !important;
  }

  /* Меньше margin в panel__group */
  body.theme-hud .sidebar--right .panel__group {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }

  body.theme-hud .sidebar--right .panel__head {
    min-height: 38px !important;
    padding: 6px 12px !important;
  }

  body.theme-hud .sidebar--right .panel__title {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════
   8. Очень узкие экраны (≤ 400px) — iPhone SE
   ═══════════════════════════════════════════════ */
@media (max-width: 400px) {
  body.theme-hud .topbar__left .brand__subtitle {
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }
  body.theme-hud .topbar__right .btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  body.theme-hud .topbar .floating-toggle-btn {
    width: 30px !important;
    height: 30px !important;
    margin: 0 1px !important;
  }
  body.theme-hud .topbar__row--1 {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
}

/* ═══════════════════════════════════════════════
   9. Landscape на телефоне — сайдбары должны быть Уже
   ═══════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 980px) {
  body.theme-hud .sidebar--left,
  body.theme-hud .sidebar--right {
    max-height: 60vh !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   mobile-fix.css — v2 patch (2026-04-10)
   cleaner topbar: hide sound/theme buttons, firmer brand
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

  /* === 10. Убираем неважные иконки из топбара === */
  body.theme-hud .topbar #sound-toggle-btn,
  body.theme-hud .topbar #ui-theme-btn,
  #sound-toggle-btn,
  #ui-theme-btn {
    display: none !important;
  }

  /* === 11. Brand — крупный и читаемый === */
  body.theme-hud .topbar__left .brand,
  .topbar__left .brand {
    padding: 0 8px !important;
    margin: 0 !important;
  }
  body.theme-hud .topbar__left .brand__subtitle,
  .topbar__left .brand__subtitle {
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    color: rgba(0, 242, 255, 0.96) !important;
    text-shadow:
      0 0 8px rgba(0, 242, 255, 0.7),
      0 0 16px rgba(0, 242, 255, 0.35) !important;
    text-transform: uppercase !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline-block !important;
  }

  /* === 12. Topbar row — побольше gap между группами === */
  body.theme-hud .topbar__row--1,
  .topbar__row--1 {
    padding: 5px 12px !important;
    gap: 8px !important;
  }

  body.theme-hud .topbar__left,
  .topbar__left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  body.theme-hud .topbar__right,
  .topbar__right {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* === 13. changelog кнопка (оранж alert) компактнее === */
  body.theme-hud #changelog-btn,
  #changelog-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
}

@media (max-width: 400px) {
  body.theme-hud .topbar__left .brand__subtitle {
    font-size: 13px !important;
    letter-spacing: 3px !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   Mobile Sheet states + Boot screen mobile adaptation
   Appended to mobile-fix.css
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

  /* ═══════════════════════════════════════════════════════
     Bottom sheet — 3 snap states for .sidebar--left / .sidebar--right
     Overrides the fixed max-height: 52vh from floating-layout.css
     ═══════════════════════════════════════════════════════ */
  .sidebar.sheet,
  body.theme-hud .sidebar.sheet {
    transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: max-height, transform !important;
  }

  .sidebar.sheet-collapsed,
  body.theme-hud .sidebar.sheet-collapsed {
    max-height: 72px !important;     /* handle + small peek */
    overflow: hidden !important;
  }
  .sidebar.sheet-collapsed .panel__body,
  .sidebar.sheet-collapsed .sidebar__scroll {
    opacity: 0.15 !important;
    pointer-events: none !important;
  }

  .sidebar.sheet-mid,
  body.theme-hud .sidebar.sheet-mid {
    max-height: 48vh !important;
  }

  .sidebar.sheet-expanded,
  body.theme-hud .sidebar.sheet-expanded {
    max-height: 88vh !important;
  }

  /* Bigger drag handle for better touch target */
  .sidebar--left::before,
  .sidebar--right::before,
  body.theme-hud .sidebar--left::before,
  body.theme-hud .sidebar--right::before {
    width: 44px !important;
    height: 5px !important;
    margin: 10px auto 6px !important;
    opacity: 0.7 !important;
    background: rgba(0, 242, 255, 0.55) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.35) !important;
  }

  /* When dragging active — block pointer events on children except handle */
  .sidebar.sheet:active {
    user-select: none !important;
  }

  /* ═══════════════════════════════════════════════════════
     Boot screen — mobile adaptation
     ═══════════════════════════════════════════════════════ */
  #hud-loader .boot__wrap {
    padding: 0 14px !important;
    max-width: 100vw !important;
  }

  #hud-loader .boot__frame {
    padding: 18px 14px !important;
    max-width: calc(100vw - 28px) !important;
  }

  #hud-loader .boot__title {
    font-size: clamp(40px, 14vw, 64px) !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #hud-loader .boot__sub {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 12px !important;
  }

  #hud-loader .boot__progress {
    width: calc(100vw - 60px) !important;
    max-width: 520px !important;
  }

  /* Terminal — smaller + narrower to fit mobile viewport */
  #boot-terminal {
    max-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    margin: 12px auto 0 !important;
    padding: 8px 10px !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
    height: 180px !important;
    white-space: pre !important;
    overflow-x: hidden !important;
  }

  /* OK/WARN/FAIL markers — pushed to separate row inside line on narrow screens
     by truncating the text portion */
  #boot-terminal > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
  #boot-terminal > div > span:last-child {
    flex-shrink: 0 !important;
    float: none !important;
  }
  /* Let text be ellipsed if too long */
  #boot-terminal > div {
    overflow: hidden !important;
  }
}

@media (max-width: 400px) {
  #hud-loader .boot__title {
    font-size: clamp(32px, 13vw, 50px) !important;
    letter-spacing: 0.03em !important;
  }
  #boot-terminal {
    font-size: 8px !important;
    height: 160px !important;
    padding: 6px 8px !important;
  }
  #hud-loader .boot__sub {
    font-size: 9px !important;
  }
}