/* screens.css — стили волны 2 (исполнитель D). Общие компоненты — в components.css,
   здесь только специфичное для экранов: дашборд, список арендаторов, ЖКХ, генератор,
   черновики, помещения, качество данных, формы, логин. Подключается после components.css. */

/* ---------- Общее ---------- */
.ar-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ar-row__sub--flex { display: flex; gap: 4px; align-items: baseline; min-width: 0; }
.ar-row__sub--flex > .ar-nowrap { flex: none; }
.ar-nowrap { white-space: nowrap; }
.ar-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-stats--3 .ar-stat__num { font-size: 22px; }
/* Исключение из правила «капс не мельче 12 px» (design_v3 §2.7): в плитке шириной
   85 px «АРЕНДАТОРЫ» требует 95–100 px даже при letter-spacing 0 — замерено
   probe16.py на 390 px. 12 px здесь режет слово, поэтому оставлено 11. */
.ar-stats--3 .ar-stat__label { font-size: 11px; letter-spacing: .03em; }
.ar-inline-list { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ar-t-cap--strong { color: var(--ar-ink-2); font-weight: 500; }
.ar-link-quiet { color: inherit; text-decoration: none; }
a.ar-link-quiet:hover { text-decoration: none; }
a.ar-card-glass.ar-link-quiet { display: block; transition: background .12s, border-color .12s; }
a.ar-card-glass.ar-link-quiet:hover { background: #fff; border-color: var(--ar-line); }
a.ar-card-glass.ar-link-quiet:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-card--tight { padding: 12px 14px; }
.ar-card__head--start { align-items: flex-start; }
.ar-hero-sub .ar-badge { vertical-align: 1px; }

/* Липкая строка поиска + чипы (арендаторы). Липнет внутри скроллера под nav.top на десктопе. */
.ar-searchbar {
  position: sticky; top: var(--ar-topnav-h, 0px); z-index: 5;
  background: var(--ar-screen-solid);
  padding: 6px 0 10px; margin: 0 0 6px;
}
.ar-searchbar .ar-search .ar-icon { color: var(--ar-ink-3); }
/* Внутри липкой строки живёт .ar-toolbar (§2): поиск flex:1 + чипы в одну
   строку с горизонтальной прокруткой. Свой нижний отступ панель не даёт —
   иначе между двумя липкими слоями проглядывают строки таблицы (регрессия N1). */
.ar-searchbar .ar-toolbar { margin-bottom: 0; }
@media (min-width: 900px) {
  .ar-searchbar { padding: 8px 0 12px; margin-bottom: 0; }
  .ar-searchbar .ar-toolbar > .ar-search { flex: 1 1 300px; max-width: 420px; }
}
.ar-search__clear { display: none; }
.ar-search--filled .ar-search__clear { display: inline-flex; }
.ar-search__clear { background: none; border: 0; color: var(--ar-ink-3); width: 28px; height: 28px; border-radius: 999px; cursor: pointer; align-items: center; justify-content: center; }
.ar-search__clear:hover { background: rgba(26,25,23,.06); color: var(--ar-ink); }

/* Меню «⋯» (.ar-kebab) переехало в components.css: теперь это общий компонент
   строки таблицы, а не приём одной страницы черновиков (DESIGN_v2_SPEC §2). */

/* Индикатор состояния (поллер Сбера) */
.ar-status-line { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--ar-fs-cap) var(--ar-font); color: var(--ar-ink-3); }
.ar-status-line .ar-icon { width: 14px; height: 14px; }
.ar-status-line--danger { color: var(--ar-danger-text); }
.ar-status-line--ok .ar-icon { color: var(--ar-success-text); }
.ar-status-line__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ar-ink-3); flex: none; }
.ar-status-line--ok .ar-status-line__dot { background: var(--ar-success); }
.ar-status-line--danger .ar-status-line__dot { background: var(--ar-danger); }

/* ---------- Дашборд ---------- */
.dash-top { margin-bottom: 18px; }
.dash-hero { padding: 14px 0 6px; }
.dash-hero__tiers { margin-top: 10px; font-weight: 500; }
.dash-hero__tiers b { font-weight: 700; }
.dash-hero__note { margin-top: 12px; }
.dash-hero__cta { margin-top: 14px; align-items: center; }
/* Сводка дашборда: 5 пар в одну полосу; ссылки не подчёркиваются */
.dash-summary { border-radius: var(--ar-r-card); border-bottom: 1px solid var(--ar-line); margin-bottom: 14px; gap: 12px 26px; }
.dash-summary a.ar-summary__item { text-decoration: none; color: inherit; border-radius: 8px; padding: 4px 8px; margin: -4px -8px; transition: background .12s; }
.dash-summary a.ar-summary__item:hover { background: var(--ar-frost-bg-muted); }
.dash-summary a.ar-summary__item:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.dash-split { margin-bottom: 0; }
/* «Что сделать сегодня»: 3–5 дел с суммой и ссылкой. Тёмных кнопок нет —
   главное действие экрана одно и живёт в hero (§1). */
.dash-todo { margin-bottom: 14px; }
.dash-todo__row:hover .ar-row__title { text-decoration: underline; }
.dash-todo__row:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 8px; }
.dash-todo__text { line-height: 1.4; margin-top: 2px; }
.dash-todo__sum { font-size: 15px; }
.dash-todo__sum--danger { color: var(--ar-danger-text); }
.dash-todo__cta { display: block; color: var(--ar-ink-3); margin-top: 2px; white-space: nowrap; }
@media (max-width: 700px) {
  .dash-todo__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dash-todo__row .ar-row__right { max-width: 40%; }
}
.dash-activity__row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--ar-line); align-items: start; }
.dash-activity__row:last-child { border-bottom: 0; }
.dash-activity__when { font: 500 var(--ar-fs-cap)/1.35 var(--ar-font); color: var(--ar-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-activity__text { font: 400 var(--ar-fs-sub)/1.4 var(--ar-font); color: var(--ar-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-activity__text a { color: inherit; text-decoration: none; }
.dash-activity__text a:hover { text-decoration: underline; }
.dash-activity__who { color: var(--ar-ink-3); }
@media (min-width: 900px) {
  .dash-top { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: stretch; }
  .dash-hero { padding: 8px 0 4px; }
  .dash-split { grid-template-columns: 1fr; align-content: center; }
  .dash-split .ar-stat__num { font-size: 24px; }
}

/* ---------- Список арендаторов ---------- */
.tl-card { padding: 12px 14px; margin-bottom: 10px; }
.tl-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tl-card__name { font: 600 15px var(--ar-font); color: var(--ar-ink); text-decoration: none; }
.tl-card__name:hover { text-decoration: underline; }
/* §2 «Мобильная карточка»: одна кнопка во всю ширину + «⋯» для остального */
.tl-card__foot { display: flex; gap: 8px; align-items: center; margin-top: 11px; padding-top: 10px; border-top: 0.5px solid var(--ar-line); }
.tl-card__act { flex: 1; justify-content: center; }
.tl-contract { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 0.5px solid var(--ar-line); }
.tl-contract__where { color: var(--ar-ink); text-decoration: none; font-weight: 500; }
.tl-contract__where:hover { text-decoration: underline; }
/* Обычный inline-поток (не flex): разделители .ar-sep приклеены к своему куску
   и не повисают в конце строки при переносе (design_v2 §3 Р6). */
.tl-contract__term { margin-top: 2px; }
.tl-contract__right { text-align: right; white-space: nowrap; flex: none; }
.tl-contract__rent { font: 700 15px var(--ar-font); color: var(--ar-ink); letter-spacing: -.01em; }
.tl-contract__rent--disc { color: var(--ar-green-ink); }
.tl-contract__right .ar-badge { margin-top: 4px; }
.tl-term--warn { color: var(--ar-warning-text); font-weight: 500; }
.tl-term--expired { color: var(--ar-ink-2); font-weight: 500; }
.tl-group { margin-top: 22px; }
.tl-group > summary { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--ar-fs-sub) var(--ar-font); cursor: pointer; padding: 10px 0; color: var(--ar-on-blue-2); min-height: 40px; }
.tl-group__body { margin-top: 8px; }
.tl-card--archived { opacity: .75; }
.tl-empty { display: none; }
.tl-filtered-empty .tl-empty { display: block; }
/* Десктоп: таблица вместо карточек */
.tl-table th[data-sort] { cursor: pointer; user-select: none; }
.tl-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.tl-sort:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 4px; }
.tl-table th[data-sort]:hover { color: var(--ar-ink); }
.tl-table th[data-sort] .ar-icon { width: 12px; height: 12px; vertical-align: -2px; margin-left: 2px; opacity: 0; transition: opacity .12s, transform .12s; }
.tl-table th[aria-sort="ascending"] .ar-icon, .tl-table th[aria-sort="descending"] .ar-icon { opacity: 1; }
.tl-table th[aria-sort="descending"] .ar-icon { transform: rotate(180deg); }
.tl-table td .ar-badge { vertical-align: middle; }
/* Ширины колонок заданы явно: при table-layout:auto лишнее место уходило в
   «Срок» и «Пунктуальность», а имя и адрес переносились в 2–3 строки (§4 п.5). */
.tl-table { table-layout: fixed; }
.tl-table td:first-child, .tl-table th:first-child { width: 22%; }
.tl-table td:nth-child(2), .tl-table th:nth-child(2) { width: 16%; }
.tl-table td:nth-child(3), .tl-table th:nth-child(3) { width: 104px; }
/* Колонке срока не хватало 24 px: «до 30 сен 2026 · 20 дн.» вылезало на точку
   статуса. Шапкам «Оплата · сен 2026» и «Пунктуальность» — двух строк
   (приёмка design_final §2.2). */
.tl-table td.tl-td-term, .tl-table th:nth-child(4) { white-space: nowrap; width: 178px; }
.tl-table td.tl-td-term { overflow: hidden; text-overflow: ellipsis; }
.tl-table td:nth-child(5), .tl-table th:nth-child(5) { width: 118px; }
.tl-table td:nth-child(6), .tl-table th:nth-child(6) { width: 106px; }
/* Шапки «Оплата · сен 2026» и «Пунктуальность» не влезали в 118 и 106 px и
   обрезались: разрешаем им две строки (у кнопки сортировки свой nowrap). */
.tl-table th:nth-child(5), .tl-table th:nth-child(6) { white-space: normal; line-height: 1.15; }
.tl-table th:nth-child(5) .tl-sort, .tl-table th:nth-child(6) .tl-sort { white-space: normal; text-align: left; }
.tl-table th:nth-child(5) .tl-sort, .tl-table th:nth-child(6) .tl-sort { display: inline; }
/* Имя и подпись — в одну строку каждое: колонка узкая, перенос ломает ритм */
.tl-table .tl-table__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-table .tl-table__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* §2: колонка действий фиксирована; для этой таблицы хватает двух контролов */
.tl-table td.ar-table__actions, .tl-table th.ar-table__actions { width: 150px; }
/* §2 «Таблица» и §4 п.5: имя 14.5/550, подпись 12.5 — строка держится в 56 px.
   Адрес здания не переносится (ellipsis), иначе колонка растит строку до трёх строк. */
.tl-table .tl-table__name { font: 550 14.5px/1.2 var(--ar-font); color: var(--ar-ink); text-decoration: none; }
.tl-table .tl-table__name:hover { text-decoration: underline; }
.tl-table .tl-table__sub { font: 400 12.5px/1.25 var(--ar-font); color: var(--ar-ink-3); margin-top: 2px; }
.tl-table td:nth-child(2) > a { display: block; font: 500 13.5px/1.2 var(--ar-font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-table tr[hidden] { display: none; }
.tl-table-wrap { display: none; }
@media (min-width: 900px) {
  .tl-cards { display: none; }
  .tl-table-wrap { display: block; }
}

/* ---------- Формы ---------- */
.ar-form small.ar-hint--warn { color: var(--ar-warning-text); }
.ar-form .ar-hint--changed { color: var(--ar-warning-text); font-weight: 500; }
details.ar-form__details { border: 1px solid var(--ar-line); border-radius: 14px; padding: 0 14px; margin: 18px 0 14px; background: var(--ar-frost-bg-muted); }
details.ar-form__details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 46px; font: 600 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink); }
details.ar-form__details > summary::-webkit-details-marker { display: none; }
details.ar-form__details > summary::before { content: none; }
details.ar-form__details > summary .ar-icon { transition: transform .18s ease; color: var(--ar-ink-3); }
details.ar-form__details[open] > summary .ar-icon--chev { transform: rotate(180deg); }
details.ar-form__details > .ar-form__details-body { padding: 4px 0 14px; }
.ar-form .field[hidden], .ar-form .field-row[hidden] { display: none; }
.ar-form__danger { margin-top: 28px; padding-top: 18px; border-top: 0.5px solid var(--ar-line); }
.ar-form__danger .ar-btn { width: 100%; }
/* «Показать пароль» — переключатель внутри поля */
.ar-pwfield { position: relative; }
.ar-pwfield input { padding-right: 84px !important; }
.ar-pwfield__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 32px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ar-track); color: var(--ar-ink-2); font: 500 12px var(--ar-font);
}
.ar-pwfield__toggle:hover { background: #e0d9ca; color: var(--ar-ink); }
.ar-form .ar-pwfield label { display: block; }

/* ---------- ЖКХ: одна разметка (таблица), на мобильном строки становятся карточками ---------- */
.util-input {
  width: 100%; height: 40px; padding: 0 10px;
  border: 1px solid var(--ar-line); border-radius: 10px; background: #fff;
  font: 600 15px var(--ar-font); color: var(--ar-ink); outline: none;
  text-align: right; font-variant-numeric: tabular-nums;
  transition: border-color .12s, box-shadow .12s, background .3s; box-sizing: border-box;
}
.util-input:focus { border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(26,25,23,.10); }
.util-input:placeholder-shown { color: var(--ar-ink-3); font-weight: 400; }
.util-input--sm { height: 36px; font-size: 14px; }
.util-input--text { text-align: left; font-weight: 400; }
.util-input.is-saved { background: var(--ar-green-soft); border-color: var(--ar-green); }
.util-input.is-error { border-color: var(--ar-danger); }
.util-sublabel { display: block; font: 600 var(--ar-fs-cap) var(--ar-font); color: var(--ar-ink-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.util-saved { font: 500 var(--ar-fs-cap) var(--ar-font); color: var(--ar-success-text); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.util-saved.is-on { opacity: 1; }
.util-saved--error { color: var(--ar-danger-text); }
.util-name { font: 550 14.5px/1.2 var(--ar-font); color: var(--ar-ink); text-decoration: none; }
.util-name:hover { text-decoration: underline; }
.util-extras { margin-top: 3px; }
.util-costs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.util-costs__num { font: 700 16px var(--ar-font); color: var(--ar-ink); letter-spacing: -.01em; white-space: nowrap; }
/* Значения в строке — текст, а не поля (§4 п.6: ≤ 2 видимых контрола в строке).
   Правка живёт в раскрывающейся панели .util-edit ниже строки. */
.util-val { font: 600 15px/1.2 var(--ar-font); color: var(--ar-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.util-val--empty { color: var(--ar-ink-3); font-weight: 400; }
.util-val--warn { color: var(--ar-warning-text); font-weight: 500; font-size: 13px; }
.util-progress { margin-top: 5px; }
.util-overline { display: block; margin-top: 3px; }
.util-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.util-actions:empty { display: none; }
/* Панель правки строки */
.util-edit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.util-edit__title { font: 600 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink-2); }
.util-edit__hint { color: var(--ar-ink-3); }
.util-more__body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.util-more__body > .util-more__wide { grid-column: 1 / -1; }
.util-more-toggle { position: relative; }
.util-more-toggle__n:not(:empty) { font: 700 var(--ar-fs-cap) var(--ar-font); color: var(--ar-ink-2); margin-right: 1px; }
.util-more-toggle .ar-icon { transition: transform .18s ease; }
.util-tenant.is-open .util-more-toggle .ar-icon { transform: rotate(180deg); }
.util-totals { margin-top: 14px; }
.util-totals__num { font: 650 20px/1.15 var(--ar-font); margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.util-totals__num--pos { color: var(--ar-success-text); }
.util-totals__num--neg { color: var(--ar-danger-text); }
.util-building-header {
  margin: 22px 0 10px; padding: 10px 14px;
  background: var(--ar-glass-bg); border: 1px solid var(--ar-glass-border); border-radius: 12px;
  font: 700 15px var(--ar-font); color: var(--ar-on-blue); letter-spacing: -.005em;
}
.util-table tr[hidden] { display: none !important; }

/* Мобильная раскладка (< 900px): таблица → карточки */
@media (max-width: 899px) {
  .util-table, .util-table tbody, .util-table tfoot { display: block; }
  .util-table thead { display: none; }
  .util-table tr.util-group { display: block; }
  .util-table tr.util-group td { display: block; padding: 0; background: none; border: 0; }
  .util-table tr.util-tenant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "name name"
      "electro kwh"
      "limit over"
      "extra extra"
      "costs costs"
      "act act";
    gap: 10px 10px;
    background: var(--ar-frost-bg); border-radius: var(--ar-r-card);
    box-shadow: var(--ar-shadow-card); padding: 14px 16px; margin-top: 12px;
  }
  /* Открытая панель приклеена к карточке снизу — низ карточки распрямляется */
  .util-table tr.util-tenant.is-open { border-radius: var(--ar-r-card) var(--ar-r-card) 0 0; }
  .util-table tr.util-tenant td { display: block; padding: 0; border: 0; min-width: 0; background: none !important; }
  .util-table tr.util-tenant td.u-name { grid-area: name; }
  .util-table tr.util-tenant td.u-costs { grid-area: costs; }
  .util-table tr.util-tenant td.u-electro { grid-area: electro; }
  .util-table tr.util-tenant td.u-kwh { grid-area: kwh; }
  .util-table tr.util-tenant td.u-limit { grid-area: limit; }
  .util-table tr.util-tenant td.u-over { grid-area: over; }
  .util-table tr.util-tenant td.u-extra { grid-area: extra; }
  .util-table tr.util-tenant td.u-extra.u-extra--empty { display: none; }
  /* §2 «Мобильная карточка»: одна кнопка действия во всю ширину */
  .util-table tr.util-tenant td.u-actions { grid-area: act; }
  .util-table tr.util-tenant .util-more-toggle { width: 100%; justify-content: space-between; }
  .util-table tr.util-tenant .util-costs { justify-content: space-between; padding-top: 8px; border-top: 0.5px solid var(--ar-line); }
  .util-table tr.util-tenant .util-costs__label { margin-right: auto; }
  .util-table tr.util-tenant .util-sublabel--mobile { display: block; margin-bottom: 2px; }
  .util-table tr.util-tenant .util-saved { margin-left: 6px; }
  .util-table tr.util-tenant .util-saved:not(.is-on) { display: none; }
  .util-table tr.util-tenant td.u-electro, .util-table tr.util-tenant td.u-kwh,
  .util-table tr.util-tenant td.u-limit, .util-table tr.util-tenant td.u-over { text-align: left; }
  .u-extra__none { display: none; }
  .util-table tr.util-more-row { display: block; background: var(--ar-frost-bg); border-radius: 0 0 var(--ar-r-card) var(--ar-r-card); box-shadow: var(--ar-shadow-card); padding: 4px 16px 14px; }
  .util-table tr.util-more-row td { display: block; padding: 0; border: 0; background: none !important; }
  .util-table tfoot tr { display: block; }
  .util-table tfoot td { display: block; padding: 0; position: static; border: 0; background: none; }
}
/* Десктоп (≥ 900px): настоящая таблица со sticky thead */
@media (min-width: 900px) {
  .util-table { width: 100%; table-layout: auto; }
  .util-table th, .util-table td { padding: 10px 8px; }
  .util-table th:first-child, .util-table td:first-child { padding-left: 14px; }
  .util-table th:last-child, .util-table td:last-child { padding-right: 10px; }
  .util-table .util-sublabel--mobile { display: none; }
  .util-table .util-more-toggle__label { display: none; }
  /* §4 п.5 «плотность»: 8 px по вертикали + имя в одну строку держат строку
     в 52 px (было 58 с полями ввода) — в первый экран входит на строку больше */
  .util-table tbody td { padding: 8px 14px; }
  .util-table .ar-table__group td { padding: 6px 14px; }
  .util-table td.u-name { width: 218px; }
  .util-table td.u-name .util-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .util-table td.u-name .util-extras { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .util-table td.u-electro, .util-table td.u-kwh { width: 116px; }
  .util-table td.u-limit { width: 96px; }
  .util-table td.u-over { width: 156px; }
  .util-table td.u-extra { min-width: 150px; }
  .util-table td.u-costs { width: 150px; text-align: right; }
  .util-table td.u-actions, .util-table th.ar-table__actions { width: 56px; text-align: right; }
  /* Вся строка — кнопка «править»: значения в ней текстовые, поля живут в панели */
  .util-table tbody tr.util-tenant { cursor: pointer; }
  .util-table tbody tr.util-tenant.is-open td { background: #fdfcf9; }
  .util-table .util-input { height: 34px; font-size: 14px; padding: 0 8px; }
  .util-table .util-costs { flex-direction: column; align-items: flex-end; gap: 2px; }
  .util-table .util-costs__num { font-size: 15px; }
  .util-table .u-extra__text { font-size: var(--ar-fs-cap); line-height: 1.4; }
  .util-table .util-actions .ar-btn { height: 30px; padding: 0 10px; font-size: 12px; }
  .util-table tr.util-more-row { background: var(--ar-frost-bg-muted); }
  .util-table tr.util-more-row > td { padding: 12px 14px 14px; }
  .util-table tr.util-more-row .util-more__body { grid-template-columns: repeat(4, 1fr); gap: 10px 12px; }
  .util-table tr.util-more-row .util-more__body > .util-more__wide { grid-column: span 2; }
  .util-table .util-building-header { margin: 0; background: none; border: 0; padding: 0; font: 600 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink-2); }
  .util-table .util-extras { margin-top: 1px; }
  .util-table .util-saved { display: block; margin-top: 2px; }
  .util-more-toggle { width: auto; min-width: 34px; height: 34px; padding: 0 8px; gap: 3px; }
  .util-more-toggle[aria-expanded="true"] { background: var(--ar-track); }
  .util-more-toggle[aria-expanded="true"] .ar-icon { transform: rotate(180deg); }
  .util-wrap { background: var(--ar-frost-bg); border-radius: var(--ar-r-card); box-shadow: var(--ar-shadow-card); }
  /* Итог не липкий: те же три числа стоят в сводке над таблицей, а 88 px внизу
     экрана — это ещё полторы строки данных (§4 п.5). */
  .util-table tfoot td { padding: 12px 14px; position: static; }
  .util-totals { margin: 0; background: none; border: 0; padding: 0; }
}

/* ---------- Генератор договоров: степпер ---------- */
.gen-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.gen-stepper__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--ar-line); background: #fff;
  cursor: pointer; text-align: left; min-height: 52px; font-family: var(--ar-font);
}
.gen-stepper__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--ar-track); color: var(--ar-ink-2); font: 700 var(--ar-fs-cap) var(--ar-font); }
.gen-stepper__label { font: 600 12px/1.2 var(--ar-font); color: var(--ar-ink-2); }
.gen-stepper__btn[aria-current="step"] { background: var(--ar-green-soft); border-color: var(--ar-green); }
.gen-stepper__btn[aria-current="step"] .gen-stepper__num { background: var(--ar-black); color: #fff; }
.gen-stepper__btn[aria-current="step"] .gen-stepper__label { color: var(--ar-ink); }
.gen-stepper__btn.is-done .gen-stepper__num { background: var(--ar-green); color: var(--ar-green-ink); }
.gen-stepper__btn.is-invalid .gen-stepper__num { background: rgba(217,83,74,.14); color: var(--ar-danger-text); }
.gen-stepper__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .gen-stepper { gap: 5px; }
  .gen-stepper__label { font-size: 11px; }
  .gen-stepper__btn { padding: 7px 7px; min-height: 50px; }
  .gen-bar-word { display: none; }
  #gen-left-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.gen-step[hidden] { display: none; }
.gen-step__nav { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.gen-step__nav .ar-btn--primary { margin-left: auto; }
.gen-card { margin-bottom: 14px; padding: 14px 16px; }
.gen-prefill { display: grid; gap: 8px; }
.gen-registry { padding: 12px 14px; margin-bottom: 14px; }
.gen-registry__title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ar-form .ar-radio-tile.is-checked { background: var(--ar-green-soft); border-color: var(--ar-green); }
.gen-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gen-tiles .ar-radio-tile { min-width: 150px; }

/* ---------- Черновики ---------- */
.drafts-card { margin-bottom: 12px; padding: 13px 15px; }
.drafts-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.drafts-card__actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--ar-line); }
.drafts-card__actions form { margin: 0; flex: 1 1 auto; display: flex; }
.drafts-card__actions .ar-btn--primary { flex: 1 1 auto; }
.drafts-card__actions details.ar-kebab { margin-left: auto; }

/* ---------- Помещения ---------- */
.prop-unit { padding: 10px 0; border-bottom: 0.5px solid var(--ar-line); }
.prop-unit:last-child { border-bottom: 0; }
.prop-unit__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.prop-unit__label { font: 600 15px var(--ar-font); color: var(--ar-ink); }
.prop-unit__area { font: 700 15px var(--ar-font); color: var(--ar-ink); letter-spacing: -.01em; }
.prop-unit__right { text-align: right; white-space: nowrap; }
.prop-unit__right .ar-badge { margin-top: 4px; }
.prop-card__foot { margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--ar-line); display: flex; justify-content: flex-end; }
.prop-card__foot .ar-btn { height: 36px; }
/* «Помещений нет» — одна строка на здание (полный ar-empty только когда нет зданий) */
.prop-empty {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 10px; border-top: 0.5px solid var(--ar-line);
}
.prop-empty > span { flex: 1 1 180px; min-width: 0; }
.prop-empty .ar-btn { height: 36px; flex: none; }

/* ---------- Качество данных ---------- */
.dq-issue { padding: 5px 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.dq-issue__icon { flex-shrink: 0; padding-top: 1px; }
.dq-issue__field { display: inline-block; font: 600 var(--ar-fs-cap)/1 var(--ar-font); color: var(--ar-ink-2); background: var(--ar-track); padding: 3px 6px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; white-space: nowrap; }
.dq-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.dq-diff { display: block; border: 0.5px solid var(--ar-line); padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; cursor: pointer; background: #fff; text-transform: none; letter-spacing: 0; }
.dq-diff__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 600 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink); }
.dq-diff__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: var(--ar-fs-sub); }
.dq-diff__val { padding: 6px 8px; border-radius: 8px; overflow-wrap: anywhere; color: var(--ar-ink); }
.dq-diff__val--ours { background: rgba(208,152,42,.12); }
.dq-diff__val--theirs { background: var(--ar-green-soft); }
dialog.ar-dialog.ar-dialog--wide { width: min(780px, calc(100vw - 32px)); }

/* ---------- Логин ---------- */
.login-brand__logo { border-radius: 32%; }

/* ---------- Страница ошибки ---------- */
.err-code { font-size: 80px; font-weight: 800; letter-spacing: -.04em; margin: 12px 0 8px; }
@media (max-width: 700px) { .err-code { font-size: 64px; } }

/* ---------- Досрочное расторжение договора (app/termination.py) ----------
   Экран /contracts/<id>/terminate и блок «Расторжение» на карточке договора.
   Тёмная кнопка на экране одна — «Расторгнуть договор» в подвале формы;
   всё остальное контурное. Основания — вертикальные плитки с цитатой
   пункта, чтобы формулировка договора читалась целиком, а не обрезком. */

.trm-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ar-form .trm-reason { align-items: flex-start; padding: 12px 14px; }
.ar-form .trm-reason input { margin-top: 3px; flex: none; }
.trm-reason__body { display: block; min-width: 0; }
.trm-reason__label { display: block; font: 600 var(--ar-fs-body) var(--ar-font); color: var(--ar-ink); }
.trm-reason__hint { display: block; margin-top: 2px; font: 400 var(--ar-fs-cap)/1.45 var(--ar-font); color: var(--ar-ink-3); }
.trm-quote {
  display: block; margin-top: 8px; padding: 8px 10px;
  background: var(--ar-frost-bg-muted); border-left: 2px solid var(--ar-line);
  border-radius: 0 8px 8px 0;
  font: 400 var(--ar-fs-cap)/1.5 var(--ar-font); color: var(--ar-ink-2);
  overflow-wrap: anywhere;
}
.trm-quote b { font-weight: 600; color: var(--ar-ink); }
.trm-quote__src { font-style: normal; color: var(--ar-ink-3); }
.trm-quote--none { color: var(--ar-ink-3); }

/* Расчёт последнего месяца и остатка обеспечения — цифра колонкой, без коробок */
.trm-calc { padding: 12px 14px; border: 1px solid var(--ar-line); border-radius: 12px; background: #fff; }
.trm-calc--quiet { background: var(--ar-frost-bg-muted); }
.trm-calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.trm-calc__row--num { margin-top: 4px; flex-wrap: wrap; }
.trm-calc__label { font: 600 var(--ar-fs-body) var(--ar-font); color: var(--ar-ink); }
.trm-calc__days { font: 400 var(--ar-fs-cap) var(--ar-font); color: var(--ar-ink-3); white-space: nowrap; }
.trm-calc__num { font: 700 26px var(--ar-font); color: var(--ar-ink); letter-spacing: -.02em; }
.trm-calc__num--sm { font-size: 20px; }
.trm-calc .ar-t-cap { margin-top: 4px; }

/* Решение по обеспечению — сетка 2×2: три плитки в строку и одинокий хвост
   на второй — та же болезнь, что запрещена для панели фильтров (§2, §4 п.2) */
.trm-deps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.trm-dep-fields[hidden] { display: none; }
.trm-form .ar-note { margin: 12px 0; }

/* «После расторжения приложение потребует…» — обещание, а не украшение */
.trm-after {
  margin-top: 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--ar-green-soft); border: 1px solid var(--ar-green);
}
.trm-after__title { font: 600 var(--ar-fs-sub) var(--ar-font); color: var(--ar-ink); margin-bottom: 4px; }

/* Блок «Расторжение» на карточке договора */
.trm-card__reason { margin-bottom: 8px; }
.trm-card__row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 0.5px solid var(--ar-line); }
.trm-card__row > svg { flex: none; margin-top: 3px; }
.trm-card__row .ar-t-cap { margin-top: 3px; }
.trm-card__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--ar-line); }
.trm-card__acts form { margin: 0; }
.trm-card__acts .ar-t-cap { flex: 1 1 200px; min-width: 0; }
.trm-card__block { margin-top: 10px; }

@media (max-width: 700px) {
  .trm-calc__num { font-size: 22px; }
  .trm-deps { grid-template-columns: 1fr; }
  .trm-card__acts .ar-btn { width: 100%; justify-content: center; }
  .trm-card__acts form { flex: 1 1 100%; }
}