/* ============================================================
   t2 engineer — мобильная адаптация (телефон).
   Раскладка: карта на весь экран, сверху тонкая шапка, снизу панель
   вкладок (бывший рельс), список БС и карточка выезжают снизу как шторки.
   Активируется по ширине экрана (срабатывает и в узком окне браузера).
   ============================================================ */
:root {
  --mrail-h: 58px;   /* высота нижней навигации */
}

/* по умолчанию (десктоп) мобильные элементы скрыты */
.sheet-close-btn { display: none; }

@media (max-width: 820px) {
  /* ---------- каркас: убираем grid, всё позиционируем фиксировано ---------- */
  .app {
    display: block;
    height: 100vh; height: 100dvh;
    width: 100vw;
  }

  /* ---------- ШАПКА ---------- */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    padding: 0 8px; gap: 8px;
    z-index: 1200;
  }
  .topbar .status-strip,
  .topbar .badge,
  .topbar .brand__name,
  .topbar #btn-help,
  .topbar .avatar-btn,
  .search .kbd { display: none; }
  .brand { padding-left: 4px; gap: 0; }
  .topbar__spacer { display: none; }
  .search { width: auto; flex: 1 1 auto; min-width: 0; }
  .topbar__cta { padding: 0 12px; }

  /* ---------- КАРТА на весь экран ---------- */
  .map-wrap {
    position: fixed; left: 0; right: 0;
    top: var(--topbar-h);
    bottom: calc(var(--mrail-h) + env(safe-area-inset-bottom, 0px));
    min-width: 0;
  }
  .legend { display: none; }
  .panel-toggle { display: none; }            /* десктопные «свернуть» не нужны */
  .map-ctrls.tr { top: 10px; right: 10px; }

  /* ---------- НИЖНЯЯ НАВИГАЦИЯ (бывший рельс) ---------- */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--mrail-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    flex-direction: row; align-items: center;
    justify-content: space-around; gap: 2px;
    border-right: 0; border-top: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden;
    z-index: 1200;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__spacer { display: none; }
  .rail__btn { flex: 0 0 auto; width: 44px; height: 44px; }
  .rail__btn.active::before {
    left: 50%; top: auto; bottom: 0;
    transform: translateX(-50%);
    width: 24px; height: 3px; border-radius: 3px 3px 0 0;
  }

  /* ---------- ШТОРКИ (список БС и карточка) ---------- */
  .sites, .card {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--mrail-h) + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: 74vh; height: 74dvh;
    max-height: calc(100vh - var(--topbar-h) - var(--mrail-h) - 8px);
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.5);
    transform: translateY(115%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1100;
    display: flex !important;          /* нейтрализуем десктопные no-sites/no-card */
    padding-top: 12px;                 /* место под «грабер» */
  }
  .app.m-sheet-sites .sites { transform: none; }
  .app.m-sheet-card  .card  { transform: none; }

  /* «грабер» — полоска-ручка сверху шторки */
  .sites::before, .card::before {
    content: ""; position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 3px;
    background: var(--line); z-index: 6; pointer-events: none;
  }

  .sites__head-ops { display: flex; align-items: center; gap: 6px; }
  .sheet-close-btn { display: grid; border: 1px solid var(--line); width: 32px; height: 32px; }
  .card__close { top: 12px; right: 12px; }

  /* ---------- МОДАЛЫ — почти на весь экран ---------- */
  .modal { padding: 0; align-items: flex-end; }
  .modal-box {
    width: 100vw; max-width: 100vw;
    max-height: 92vh; max-height: 92dvh;
    overflow: auto;
    border-radius: 18px 18px 0 0;
    margin: 0;
  }
  .viewer-box, .toreport-box { width: 100vw; max-width: 100vw; height: 92vh; }

  /* всплывающая карточка новой задачи — снизу на всю ширину, поверх шторок */
  .task-pop {
    left: 8px; right: 8px; bottom: calc(var(--mrail-h) + 12px);
    width: auto; max-width: none; z-index: 1160;
  }

  /* тост — над нижней навигацией */
  .toast { bottom: calc(var(--mrail-h) + 18px); }

  /* панель маршрута — шторкой снизу */
  #route-panel.route-panel {
    position: fixed; left: 0; right: 0; bottom: var(--mrail-h);
    top: auto; width: auto; max-width: none;
    max-height: 70vh; overflow: auto;
    border-radius: 16px 16px 0 0;
    z-index: 1150;
  }

  /* крупнее тач-цели в списках/кнопках */
  .site-row { padding: 13px 12px; }
  .btn--sm { padding: 8px 12px; }
}

/* очень узкие экраны — ещё компактнее */
@media (max-width: 380px) {
  .rail__btn { width: 40px; height: 40px; }
  .topbar__cta span:not([data-i]) { display: none; }  /* у «Наряд» оставить только иконку */
}