/*
 * Мобильная версия Centurion CRM: телефон (до 760px) и узкий планшет. Подключается после app.css.
 * Принципы: ничего не шире экрана, кнопки под палец (≥ 40px), поля ввода 16px (iOS не увеличивает страницу),
 * главные разделы — в нижней панели, канбан листается колонками.
 */

/* Нижняя панель навигации — только на узких экранах */
.mobile-nav { display: none; }

@media (max-width: 860px) {
  /* сетки, которые растягивались под самый широкий элемент (лента стадий и т.п.) */
  .record { grid-template-columns: minmax(0, 1fr); }
  .record > *, .main, .content { min-width: 0; }
  .stage-final { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  .content { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); }

  /* шапка: поиск — отдельной строкой на всю ширину */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .topbar .search { order: 10; flex: 1 1 100%; max-width: none; }
  .topbar .spacer { display: none; }
  .topbar .burger { display: none; }          /* все разделы — кнопка «Ещё» в нижней панели */
  .topbar .menu-create { margin-left: auto; }
  input, select, textarea { font-size: 16px; }

  /* заголовки страниц и действия */
  .page-head { align-items: flex-start; gap: 10px; margin-bottom: 12px; }
  .page-head h1 { font-size: 22px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn:not(.ghost) { margin-left: auto; }

  /* вкладки (воронки, задачи) — одной строкой с прокруткой, а не в три ряда */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; flex: none; }
  .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmented a { white-space: nowrap; }

  /* фильтры: поля на всю ширину по два в ряд */
  .filters { gap: 6px; }
  .filters input[type=search], .filters input[type=text] { flex: 1 1 100%; min-width: 0; }
  .filters select, .filters input { min-width: 0; flex: 1 1 calc(50% - 6px); }
  .filters .btn { flex: 1 1 100%; }

  /* канбан: колонка почти на весь экран, листается с прилипанием */
  .board { scroll-snap-type: x mandatory; gap: 8px; min-height: 0; margin: 0 -12px; padding: 0 12px 12px; }
  .column { flex-basis: calc(100vw - 48px); scroll-snap-align: center; max-height: calc(100vh - 230px); }

  /* карточка записи */
  .record-head h1 { font-size: 20px; word-break: break-word; }
  .record-meta { gap: 6px 10px; }
  .stagebar button { padding: 8px 10px; }
  .stage-final .btn { flex: 1 1 auto; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .fields dt { font-size: 12px; }
  .feed-thumb img { width: 84px; height: 84px; }

  /* таблицы — горизонтальная прокрутка с закреплённой первой колонкой */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th:first-child, .table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
  .table td, .table th { white-space: nowrap; }
  .table td.title-cell { white-space: normal; min-width: 160px; }
  .pagination { flex-wrap: wrap; justify-content: center; }

  /* формы и модальные окна — во весь экран */
  .form-grid { grid-template-columns: 1fr !important; }
  .modal-box { width: 100vw; max-width: 100vw; height: 100%; max-height: 100vh; border-radius: 0; overflow-y: auto; }
  .modal-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; }

  /* кнопки и ссылки под палец */
  .btn, .icon-btn { min-height: 40px; }
  .btn.sm { min-height: 36px; }
  .related-list li { padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .related-list li > span:first-child { min-width: 0; flex: 1 1 60%; overflow-wrap: anywhere; }
  .related-list .badge { white-space: normal; max-width: 100%; }

  /* чаты и почта: список и диалог друг под другом */
  .chat-layout, .mail-layout { gap: 8px; }
  .chat-main { min-height: 60vh; }
  .msg { max-width: 88%; }
  .chat-send { flex-wrap: wrap; }
  .chat-send select { width: 100%; }

  /* аналитика и календарь */
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 20px; }
  .chart-controls .segmented { width: 100%; }
  .calendar-weekday { padding: 4px; text-align: center; }

  /* открытое меню разделов — затемняем страницу, тап по фону закрывает */
  .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 190; }
  .sidebar { z-index: 200; }

  /* нижняя панель: главные разделы под большим пальцем */
  .mobile-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--surface); border-top: 1px solid var(--border); padding: 4px 4px env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  }
  .mobile-nav a, .mobile-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-height: 52px;
    font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; border-radius: var(--radius-sm); position: relative;
  }
  .mobile-nav a.active { color: var(--accent); }
  .mobile-nav .icon { width: 22px; height: 22px; }
  .mobile-nav .dot { position: absolute; top: 4px; right: calc(50% - 16px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
                     background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
  #call-popups { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* приложение, запущенное с главного экрана телефона (без адресной строки) */
@media (display-mode: standalone) {
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
}