/* Свои стили поверх Bootstrap */

/* Небольшой отступ для контента на мобильных */
@media (max-width: 576px) {
    main {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Карта на карточке объекта */
.property-map {
    width: 100%;
    height: 300px;
    border-radius: 0.375rem;
    /* На всякий случай, если Leaflet не загрузился */
    background: #f0f0f0;
}

/* Карточки объектов — одинаковая высота и аккуратный вид на мобильных */
.card-title {
    word-break: break-word;
}

/* На очень узких экранах (360px) уменьшаем горизонтальные отступы в карточках */
@media (max-width: 400px) {
    .card-body {
        padding: 0.75rem;
    }
    h1.h3, h1.h4 {
        font-size: 1.25rem;
    }
}

/* Кнопка submit на телефоне — full-width */
@media (max-width: 576px) {
    .w-sm-auto {
        width: 100% !important;
    }
}


/* Кнопка submit на телефоне — full-width */
@media (max-width: 576px) {
    .w-sm-auto {
        width: 100% !important;
    }
}

/* Отчуждённые объекты — приглушённый вид (в дополнение к opacity-75 Bootstrap) */
.card .card-header.bg-secondary {
    opacity: 1;
}

/* ============================================================
   Этап 7 — мобильный UX (≤ 576px)
   Точечные правки: контейнеры, кнопки, таблицы, навбар, карта.
   ============================================================ */
@media (max-width: 576px) {

  /* Контейнеры — меньше отступы по краям */
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Заголовки — компактнее */
  h1, .h1 { font-size: 1.35rem; }
  h2, .h2 { font-size: 1.2rem; }
  h3, .h3 { font-size: 1.05rem; }

  /* Кнопки в шапке карточки — вертикально, не «прыгают» */
  .card-header .btn-group,
  .card-header .card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .card-header .btn-group > .btn,
  .card-header .card-actions > .btn,
  .card-header > .btn {
    width: 100%;
    margin: 0 !important;
  }

  /* Кнопки — комфортный тап-таргет (≥ 36px, лучше 44px) */
  .btn,
  .btn-sm {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Кнопки-иконки в строках таблиц — не раздуваем */
  .table .btn-sm {
    min-height: 34px;
    padding: 4px 8px;
  }

  /* Навбар — не «слипается» */
  .navbar-nav .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1rem;
  }
  .navbar-brand {
    font-size: 1.1rem;
  }

  /* Таблицы — горизонтальный скролл без разрыва layout */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive > .table {
    margin-bottom: 0;
    white-space: nowrap;
  }

  /* Формы — label + input стек, отступы комфортнее */
  .form-label {
    margin-bottom: 4px;
  }
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* Карта Leaflet — фиксированная высота на мобильном */
  #map,
  .leaflet-container {
    height: 250px !important;
    min-height: 250px;
  }

  /* Баннер A2HS — отступы, чтобы не прилипал к краям */
  #pwa-install-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  #pwa-install-banner .btn {
    min-height: 40px;
  }

  /* Карточки объектов — не «разъезжаются» */
  .card-body {
    padding: 12px;
  }
  .card .list-group-item {
    padding: 10px 12px;
  }

  /* Кнопки поиска/фильтров — на всю ширину, не слипаются */
  .filter-actions .btn,
  .search-actions .btn {
    width: 100%;
    margin-bottom: 6px;
  }
}

/* Очень узкие экраны (360px и меньше) — дополнительная усадка */
@media (max-width: 380px) {
  .container,
  .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
  h1, .h1 { font-size: 1.2rem; }
  .card-header { padding: 10px 12px; }
}