/* UI-kit CRM: каркас (сайдбар + main) и компоненты из «CRM - Приложение.dc.html».
 * Только переменные из tokens.css — новых цветов здесь нет. */

/* ============================================================
 * Шапка экрана: хлебная крошка, h1 + мета-строка, табы
 * ============================================================ */

/* CRM v2 «спокойная плотность» (docs/design-crm-v2.md, разделы 4 и 9): только
 * токены tokens.css. Кабинет арендатора рендерит часть этих классов (.btn,
 * .badge/.chip, .table, .num, .doc-row, .skeleton, .empty-state, таймлайн) и
 * перекрывает их в portal*.css — новые свойства здесь добавляются только те,
 * что кабинет перекрывает сам, иначе — новым модификатором. Адаптивность — у
 * каждого компонента: 1179 — компактный режим, 767 — телефон, 479 — узкий
 * телефон, pointer: coarse — зоны касания. */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  padding: var(--space-6) var(--page-gutter) 0;
}

/* Крошки 13/18 вторичным; разделитель «/» — декор цветом --text-faint */
.page-header__breadcrumb {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.page-header__crumb-sep {
  padding: 0 var(--space-1-5);
  color: var(--text-faint);
}

.page-header__breadcrumb-current {
  color: var(--text-secondary);
}

/* Строка заголовка: h1, бейдж статуса рядом, действия справа; мета-строка
 * и факты — под заголовком (order), разметка экранов не меняется */
.page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.page-header__title {
  margin: 0;
  min-width: 0;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-h1);
  overflow-wrap: anywhere;
}

.page-header__meta {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.page-header__row > .page-header__meta {
  order: 1;
  flex-basis: 100%;
}

.page-header__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Строка фактов под заголовком карточки */
.page-header__facts {
  order: 2;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2-5);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.page-header__facts strong {
  color: var(--text);
  font-weight: 600;
}

.page-header > .tabs {
  margin-top: var(--space-2-5);
}

@media (max-width: 1179px) {
  .page-header {
    padding-left: var(--page-gutter-tablet);
    padding-right: var(--page-gutter-tablet);
  }
}

/* Телефон: крошки в одну строку с многоточием, заголовок 20/28, действия —
 * отдельной строкой под заголовком (главная первой, одна — на всю ширину) */
@media (max-width: 767px) {
  .page-header {
    gap: var(--space-2);
    padding: var(--space-4) var(--page-gutter-phone) 0;
  }

  .page-header__breadcrumb {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .page-header__title {
    font-size: var(--font-size-h1-phone);
    line-height: var(--line-height-h1-phone);
  }

  .page-header__actions {
    order: 2;
    flex-basis: 100%;
    margin-left: 0;
  }

  .page-header__actions > .btn--primary,
  .page-header__actions > form:has(.btn--primary) {
    order: -1;
  }

  .page-header__actions > :only-child,
  .page-header__actions > form:only-child .btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-header__facts {
    order: 3;
  }

  .page-header > .tabs {
    margin-top: var(--space-1);
  }
}

/* ============================================================
 * Вкладки (shared/tabs): выбранная — подчёркивание 2 px акцентом, 600;
 * счётчик-пилюля после названия. Одна строка: на узком экране —
 * горизонтальная прокрутка, выбранную в поле зрения держит Stimulus tabs.
 * Базовая линия — тень-вкладыш: отрицательный отступ под прокруткой
 * обрезался бы
 * ============================================================ */

.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border-panel);
}

/* Полоса прокрутки ряда скрыта: обрезанная крайняя вкладка сама
 * подсказывает прокрутку, фокус с клавиатуры докручивает ряд */
.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: var(--tab-height);
  padding: 0 var(--space-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.tab--active,
.tab--active:hover {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

/* Счётчик-пилюля 20 · радиус 10 · 12/600; тон по смыслу: у выбранной —
 * акцент, «требует внимания» — жёлтый, остальные — нейтральный */
.tab__count,
.counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--counter-size);
  height: var(--counter-size);
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--neutral-bg);
  color: var(--neutral);
  font-size: var(--font-size-chip);
  line-height: var(--line-height-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tab--active .tab__count {
  background: var(--accent-bg);
  color: var(--accent);
}

.tab__count--attention,
.tab--active .tab__count--attention {
  background: var(--warning-bg);
  color: var(--warning);
}

.counter--success { background: var(--success-bg); color: var(--success); }
.counter--warning { background: var(--warning-bg); color: var(--warning); }
.counter--danger  { background: var(--danger-bg);  color: var(--danger); }
.counter--info    { background: var(--info-bg);    color: var(--info); }
.counter--neutral { background: var(--neutral-bg); color: var(--neutral); }

/* ============================================================
 * Метки и бейджи (ui_badge / ui_chip): высота 22 (рамка 1 + 2 + 16 + 2 + 1),
 * радиус 6, 12/16·500, триада текст/фон/рамка по тону. Тоны: success,
 * warning, danger, info, neutral (muted — прежнее имя neutral).
 * Высота — отступами, а не height: кабинет перекрывает отступы и шрифт,
 * height он бы унаследовал
 * ============================================================ */

.badge,
.chip {
  display: inline-block;
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid;
  border-radius: var(--radius-badge);
  font-size: var(--font-size-chip);
  line-height: var(--line-height-label);
  font-weight: 500;
  white-space: nowrap;
}

.badge--success,
.chip--success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.badge--warning,
.chip--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.badge--danger,
.chip--danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-border); }
.badge--info,
.chip--info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-border); }
.badge--neutral,
.badge--muted,
.chip--neutral,
.chip--muted   { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-border); }

/* ============================================================
 * Кнопки: 36 — главная (акцент), вторичная (белая, рамка), текстовая
 * (--ghost: без рамки, вторичным цветом), опасная; 32 — в строках таблиц и
 * шапках панелей (--small). Радиус 8, 14/500, у 32 — 13/500.
 * Одна главная кнопка на экран
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-3-5);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-subtle);
  color: var(--text);
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--surface);
}

/* Текстовая — без рамки, вторичным цветом: «Отмена», «Отклонено…» */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover {
  background: var(--neutral-bg);
  color: var(--text);
}

.btn--danger {
  background: var(--surface);
  border-color: var(--danger-border);
  color: var(--danger);
}

.btn--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn--small {
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

/* На всю ширину контейнера (кнопка отправки формы на телефоне и т. п.) */
.btn--block {
  width: 100%;
}

.btn[disabled],
.btn:disabled,
.btn--disabled,
.btn--disabled:hover {
  background: var(--neutral-bg);
  border-color: var(--border-panel);
  color: var(--text-disabled);
  cursor: default;
  pointer-events: none;
}

/* Обёртка чекбокса с подписью или без (label.check): цель нажатия */
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* ============================================================
 * Касание (pointer: coarse, на любой ширине): зона нажатия не меньше 44×44
 * без раздувания плотности — псевдоэлемент выходит за кнопку на недостающее
 * поровну (у кнопки от 44 — ноль); вкладки и обёртка чекбокса .check — 44
 * ============================================================ */

@media (pointer: coarse) {
  .btn {
    position: relative;
  }

  .btn::after {
    content: "";
    position: absolute;
    top: min(0px, calc((100% - var(--touch-target)) / 2));
    right: min(0px, calc((100% - var(--touch-target)) / 2));
    bottom: min(0px, calc((100% - var(--touch-target)) / 2));
    left: min(0px, calc((100% - var(--touch-target)) / 2));
  }

  .tab {
    min-height: var(--touch-target);
  }

  .check {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
}

/* ============================================================
 * Таблица (shared/table). Шапка — подложка, 12/16·500 вторичным, обычным
 * регистром; ячейки 11/12, крайние 20; строки разделены --border-soft,
 * вертикальных линий нет; суммы справа моноширинным 13. Панель таблицы —
 * сама область прокрутки: широкая таблица прокручивается внутри неё, шапка
 * липнет к её верху. min_width партиала приходит классом .table-panel--min-N,
 * он задаёт переменную --table-min-width (на телефоне в режиме карточек — снимается)
 * ============================================================ */

.table-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-6) var(--page-gutter);
}

/* --table-min-width по умолчанию сброшен у каждой панели: вложенная таблица
 * не наследует ширину внешней (значение партиала — классом --min-N ниже) */
.table-panel {
  --table-min-width: auto;
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

/* Минимальная ширина широких таблиц — UiHelper::TABLE_MIN_WIDTHS (CSP, W3:
 * без инлайн-стилей). Класс задаёт переменную: ширину держит таблица, панель
 * прокручивается вбок, в режиме карточек на телефоне переменная снимается */
.table-panel--min-760 { --table-min-width: 760px; }
.table-panel--min-860 { --table-min-width: 860px; }
.table-panel--min-900 { --table-min-width: 900px; }
.table-panel--min-960 { --table-min-width: 960px; }
.table-panel--min-1000 { --table-min-width: 1000px; }
.table-panel--min-1080 { --table-min-width: 1080px; }
.table-panel--min-1100 { --table-min-width: 1100px; }
.table-panel--min-1180 { --table-min-width: 1180px; }
.table-panel--min-1240 { --table-min-width: 1240px; }
.table-panel--min-1280 { --table-min-width: 1280px; }
.table-panel--min-1320 { --table-min-width: 1320px; }
.table-panel--min-1440 { --table-min-width: 1440px; }

.table {
  width: 100%;
  min-width: var(--table-min-width);
  border-collapse: collapse;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--table-head-pad-y) var(--table-cell-pad-x);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-panel);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: var(--letter-spacing-label);
  text-align: left;
  white-space: nowrap;
}

.table tbody td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

/* Крайние ячейки — 20 от рамки панели */
.table :is(th, td):first-child {
  padding-left: var(--table-cell-pad-edge);
}

.table :is(th, td):last-child {
  padding-right: var(--table-cell-pad-edge);
}

/* Последняя строка — без линии: снизу рамка панели */
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--row-hover);
}

/* Строка, ждущая действия, — тёплая подложка */
.table tbody tr.row--attention {
  background: var(--warning-row-bg);
}

/* Строка-причина под строкой данных: <tr class="row--reason"><td colspan=…>
 * с shared/reason внутри; граница предыдущей строки убирается — визуально
 * причина принадлежит строке выше */
.table tbody tr.row--reason td {
  height: auto;
  padding: 0 var(--table-cell-pad-edge) var(--space-2-5);
}

.table tbody tr:has(+ .row--reason) td {
  border-bottom: none;
}

.table tbody tr.row--reason:hover {
  background: transparent;
}

.table tbody tr.row--reason.row--attention,
.table tbody tr.row--reason.row--attention:hover {
  background: var(--warning-row-bg);
}

/* Ячейки: суммы — моно 13, справа, без переноса; заголовок такой колонки —
 * обычным шрифтом шапки, тоже справа */
.table td.cell--num {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.table th.cell--num,
th.cell--num {
  text-align: right;
}

/* Основная сумма строки — 500 */
.table .cell--num-strong {
  font-weight: 500;
}

.table .cell--muted {
  color: var(--text-secondary);
}

.table .cell--main {
  font-weight: 500;
}

.table .cell--warning {
  color: var(--warning);
}

.table .cell--truncate {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Вторая строка двухстрочной ячейки: дата у номера, ИНН у названия,
 * помещение у объекта, единица у ставки — 12/16 приглушённым */
.cell__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  font-weight: 400;
  color: var(--text-muted);
}

.cell__sub.num {
  font-family: var(--font-mono);
}

/* Модификатор: ячейки по верхнему краю (реестры с двухстрочными ячейками) */
.table--align-top tbody td {
  vertical-align: top;
}

/* Детальные таблицы (план начислений, строки счёта, разнесения, история):
 * первая колонка закреплена при горизонтальной прокрутке панели. separate —
 * иначе рамки закреплённых ячеек остаются на месте */
.table--sticky-first {
  border-collapse: separate;
  border-spacing: 0;
}

.table--sticky-first :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--border-soft);
}

.table--sticky-first :is(th, td):first-child {
  white-space: nowrap;
}

.table--sticky-first td:first-child .cell__sub {
  min-width: 10em;
  max-width: 16em;
  white-space: normal;
}

.table--sticky-first thead th:first-child {
  z-index: 3;
  background: var(--surface-subtle);
}

.table--sticky-first tbody tr:hover td:first-child {
  background: var(--row-hover);
}

.table--sticky-first tbody tr.row--attention td:first-child {
  background: var(--warning-row-bg);
}

/* Отступ под sticky-панель действий, чтобы последняя строка не пряталась */
.table-scroll__spacer {
  flex: none;
  height: var(--space-16);
}

@media (max-width: 1179px) {
  .table-scroll {
    padding-left: var(--page-gutter-tablet);
    padding-right: var(--page-gutter-tablet);
  }
}

@media (max-width: 767px) {
  .table-scroll {
    padding: var(--space-4) var(--page-gutter-phone);
  }
}

/* --- Реестр карточками на телефоне (.table--cards; партиал: cards: true).
 *     Каждая строка — карточка: первая ячейка (номер или название; после
 *     чекбокса — следующая) — заголовок 15/600, .cell--status — справа от
 *     него, .cell--check — в левом верхнем углу, остальные — строки «подпись —
 *     значение»: подпись — data-label ячейки (хелпер ui_td) через ::before.
 *     Пустые (.cell--blank, ставит ui_td для «—») не выводятся. Ссылка
 *     .table__link растягивается на всю карточку --- */
@media (max-width: 767px) {
  .table.table--cards {
    display: block;
    min-width: 0;
  }

  .table.table--cards :is(tbody, tfoot) {
    display: block;
  }

  .table.table--cards thead:not(:has(.cell--check)) {
    display: none;
  }

  /* В шапке остаётся только «выбрать все» */
  .table.table--cards thead:has(.cell--check) {
    display: block;
  }

  .table.table--cards thead tr {
    display: flex;
    padding: var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--border-panel);
    background: var(--surface-subtle);
  }

  .table.table--cards thead th:not(.cell--check) {
    display: none;
  }

  .table.table--cards thead th.cell--check {
    position: static;
    padding: 0;
    border: 0;
  }

  .table.table--cards :is(tbody, tfoot) tr {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
  }

  .table.table--cards :is(tbody, tfoot) tr:last-child {
    border-bottom: 0;
  }

  .table.table--cards :is(tbody, tfoot) td {
    position: relative;
    grid-column: 1 / -1;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    padding: var(--space-1) 0 var(--space-1) 40%;
    border: 0;
    text-align: right;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .table.table--cards :is(tbody, tfoot) td::before {
    content: attr(data-label);
    position: absolute;
    top: var(--space-1);
    left: 0;
    width: calc(40% - var(--space-3));
    font-family: var(--font-sans);
    font-size: var(--font-size-hint);
    line-height: var(--line-height-base);
    font-weight: 400;
    color: var(--text-muted);
    text-align: left;
    white-space: normal;
  }

  /* Заголовок карточки */
  .table.table--cards :is(tbody, tfoot) td:first-child,
  .table.table--cards :is(tbody, tfoot) td.cell--check + td {
    grid-column: 1 / 3;
    grid-row: 1;
    padding: 0 0 var(--space-1);
    text-align: left;
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    font-weight: 600;
  }

  .table.table--cards :is(tbody, tfoot) td.cell--check {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }

  .table.table--cards :is(tbody, tfoot) td.cell--check + td {
    grid-column: 2;
  }

  /* Статус — справа от заголовка */
  .table.table--cards :is(tbody, tfoot) td.cell--status {
    grid-column: 3;
    grid-row: 1;
    padding: 0;
  }

  .table.table--cards :is(tbody, tfoot) :is(td:first-child, td.cell--check, td.cell--check + td, td.cell--status)::before {
    content: none;
  }

  .table.table--cards :is(tbody, tfoot) td.cell--blank {
    display: none;
  }

  /* Суммы — без переноса и справа, как в таблице */
  .table.table--cards :is(tbody, tfoot) td.cell--num {
    white-space: nowrap;
  }

  /* Строка-причина — продолжение карточки выше */
  .table.table--cards tbody tr.row--reason {
    display: block;
    margin-top: calc(-1 * var(--space-3));
    padding-top: 0;
  }

  .table.table--cards tbody tr.row--reason td {
    padding: 0;
    text-align: left;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: 400;
  }

  .table.table--cards tbody tr.row--reason td::before {
    content: none;
  }

  .table.table--cards tbody tr:has(+ .row--reason) {
    border-bottom: 0;
  }

  /* Вся карточка — зона нажатия; остальные ссылки и кнопки — поверх неё */
  .table.table--cards .table__link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .table.table--cards td :is(a:not(.table__link), button, input, label, select, summary) {
    position: relative;
    z-index: 1;
  }
}

/* ============================================================
 * Sticky нижняя панель действий (shared/action_bar)
 * ============================================================ */

.action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5) var(--space-3);
  padding: var(--space-3) var(--page-gutter);
  background: var(--surface);
  border-top: 1px solid var(--border-panel);
  box-shadow: var(--shadow-action-bar);
}

.action-bar__summary {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.action-bar__summary strong {
  font-weight: 600;
  color: var(--text);
}

.action-bar__summary .num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

.action-bar__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 1179px) {
  .action-bar {
    padding-left: var(--page-gutter-tablet);
    padding-right: var(--page-gutter-tablet);
  }
}

/* Телефон: кнопки во всю ширину под итогами, отступ под домашнюю полосу */
@media (max-width: 767px) {
  .action-bar {
    padding: var(--space-3) var(--page-gutter-phone) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .action-bar__actions {
    flex-basis: 100%;
    margin-left: 0;
  }

  .action-bar__actions > :is(.btn, form) {
    flex: 1 1 auto;
  }

  .action-bar__actions > form .btn {
    width: 100%;
  }
}

/* ============================================================
 * Модальное окно подтверждения на <dialog> (shared/modal): ширина
 * min(440, 100vw − 32), радиус 10; шапка и кнопки на месте, прокручивается
 * только тело. На < 480 кнопки — столбиком во всю ширину, главная сверху
 * ============================================================ */

.modal {
  width: min(var(--modal-width), calc(100vw - 2 * var(--space-4)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.modal[open] {
  display: flex;
  flex-direction: column;
}

.modal[open] > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.modal::backdrop {
  background: var(--backdrop);
}

.modal__title {
  flex: none;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
}

.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  color: var(--text-secondary);
}

.modal__footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
}

@media (max-width: 479px) {
  .modal__footer {
    flex-direction: column-reverse;
  }

  .modal__footer > :is(.btn, form),
  .modal__footer > form .btn {
    width: 100%;
  }
}

/* ============================================================
 * Скелетон загрузки: панель с пульсирующими полосами. Поля даёт контейнер
 * (поле контента или заглушка фрейма)
 * ============================================================ */

@keyframes ui-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.skeleton {
  flex: 1;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

.skeleton__bar {
  width: 50%;
  height: var(--space-3-5);
  margin: 0 0 var(--space-4-5);
  border-radius: var(--radius-badge);
  background: var(--border-soft);
  animation: ui-pulse 1.4s ease-in-out infinite;
}

/* Ширины полос детерминированы (формула макета 50 + i*23 % 45), цикл из 45 */
.skeleton__bar:nth-child(5n+2) { width: 73%; }
.skeleton__bar:nth-child(5n+3) { width: 51%; }
.skeleton__bar:nth-child(5n+4) { width: 74%; }
.skeleton__bar:nth-child(5n)   { width: 62%; }

/* Скелетон внутри панели — без второй рамки */
.panel > .skeleton {
  border: 0;
  border-radius: 0;
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton__bar {
    animation: none;
  }
}

/* ============================================================
 * Вертикальный таймлайн (shared/timeline_item). Точка 10: dot: :current —
 * зелёная с кольцом (действует сейчас), :pending — пустая оранжевая (ждёт);
 * прежние тона точек — как были. Дата — .timeline-item__date, моно 600
 * ============================================================ */

.timeline-item {
  display: flex;
  gap: var(--space-3-5);
}

.timeline-item__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-item__dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: calc((var(--line-height-base) - 10px) / 2);
  border-radius: 50%;
  background: var(--text-faint);
}

.timeline-item__dot--success { background: var(--success-dot); }
.timeline-item__dot--warning { background: var(--warning-dot); }
.timeline-item__dot--danger  { background: var(--danger); }
.timeline-item__dot--info    { background: var(--info); }

.timeline-item__dot--current {
  background: var(--success-dot);
  box-shadow: 0 0 0 3px var(--success-ring);
}

.timeline-item__dot--pending {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--warning-dot);
}

.timeline-item__line {
  width: 1px;
  flex: 1;
  margin: var(--space-1) 0;
  background: var(--border-panel);
}

.timeline-item__body {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--space-4-5);
}

.timeline-item--last .timeline-item__line {
  display: none;
}

.timeline-item--last .timeline-item__body {
  padding-bottom: var(--space-1-5);
}

.timeline-item__date {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ============================================================
 * Строка-причина «⚠ …» (shared/reason) и её баннерная версия
 * ============================================================ */

.reason {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1-5);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--warning);
}

.reason--danger {
  color: var(--danger);
}

.reason__mark {
  font-weight: 700;
}

/* Текст тянется и переносится внутри себя, а не уходит строкой ниже знака;
 * действие на узком месте — следующей строкой целиком */
.reason__text {
  flex: 1 1 16em;
  min-width: 0;
}

.reason__action {
  margin-left: var(--space-2);
  font-weight: 500;
  white-space: nowrap;
}

/* Баннер во всю ширину (например, «договор подлежит регистрации») */
.reason--banner {
  padding: var(--space-3) var(--space-4);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
}

.reason--banner.reason--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* ============================================================
 * Пустое состояние и состояние ошибки
 * ============================================================ */

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.empty-state__inner {
  max-width: 380px;
  text-align: center;
}

.empty-state__title {
  font-size: var(--font-size-h2);
  font-weight: 600;
}

.empty-state__description {
  margin: var(--space-1-5) 0 var(--space-3-5);
  font-size: var(--font-size-secondary);
  color: var(--text-muted);
}

.error-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) var(--page-gutter);
  padding: var(--space-4) var(--space-5);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-panel);
}

.error-state__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--danger);
}

.error-state__description {
  margin-top: var(--space-0-5);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--danger);
}

.error-state__retry {
  margin-left: auto;
  border-color: var(--danger-border);
  color: var(--danger);
}

.error-state__retry:hover {
  background: var(--surface);
}

@media (max-width: 1179px) {
  .error-state {
    margin-left: var(--page-gutter-tablet);
    margin-right: var(--page-gutter-tablet);
  }
}

@media (max-width: 767px) {
  .error-state {
    margin: var(--space-4) var(--page-gutter-phone);
    padding: var(--space-4);
  }

  .error-state__retry {
    margin-left: 0;
  }
}

/* ============================================================
 * Панель: белая, рамка, радиус 10, без тени. Шапка 14/20 с линией снизу:
 * заголовок 15/22·600 и подзаголовок 13/18 вторичным (inline .panel__hint
 * или столбиком в .panel__heading), справа .panel__actions. Тело 16/20
 * ============================================================ */

.panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

.panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-3);
  padding: var(--space-3-5) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.panel__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.panel__title {
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
  color: var(--text);
}

.panel__hint,
.panel__subtitle {
  margin: 0;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.panel__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.panel__body {
  padding: var(--space-4) var(--space-5);
}

/* Подвал панели: «8 договоров · все на одной странице» */
.panel__footer {
  padding: var(--space-3) var(--space-5);
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-panel);
  border-radius: 0 0 calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

/* Таблица внутри панели — без своей рамки и полей, вровень с краями; у
 * последней — нижние углы панели (область прокрутки обрезает по радиусу) */
.panel .table-scroll {
  padding: 0;
}

.panel .table-panel {
  border: 0;
  border-radius: 0;
}

.panel > .table-scroll:last-child .table-panel {
  border-radius: 0 0 calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px);
}

/* Телефон: поля 16; действие шапки — под заголовком, перенос, а не сжатие */
@media (max-width: 767px) {
  .panel__header {
    padding: var(--space-3) var(--space-4);
  }

  .panel__body {
    padding: var(--space-4);
  }

  .panel__actions {
    flex-basis: 100%;
    margin-left: 0;
  }

  .panel__footer {
    padding: var(--space-3) var(--space-4);
  }
}

/* Моноширинные значения в тексте (суммы, даты, номера) */
.num {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
  font-variant-numeric: tabular-nums;
}

.num--strong {
  font-weight: 600;
}

/* ============================================================
 * Turbo Frame: прозрачная обёртка и скелетон на время загрузки
 * ============================================================ */

/* Фрейм-обёртка не ломает flex-цепочку app-main → app-scroll */
turbo-frame.frame-transparent {
  display: contents;
}

/* Пока фрейм перезагружается (Turbo ставит атрибут busy), контент
 * подменяется скелетоном; в покое скелетон не занимает места */
.frame-busy-placeholder {
  display: none;
}

turbo-frame[busy] .frame-busy-placeholder {
  display: block;
}

turbo-frame[busy] .frame-busy-content {
  display: none;
}

/* ============================================================
 * Карточки: две колонки (слева основное, справа стопка вспомогательных
 * панелей; на узком экране — одна колонка: сначала основная), параметры
 * «подпись → значение» и строки документов
 * ============================================================ */

.two-col {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

.two-col__main {
  flex: 2 1 560px;
  min-width: 0;
}

.two-col__side {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (max-width: 767px) {
  .two-col,
  .two-col__side {
    gap: var(--space-4);
  }
}

/* Дл-список «label → значение» в панелях параметров */
.props {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-1-5) var(--space-3);
}

.props__label {
  color: var(--text-secondary);
}

.props__value--warning {
  color: var(--warning);
  font-weight: 600;
}

@media (max-width: 479px) {
  .props {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Строка документа: имя · дата · статус справа */
.doc-row {
  display: flex;
  gap: var(--space-2-5);
  align-items: baseline;
  padding: var(--kv-row-pad-y) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--font-size-base);
}

.doc-row:last-child {
  border-bottom: none;
}

.doc-row__status {
  margin-left: auto;
}

/* Только CRM (layout application): в узкой колонке и на телефоне название
 * не сжимается до буквы рядом с длинным статусом — статус уходит строкой
 * ниже. В кабинете строки документов перекрыты в portal*.css, его вид не
 * трогаем */
.app-body .doc-row {
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

/* ============================================================
 * Компоненты карточек и главной (для волны 2, разметка — в /dev/ui)
 * ============================================================ */

/* --- Плитки показателей (.metrics > .metric): подпись 13·500 вторичным,
 *     значение моно 22/30·600 без переноса, подстрока 13 вторичным,
 *     определение 12/16 приглушённым под тонким разделителем.
 *     Телефон: две колонки 480–767, одна < 480 --- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-4-5);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

.metric__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  font-weight: 500;
  color: var(--text-secondary);
}

.metric__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-metric);
  line-height: var(--line-height-metric);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.metric__value--danger {
  color: var(--danger);
}

.metric__sub {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.metric__note {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .metric {
    padding: var(--space-4);
  }
}

@media (max-width: 479px) {
  .metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Блок «Требует действия» (.attention): рамка --warning-border, шапка на
 *     --warning-bg с треугольником и заголовком 15·600 --warning-title с
 *     числом; строки — что случилось (500), пояснение 13 вторичным, справа
 *     кнопка 32. На телефоне — сразу под шапкой страницы, кнопка переносится
 *     под текст --- */
.attention {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-panel);
}

.attention__header {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-5);
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
  color: var(--warning);
}

.attention__icon {
  flex: none;
}

.attention__title {
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
  color: var(--warning-title);
}

.attention__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-5);
}

.attention__item + .attention__item {
  border-top: 1px solid var(--border-soft);
}

.attention__text {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.attention__what {
  font-weight: 500;
}

.attention__why {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .attention__header,
  .attention__item {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .attention__text {
    flex-basis: 100%;
  }
}

/* --- Полоса фактов и полоса денег (.strip, .strip--money): сетка ячеек
 *     внутри панели с радиусом 10 и разделителями 1 px. Разделитель — контур
 *     ячейки в зазоре 1 px: неполный последний ряд остаётся белым, а не
 *     серым, как у фона-подложки. auto-fit сам складывает ячейки в одну
 *     колонку на телефоне --- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

.strip__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
  padding: var(--space-3-5) var(--space-5);
  background: var(--surface);
  outline: 1px solid var(--border-soft);
}

.strip__label {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

.strip__value {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.strip__value--mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.strip__sub {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-secondary);
}

.strip--money .strip__cell {
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
}

.strip--money .strip__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  font-weight: 500;
  color: var(--text-secondary);
}

.strip--money .strip__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-metric);
  line-height: var(--line-height-metric);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.strip--money .strip__sub {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

@media (max-width: 767px) {
  .strip__cell,
  .strip--money .strip__cell {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* --- Список «подпись — значение» (.kv-list, dl): строки 9 сверху и снизу,
 *     подпись слева 13 вторичным, значение справа, разделители --border-soft;
 *     .kv-list__sub — вторая строка значения 12/16 приглушённым. Прямо в
 *     панели — с полями 20, внутри .panel__body — без своих полей --- */
.kv-list {
  margin: 0;
}

.panel > .kv-list {
  padding: var(--space-1) var(--space-5) var(--space-2);
}

.kv-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--kv-row-pad-y) 0;
  border-bottom: 1px solid var(--border-soft);
}

.kv-list__row:last-child {
  border-bottom: 0;
}

.kv-list__label {
  flex: 0 1 auto;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

.kv-list__value {
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-base);
  text-align: right;
  overflow-wrap: anywhere;
}

.kv-list__value--muted {
  color: var(--text-muted);
}

.kv-list__sub {
  display: block;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .panel > .kv-list {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* --- Фильтры реестра (.filters): поиск, селекты с подписью, «Показаны N из
 *     M» справа. Телефон: поиск и селекты — по одному в строке на всю
 *     ширину, счётчик — отдельной строкой --- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.filters__search {
  flex: 1 1 260px;
  max-width: 380px;
}

.filters__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.filters__field .field__input {
  width: auto;
}

.filters__count {
  margin-left: auto;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .filters__search {
    flex-basis: 100%;
    max-width: none;
  }

  .filters__field {
    flex: 1 1 100%;
  }

  .filters__field .field__input {
    flex: 1 1 auto;
    width: 100%;
  }

  .filters__count {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* --- Строка над таблицей реестра (.registry-bar): фильтры, поиск, метки-
 *     фильтры. Реестр в .app-scroll без полей (их даёт .table-scroll) —
 *     у строки те же поля 32 / 24 / 16; таблица под ней — с отступом 16.
 *     (C2/C3 дорожка «Объекты и команда», аддитивно) --- */
.registry-bar {
  padding: var(--space-6) var(--page-gutter) 0;
}

.registry-bar + :is(.table-scroll, .empty-state) {
  padding-top: var(--space-4);
}

@media (max-width: 1179px) {
  .registry-bar {
    padding-left: var(--page-gutter-tablet);
    padding-right: var(--page-gutter-tablet);
  }
}

@media (max-width: 767px) {
  .registry-bar {
    padding: var(--space-4) var(--page-gutter-phone) 0;
  }

  .registry-bar + :is(.table-scroll, .empty-state) {
    padding-top: var(--space-3);
  }
}

/* --- Поиск с лупой слева (.search): иконка — ui_icon(:search) --- */
.search {
  position: relative;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  translate: 0 -50%;
  color: var(--text-muted);
  pointer-events: none;
}

.search .search__input {
  padding-left: calc(var(--space-3) + var(--space-4) + var(--space-1-5));
}

/* ============================================================
 * Мастер нового договора и формы: степпер, карточки типа арендатора,
 * поля (подпись 13/18·500 над полем, поле 36 с радиусом 8, фокус — рамка
 * акцентом и кольцо, ошибка — рамка --field-error-border и текст 12/16
 * под полем), футер навигации. Телефон: одна колонка, шрифт полей 16,
 * кнопки отправки — на всю ширину в липкой панели
 * ============================================================ */

.wizard {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-muted);
}

.stepper__item--done {
  color: var(--text-secondary);
}

.stepper__item--active {
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 600;
}

.stepper__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--counter-size);
  height: var(--counter-size);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-pill);
  background: var(--neutral-bg);
  color: var(--neutral);
  font-size: var(--font-size-chip);
  line-height: var(--line-height-label);
  font-weight: 600;
}

.stepper__item--done .stepper__num {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.stepper__item--active .stepper__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.wizard__heading {
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
}

.wizard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

/* Карточки «Физлицо / ИП / Юрлицо» — крупные кнопки-варианты шага 1 */
.type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.type-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-3-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.type-card:hover {
  border-color: var(--accent);
}

.type-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.type-card--selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.type-card__title {
  font-size: var(--font-size-base);
  font-weight: 600;
}

.type-card__hint {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

/* Поля формы */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
}

.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-field-label);
  line-height: var(--line-height-secondary);
  font-weight: 500;
  color: var(--text);
}

.field__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field__input {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

textarea.field__input {
  height: auto;
  min-height: calc(2 * var(--control-height));
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.field__input::placeholder {
  color: var(--text-muted);
}

/* Ошибка: рамка поля и текст под полем; у поля — aria-invalid */
.field__input[aria-invalid="true"],
.field__input--error {
  border-color: var(--field-error-border);
}

.field__input[aria-invalid="true"]:focus,
.field__input--error:focus {
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.field__input:disabled {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.field__input--mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
}

.field__input--num {
  text-align: right;
}

.field__hint {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

.field__error {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--danger);
}

/* Кнопки формы (.form-actions): в строку; на телефоне — во всю ширину в
 * липкой панели снизу с отступом под домашнюю полосу */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Телефон: одна колонка, поля во всю ширину, шрифт полей 16 — иначе iOS
 * Safari увеличивает страницу при фокусе. Страховка для полей экранов без
 * .field__input — только в CRM (layout application, body.app-body) */
@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .field__row {
    flex-wrap: wrap;
  }

  .field__input,
  .field__input--mono {
    font-size: var(--font-size-field-phone);
  }

  .app-body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
    font-size: var(--font-size-field-phone);
  }

  .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border-panel);
  }

  .form-actions > :is(.btn, form),
  .form-actions > form .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Живой флаг Росреестра: атрибут hidden обязан побеждать display:flex
 * класса .reason (Stimulus переключает именно hidden) */
.reason[hidden] {
  display: none;
}

/* Значение статуса ЕГРЮЛ: зелёное «Действующая» / красный флаг */
.wizard-status--ok {
  color: var(--success);
  font-weight: 600;
}

.wizard-status--danger {
  color: var(--danger);
  font-weight: 600;
}

/* Строка роли на шаге контактов: роль + два поля */
.contact-role {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) 1fr 1fr;
  gap: var(--space-2-5) var(--space-3-5);
  align-items: start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.contact-role:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contact-role__role {
  font-weight: 600;
}

.contact-role__hint {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .contact-role {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Футер навигации мастера; на телефоне — липкая панель, кнопки на всю
 * ширину (подсказка — над ними) */
.wizard-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
}

@media (max-width: 767px) {
  .wizard-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .wizard-footer > :is(.btn, form),
  .wizard-footer > form .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .wizard-footer .wizard-footer__hint {
    order: -1;
    flex-basis: 100%;
    margin-left: 0;
  }
}

.wizard-footer__hint {
  margin-left: auto;
  font-size: var(--font-size-hint);
  color: var(--text-muted);
}

/* Скрытый submit-приёмник implicit submission (Enter в полях формы) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* Узкая колонка по содержимому: не даёт второстепенным колонкам распухать
   и отбирать ширину у главных (название/адрес в реестрах) */
.cell--fit {
  width: 1%;
  white-space: nowrap;
}

/* Баннер лицензии коробки (Шаг 10): режим просмотра, не блокировка */
.license-banner {
  padding: 10px 16px;
  font-size: 13px;
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
  color: var(--warning);
}

.license-banner code {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Приостановка компании платформой (Р-63, O4) — рядом с баннером лицензии */
.account-status-banner {
  padding: 10px 16px;
  font-size: 13px;
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
  color: var(--warning);
}

/* Баннер сеанса поддержки (O5): сотрудник платформы в чужой компании */
.support-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
}

.support-banner form {
  margin-left: auto;
}

.support-banner__end {
  border: 1px solid var(--border-control);
  background: transparent;
  border-radius: 6px;
  padding: 2px 10px;
  cursor: pointer;
}