/* ============================================================
   Мобильная версия админки (телефоны, портретная ориентация)

   Проблема: AdminJS ниже 769px прячет в списках все колонки,
   кроме заголовочной (см. display() в records-table), поэтому
   заказы и товары приходилось смотреть с поворотом экрана.

   Решение: на узких экранах строка таблицы превращается в
   карточку «подпись — значение». Подписи в data-label
   проставляет /admin-mobile.js по шапке таблицы.

   Селекторы намеренно по тегам (tr/td), а не по adminjs_TableRow:
   строки и ячейки, которым AdminJS передаёт свой className
   (selected / options), фирменный класс теряют.
   ============================================================ */

@media (max-width: 768px) {
  /* ---------- Списки: таблица -> карточки ---------- */

  .adminjs_Table {
    display: block;
    width: 100%;
  }

  .adminjs_Table > thead {
    display: none;
  }

  .adminjs_Table > tbody {
    display: block;
  }

  .adminjs_Table > tbody > tr {
    display: block;
    margin: 0 0 12px;
    padding: 2px 0;
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 8px;
  }

  .adminjs_Table > tbody > tr > td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: auto !important;
    max-width: none !important;
    padding: 8px 12px !important;
    border: 0 !important;
    text-align: right;
    word-break: break-word;
  }

  .adminjs_Table > tbody > tr > td + td {
    border-top: 1px solid rgba(128, 128, 128, 0.14) !important;
  }

  /* Подпись колонки — её подставляет admin-mobile.js */
  .adminjs_Table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0.6;
  }

  /* Длинные значения — подпись сверху, значение на всю ширину карточки */
  .adminjs_Table > tbody > tr > td[data-wide] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    text-align: left;
  }

  .adminjs_Table > tbody > tr > td[data-wide][data-label]::before {
    flex: none;
  }

  /* Пустые ячейки (чекбокс массовых действий, пустые колонки) не нужны */
  .adminjs_Table > tbody > tr > td[data-empty] {
    display: none !important;
  }

  /* Ячейка с кнопками действий — отдельной строкой внизу карточки */
  .adminjs_Table > tbody > tr > td.options {
    justify-content: flex-end;
  }

  /* Развёрнутые блоки внутри таблиц (форма правки состава заказа) */
  .adminjs_Table > tbody > tr > td[colspan] {
    display: block !important;
    text-align: left;
  }

  /* Изображения в списках не должны распирать карточку */
  .adminjs_Table td img {
    max-width: 96px;
    height: auto;
  }

  /* ---------- Шапка экрана и кнопки ---------- */

  .adminjs_ActionHeader {
    padding-left: 8px;
    padding-right: 8px;
  }

  .adminjs_ActionHeader h2,
  .adminjs_ActionHeader h3 {
    font-size: 22px;
    line-height: 1.25;
    word-break: break-word;
  }

  /* Группы кнопок переносим, а не выпихиваем за экран */
  .adminjs_ButtonGroupItem {
    margin-bottom: 8px;
  }

  .adminjs_Box:has(> .adminjs_ButtonGroupItem) {
    display: flex;
    flex-wrap: wrap;
  }

  /* ---------- Пагинация ---------- */

  .adminjs_Pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  /* ---------- Формы, фильтры, шторки ---------- */

  .adminjs_Drawer {
    width: 100% !important;
    max-width: 100%;
  }

  /* iOS зумит страницу на фокусе, если шрифт инпута меньше 16px */
  .adminjs_Input,
  .adminjs_TextArea,
  .adminjs_Select input,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  .adminjs_Select,
  .adminjs_DatePicker {
    max-width: 100%;
  }

  /* Кастомные селекты (react-select) в формах */
  .customselect {
    margin-bottom: 20px;
  }

  /* ---------- Карточка записи (show) ---------- */

  [data-css$="-show-content"] {
    padding-left: 8px;
    padding-right: 8px;
    word-break: break-word;
  }

  /* ---------- Общее ---------- */

  #app {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Широкие блоки, которые нельзя перестроить, скроллим внутри себя */
  pre,
  .ql-editor {
    overflow-x: auto;
    max-width: 100%;
  }
}