/* Общий мобильный слой для всех страниц панели.
 *
 * Почему отдельным файлом, а не @media в каждой странице: стили здесь живут
 * в <style> внутри каждого из 16 view (исторически, ADR-013), и словарь
 * классов у них практически одинаковый — header/nav/.navlink, main,
 * .page-title, .section, table, .modal-overlay/.modal-box, .filter-combo/
 * .filter-panel, .stat-cards, .grid, .field. Один файл, подключённый ПОСЛЕ
 * inline-стилей страницы, перекрывает их при равной специфичности и
 * избавляет от 16 копий одних и тех же медиазапросов, которые неминуемо
 * разъехались бы. Десктопный вид не трогается вообще: всё, кроме блока
 * "шапка" ниже, живёт внутри @media.
 *
 * Точка перелома — 900px для меню (ссылок в шапке много, они начинают
 * налезать раньше остального) и 720px для содержимого.
 */

/* --- Шапка и меню (часть правил нужна на всех ширинах) ----------------- */

/* buildNav() заворачивает ссылки в .nav-links и добавляет кнопку-бургер.
   На десктопе .nav-links должен вести себя ровно как раньше сам <nav>:
   строка кнопок с тем же gap. */
nav .nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
nav .nav-burger { display: none; }
.nav-current { display: none; }
nav .nav-links form { margin: 0; }

@media (max-width: 900px) {
  /* Шапка липкая: на телефоне список длинный, и возвращаться к меню
     прокруткой вверх на каждый переход — основная боль. position:sticky
     заодно делает шапку containing block для выпадающего меню ниже. */
  header {
    position: sticky; top: 0; z-index: 900;
    padding: 10px 14px;
    background: #12141a;
  }
  header h1 { font-size: 14px; }
  /* Название текущего раздела рядом с логотипом (подставляет mobile.js):
     со свёрнутым меню иначе не понять, где ты находишься. */
  .nav-current {
    display: block;
    font-size: 13px; color: var(--text-dim);
    padding-left: 10px; margin-left: 2px;
    border-left: 1px solid var(--panel-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
  }

  nav .nav-burger {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 38px; padding: 0; font-size: 18px; line-height: 1;
  }
  nav .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px 12px 14px;
    background: #12141a;
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    max-height: calc(100vh - 58px); overflow-y: auto;
  }
  header.nav-open nav .nav-links { display: flex; }
  nav .nav-links a.navlink,
  nav .nav-links > button,
  nav .nav-links form button,
  nav .nav-links a.btn-toggle {
    display: block; width: 100%; text-align: left;
    padding: 12px 14px; font-size: 14px; border-radius: 10px;
  }
}

/* --- Содержимое -------------------------------------------------------- */

@media (max-width: 720px) {
  main { margin: 16px auto 48px; padding: 0 12px; }

  .page-title, .dash-title { font-size: 19px; }
  .page-sub { font-size: 12px; }
  /* .page-head — это "заголовок слева, кнопка справа"; на узком экране
     кнопка должна уезжать под заголовок, а не сжимать его в столбик букв. */
  /* flex-wrap: wrap из страничных стилей вместе с колоночным направлением
     даёт колонки: строка получает ширину самого широкого элемента (у /tyver
     это блок с селектом — 399px), и ВСЕ элементы растягиваются до неё,
     вылезая за экран. Замерено: страница была шире вьюпорта на 36px. */
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
  /* Флекс-элемент по умолчанию не сжимается уже своего min-content, и одно
     длинное слово (ссылка, «Facebook/Instagram/Messenger/…») распирает всю
     страницу по горизонтали. Найдено замером на /tyver: страница была шире
     экрана на 36px именно из-за подзаголовка. */
  .page-head > * { min-width: 0; }
  .page-title, .page-sub, .meta-line, .warn-note, .section-sub { overflow-wrap: anywhere; }
  /* Селект с длинными вариантами («связка», «исследование») иначе задаёт
     свою min-content ширину и распирает контейнер. */
  select { max-width: 100%; }

  /* Ряды кнопок справа от заголовка (у них inline-стили в разметке, отсюда
     !important — иначе inline перебивает файл): на телефоне разворачиваются
     во всю ширину и переносятся, вместо выезда за левый край экрана. */
  .head-actions, .head-actions-row {
    width: 100%;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .head-actions > *, .head-actions-row > * { flex: 1 1 auto; }

  .section { padding: 12px; margin-bottom: 20px; }
  .warn-note { font-size: 11px; padding: 10px 12px; }

  /* Панели фильтров/периода: на десктопе это одна строка, здесь — сетка из
     переносящихся элементов, каждый занимает всю ширину, если не влезает. */
  .date-range-bar, .cab-filter-bar, .fb-filters-bar, .dash-filters-bar,
  .controls-bar, .filters-bar, .metric-filters-bar, .bulk-bar,
  .selection-bar, .accounts-toolbar, .analyze-bar, .pagination-bar,
  .select-toolbar, .create-form, .filters-form, .form-row, .submit-row {
    padding: 10px 12px;
    gap: 8px;
  }
  .cab-filter-bar { flex-direction: column; align-items: stretch; }
  .cab-filter-left { flex-direction: column; align-items: stretch; width: 100%; }
  /* Сетка, а не флекс-строка: при шести пресетах (/campaigns после 13.09)
     флекс ужимал пять кнопок до 61px с переносом текста в две строки, а
     шестая уезжала одна на всю ширину. Сетка по ~96px даёт ровные ряды по три. */
  .date-presets { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  /* Кнопка загрузки в той же строке, что и поля дат, ужимала их до «дд.мм.» —
     уводим её на отдельную строку целиком. */
  .date-range-bar { flex-wrap: wrap; }
  .date-range-bar > .btn-primary { flex: 1 1 100%; }
  .date-preset-btn { flex: 1; }
  /* Два поля даты по 16px (см. ниже про зум iOS) не влезают в строку рядом с
     подписью — подпись уходит на свою строку, поля делят ширину пополам. */
  .date-range-bar label, .dash-filters-bar label, .controls-bar label { width: 100%; }
  .date-range-bar input[type="date"],
  .dash-filters-bar input[type="date"],
  .controls-bar input[type="date"],
  .controls-bar select { flex: 1; min-width: 0; }

  .filter-combo, .filter-btn, .group-by-bar, .group-by-bar select,
  .stats-source, .stats-source-btns { width: 100%; }
  .filter-btn { justify-content: space-between; }
  .stats-source-btn { flex: 1; }

  /* Выпадающая панель фильтра шириной 280px, прижатая к своей кнопке,
     на узком экране уезжает за правый край. Убираем позиционирование с
     .filter-combo — тогда абсолютная панель считает координаты от документа,
     а не от кнопки, и растягивается по всей ширине под ней. */
  .filter-combo { position: static; }
  .filter-panel {
    left: 12px; right: 12px; width: auto; max-width: none;
    /* top: calc(100% + 6px) из страничных стилей теперь отсчитывается не от
       кнопки (комбо стало статичным), а от начального содержащего блока —
       то есть панель уезжала на высоту экрана вниз, за пределы видимого.
       top:auto возвращает её на статическое место — сразу под свою кнопку. */
    top: auto; margin-top: 6px;
  }
  .filter-options { max-height: 45vh; }

  /* Таблицы. Горизонтальный скролл у контейнера, а не обрезка: колонок
     много и сжимать их до нечитаемости хуже, чем листать вбок. */
  .section, .table-wrap, .fb-level, .section.table-section {
    -webkit-overflow-scrolling: touch;
  }
  /* Только секции с таблицей: у остальных (формы, настройки) свой
     горизонтальный скролл обрезал бы выпадающие панели фильтров. */
  .section:has(table) { overflow-x: auto; }
  table { font-size: 12px; }
  th, td { padding: 8px 10px; }
  .fb-level th, .fb-level td { padding: 8px 10px; }
  /* На телефоне вертикальный скролл внутри таблицы конфликтует с прокруткой
     самой страницы — отдаём высоту странице, шапка таблицы всё равно
     остаётся липкой относительно окна. */
  .table-wrap { max-height: none; }
  .fb-level-root { max-height: none; }

  /* Карточки и сетки */
  .stat-card { min-width: 132px; padding: 10px 12px; }
  .stat-value { font-size: 18px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .breakdown-grid { grid-template-columns: 1fr; }
  .chart-wrap { height: 260px; }
  .chart-wrap.small { height: 220px; }

  /* Пальцем в мелкое не попасть: минимальная высота у всего кликабельного. */
  button, .btn-primary, .btn-toggle, .btn-danger, .btn-secondary,
  .navlink, .filter-btn, .page-btn, .source-tab, .subnav button.subtab {
    min-height: 38px;
  }
  .filter-checkbox-option, .filter-option { padding: 10px 10px; font-size: 13px; }

  /* iOS Safari зумит страницу при фокусе в поле с размером шрифта меньше
     16px и обратно уже не отъезжает. Специфичность у страничных правил вроде
     `.field input` выше, чем у голого `input`, поэтому здесь !important —
     единственный способ не перечислять все их селекторы поимённо. */
  input, select, textarea { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] { font-size: inherit !important; }
}

/* --- Модальные окна ---------------------------------------------------- */

@media (max-width: 720px) {
  /* Из окна по центру с полями — в нижний лист во всю ширину: так ближе к
     большому пальцу и не теряется вертикаль при появлении клавиатуры. */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box, .modal-box.wide {
    max-width: none; width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 14px 14px 20px;
  }
  /* Кнопка закрытия была position:absolute ВНУТРИ прокручиваемого окна —
     на длинном содержимом она уезжала вверх вместе с текстом, и закрыть
     окно с телефона было нечем. sticky + float держит её в правом верхнем
     углу всё время, пока листаешь. */
  .modal-close {
    position: sticky; top: 0; float: right; z-index: 5;
    margin: -4px -4px 0 10px;
    padding: 8px 12px; font-size: 13px;
    /* Непрозрачный фон обязателен: кнопка висит поверх текста, который под
       ней прокручивается, и со штатным полупрозрачным фоном строки
       просвечивали сквозь надпись «Закрыть». */
    background: #1b1e26;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }
  .modal-title { font-size: 14px; padding-right: 0; margin-bottom: 12px; }
  .modal-box video, .modal-box img { max-height: 58vh; }
  .modal-media-row img, .modal-media-row video { max-height: 58vh; }
  .modal-box table { font-size: 12px; }
  .comment-modal-actions, .reason-actions { flex-wrap: wrap; }
  .comment-modal-actions button, .reason-actions button { flex: 1; min-width: 140px; }
}

/* Пока открыто модальное окно, фон не должен прокручиваться под ним —
   иначе на телефоне свайп по оверлею уводит страницу, а окно остаётся
   висеть над уехавшим содержимым. Класс ставит mobile.js. */
body.modal-open { overflow: hidden; }

/* --- Вход и 2FA (у этих страниц нет шапки, только карточка) ------------ */

@media (max-width: 720px) {
  /* Только внутренние отступы: ширину (width:100% + max-width) страница
     задаёт сама, и попытка её переопределить ужимала карточку до ширины
     содержимого — 260px вместо экрана. */
  /* Только страницы входа/2FA: у них body сам центрирует карточку и имеет
     свой padding. Остальным страницам padding на body сломал бы липкую
     шапку во всю ширину, поэтому селектор через :has(> .card). */
  body:has(> .card) { padding: 16px; }
  .card { padding: 22px 18px; }
}