/* XPORT-MOBILE-SHELL-20260905: левая панель и бургер на телефоне.
 * Жалоба владельца: на iPhone панель «не разворачивается», управление неудобно.
 * Что чинит: высота панели 100dvh вместо 100vh (на iOS 100vh больше видимой
 * области — низ панели с «Выйти» и темой уезжал под строку Safari), внутренний
 * скролл панели, бургер и панель не под «челкой», тап-цели не меньше 44px,
 * фон не прокручивается сквозь открытую панель. Ничего не трогает на десктопе
 * шире 768px, кроме безопасных правок высоты и скролла самой панели. */

.left[data-v-f177d25e] {
  height: var(--xport-visual-height, 100dvh) !important;
  max-height: var(--xport-visual-height, 100dvh);
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.hamburger[data-v-f177d25e] {
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* кнопки групп меню (CRM, Редакция текста, База клиентов, Конструктор) */
.left[data-v-f177d25e] .tabHeader,
.left[data-v-f177d25e] button.close_btn {
  min-height: 44px !important;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* пункты внутри групп — тап-цель не меньше 44px */
.left[data-v-f177d25e] .textRedact a,
.left[data-v-f177d25e] .textRedact button {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* открытая панель: тап по затемнению закрывает её везде, не только в заказах */
.overlay.visible[data-v-f177d25e] {
  pointer-events: auto !important;
}

/* фон не крутится сквозь открытую панель (iOS scroll-through) */
body.xport-drawer-open {
  overflow: hidden !important;
  touch-action: none;
}

@media (max-width: 768px) {
  .left[data-v-f177d25e] {
    width: min(280px, 86vw) !important;
  }
  .right-content[data-v-f177d25e] {
    padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* ---- v3 (05.09): находки обхода страниц на 502px ---- */

/* 1. «Заказы»: xport-orders.css на <=768 делает бургер position:absolute — при
 * прокрутке контейнера .container он уезжает за экран, и меню не открыть, пока
 * не отлистаешь наверх. Возвращаем fixed. */
html body.xport-orders-active button.hamburger[data-v-f177d25e] {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
}

/* 2. «Продукты»: пагинация xport-products-pagination имеет min-width:620px и
 * grid в две колонки — на телефоне уезжает за правый край на 150px, кнопки
 * страниц недоступны. Одна колонка, ширина по контейнеру, кнопки переносятся. */
@media (max-width: 768px) {
  .xport-products-pagination {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    box-sizing: border-box;
  }
  .xport-products-pagination > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }
  .xport-products-page-size,
  .xport-products-page-progress,
  .xport-products-page-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center;
  }
  .xport-products-page-buttons button {
    min-height: 44px;
  }
}

/* 3. «Контрагенты»: строка-шапка таблицы (ИМЯ / ГОРОД / ТИП) на телефоне
 * превращается в три серых слова столбиком без всякого смысла — карточки
 * ниже и так подписаны. Прячем только шапку, строки не трогаем. */
@media (max-width: 768px) {
  .xport-counterparties-row.is-head {
    display: none !important;
  }
}

/* 4. «Продажи»: article.xport-stock-report-row внутри .xport-stock-report-table.is-office
 * держит grid 190px 108px 155px 62px 92px 92px 78px = 777px при контейнере 439px —
 * колонка «Смена / документ» и суммы уходят за правый край. orders.css адаптирует
 * только .is-sales и .is-inventory; здесь таблица .is-office без модификатора.
 * На телефоне: две колонки, первая ячейка (товар) на всю ширину, переносы. */
@media (max-width: 768px) {
  .xport-stock-report-table.is-office {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .xport-stock-report-table.is-office .xport-stock-report-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 14px !important;
    min-width: 0 !important;
    width: 100% !important;
    align-items: start !important;
  }
  .xport-stock-report-table.is-office .xport-stock-report-row > * {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }
  .xport-stock-report-table.is-office .xport-stock-report-row > :first-child {
    grid-column: 1 / -1;
  }
}

/* 5. «Склад»: кнопки навигации по папкам ⌂ и ↑ шириной 30px — тап-цель. */
@media (max-width: 768px) {
  .xport-stock-folder-tools button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* 4b. «Продажи»: исходное правило orders.css живёт под (max-width:1050px) с
 * селектором .xport-sales-page-card .xport-stock-report-table.is-office.is-sales
 * .xport-stock-report-row и !important — моё правило из п.4 проигрывало по
 * специфичности. Поднимаем специфичность выше исходника. */
@media (max-width: 768px) {
  html body .xport-sales-page-card .xport-stock-report-table.is-office.is-sales,
  html body .xport-sales-page-card .xport-stock-report-table.is-office {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  html body .xport-sales-page-card .xport-stock-report-table.is-office.is-sales .xport-stock-report-row,
  html body .xport-sales-page-card .xport-stock-report-table.is-office .xport-stock-report-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    font-size: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    align-items: start !important;
  }
  html body .xport-sales-page-card .xport-stock-report-table.is-office .xport-stock-report-row > * {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }
  html body .xport-sales-page-card .xport-stock-report-table.is-office .xport-stock-report-row > :first-child {
    grid-column: 1 / -1 !important;
  }
}

/* 6. «Записи редакции поставщика» (Конструктор): 89 кнопок истории 34px шириной
 * в таблице .entriesTable — тап-цель. Таблица шире экрана намеренно, живёт в
 * своём горизонтальном скролле, её не трогаем. */
@media (max-width: 768px) {
  .entriesTable .historyBtn,
  .entriesTable .actionButtons button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* 7. Тёмная тема, «Продажи»: .xport-sales-page-card задана background:#fff без
 * dark-варианта, а текст строк в dark белый — белое на белом, товар/дата/суммы
 * невидимы. Найдено на гейте тёмной темы 05.09. */
html[data-xport-theme="dark"] .xport-sales-page-card {
  background: var(--xport-surface, #191919) !important;
  border-color: var(--xport-border, #2a2a2a) !important;
  color: var(--xport-text, #f5f5f5);
}

/* 8. Тёмная тема: поле в карточке клиента при фокусе становилось белым (#fff без dark-варианта). */
html[data-xport-theme="dark"] .xport-client-edit-fields input:focus {
  background: var(--xport-surface-2, #202020) !important;
  color: var(--xport-text, #f5f5f5) !important;
}

/* 9. iOS Safari зумит страницу при фокусе поля со шрифтом меньше 16px.
 * WebKit-прогон (iPhone 14) нашёл два таких поля на логине. На сенсорных
 * экранах поля ввода не меньше 16px; на десктопе правило не действует. */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="password"], input[type="search"],
  input[type="email"], input[type="tel"], input[type="number"],
  input:not([type]), select, textarea {
    font-size: max(16px, 1em) !important;
  }
}