/* ============================================================
   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
   ============================================================ */

/* ---- 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: 13px;
  color: var(--bdk-text-muted, #6b7280);
}

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

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

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

.bdk-mobile-card-price {
  font-weight: 600;
  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: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bdk-text-muted, #6b7280);
}
.bdk-na-overdue,
.bdk-na-none { color: var(--ios-red, #ff3b30); }
.bdk-na-today { color: var(--ios-accent, #00599c); }
.bdk-na-stale { color: var(--ios-orange, #ff9500); }
.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: 12.5px;
  }

  /* Карта — почти вся доступная высота экрана, без прокрутки, чтобы
     попасть в первый экран сразу после захода на страницу. */
  .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: inherit;
    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;
}