/* mobile.css — общая мобильная адаптация страниц GC CRM (iPhone 13-17 / Xiaomi / Android).
   Подключается ко всем страницам, кроме kitchen.html (у неё свои мобильные стили внутри). */
@media only screen and (max-width: 820px) {
  /* топбар SOLT: меню переносится, компактный шрифт */
  .solt-topbar, .gck-topbar {
    height: auto !important; min-height: 46px; flex-wrap: wrap; padding: 6px 10px !important; gap: 4px;
  }
  .solt-menu, .gck-menu { gap: 9px !important; flex-wrap: wrap; width: 100%; }
  .solt-menu-item, .gck-menu-item { font-size: 11px !important; letter-spacing: 0.3px !important; }
  .solt-title, .gck-title { font-size: 13px !important; }

  /* окно SOLT на всю ширину */
  .solt-window { max-width: 100% !important; min-height: auto !important; margin: 0 !important; }
  .solt-wrap, .gck-window-container { padding: 10px 6px !important; }

  /* любые таблицы — горизонтальный скролл, не ломают страницу.
     🔴 05.09.2026, две поправки после жалобы Лизы «очень неудобно через телефон смотреть маршруты»:
     1) :not(.sheet-table) - общий кегль 13px гасил 16px маршрутного листа, то есть отменял ровно
        то, что она в этот день попросила увеличить;
     2) .logistics-table убран из второго правила - таблица уже лежит в обёртке
        .logistics-table-scroll со своим overflow-x, и два скроллера подряд ловят палец во
        внутренний, а nowrap наследовался в ячейки и гасил перенос адреса. */
  table:not(.sheet-table) { font-size: 13px !important; }
  .solt-table, table.gck-table {
    display: block; overflow-x: auto; white-space: nowrap; max-width: 100%;
  }

  /* логистика: сводка в 2 колонки, карточки маршрутов на всю ширину */
  .logistics-summary { grid-template-columns: repeat(2, 1fr) !important; }
  .logistics-controls, .logistics-topbar { flex-wrap: wrap !important; gap: 8px !important; }
  .logistics-route-facts { grid-template-columns: 1fr 1fr !important; }
  .logistics-body { padding: 8px !important; }

  /* 🔴 ПЛАНИРОВЩИК МАРШРУТОВ НА ТЕЛЕФОНЕ - ЛЕНТА, А НЕ СЕТКА (05.09.2026).
     Колонки стояли как repeat(auto-fit, minmax(min(19%,230px),1fr)): 19 % от 354 рабочих
     пикселей это 67 px, auto-fit клал пять колонок по ~70 px, а блок кода в остановке
     несжимаемые 75 px - адресу не оставалось ничего. Жалоба Лизы дословно: «очень неудобно
     через телефон смотреть маршруты». Лента с фиксированной шириной колонки: так же сделано
     в новом кабинете (RoutePlanner.tsx). */
  #route-plan-grid {
    display: flex !important; overflow-x: auto; gap: 8px; padding-bottom: 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  #route-plan-grid .route-plan-card { flex: 0 0 228px; scroll-snap-align: start; }
  /* стрелки порядка объезда: палец промахивается по цели 21x15 px, а перетаскивание на тач
     не работает вовсе - значит на телефоне это ЕДИНСТВЕННЫЙ способ менять объезд */
  .route-stop .route-up, .route-stop .route-down {
    min-width: 40px !important; min-height: 36px !important; font-size: 15px !important;
  }

  /* модалки/карточки на всю ширину */
  .modal, .popup, .dialog, .card-modal { width: 94vw !important; max-width: 94vw !important; }

  /* убрать горизонтальный скролл страницы целиком */
  body { overflow-x: hidden; }
}
@media only screen and (max-width: 480px) {
  .solt-menu-item, .gck-menu-item { font-size: 10px !important; }
  .logistics-summary { grid-template-columns: 1fr 1fr !important; }
}