/* ============================================================
   Road24 — мобильная адаптивная вёрстка (слой поверх styles.css)
   Десктоп (≥ 821px) НЕ затрагивается — всё внутри @media max-width.
   ============================================================ */

@media (max-width: 820px) {
  /* — Шапка / навигация — */
  .topnav-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .topnav-search { order: 1; min-width: 0; width: 100%; padding: 11px 14px; }
  .topnav-groups {
    order: 2; width: 100%; flex: 0 0 auto;
    overflow-x: auto; flex-wrap: nowrap; gap: 2px;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  }
  .topnav-groups::-webkit-scrollbar { height: 0; }
  .topnav-link { flex: 0 0 auto; padding: 9px 12px; font-size: 13px; }
  .topnav-menu-pop { min-width: min(280px, 86vw); }

  /* — Контент — */
  .app-h .page { padding: 16px 14px 48px; }
  .grid { gap: 12px; }

  /* сетки: KPI — 2 в ряд, контентные 2-колоночные — в один столбец.
     ВАЖНО: minmax(0,1fr), а не 1fr — иначе широкий контент (график 800px)
     распирает колонку и ломает ширину (1fr уважает min-content). */
  /* !important — чтобы перебить inline-стили gridTemplateColumns на страницах */
  .g-6, .g-4, .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g-2, .g-2-asym-30-70, .g-2-asym-70-30 { grid-template-columns: minmax(0, 1fr) !important; }

  /* подстраховка: содержимое (графики/таблицы) не шире своей ячейки */
  .grid > * { min-width: 0; }

  /* широкие таблицы — горизонтальный скролл вместо разъезда вёрстки */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* поля ввода ≥ 16px — чтобы iOS не зумил при фокусе */
  input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="number"], textarea, select { font-size: 16px; }

  /* служебные баннеры — перенос вместо обрезки */
  .role-preview-banner { flex-wrap: wrap; height: auto; gap: 6px; padding: 8px 14px; }
}

/* очень узкие телефоны — все сетки в один столбец */
@media (max-width: 480px) {
  .g-6, .g-4, .g-3 { grid-template-columns: minmax(0, 1fr) !important; }
}