/* ============================================================================
   Таблицы на телефоне — макет «Таблицы мобильной версии» (Figma 3980-12142,
   Planka 1884915823588410798). Только вертикальный телефон, до 600 px.
   Подключается последним, после adaptive-fixes.css. Разметку мобильного вида
   собирает mobile-tables.js; на десктопе она скрыта.

   Типографика по макету: названия — Akrobat 700 16/20, значения — 500 16/20,
   заголовок раздела — 700 18 #B61D1D, ячейки #F0F0F0 с белыми разделителями.
   ============================================================================ */

.spec-m,
.tug-m { display: none; }

@media (max-width: 600px) {

  /* --- 1. Таблица характеристик в профайлах ------------------------------ */

  html body table.spec-table.has-spec-m { display: none !important; }

  /* В макете таблица шире текста страницы: от края экрана 10 px, а не 33 px —
     выходит за поля контейнера на 23 px с каждой стороны. */
  .spec-m {
    display: block;
    width: calc(100% + 46px);
    margin: 14px -23px 0;
    font-family: 'Akrobat', system-ui, sans-serif;
    color: #2A3948;
  }

  .spec-m__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .spec-m__table th,
  .spec-m__table td {
    padding: 9px 10px;
    border: 1px solid #fff;
    background: #F0F0F0;
    color: #2A3948;
    font-size: 16px;
    line-height: 1.25;
    vertical-align: middle;
    overflow-wrap: break-word;
  }
  .spec-m__table th {
    padding-left: 23px;
    font-weight: 700;
    text-align: left;
  }
  .spec-m__table td {
    font-weight: 500;
    text-align: center;
  }
  /* «Простая таблица» (одно значение в строке): две колонки на ширину экрана. */
  .spec-m:not(.spec-m--scroll) .spec-m__table th { width: 50%; }

  /* Названия: единица измерения в скобках продолжает строку названия, пустые скобки
     не показываем; переводы строк из Word гасим, как на десктопе (ui-states.css, 4.3.2). */
  .spec-m__table th .unit.desktop-hidden { display: inline !important; margin-left: .25em; }
  .spec-m__table th .unit.desktop-hidden:has(.mobile-unit:empty),
  .spec-m__table th .unit.desktop-hidden:not(:has(.mobile-unit)) { display: none !important; }
  .spec-m__table th br { display: none; }
  .spec-m__table .spec-table__item { display: inline-block; max-width: 100%; }
  .spec-m__table .spec-table__fn {
    display: inline; height: auto; transform: none; margin: 0 0 0 1px;
    font-size: .7em; line-height: 0; vertical-align: super; color: inherit;
  }
  .spec-m__table .spec-table__fn--star { font-size: 1.15em; vertical-align: baseline; }
  .spec-m__table a { color: inherit; }

  /* Несколько колонок: значения пролистываются вбок, названия закреплены.
     Ширины колонок задаёт скрипт по ширине экрана (--spec-m-*). */
  .spec-m--scroll .spec-m__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: #9B9B9B #EDEDED;
  }
  .spec-m--scroll .spec-m__scroll::-webkit-scrollbar { height: 6px; }
  .spec-m--scroll .spec-m__scroll::-webkit-scrollbar-track { background: #EDEDED; border-radius: 3px; }
  .spec-m--scroll .spec-m__scroll::-webkit-scrollbar-thumb { background: #9B9B9B; border-radius: 3px; }
  .spec-m--scroll .spec-m__table { width: var(--spec-m-width, 100%); }
  .spec-m--scroll .spec-m__col-name { width: var(--spec-m-name, 49%); }
  .spec-m--scroll .spec-m__col { width: var(--spec-m-col, auto); }
  .spec-m--scroll .spec-m__table th {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .spec-m--scroll .spec-m__table td { padding-left: 6px; padding-right: 6px; }

  /* Заголовок раздела — раскрывает раздел (аккордеон, как было). */
  .spec-m__head {
    position: relative;
    display: block;
    width: calc(100% - 46px);
    margin: 0 23px;
    padding: 18px 30px 14px 0;
    border: 0;
    border-top: 1px solid #BDBDBD;
    background: none;
    font: 700 18px/1.25 'Akrobat', system-ui, sans-serif;
    color: #B61D1D;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .spec-m__section + .spec-m__section .spec-m__head { margin-top: 6px; }
  .spec-m__head::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(-90deg);
    background: url(images/icons/spec-arrow.svg) center center no-repeat;
    transition: transform .2s;
  }
  /* Стрелка в файле смотрит влево: свёрнутый раздел — «∨», раскрытый — «∧». */
  .spec-m__head[aria-expanded="true"]::after { transform: translateY(-50%) rotate(90deg); }
  .spec-m__body[hidden] { display: none; }

  /* --- 2. Окно «Требования для агрегатирования» ------------------------- */

  /* Окно на телефоне — во весь экран, как в макете: заголовки с отступом 20 px,
     таблицы и карточки от края 9 px. Было окно с полями 24 px и внутренними 24 px —
     колонке параметров не хватало ширины, слова рвались посередине. Окно открывается
     в подборе (.req-modal) и в «Избранном» (fav-req). */
  html body .modal-backdrop.req-modal,
  html body .modal-backdrop[data-modal-id="fav-req"] { padding: 0; }
  html body .req-modal .modal,
  html body .modal-backdrop[data-modal-id="fav-req"] .modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 20px 9px 16px;
    border-radius: 0;
  }
  html body .req-modal .req-modal__head,
  html body .modal-backdrop[data-modal-id="fav-req"] .modal__title { padding: 0 48px 0 11px; }
  html body .req-modal .req-modal__body,
  html body .modal-backdrop[data-modal-id="fav-req"] .fav-req-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }
  html body .req-modal .modal__close,
  html body .modal-backdrop[data-modal-id="fav-req"] .modal__close { top: 12px; right: 10px; }
  html body .req-modal .req-modal__close-btn,
  html body .modal-backdrop[data-modal-id="fav-req"] .modal > .btn { flex: 0 0 auto; margin: 12px 11px 0; }
  .modal .agg-req__template .agg-req__method,
  .modal .agg-req__template .agg-req__axis,
  .modal .agg-req__template .agg-req__category,
  .modal .agg-req__template .agg-req__sheet-title,
  .modal .agg-req__template .agg-req__section,
  .modal .agg-req__template .agg-req__sub,
  .modal .agg-req__template .agg-req__variant-title,
  .modal .agg-req__template .agg-req__note { padding-left: 11px; padding-right: 11px; }

  /* Простая таблица: две колонки (параметр | значение), а не столбиком. */
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
  }
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) tbody {
    display: table-row-group;
  }
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) tr {
    display: table-row !important;
    width: auto;
    border: 0;
    background: none;
  }
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) td {
    display: table-cell;
    width: auto;
    padding: 9px 10px;
    border: 1px solid #fff;
    background: #F0F0F0;
    color: #2A3948;
    font-size: 16px;
    line-height: 1.25;
    vertical-align: middle;
    overflow-wrap: break-word;
  }
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) td.agg-req__param {
    width: 50%;
    padding-left: 13px;
    overflow-wrap: normal;
    font-weight: 700;
    text-align: left;
  }
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) td.agg-req__value {
    font-weight: 500;
    text-align: center;
  }
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) td.agg-req__unit { display: none !important; }
  /* Подзаголовок группы («Статическая вертикальная нагрузка S в составе трактора:») —
     с пустой ячейкой значения, как в макете. */
  html body .modal .agg-req__template table.agg-req__table:not(.agg-req__table--tugs):not(.agg-req__table--grid) tr.agg-req__group td.agg-req__value {
    display: table-cell !important;
  }
  html body .modal .agg-req__template .agg-req__param .unit.desktop-hidden { display: inline !important; margin: 0 0 0 .25em; }
  html body .modal .agg-req__template .agg-req__param .unit.desktop-hidden:has(.mobile-unit:empty) { display: none !important; }

  /* Тяги ЗНУ: карточки вместо таблицы (разметку собирает mobile-tables.js). */
  html body .modal .agg-req__template table.agg-req__table--tugs.has-tug-m { display: none !important; }

  .tug-m {
    display: block;
    margin-bottom: 12px;
    font-family: 'Akrobat', system-ui, sans-serif;
    color: #2A3948;
  }
  .tug-m__kind {
    padding: 10px;
    background: #F0F0F0;
  }
  .tug-m__kind + .tug-m__kind { margin-top: 2px; }
  .tug-m__img { margin-bottom: 16px; padding: 10px; background: #fff; text-align: center; }
  .tug-m__img img { display: block; width: 100%; max-width: 284px; height: auto; margin: 0 auto; }
  .tug-m__title { margin-bottom: 14px; font-size: 18px; line-height: 22px; font-weight: 700; }
  .tug-m__item { padding-bottom: 12px; border-bottom: 1px solid #BDBDBD; }
  .tug-m__item + .tug-m__item { padding-top: 12px; }
  .tug-m__item:last-child { padding-bottom: 4px; border-bottom: 0; }
  .tug-m__code-label { font-size: 16px; line-height: 20px; font-weight: 700; }
  .tug-m__code { margin: 4px 0 12px; font-size: 16px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
  .tug-m__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(var(--tug-m-rows, 2), auto);
    grid-auto-flow: column;
    gap: 8px 4px;
  }
  .tug-m__label { font-size: 12px; line-height: 15px; font-weight: 700; }
  .tug-m__value { margin-top: 4px; font-size: 12px; line-height: 15px; font-weight: 500; overflow-wrap: anywhere; }
  .tug-m .agg-req__fn { margin-left: 1px; }
}