/* Доводка админки под работу с телефона.
 *
 * Прокатчик стоит на точке с телефоном в руке: CRM должна открываться и работать
 * на экране 360 px, а не только на ноутбуке. Десктоп не трогаем — почти всё
 * спрятано за медиазапросами.
 */

/* ---------- Общее: попасть пальцем ---------- */

/* Ссылки-действия и кнопки на телефоне должны быть не меньше 44 px в высоту —
   иначе в них не попасть на ходу. */
@media (max-width: 900px) {
  .button,
  input[type="submit"],
  button[type="submit"],
  .submit-row a,
  .object-tools a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Чекбоксы выбора строк — самая частая цель промаха. */
  input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
  }
}

/* ---------- Списки: горизонтальная прокрутка вместо каши ---------- */

/* Тема переключает таблицу в «карточный» режим на экранах уже 1024 px: строка
   становится блоком, а подпись колонки подставляется через ::before. Заголовок
   таблицы при этом остаётся table-header-group внутри block-таблицы, и браузер
   выстраивает его отдельной колонкой — на телефоне это выглядело как список
   «ID / Клиент / Телефон» вообще без данных.
   Возвращаем настоящую таблицу и прокручиваем её вбок: прокатчику привычнее
   двигать таблицу пальцем, чем читать двадцать карточек подряд. */
@media (max-width: 1023px) {
  #result_list {
    display: table !important;
    min-width: 760px;
  }

  #result_list thead {
    display: table-header-group !important;
  }

  #result_list tbody {
    display: table-row-group !important;
  }

  #result_list tr {
    display: table-row !important;
    border: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }

  #result_list th,
  #result_list td {
    display: table-cell !important;
    white-space: nowrap;
  }

  /* Подпись колонки из data-label нужна только карточному режиму.
     Первая колонка строки — th, а не td, поэтому её тоже гасим явно. */
  #result_list td::before,
  #result_list tbody th::before {
    display: none !important;
  }

  /* Контейнер, внутри которого таблица едет вбок. */
  #changelist .results,
  #result_list_wrapper,
  .changelist-form-container .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Формы: поля во всю ширину ---------- */

@media (max-width: 900px) {
  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row input[type="email"],
  .form-row input[type="date"],
  .form-row select,
  .form-row textarea,
  .aligned input,
  .aligned select,
  .aligned textarea {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Подписи над полями, а не сбоку: сбоку на 360 px под поле остаётся треть экрана. */
  .aligned label {
    display: block;
    width: auto;
    float: none;
    padding-bottom: 4px;
  }

  fieldset .form-row {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- Встроенные блоки (платежи, фото, поломки) ---------- */

@media (max-width: 1100px) {
  .inline-group,
  .inline-related {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inline-group table {
    min-width: 620px;
  }
}

/* ---------- Панель действий ---------- */

@media (max-width: 900px) {
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .actions select {
    flex: 1 1 100%;
    min-height: 44px;
  }
}

/* ---------- Сводка (главная страница) ---------- */

@media (max-width: 700px) {
  .velo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .velo-cols {
    grid-template-columns: 1fr;
  }

  .velo-card {
    padding: 12px;
  }

  .velo-big {
    font-size: 22px;
  }

  /* Быстрые кнопки над сводкой: в столбик и во всю ширину — так в них попадают. */
  .velo-actions a {
    flex: 1 1 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .velo-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Мелочи, полезные везде ---------- */

/* Цифры в колонках денег должны выстраиваться друг под другом. */
#result_list td {
  font-variant-numeric: tabular-nums;
}

/* Длинные ссылки и примечания не должны распирать страницу вбок. */
#result_list td,
.velo-list li {
  overflow-wrap: anywhere;
}