/* Телефон. Демо собрано под ширину рабочего монитора — 240-пиксельная
 * боковая колонка, сетки по четыре-пять столбцов, таблицы на всю ширину.
 * На экране 390 пикселей это читалось только пинчем, а заходят к нам с
 * телефона чаще, чем с ноутбука.
 *
 * Слой отдельным файлом и только в медиа-запросе: он ничего не меняет на
 * большом экране, поэтому его нельзя случайно «уронить» на десктоп, правя
 * телефонную мелочь. Список селекторов собран из самих iop.css и flow.css
 * разбором, а не по памяти — иначе половина сеток осталась бы широкой.
 */

@media (max-width: 860px) {

  /* Каркас: боковая колонка перестаёт быть колонкой и уезжает наверх
     горизонтальной лентой. Прятать её в «бургер» здесь неправильно —
     в демо человек ходит именно по разделам, и они должны быть видны. */
  .iop-app { grid-template-columns: 1fr; }
  .iop-side {
    position: static; height: auto; border-right: none;
    border-bottom: 1px solid var(--bd);
    padding: 10px 12px; gap: 10px;
  }
  .iop-side-nav {
    flex-direction: row; overflow-x: auto; gap: 6px;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  .iop-side-nav-label { display: none; }
  .iop-side-item { white-space: nowrap; flex: 0 0 auto; font-size: 12.5px; }
  .iop-side-badge { margin-left: 6px; }
  /* Подвал боковой колонки на телефоне — это ещё один экран прокрутки
     до содержимого. Смысл его строк на маленьком экране нулевой. */
  .iop-side-foot, .iop-side-cross { display: none; }
  .iop-side-brand { position: static; --logo-w: 116px; }

  /* Выбор рабочего места — тоже лента. Столбиком из четырёх кнопок он
     съедал пол-экрана до того, как начинались данные, а именно смена
     рабочего места и есть главный жест в этом демо. */
  .iop-persona {
    flex-direction: row; overflow-x: auto; gap: 6px;
    padding: 8px 0 10px; -webkit-overflow-scrolling: touch;
  }
  .iop-persona-lbl { display: none; }
  .iop-persona-btn { flex: 0 0 auto; white-space: nowrap; padding: 6px 10px; }
  .iop-persona-who { display: none; }

  /* Заголовок группы уезжает ВЛЕВО от ленты, а не над ней: так каждая
     группа стоит одной строкой вместо двух. На телефоне это разница между
     «данные видно сразу» и «данные под четырьмя рядами меню».
     Убрать заголовки совсем нельзя — цветная точка отделяет наши разделы
     от разделов поставщика, а это половина рассказа демо. */
  .iop-side-group {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 5px 0; min-width: 0;
  }
  .iop-side-group-head {
    flex: 0 0 auto; padding: 0; writing-mode: horizontal-tb;
    max-width: 92px; line-height: 1.15; font-size: 9.5px;
  }

  /* Логотип поменьше и без подзаголовка «Кабинет предприятия»: на телефоне
     это строка, за которую платят вертикалью, ничего не сообщая. */
  .iop-side-brand { --logo-w: 104px; padding: 2px 0 6px; }
  .iop-side-brand-sub { display: none; }

  /* Шапка: поиск занимает всю ширину и переносится под хлебные крошки. */
  .iop-topbar {
    height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px;
  }
  .iop-topbar-search { order: 3; flex: 1 0 100%; max-width: none; }

  /* Совсем узкий экран: поиск прячем. Строка поиска — это целый ряд ради
     действия, которого в демо с телефона не совершают. */
  @media (max-width: 480px) {
    .iop-topbar-search { display: none; }
  }

  /* Содержимое: поля меньше, иначе на 390 пикселях от карточки остаётся
     половина. */
  .iop-content, .iop-page { padding: 12px !important; }
  .iop-card { overflow-x: auto; }

  /* Переключатели-вкладки: inline-flex не переносится и уезжал за край
     экрана вместе со всей страницей. Прокручиваем ленту вкладок, а не
     страницу — иначе человек листает вбок весь экран, чтобы нажать
     четвёртую вкладку. */
  .iop-tabs {
    display: flex; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .iop-tab { flex: 0 0 auto; white-space: nowrap; }

  /* Таблицы шире экрана — прокручиваем их, а не ломаем вёрстку: колонки
     в таблице несут смысл рядом друг с другом, схлопывать их в список
     значит потерять сравнение по строке. */
  .iop-table { min-width: 520px; }

  /* Модальные окна во весь экран: 720 пикселей ширины на телефоне
     превращались в окно с полями по два пикселя. */
  .iop-modal { max-width: none; max-height: 92vh; border-radius: 10px; }

  /* Плитки показателей: по две в ряд — цифры читаются, и видно сразу несколько */
    .bx-kpi-row,
    .bx-pipeline,
    .en-kpi-row,
    .exec-bigs,
    .fl-pipeline,
    .fleet-campaign,
    .fleet-kpi-row,
    .hx-stats,
    .inv-kpi-row,
    .ix-kpi-row,
    .ln-hj-head,.ln-hj-row,
    .mx-kpi-row,
    .op-loss-grid,
    .op-ribbon,
    .ota-steps,
    .qx-heatmap-header, .qx-heatmap-row,
    .qx-kpi-row,
    .sx-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Всё остальное — в одну колонку: фиксированные колонки в 180-280 пикселей на телефон не помещаются */
    .di-batt-grid,
    .di-detail-grid,
    .en-cols,
    .en-tariff-row,
    .exec-formula-vals,
    .fl-cust-grid,
    .fl-kpi-row,
    .fleet-cols,
    .fleet-detail-meta,
    .hx-cols,
    .inv-cols,
    .ix-cols,
    .ix-int-grid,
    .ix-tl-row,
    .lf-detail,
    .lf-kpi-row,
    .ln-andon-grid,
    .ln-gl,
    .ln-gl-list,
    .ln-muda-row,
    .mx-cols,
    .mx-detail-meta,
    .op-active-dt,
    .op-telemetry-grid,
    .ota-cohort-grid,
    .ota-confirm-grid,
    .pd-blockers,
    .po-live-row,
    .qx-cols,
    .qx-pareto-row,
    .st-lines,
    .sx-cols,
    .sx-gantt-header,
    .sx-gantt-row,
    .sx-util-row,
    .tr-graph {
    grid-template-columns: 1fr;
  }

  /* Совсем узкие экраны: даже две плитки в ряд начинают переносить слова. */
  @media (max-width: 430px) {
    .bx-kpi-row,
    .bx-pipeline,
    .en-kpi-row,
    .exec-bigs,
    .fl-pipeline,
    .fleet-campaign,
    .fleet-kpi-row,
    .hx-stats,
    .inv-kpi-row,
    .ix-kpi-row,
    .ln-hj-head,.ln-hj-row,
    .mx-kpi-row,
    .op-loss-grid,
    .op-ribbon,
    .ota-steps,
    .qx-heatmap-header, .qx-heatmap-row,
    .qx-kpi-row,
    .sx-kpi-row {
      grid-template-columns: 1fr;
    }
  }
}