/* ═══ Мобильные правки CRM — ТОЛЬКО смартфон (≤600px) ═══════════════════════
   Планшет и ПК (601px и шире) под эти правила не попадают ПО ПОСТРОЕНИЮ: всё
   лежит внутри @media (max-width: 600px). Это не «стараюсь не сломать», а
   гарантия — десктопная вёрстка физически не видит этот файл.

   Правило для авторов: НИЧЕГО не добавлять вне media-блоков ниже.
   Единственное исключение — блок (min-width: 601px) для бургера, он был здесь
   до вынесения файла и отвечает за то, чтобы на ПК бургера не было.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Планшет и ПК: бургера нет, выпадашки навбара не обрезаются ── */
@media (min-width: 601px) {
  .navbar-burger { display: none !important; }
  /* у навбара инлайн overflow:hidden обрезал выпадашки (WhatsApp ▾) — раскрываем */
  nav.navbar { overflow: visible !important; }
}

@media (max-width: 600px) {

  /* ── 1. Ввод не должен зумить страницу ──────────────────────────────────
     Safari на iOS увеличивает всю страницу, если у поля шрифт меньше 16px, и
     обратно сама она не возвращается — отсюда ощущение «вёрстка поехала».   */
  input, select, textarea,
  .input, .textarea, .select select {
    font-size: 16px !important;
  }
  /* В таблицах поля остаются компактными: там важнее уместить колонки, а зум
     при вводе цифр не мешает. */
  .table input, .table select, .table textarea,
  td input, td select, td textarea {
    font-size: 13px !important;
  }

  /* ── 2. Навбар ───────────────────────────────────────────────────────── */
  nav.navbar { overflow: visible !important; }
  .navbar-burger { height: 3.25rem; width: 3.25rem; }
  .navbar-menu.is-active {
    box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
    padding: .5rem 0;
    max-height: 78vh;                 /* длинное меню обязано скроллиться, */
    overflow-y: auto;                 /* иначе нижние пункты не достать     */
    -webkit-overflow-scrolling: touch;
  }

  /* ── 3. Меньше «воздуха» — больше места контенту ──────────────────────── */
  section.section { padding: .75rem .5rem !important; }
  .box { padding: 12px !important; }
  .container { padding: 0 !important; }
  h1.title.is-3 { font-size: 1.25rem !important; }
  h1.title, h2.title { word-break: break-word; }

  /* ── 4. Вкладки: компактнее и лентой с горизонтальным скроллом ────────── */
  .ordtabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; gap: 4px;
  }
  .ordtabs::-webkit-scrollbar { height: 3px; }
  .ordtab {
    padding: 9px 12px !important; font-size: .8rem !important;
    white-space: nowrap; flex: 0 0 auto; min-height: 40px;
  }
  .ordtab-count { padding: 1px 6px !important; font-size: .72rem !important; }

  .tab-bar {
    flex-wrap: nowrap !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; justify-content: flex-start !important;
    gap: 6px !important;
  }
  .tab-bar::-webkit-scrollbar { height: 3px; }
  .tab-btn {
    padding: 9px 13px !important; font-size: .8rem !important;
    white-space: nowrap; flex: 0 0 auto; min-height: 40px;
  }
  .tab-badge { min-width: 18px !important; height: 18px !important; font-size: .7rem; }

  .tabs.is-small, .tabs { font-size: .78rem; }
  .tabs ul { flex-wrap: nowrap; }
  .tabs li a { padding: .6em .8em !important; white-space: nowrap; }
  /* Вкладки Бухгалтерии в один ряд не влезают — лента со скроллом */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { height: 3px; }

  /* ── 5. Таблицы: горизонтальный скролл ВЕЗДЕ ──────────────────────────
     Решение владельца: таблицы остаются таблицами, просто скроллятся вбок.
     Обёртки есть не у всех, поэтому вторым правилом делаем скроллером саму
     таблицу — display:block создаёт внутреннюю анонимную таблицу, поэтому
     колонки не разъезжаются.                                              */
  .table-scroll-wrap, .corr-table-wrap, .gen-scroll, .list-scroll,
  .table-container, .box, .chart-wrap, .jr-tablewrap, .pj-wrap, .pj-scroll,
  .fire-wrap, .pp-jscroll, .qc-table-wrap, .oc-prog-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Компактные ячейки: цель — уместить больше колонок, а не крупный текст */
  .table td, .table th {
    font-size: .8rem;
    padding: .4em .5em !important;
  }

  /* ── 6. Нажимаемое — под палец, но не в ущерб таблицам ────────────────
     Отдельно стоящие кнопки 44px (столько занимает подушечка пальца), а
     внутри таблиц оставляем компактные — иначе строка раздувается втрое.   */
  .button, button.button, a.button, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  .button.is-small, .button.is-tiny { min-height: 38px; }
  .table .button, .table button, td .button, td button,
  th .button, th button {
    min-height: 30px !important;
    padding: 2px 8px !important;
    font-size: .75rem !important;
  }
  /* Кнопка на всю ширину смотрится «огромной»: ограничиваем ряды кнопок */
  .field.is-grouped, .buttons { flex-wrap: wrap; gap: 8px; }
  .buttons .button { flex: 0 1 auto; }

  /* ── 7. Модалки — на весь экран и со скроллом ─────────────────────────
     Главная причина «не работает скролл»: тело модалки выше экрана, а
     прокрутки у него нет — до кнопок внизу просто не добраться.            */
  .modal.is-active .modal-card,
  .modal.is-active .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .modal.is-active .modal-card-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px !important;
  }
  .modal.is-active .modal-card-head,
  .modal.is-active .modal-card-foot {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;                 /* заголовок и кнопки всегда на виду */
    z-index: 2;
  }
  .modal.is-active .modal-card-head { top: 0; }
  .modal.is-active .modal-card-foot { bottom: 0; }
  .modal.is-active .modal-card-foot .button { flex: 1 1 45%; min-height: 44px; }
  .modal.is-active .modal-card-title { font-size: .95rem !important; }
  .modal-close.is-large { height: 44px; width: 44px; }

  /* Выдвижные панели (быстрый расчёт, чат заявки) — тоже во всю ширину */
  .qc-drawer, .qc-chat-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .qc-drawer-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ── 8. Формы: одна колонка ───────────────────────────────────────────── */
  .columns { margin-left: 0 !important; margin-right: 0 !important; }
  .column { padding: .4rem !important; }
  .field.is-horizontal { display: block !important; }
  .field-label { text-align: left !important; margin-bottom: .25rem !important; }
  .level { display: block !important; }
  .level-left, .level-right { display: flex; flex-wrap: wrap; gap: 8px; }
  .level-left + .level-right { margin-top: 8px !important; }
}