/* ============================================================
   BDKazak — мобильные доработки раунда 1 UX-аудита 06.09.2026 (WP B4).

   Файл НЕ подключается глобально из base.html (владелец base.html/
   site.css/ios_modals.css — агент A4, см. parallel_contract.md).
   Подключение — точечное, через {% block extra_head %} в шаблонах,
   которым нужны эти стили (в base.html блок extra_head уже существует
   и рендерится ПОСЛЕ site.css/ios_modals.css/ui_prefs.css — благодаря
   порядку подключения override'ы ниже побеждают без !important).

   Разделы:
   1. Карточный вид списков на мобиле (сделки, рыночные объявления) — F-mobile-03, F-ads_market-03
   2. Карта объектов: карта первой, фильтры — нижний sheet — F-mobile-04
   3. Вкладки карточки объекта — тач-цель ≥44px — F-mobile-10
   4. Радио «Тип лида» — увеличенная тач-цель — F-mobile-11 / F-crm-27
   5. Радио «Тип лида» — сетка 2×2 на мобильной ширине, план
      feature_lead_rent_type_2026-09-22 (Ф1): вариантов стало четыре
   6. Степпер мастера участка — тач-цель ≥44px — аудит UI 23.09.2026, №18
   ============================================================ */

/* ---- 1. Мобильные карточки списков (< 768px) ------------------- */

.bdk-mobile-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bdk-mobile-card {
  display: block;
  background: var(--ios-bg-sheet, #fff);
  border: 1px solid var(--bdk-border, #e5e7eb);
  border-radius: var(--bdk-radius, 12px);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bdk-mobile-card:active {
  background: var(--bdk-bg, #f7f8fa);
}

.bdk-mobile-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bdk-mobile-card-row + .bdk-mobile-card-row {
  margin-top: 6px;
}
.bdk-mobile-card-row--top {
  align-items: flex-start;
}
.bdk-mobile-card-row--meta {
  font-size: var(--bdk-fs);
  color: var(--bdk-text-muted, #6b7280);
}

.bdk-mobile-card-title {
  font-weight: 500;
  color: var(--bdk-text, #111827);
  font-size: var(--bdk-fs);
  overflow-wrap: anywhere;
}

.bdk-mobile-card-amount {
  font-weight: 500;
  color: var(--bdk-text, #111827);
  white-space: nowrap;
}

.bdk-mobile-card-text {
  font-size: var(--bdk-fs);
  color: var(--bdk-text-muted, #6b7280);
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.bdk-mobile-card-price {
  font-weight: 500;
  color: var(--bdk-primary, #00599c);
  white-space: nowrap;
}

.bdk-mobile-card-district {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bdk-mobile-card-next-action {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ios-separator, rgba(60,60,67,0.12));
  font-size: var(--bdk-fs-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bdk-text-muted, #6b7280);
}
.bdk-na-overdue,
.bdk-na-none { color: var(--ios-red-ink, #d70015); }
.bdk-na-today { color: var(--ios-accent, #00599c); }
.bdk-na-stale { color: var(--ios-orange-ink, #9a5b00); }
.bdk-na-closed { color: var(--bdk-text-muted, #6b7280); }

@media (min-width: 768px) {
  /* На десктопе карточки не нужны — там таблица (обёрнута в d-md-block). */
  .bdk-mobile-cards { display: none !important; }
}

/* ---- 2. Карта объектов: mobile-first раскладка (F-mobile-04) --- */

@media (max-width: 991.98px) {
  /* Заголовок компактнее — освобождаем место под карту в первом экране. */
  .bdk-map-page .bdk-page-subtitle {
    font-size: var(--bdk-fs-sm);
  }

  /* Карта — почти вся доступная высота экрана, без прокрутки, чтобы
     попасть в первый экран сразу после захода на страницу. */
  .bdk-map-main #objects-map,
  .bdk-map-main .bdk-map {
    height: calc(100svh - 230px) !important;
    min-height: 320px;
  }

  /* Кнопка «Фильтры» — полноширинная плашка над картой. */
  .bdk-map-filters-btn {
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
  }

  /* Сама панель фильтров переиспользует .bdk-ios-sheet (модалка Bootstrap) —
     на мобильном ведёт себя как обычная iOS-sheet модалка снизу, ничего
     переопределять не нужно. */
}

@media (min-width: 992px) {
  /* На десктопе панель фильтров возвращается в обычный вид колонки
     сайдбара, а не модалки-оверлея (кнопка-триггер скрыта — .show
     никогда не вызывается через JS, поэтому .modal-backdrop не появится). */
  #mapFiltersSheet.modal {
    position: static;
    display: block;
    z-index: auto;
    background: transparent;
    /* Bootstrap-класс .fade даёт .fade:not(.show){opacity:0} — модалка
       никогда не получает .show (мы не вызываем JS .show() на десктопе),
       поэтому без явного opacity:1 панель занимает место, но невидима. */
    opacity: 1;
    /* Bootstrap задаёт .modal{width:100%} позже .col-lg-3{width:25%} в
       исходном порядке своих файлов — при равной специфичности побеждает
       порядок, а не наш класс col-lg-3. Явно фиксируем ширину сайдбара
       (col-lg-3 = 25% строки), иначе панель фильтров растягивается на всю
       строку и выталкивает карту вниз (регрессия десктопа, найдено при
       Playwright-проверке WP B4). */
    width: 25%;
    flex: 0 0 25%;
  }
  #mapFiltersSheet .modal-dialog {
    display: block;
    margin: 0;
    max-width: none;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto;
  }
  #mapFiltersSheet .modal-content {
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    font-family: inherit;
  }
  #mapFiltersSheet .modal-header { display: none; }
  #mapFiltersSheet .modal-body {
    padding: 0;
    overflow: visible;
    font-size: var(--bdk-fs);
    line-height: inherit;
    color: inherit;
  }
}

/* ---- 3. Вкладки карточки объекта — тач-цель ≥44px (F-mobile-10) - */

.bdk-detail-tab {
  min-height: 44px;
  padding: 10px 14px;
}

/* ---- 4. Радио «Тип лида» — тач-цель ≥44px (F-mobile-11/F-crm-27) - */

.bdk-radio-touch .form-check {
  min-height: 44px;
}
.bdk-radio-touch .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
}
.bdk-radio-touch .form-check-label {
  padding: 12px 4px;
  cursor: pointer;
}

/* ---- 5. Тип лида — сетка 2×2 на мобильной ширине (Ф1 фичи «аренда») - */

/* Базовое поведение (десктоп) — как раньше, построчный flex-wrap. Задаём
   display здесь же (а не полагаемся на bootstrap-класс d-flex в шаблоне),
   потому что d-flex — это `display: flex !important`, и media-правило
   ниже переопределить его без !important не смогло бы (находка при
   браузерной проверке 22.09.2026: контейнер оставался flex на 390px). */
.bdk-lead-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}

@media (max-width: 576px) {
  .bdk-lead-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  .bdk-lead-type-grid .form-check {
    min-width: 0;
  }
}

/* ---- 6. Степпер мастера — тач-цель ≥44px (аудит UI 23.09.2026, №18) -- */
/* На телефоне от шага остаётся только номер 24 px — зона нажатия была
   28×32. Поля добирают её до 44×44, отрицательные поля по вертикали
   возвращают ряду прежнюю высоту — раскладка не сдвигается. */
@media (max-width: 575.98px), (pointer: coarse) {
  .bdk-steps-route .bdk-step-r {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -6px;
    margin-bottom: -6px;
  }
}