/*
  Панель управления на телефоне (правки заказчика 01.10.2026).

  Управляющий работает с телефона: подтверждает людей, решает по попыткам,
  смотрит отчёты, принимает аттестации. На узком экране панель разваливалась:
  шапка «Добро пожаловать, … / Открыть сайт / Изменить пароль / Выйти»
  переносилась поверх заголовка, рельс без подписей съедал треть ширины,
  плитки шли по одной на экран, широкие отчёты растягивали страницу вбок.

  Что меняется на экране уже 760px:
  * шапка в одну строку — логотип, «Пароль» и «Выйти», остальное прячется;
  * разделы уезжают вниз, в панель с подписями под большим пальцем — как в
    приложениях на телефоне;
  * плитки на главной — по две в ряд;
  * широкие таблицы прокручиваются внутри себя, а не тянут страницу;
  * кнопки и поля не меньше 44px — по ним попадают пальцем.

  Файл подключается после темы (templates/admin/base_site.html) и трогает только
  узкие экраны: на компьютере всё как было.
*/

@media (max-width: 760px) {

  /* --- шапка в одну строку --- */

  /* Адаптив самого Django ставит шапку столбиком и центрирует — отсюда две
     строки на скриншоте заказчика. Возвращаем строку. */
  #header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 52px;
    padding: env(safe-area-inset-top) 12px 0;
    gap: 10px;
    flex-wrap: nowrap;
  }

  #branding { flex: 0 1 auto; min-width: 0; }
  #header #user-tools { margin: 0; text-align: right; }

  .brand__name { font-size: 15px; }

  /* Текст «Добро пожаловать, …» — это голые слова без обёртки, поэтому гасим
     размер шрифта у всего блока и возвращаем его только тому, что оставляем. */
  #user-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0;
    white-space: nowrap;
  }

  #user-tools strong,
  #user-tools a,
  #user-tools .theme-toggle { display: none; }

  #user-tools a[href*="password_change"] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
  }

  #user-tools form,
  #logout-form { display: inline-flex; margin: 0; }

  #user-tools button,
  #logout-form button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--lms-line);
    border-radius: 10px;
    background: #fff;
    color: var(--lms-ink);
    font-size: 13px;
    text-transform: none;
  }

  /* --- разделы — нижняя панель с подписями --- */

  .main { display: block; }

  .rail {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--lms-line);
    box-shadow: 0 -6px 18px rgba(20, 23, 28, .06);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .rail__list { display: flex; gap: 2px; min-width: max-content; }
  /* У Django у пунктов списка квадратный маркер — в ряд они вылезали точками. */
  .rail__list li { list-style: none; margin: 0; padding: 0; }

  .rail__item {
    min-width: 66px;
    padding: 6px 6px;
    margin: 0;
    gap: 3px;
  }

  .rail__icon svg { width: 22px; height: 22px; }

  /* На планшете подписи были спрятаны ради ширины; на телефоне без них
     непонятно, что за значок, — возвращаем. */
  .rail__label { display: block; font-size: 10.5px; white-space: nowrap; }

  /* Содержимое не должно уходить под нижнюю панель. */
  #content { padding: 14px 12px 96px; }
  .breadcrumbs { padding: 10px 12px 0; }
  #content h1 { font-size: 20px; margin: 4px 0 14px; }

  /* --- главная: плитки по две --- */

  .lms-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
  .lms-stats > * { padding: 14px; }
  .lms-stats .lms-card__value,
  .lms-stat__value { font-size: 24px; }

  .lms-dash__head { flex-wrap: wrap; gap: 6px; }
  .lms-dash__cards { gap: 10px; }
  .lms-card { padding: 14px; }
  .lms-card__value { font-size: 24px; }

  /* --- таблицы прокручиваются внутри себя --- */

  #content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #changelist .results { overflow-x: auto; }

  /* --- поля и кнопки под палец --- */

  input[type="text"], input[type="search"], input[type="number"], input[type="email"],
  input[type="password"], input[type="url"], select, textarea {
    max-width: 100%;
    min-height: 44px;
    font-size: 16px; /* меньше 16px — и iPhone приближает страницу при вводе */
  }

  .button, input[type="submit"], button, a.button { min-height: 40px; }
  /* Высокая кнопка-ссылка иначе держит надпись у верхнего края. */
  a.button, .button { display: inline-flex; align-items: center; justify-content: center; }

  /* Поиск: поле тянется, кнопка «Найти» остаётся на экране. */
  #changelist-search > div { display: flex; align-items: center; gap: 8px; }
  #changelist-search #searchbar { flex: 1; min-width: 0; width: auto; }
  #changelist-search input[type="submit"] { flex: none; }

  .object-tools { float: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
  .object-tools li { margin: 0; }

  /* Кнопки над строками списка и действия — в ряд с переносом. */
  .rowbar { flex-wrap: wrap; gap: 8px; }
  .rowbar__button { flex: 1 1 auto; min-height: 40px; }

  /* Формы: подпись над полем, поле во всю ширину. */
  .form-row { padding: 10px 0; }
  .aligned .form-row > div,
  .aligned label { display: block; width: auto; float: none; padding: 0 0 4px; }
  .aligned .vTextField, .aligned .vLargeTextField { width: 100%; }

  .submit-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  .submit-row input, .submit-row a { flex: 1 1 auto; }
}