/* Основной сайт с телефона и планшета.

   Отдельный слой поверх app.css, а не правки внутри него: десктопная вёрстка
   вылизана под плотные таблицы и доски, и трогать её ради узкого экрана значило
   бы чинить одно, ломая другое. Здесь только медиа-запросы — разметка и
   поведение фронта не меняются.

   Что делаем на узком экране:
   · тач-цели дорастают до пальца (кнопки, поля, чекбоксы, строки списков);
   · всё, что на десктопе стоит в ряд, встаёт в колонку или прокручивается;
   · таблицы остаются таблицами — карточками они врут о структуре данных, — но
     читаемым шрифтом, с липкой первой колонкой и прокруткой вбок;
   · модалки становятся почти полноэкранными: на 390px «окошко» нечитаемо.

   Брейкпоинты: 1024 — планшет и мелкий ноутбук, 760 — телефон, 560 — узкий
   телефон. Часть модулей уже имеет свои медиа-правила в app.css (карточка
   участника, карточка организатора, тройки) — их не дублируем. */

/* ======================= планшет и уже ======================= */
@media (max-width: 1024px) {
  main { padding: 14px 12px; }
  main > h2 { font-size: 16px; margin-bottom: 10px; }

  /* Тач-цели. 32px — минимум: ниже начинаешь промахиваться по соседней кнопке,
     а в этих панелях они стоят вплотную. */
  .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }
  .btn.sh-mini { min-height: 26px; padding: 3px 8px; }
  .dt-q, .cs-trigger, .tp-q, .meet-q, .ex-q { font-size: 13px; }
  .modal-body input:not([type=checkbox]):not([type=radio]),
  .modal-body select, .modal-body textarea { font-size: 14px; padding: 8px 10px; }
  input[type=checkbox], input[type=radio] { width: 17px; height: 17px; }

  /* Панель модуля: восемь кнопок в ряд переносом съедали пол-экрана до таблицы —
     пускаем их одной лентой с прокруткой. Панель таблицы (поиск + группировка)
     не трогаем: там поле должно тянуться, а не ехать вбок. Формы на grid
     (`.ds-form`) сами схлопываются в колонку — им прокрутка только навредит. */
  .list-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; }
  .list-tools::-webkit-scrollbar { display: none; }
  .list-tools > * { flex: 0 0 auto; }
  .dt-info { margin-left: 0; }

  /* Таблицы: десктопные 10.5px с планшета уже не читаются. */
  table.dt { font-size: 12px; }
  table.dt th, table.dt td { padding: 5px 8px; }
  table.dt thead th { font-size: 10px; }
  .dt-wrap { max-height: calc(100vh - 210px); }

  /* Боковые рельсы модулей — над содержимым, а не рядом с ним. */
  .sh-wrap { flex-direction: column; }
  .sh-side { flex: 0 0 auto; width: 100%; position: static; }
  .sh-list { max-height: 240px; }
}

/* ======================= телефон ======================= */
@media (max-width: 760px) {
  /* --- шапка --- */
  .topbar { height: auto; min-height: 46px; padding: 0 8px; gap: 4px; flex-wrap: wrap; }
  .topbar .brand { padding-right: 8px; margin-right: 0; font-size: 12px; }
  /* меню уезжает на свою строку и листается вбок: пунктов до десяти */
  .topbar nav { order: 3; width: 100%; margin: 0 -8px; padding: 0 8px 6px; gap: 4px; }
  .topbar nav a { padding: 9px 11px; font-size: 12.5px; }
  .topbar nav a svg { width: 17px; height: 17px; }
  .topbar .right { gap: 8px; margin-left: auto; }
  .topbar .right .who { display: none; }   /* важнее выход и уведомления */

  main { padding: 10px 8px 28px; }

  /* --- таблицы --- */
  /* Первая колонка липкая: через десяток столбцов вправо теряется, чья это
     строка. На десктопе так делает только реестр трансферов — на телефоне
     нужно всем таблицам. */
  .dt-wrap { max-height: calc(100vh - 190px); border-radius: 10px; }
  table.dt th:first-child, table.dt td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  table.dt thead th:first-child { z-index: 3; background: var(--th-bg); }
  table.dt tr.dt-group td { background: var(--surface-2); }
  /* поиск по таблице — на всю строку: это первое, чем пользуются с телефона */
  .dt-toolbar { gap: 6px; margin-bottom: 7px; }
  .dt-q { flex: 1 1 100%; min-width: 0; }
  .dt-groupbar { flex: 1 1 100%; }

  /* Панель фильтра столбца — во всю ширину: в неё целятся пальцем. */
  .dt-panel { left: 8px !important; right: 8px; width: auto; max-width: none; }
  .dt-opts { max-height: 46vh; }
  .dt-opts label { padding: 9px 8px; font-size: 13px; }
  .dt-panel-h { padding: 10px 8px; }
  .dt-search { font-size: 14px; padding: 7px 9px; }
  .dt-sortpanel { left: 8px !important; right: 8px; width: auto; }

  /* --- модалки: лист снизу почти во весь экран --- */
  .modal { padding: 0; align-items: flex-end; }
  .modal-box { max-width: none; width: 100%; max-height: 94vh;
    border-radius: 14px 14px 0 0; }
  .modal-box.wide, .ds-modal, .ml-modal, .dg-modal, .meet-modal, .rs-modal,
  .ex-modal, .org-modal, .pcard-modal { max-width: none; width: 100%; }
  .modal-box h3 { padding: 14px 14px 12px; font-size: 15px;
    position: sticky; top: 0; background: var(--surface); z-index: 3; }
  .modal-body { padding: 12px 14px; }
  /* подвал липнет к низу: у длинной формы кнопки уезжали за край экрана */
  .modal-foot { position: sticky; bottom: 0; background: var(--surface);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap; gap: 6px; }
  .modal-foot .btn { min-height: 36px; flex: 1 1 auto; }
  .modal-foot .spacer { flex: 1 1 100%; height: 0; }
  /* двухколоночные блоки внутри модалок */
  .rp-grid, .fl-grid, .cn-list, .ex-colgrid { grid-template-columns: 1fr; }
  .meet-list, .ds-pick-list { max-height: 46vh; }

  /* карточка участника: рельса личности идёт сверху, а не колонкой слева */
  .dos-rail { position: static; border-right: 0; border-bottom: 1px solid var(--line); }

  /* --- трансферы по городу --- */
  .sh-buses { grid-template-columns: 1fr; padding: 8px; }
  .sh-col > header { gap: 6px; padding: 8px; }
  .sh-daybar { overflow-x: auto; scrollbar-width: none; }
  .sh-daybar::-webkit-scrollbar { display: none; }

  /* --- расписание: лента и сетка --- */
  .ds-head { flex-wrap: wrap; gap: 6px; }
  .ds-list { max-height: none; }
  .pg-day { overflow-x: auto; }

  /* --- расселение и рассадка --- */
  .lg-rlist { max-height: 200px; }
  .rs-ev { min-width: 0; }

  /* --- плавающая панель выделения и тост --- */
  .tr-selbar { left: 8px; right: 8px; transform: none; max-width: none;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .tr-selbar.show { transform: none; }
  .toast { left: 8px; right: 8px; max-width: none; }

  /* --- вход --- */
  .login { max-width: none; margin: 6vh 4px; }
}

/* ======================= узкий телефон ======================= */
@media (max-width: 560px) {
  .topbar .brand .yr { display: none; }
  table.dt { font-size: 12.5px; }
  table.dt th, table.dt td { padding: 6px 8px; }
  .dt-wrap { max-height: calc(100vh - 176px); }
}

/* ======================= сенсорный ввод ======================= */
/* На тач-экране наведение «залипает»: кнопки, которые проявляются по hover,
   иначе не нажать — открываем их постоянно. */
@media (hover: none) and (pointer: coarse) {
  table.dt th .dt-acts { opacity: 1; }
  .dt-action { opacity: 1; }
}