/*
 * Доводка кабинета под телефон и планшет (проверка адаптивности 02.10.2026).
 *
 * Подключается ПОСЛЕ style.bundle.css (index.php, pages/login.php) и только
 * дополняет Metronic, вёрстку не перерисовывает. Что было:
 *   • поля ввода 12px (у Metronic корень 12px на экранах уже 1200px): iOS при
 *     фокусе на поле мельче 16px увеличивает страницу, и после ввода её
 *     приходится отдалять щипком;
 *   • кнопки 30-36px, бургер 24x24, стрелки пагинации 27x27, треугольник
 *     раскрытия строки таблицы 12x19: пальцем по ним промахивались;
 *   • пункты мобильного меню и весь текст 12px (корень Metronic на узких).
 *   • форма входа на телефоне шире экрана и обрезана справа.
 * Таблицы на телефоне — в assets/js/anl-local-time.js (ANL.dtColumns).
 */

/* --- Базовый размер текста ---------------------------------------------------
   Metronic на экранах уже 1200px уменьшает корень с 13px до 12px, и вместе с
   ним весь текст кабинета: подписи полей 12px, шапки таблиц 10,8px. Возвращаем
   десктопные 13px: вёрстка та же, только читается. */
@media (max-width: 1199.98px) {
  html, body { font-size: 13px !important; }
}

/* --- Поля ввода: 16px на всём, что уже десктопа ---------------------------- */
@media (max-width: 1199.98px) {
  .form-control,
  .custom-select,
  .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-input,
  .bootstrap-select > .dropdown-toggle {
    font-size: 16px;
  }
}

/* --- Страница входа ------------------------------------------------------------
   Колонка с формой — flex-элемент «1 0 auto» внутри ряда .login-aside: на
   телефоне она растягивалась по самой длинной строке текста (~980px), а
   .login-aside с overflow:hidden обрезал форму справа — поле email, кнопку и
   заголовок было видно наполовину. Колонке разрешено сжиматься. */
@media (max-width: 991.98px) {
  .login.login-2 .login-aside > .d-flex { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .login.login-2 .login-form { width: 100%; max-width: 450px; margin: 0 auto; }
}

/* Подпись чекбокса согласия (шаг кода, новый аккаунт). Metronic оформляет
   КАЖДЫЙ `.checkbox > span` как квадратик 18x18 — и подпись тоже: текст со
   ссылками вылезал из квадратика столбиками и обрезался левым краем экрана,
   а после отметки подпись ещё и заливалась цветом с галочкой. Текст подписи
   здесь не меняется — только вёрстка. */
#anl-consent-group .checkbox > span:first-of-type { flex-shrink: 0; }
#anl-consent-group .checkbox > span.ml-3 {
  display: block; flex: 1 1 auto; min-width: 0; width: auto; height: auto;
  background-color: transparent; border: 0; border-radius: 0;
}
#anl-consent-group .checkbox > span.ml-3:after { content: none; }

/* Логотип кабинета белый (для синей шапки), а колонка формы входа белая:
   на странице входа от него был виден только бирюзовый значок. Инверсия с
   поворотом оттенка даёт тёмный текст и тот же бирюзовый значок. Другого
   файла логотипа в проекте нет. */
.login.login-2 .login-aside img[src="/img/logo.png"] { filter: invert(1) hue-rotate(180deg); }

/* --- Шапка на узком десктопе (992-1199px) -------------------------------------
   У админа в шапке пять вкладок, и при корне 13px (правило выше) они не влезали
   в ряд: «Админка» уезжала на вторую строку, а первые четыре вкладки — вверх,
   за край шапки (видны были только нижние края букв). Ужимаем отступ логотипа
   и поля вкладок только в этом диапазоне. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-top .container > .d-lg-flex > a.mr-20 { margin-right: 2rem !important; }
  .header-tabs .nav-link { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* --- Кнопки рядом с полем поиска и в подвале карточки ------------------------
   На телефоне кнопка «Добавить проект» / «Новый пользователь» переносится под
   поиск и вставала вплотную к нему, сдвинутая инлайновым margin-left:10px;
   в профиле «Сохранить» и «Выйти на всех устройствах» так же слипались. */
@media (max-width: 767.98px) {
  .card-header > .card-toolbar { gap: 10px; }
  .card-header > .card-toolbar > .btn { margin-left: 0 !important; }
  .card-footer > .btn { margin-top: 5px; margin-bottom: 5px; }
}

/* --- Мобильное меню и шапка -------------------------------------------------- */
@media (max-width: 991.98px) {
  .header-menu-mobile .menu-nav > .menu-item > .menu-link .menu-text { font-size: 15px; }
}

/* --- Сенсорные экраны: зона нажатия не меньше 44x44 -------------------------- */
@media (pointer: coarse) {
  #kt_header_mobile_toggle,
  #kt_header_mobile_topbar_toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #kt_header_mobile > a { display: inline-flex; align-items: center; min-height: 44px; }

  .btn { min-height: 44px; }
  .btn.btn-sm { display: inline-flex; align-items: center; justify-content: center; }
  /* Кнопки действий в строке таблицы переносятся, а не наезжают друг на друга. */
  .datatable-cell[data-field="Actions"] > span { display: flex; flex-wrap: wrap; gap: 6px; }
  .datatable-cell[data-field="Actions"] .btn { margin: 0 !important; }

  /* Крупные кнопки пагинации не помещались в половинную карточку главной
     (телефон боком) и раздвигали страницу: ряд переносится. */
  .datatable.datatable-default > .datatable-pager,
  .datatable.datatable-default > .datatable-pager > .datatable-pager-nav { flex-wrap: wrap; }
  .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link {
    min-width: 44px; min-height: 44px;
  }
  .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-input {
    height: 44px;
  }
  .datatable.datatable-default > .datatable-pager .datatable-pager-size .btn { min-height: 44px; }

  /* Треугольник раскрытия скрытых колонок: вся ячейка становится кнопкой.
     Ширина одна у заголовка и у строк, иначе колонки съезжают. */
  .datatable.datatable-default > .datatable-table .datatable-toggle-detail {
    width: 44px; min-width: 44px; padding-left: 0 !important; padding-right: 0 !important;
  }
  .datatable .datatable-toggle-detail a.datatable-toggle-detail {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px; margin: -12px 0;
  }

  .footer .nav .nav-link { min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; padding-left: .5rem !important; padding-right: .5rem !important; }
  .form-control { min-height: 44px; }
  /* «перейти» в списке проектов и ссылки внизу карточек главной. */
  .label.label-inline > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; margin: 0 -.75rem; }
  .card-footer > a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .dropdown-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .modal-header .close { min-width: 44px; min-height: 44px; margin: -1rem -1rem -1rem auto; }
}