/* bootstrap-grid-compat.css — минимальная замена Bootstrap для шаблонов,
   которые размечены его классами, хотя сам Bootstrap в проект не подключён.
   Измерено 11.08.2026, см. docs/ui-audit.md, дефект №1: восемь страниц
   (/admin/invitations/manage, /leases-normalized/, /payments-normalized/,
   /bank-accounts-normalized/, /admin/scopes/, /admin/invoice-recognition/,
   /admin/users, /settings) складывали ряды в столбик.

   Это заплатка, а не курс на Bootstrap. Цвета и радиусы берутся из токенов
   проекта, чтобы вид не расходился с дизайн-системой. По мере переписывания
   шаблонов на живые утилиты — сокращать файл.

   Сознательно НЕ покрыты: .modal*, .toast*, .pagination — им нужна JS-логика
   Bootstrap, одной вёрсткой не лечится. Остаются в списке фазы B. */

/* ── сетка ──────────────────────────────────────────────────────────── */
/* Отрицательные поля 25.08.2026 убраны. В настоящем Bootstrap их гасит
   боковая набивка `.container`, а в этом проекте `.row` стоит прямо в
   `.admin-layout-main`, в `.settings-card`, в `.invitation-card` — ни у
   одного из них горизонтальной набивки нет. Замер на боевом при окне
   1490 px: `/admin/scopes/` и `/admin/invitations/manage` — ряд шириной
   933 px в колонке 909, то есть по 12 px за край с каждой стороны, и
   дальше по цепочке `admin-layout-main` → `admin-layout-shell` →
   `page-container`. На узком окне это добавляет странице горизонтальную
   прокрутку, из-за которой верхняя полоса и подложка обрываются на
   ширине экрана — «проблемы с фоном».

   Зазор между колонками не потерян: его даёт набивка самих колонок
   (`.row > *`), 0.75rem + 0.75rem = те же 24 px. Изменилось только то,
   что содержимое ряда отступает на 12 px от краёв контейнера, а не
   вылезает за них. */
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.row.g-2 {
  row-gap: 0.5rem;
}
.row.g-3 {
  row-gap: 1rem;
}
.row.g-4 {
  row-gap: 1.5rem;
}

.col {
  flex: 1 0 0%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 768px) {
  .col-md-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Классы `col-lg-*` и `col-xl-*` в разметке есть (col-xl-3 — восемь раз,
   col-lg-4 и col-lg-8 — по пять), а в compat-слое их не было: на широком
   экране четыре KPI-плитки `/bank-accounts-normalized/` вставали по две
   в ряд шириной 612 px вместо четырёх по 306. Замер 12.08.2026. */
@media (min-width: 992px) {
  .col-lg-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-xl-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── раскладка ──────────────────────────────────────────────────────── */
.d-flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-none {
  display: none;
}
.flex-wrap {
  flex-wrap: wrap;
}

.justify-content-start {
  justify-content: flex-start;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-end {
  justify-content: flex-end;
}
.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}

.align-items-start {
  align-items: flex-start;
}
.align-items-center {
  align-items: center;
}
.align-items-end {
  align-items: flex-end;
}

/* Кнопки во flex-строке не должны ужиматься до нечитаемости:
   на /leases-normalized/ «Сбросить фильтры» сжималась до 44px и текст пропадал. */
.d-flex > .btn {
  flex-shrink: 0;
}
.d-flex > .btn + .btn {
  margin-left: 0.5rem;
}

.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}
.position-fixed {
  position: fixed;
}

/* ── типографика ────────────────────────────────────────────────────── */
.text-muted {
  color: var(--text-muted);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-strong {
  color: var(--text-primary);
  font-weight: 600;
}
.small {
  font-size: var(--font-size-sm);
}
.text-decoration-none {
  text-decoration: none;
}
.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── поверхности ────────────────────────────────────────────────────── */
/* В тёмной теме «light» — это не белый, а следующая по светлоте поверхность. */
.bg-light {
  background-color: var(--surface-secondary);
}
.bg-secondary {
  background-color: var(--surface-tertiary);
}

/* ── таблицы ────────────────────────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-hover tbody tr:hover {
  background-color: var(--surface-secondary);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--surface-secondary);
}

/* ── формы ──────────────────────────────────────────────────────────── */
/* Совпадает с .filter-control, чтобы поля не расходились по виду. */
.form-control {
  width: 100%;
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-base);
  padding: 10px 12px;
  font-size: var(--font-size-sm);
}
/* Наведение — как у остальных трёх систем полей (unified-bundle.css).
   Своего :hover у .form-control не было вовсе. 23.08.2026 */
.form-control:not(:disabled):hover {
  border-color: var(--input-border-hover, var(--input-border));
}

/* Кольцо фокуса по общему правилу; было outline:none + серая рамка
   (--primary-color — серая шкала). 23.08.2026 */
.form-control:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 0;
  border-color: var(--input-border-hover, var(--input-border));
}
.form-text {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.form-group {
  margin-bottom: 1rem;
}

/* ── кнопки-варианты, которых нет в дизайн-системе ──────────────────── */
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}
.btn-outline-primary:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.btn-warning {
  background: var(--warning-bg);
  border: 1px solid transparent;
  color: var(--text-primary);
}
.btn-light {
  background: var(--surface-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* ── индикатор загрузки ─────────────────────────────────────────────── */
.spinner-border {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: compat-spin 0.75s linear infinite;
}
.spinner-border-sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 1.5px;
}
@keyframes compat-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── модалки: только скрытие ────────────────────────────────────────── */
/* ── модалки и тосты в бутстраповской разметке ──────────────────────── */
/* Уточнение диагноза 12.08.2026: bootstrap **JS** на этих страницах есть —
   он подтягивается с cdn.jsdelivr.net (/payments-normalized/,
   /invoices-normalized/, /admin/invitations/manage и соседи). Нет
   бутстраповского **CSS**, поэтому `.modal.show` получал `display:block`
   и карточка «Платёж #3» разворачивалась прямо в потоке страницы под
   таблицей — без подложки, по центру не выведенная. Выглядело как
   «просмотр не работает», хотя данные грузились и подставлялись.
   Ниже — минимум позиционирования, чтобы разметка вела себя как модалка.
   Свой параллельный набор (.modal-overlay/.modal-container) живёт в
   unified-bundle.css и этим правилам не мешает. */
.modal,
.toast:not(.toast-container .toast) {
  display: none;
}

.modal.show,
.modal.d-block,
.toast.show {
  display: block;
}

/* z-index бутстрапа (1050/1055) ниже шапки проекта: `header.header-minimal`
   держит 2160 и перекрывала заголовок модалки. Отсюда 2200/2190.
   Верхний отступ — чтобы диалог не заезжал под фиксированную шапку. */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2200;
  padding: 5rem 1rem 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 560px;
  margin: 0 auto;
  pointer-events: none;
}

.modal-dialog.modal-lg,
.modal-dialog.modal-xl {
  max-width: 860px;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--surface-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.modal-content > .modal-header,
.modal-content > .modal-body,
.modal-content > .modal-footer {
  padding: 1rem 1.25rem;
}

.modal-content > .modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2190;
  background: #0f172a;
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

body.modal-open {
  overflow: hidden;
}

/* ── сообщения ──────────────────────────────────────────────────────── */
.alert-info {
  background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
}

/* ── утилиты текста Bootstrap 4 ─────────────────────────────────────── */
/* Проба классов 12.08.2026 на /api/commercial_properties/: `font-weight-bold`
   давал 400, `text-uppercase` — none, класс `h5` — 16px. То есть страницы,
   написанные в бутстраповском диалекте (банковские счета, коммерческие
   объекты, карточка контрагента — 102 применения `font-weight-bold`,
   8 `text-uppercase`, 11 `class="h5"`), просили выделение и не получали
   его: подписи и значения KPI-плиток шли одним весом и одним размером,
   иерархии внутри плитки не было вовсе.
   Реализуем как задумано — это и есть работа compat-слоя. */
.font-weight-bold {
  font-weight: 700;
}

.font-weight-normal {
  font-weight: 400;
}

.font-weight-light {
  font-weight: 300;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.h1 {
  font-size: 2.5rem;
}
.h2 {
  font-size: 2rem;
}
.h3 {
  font-size: 1.75rem;
}
.h4 {
  font-size: 1.5rem;
}
.h5 {
  font-size: var(--font-size-xl);
}
.h6 {
  font-size: var(--font-size-base);
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}