/* ════════════════════════════════════════════════════════════
   MetaMax — MOBILE.css
   Единый адаптив для всех страниц. Все правила скоупированы под
   @media (max-width:1023.98px), чтобы НЕ влиять на десктоп ≥1024px.
   Подключается на каждой странице сразу после theme.css.
   Безопасно использует !important на критичных правилах, чтобы
   перебить локальные стили страниц без модификации каждой из них.
   ──────────────────────────────────────────────────────────── */

/* ── 0. Хелперы видимости и дефолтное скрытие mobile-chrome ─ */
.mobile-only { display: none; }
/* На страницах, где бургер/overlay инжектит sidebar.js, локальные
   стили отсутствуют — гарантируем, что на десктопе они скрыты. */
.hamburger { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 1023.98px) {

  /* ─── 1. Глобальный безопасный базис ──────────────────── */
  /* !important на overflow-x — на странице sebestoimost.html (и других
     с устаревшими брейкпоинтами 768/480px) при ширине вьюпорта 600-1023px
     page-CSS не считает её «мобильной» и не накладывает overflow:hidden,
     поэтому вылазящие за вьюпорт элементы создают горизонтальный скролл
     всей страницы. */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* Медиа и заголовки не должны вылезать за вьюпорт */
  img, video, svg, table, .table-scroll { max-width: 100%; }
  .page-header, .page-actions, .table-top, .table-top-right {
    flex-wrap: wrap !important;
    max-width: 100%;
  }
  /* Уменьшаем кнопки в шапке, чтобы триплет «Собрать / Импорт / Экспорт»
     помещался в ряд или красиво переносился. */
  .page-actions, .page-header, .table-top, .table-top-right {
    min-width: 0;        /* разрешаем сжатие во flex-родителе */
    width: 100%;
    box-sizing: border-box;
  }
  .page-actions .btn,
  .page-header .btn,
  .table-top-right .btn {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    flex-shrink: 1;
  }

  /* «Товары | … Показать: 50 ⌄» — шапка таблицы. Центрируем по вертикали.
     Если плашке справа не хватает места в одну строку — она переносится
     на следующую (а заголовок остаётся виден). */
  .table-top {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    row-gap: 10px !important;
  }
  .table-top-title {
    flex: 0 0 auto;       /* всегда виден полностью, не сжимается */
  }
  .table-top-right {
    margin-left: auto !important;
    flex: 0 1 auto;
    justify-content: flex-end;
    align-items: center;
  }
  /* Плашка фиксированной высоты, select внутри — естественный inline-block
     без min-height тач-таргета, размером ровно как «Показать:». */
  .btn-select {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    line-height: 1 !important;
    height: 36px;
    padding: 0 12px !important;
  }
  .btn-select select {
    /* iOS Safari игнорирует font-size/height на нативном <select>,
       пока не убрано нативное оформление. После appearance:none он
       подчиняется CSS и встаёт ровно по центру плашки. Стрелку рисуем
       сами через background-image (SVG inline). */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 0 !important;
    padding: 0 14px 0 2px !important;
    margin: 0 !important;
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px 10px !important;
    color: var(--mm-ink-2, #2C2D2F) !important;
    vertical-align: middle;
    flex: 0 0 auto;
  }

  /* iOS Safari зумит при фокусе только в input и textarea со шрифтом <16px;
     select зум не вызывает. Не трогаем select, иначе он становится крупнее
     соседнего текста («Показать: 50»), не помещается в одну строку и
     переносится — ломает .btn-select и т.п. */
  input, textarea {
    font-size: 16px !important;
  }

  /* Длинные «бесшовные» идентификаторы (артикулы, баркоды) — разрешаем
     ломать в любом месте, иначе вылазят за пределы ячеек. Для обычного
     текста (названия, бейджи, заголовки, ячейки таблиц) перенос — только
     по пробелам (без разбивки слов по слогам/буквам). */
  .vc, .bc, .price-val {
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .prod-name, .nav-item, .badge-gray, .badge-green, td, th {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
  }

  /* ─── 2. Off-canvas сайдбар ────────────────────────────── */
  /* !important на z-index/background/transform — это критично: page-level
     стили (.sidebar { z-index: 10; ... } в <style> каждой страницы) идут
     в каскаде ПОСЛЕ mobile.css и перебивают наши правила. Без !important
     overlay (z:150) оказывается поверх sidebar (z:10) и затемняет его. */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(82vw, 320px) !important;
    min-height: 100vh;
    background: #fff !important;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 200 !important;
    padding-top: env(safe-area-inset-top);     /* учёт notch / статус-бара */
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
  }

  /* Затемнение фона */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 150 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-overlay.show,
  .sidebar-overlay.open { display: block; }

  /* Блокировка скролла фона при открытом меню */
  body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* ─── 3a. Фиксированный мобильный топбар-фон ──────────────
     Создаём полупрозрачный «стеклянный» бар сверху, чтобы
     контент при скролле уходил под него, а бургер не висел
     отдельно поверх данных. При открытом меню топбар скрываем —
     иначе он перекрывает логотип METAMAX и сам бургер,
     делая их «бледными». */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top) + 56px);
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--mm-border-lt, #E5E7EB);
    z-index: 90;
    pointer-events: none;
  }
  body.sidebar-open::before { display: none; }

  /* ─── 3. Бургер ─────────────────────────────────────────── */
  /* !important на position/top/left/z-index/width/height — на каждой
     странице есть локальный `.hamburger { top:12px; left:12px; z-index:200 }`
     в <style>, который перебивает mobile.css по каскаду. Без !important
     бургер уезжает в (12,12), наезжает на логотип и теряется. */
  .hamburger {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 8px) !important;
    left: 8px !important;
    z-index: 210 !important;   /* выше sidebar (200), чтобы кнопка была кликабельна поверх него */
    width: 44px !important; height: 44px !important;
    background: #fff;
    border: 1px solid var(--mm-border-lt, #E5E7EB);
    border-radius: var(--r-lg, 10px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: left .25s cubic-bezier(.4,0,.2,1);
  }
  /* При открытом сайдбаре переносим бургер в правый верхний угол самого
     меню (служит крестиком-закрытием). Ширина sidebar = min(82vw, 320px),
     кнопка 44px + 8px отступ от правого края. Делаем плашку контрастной
     (тёмный фон + белые линии), чтобы не сливалась с белым sidebar. */
  body.sidebar-open .hamburger {
    left: calc(min(82vw, 320px) - 52px) !important;
    background: var(--mm-ink, #0D1117) !important;
    border-color: var(--mm-ink, #0D1117) !important;
  }
  body.sidebar-open .hamburger > span,
  body.sidebar-open .hamburger > div:not([class]) { background: #fff !important; }
  body.sidebar-open .hamburger > svg { color: #fff !important; }
  .hamburger > span,
  .hamburger > div:not([class]) {
    display: block;
    width: 20px; height: 2px;
    background: var(--mm-ink, #0D1117);
    border-radius: 2px;
  }
  .hamburger > svg {
    width: 22px; height: 22px;
    color: var(--mm-ink, #0D1117);
  }

  /* ─── 4. Основной контент ───────────────────────────────── */
  .main {
    margin-left: 0 !important;
    padding: calc(env(safe-area-inset-top) + 60px) 16px 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* блокируем горизонт. переполнение именно на уровне main —
       иначе body{overflow-x:hidden} не помогает, потому что main
       сам уже занял width > viewport. */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .main > * { max-width: 100%; }

  /* ─── 5. Тач-таргеты ≥44px на основных интерактивных ──── */
  .btn, .nav-item, .pg-btn, .modal-close,
  select, .mm-select, button.tab, .tab-btn {
    min-height: 44px;
  }

  /* ─── 5a. Вкладочная панель — горизонтальный скролл ─────────
     На узких экранах вкладки не помещаются в ряд («Создание
     транзитного листа» обрезается). Даём горизонтальный скролл,
     запрет переноса и компактные паддинги. */
  .tabs-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
  }
  .tabs-bar::-webkit-scrollbar { display: none; }   /* WebKit */
  .tabs-bar .tab-btn {
    flex: 0 0 auto;                 /* не сжимать вкладки */
    white-space: nowrap;
    padding: 10px 14px !important;  /* компактнее, чем десктоп 18px */
  }
  /* Расстояние между кликабельными элементами */
  .page-actions > * + *,
  .table-top-right > * + *,
  .modal-footer > * + * {
    margin-left: 0;
  }

  /* ─── 6. Шапки страниц компактнее ──────────────────────── */
  .page-title {
    font-size: 18px !important;
    letter-spacing: 0 !important;
  }
  .page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ─── 7. Виджеты/метрики — в столбец ───────────────────── */
  .widgets {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .widget { padding: 14px 16px !important; }
  .widget-value { font-size: 24px !important; }

  /* ─── 8. Таблицы — управляемый горизонтальный скролл ──── */
  /* Многие страницы локально задают .table-card { overflow:hidden } для
     скруглённых углов на десктопе — на мобильном это режет правую часть
     широких таблиц. !important перебивает page-level стили. */
  .table-card {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-card > table { min-width: 580px; }

  /* Утилита: превратить таблицу в карточки. Применяется точечно
     на страницах, где разметка готова (data-label у <td>). */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td {
    display: block; width: 100%;
  }
  .table-cards tr {
    background: #fff;
    border: 1px solid var(--mm-border-lt, #E5E7EB);
    border-radius: var(--r-xl, 14px);
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.04));
  }
  .table-cards td {
    border: none !important;
    padding: 4px 0 !important;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px;
  }
  .table-cards td[data-label]::before {
    content: attr(data-label);
    color: var(--mm-ink-4, #9198A1);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
  }

  /* ─── 9. Формы — в один столбец, ширина 100% ───────────── */
  .form-row, .form-grid, .grid-2, .grid-3, .modal-form-row {
    display: block !important;
  }
  .form-row > *, .form-grid > *, .grid-2 > *, .grid-3 > *,
  .modal-form-row > * {
    width: 100% !important;
    margin-bottom: 12px;
  }
  label { display: block; }

  /* ─── 10. Модалки и боковые панели на весь экран ───────── */
  .modal {
    max-width: 100vw !important;
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-top: calc(env(safe-area-inset-top) + 16px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px) !important;
  }
  .modal-overlay,
  .modal-overlay.open { align-items: stretch !important; padding: 0 !important; }

  /* Боковая drawer-панель (deталь закупки, формирование FBO и т.п.) */
  .detail-panel, .drawer, .shipment-detail-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
  }
  .detail-panel.open, .drawer.open, .shipment-detail-panel.open {
    right: 0 !important;
  }

  /* ─── 11. Хелперы видимости ───────────────────────────── */
  .desktop-only { display: none !important; }
  .mobile-only  { display: initial !important; }

  /* ─── 12. Прочее ────────────────────────────────────────── */
  /* Убираем :hover-эффекты на тач-устройствах — они залипают */
  @media (hover: none) {
    .btn:hover, .nav-item:hover, button:hover { background: initial; }
  }
}

/* На десктопе (≥1024px) — десктоп остаётся без изменений */