/* Экраны: финансы и показания, доли инвесторов, карточка квартиры, сводка оплаты.
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: правила ниже перекрывают правила выше.
   Свёрнуто из 13-tenants-allocations.css, 14-accounting.css, 15-unit-hub.css,
   16-investors-rent.css. Суммы набраны longhand: шорткат font: сбрасывал tabular-nums. */

/* Переключатель режима учёта (.accounting-modes) удалён вместе с самим
   режимом «Архив Excel»: после UNI-1 учёт один, и класс не создаёт ни один
   модуль web/js. */

/* --- Предпросмотр расчёта --- */
.accounting-preview {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--sunken);
  padding: 18px;
  margin-top: 15px;
}

/* Было `font: 24px Bahnschrift` — шорткат сбрасывал табличные цифры суммы. */
.accounting-preview strong {
  display: block;
  font-size: var(--text-24);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--pearl);
  margin: 8px 0;
}

.accounting-preview > strong {
  font-size: var(--text-34);
}

.accounting-preview .field {
  margin-top: 12px;
}

/* --- Показания счётчиков --- */
.reading-history-title {
  margin: 26px 0 16px;
}

.reading-charge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: var(--text-body);
  margin: 12px 0;
  color: var(--soft);
}

.reading-charge input {
  accent-color: var(--violet);
  width: 20px;
  height: 20px;
}

#reading-preview {
  padding: 0;
  border: 0;
}

#reading-preview[hidden] {
  display: none;
}

/* --- Периоды и месяцы --- */
.allocation-period {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-small);
  color: var(--soft);
}

.allocation-period select,
.allocation-period input[type='month'] {
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  min-height: var(--tap);
  padding: 9px 12px;
  color: var(--pearl);
  background: var(--raised);
  font-size: var(--text-body);
}

/* `.field`/`.reading-charge` заданы как display:flex — атрибута hidden браузеру
   не хватает, id-селектор перекрывает класс своей специфичностью. Раньше то
   же самое дублировал атрибут style в разметке (10-ledger.js) — строгая
   политика style-src 'self' его вырезает (SEC-4), поэтому первое состояние
   теперь только здесь; переключение уже открытой формы — через CSSOM
   (`field.style.display` в toggleField()), она под политику не подпадает. */
#commission-period-field[hidden],
#expense-category-field[hidden],
#deposit-withheld-field[hidden],
#rent-channel-investor-field[hidden] {
  display: none;
}

/* --- Доли инвесторов --- */
.allocations {
  border-top: 2px solid var(--violet);
}

.allocations > .panel-head {
  align-items: start;
}

.allocations .footnote {
  margin-top: 6px;
}

.allocations th {
  white-space: nowrap;
}

.allocation-sources {
  font-size: var(--text-body);
  color: var(--soft);
  margin-top: 14px;
}

.investor-share-settings {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}

.investor-share-settings > .panel-head {
  align-items: start;
}

.share-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  color: var(--soft);
  font-size: var(--text-body);
}

.share-row > span:first-child {
  flex: 1;
}

.share-row small {
  display: block;
  font-size: var(--text-small);
  color: var(--mist);
}

.share-row input {
  max-width: 96px;
  width: 96px;
  min-height: var(--tap);
  text-align: right;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--raised);
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
}

.share-row-focused {
  padding: 12px;
  background: var(--state-active);
  border: 1px solid var(--violet-edge);
  border-radius: var(--radius-md);
}

.share-row-focused > span:first-child {
  color: var(--pearl);
  font-weight: 700;
}

.shares-actions {
  margin-top: 20px;
}

.investor-object-shares .record small {
  font-size: var(--text-small);
}

/* --- Жильцы --- */
.detail-form > .passport-fields {
  grid-column: 1/-1;
  margin-top: 0;
}

.passport-fields .detail-form {
  margin-top: 10px;
}

/* --- Финансы: четыре крупные кнопки-действия (Г.1 аудита) --- */
/* Пять действий укладываются в один ряд на мониторе: при пороге 210px в ряд
   вставало четыре, и пятая кнопка оставалась сиротой во второй строке
   (VIS-1). auto-fit схлопывает лишнюю дорожку, поэтому пять кнопок делят
   ширину поровну, а на планшете и телефоне ряд по-прежнему переносится. */
.ledger-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 11px;
}

.ledger-action {
  min-height: 64px;
  padding: 14px 18px;
  text-align: left;
  border: 1px solid var(--violet-edge);
  background: var(--raised);
  color: var(--pearl);
  border-radius: var(--radius-md);
  font-size: var(--text-h3);
  font-weight: 650;
  transition:
    background 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}

.ledger-action:hover {
  background: var(--state-active);
  border-color: var(--violet);
  box-shadow: var(--glow-violet);
}

/* --- Карточка квартиры --- */
.unit-hub {
  padding: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  box-shadow: var(--shadow-1);
}

/* Первый экран карточки (Г.5 аудита): кто живёт, три цифры, действия. */
.unit-who {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  flex-wrap: wrap;
}

.unit-who h3 {
  font-size: var(--text-24);
  letter-spacing: -0.02em;
  color: var(--pearl);
}

.unit-who p {
  color: var(--soft);
  max-width: 52ch;
}

.unit-who-status {
  flex-shrink: 0;
}

.unit-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 18px 0;
}

.unit-fact {
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
}

.unit-fact > strong {
  display: block;
  margin-top: 8px;
  font-size: var(--text-h3);
  line-height: 1.3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pearl);
}

.unit-hub .unit-actions {
  margin-bottom: 0;
}

.hub-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid var(--border-subtle);
  padding: 16px 0;
}

.hub-row h3 {
  font-size: var(--text-h3);
}

.hub-row p {
  font-size: var(--text-body);
  color: var(--soft);
}

.hub-row .footnote {
  font-size: var(--text-small);
  max-width: 46ch;
}

.hub-row > button {
  align-self: start;
  flex-shrink: 0;
  font-size: var(--text-body);
}

.unit-hub .subtle-btn {
  padding-left: 0;
}

/* CLR-4: единственная строка-ссылка «Открыть карточку жильца →» в «Показать
   историю и настройки» — тот же шаг, что между панелями (.panel в
   04-components.css), чтобы не липнуть к соседям сверху и снизу. */
.unit-tenant-link {
  display: block;
  padding-left: 0;
  margin: 0 0 22px;
}

.current-tariff {
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  padding: 15px;
  border-radius: var(--radius-md);
  margin: 15px 0;
}

.current-tariff > strong {
  font-size: var(--text-h3);
  color: var(--pearl);
}

.current-tariff-row {
  background: var(--state-active);
}

/* Изменённая ставка в форме новой цены (Г.3 аудита): видно, что именно
   уедет в новую запись, а что осталось прежним. */
.field input.is-changed {
  border-color: var(--window);
  box-shadow: var(--glow-window);
}

#payment-settings-form,
#tariff-form {
  margin-top: 16px;
}

#expected-unit-form,
#vacate-unit-form {
  margin-top: 16px;
}

/* --- Сводка оплаты аренды --- */
/* Число столбцов считает не порог ширины, а сами плашки: чип «Часть оплаты»
   после XLS-1c набирается в одну строку со значком и на 1024 не помещался в
   пятую часть панели — надпись вылезала за рамку плашки. auto-fit ставит
   столько столбцов, сколько влезает по содержимому: пять на 1440, три на
   1024 и 768, один-два на телефоне (VIS-1). */
.rent-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.rent-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* Было `font: 23px Bahnschrift` — счётчик статуса терял табличные цифры. */
.rent-summary strong {
  font-size: var(--text-24);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--pearl);
}

.rent-notice {
  font-size: var(--text-small);
  white-space: normal;
  max-width: 240px;
  margin-top: 6px;
}

.detail-dialog .rent-notice {
  min-width: 130px;
}

.rent-operation-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rent-operation-fields[hidden] {
  display: none;
}

.rent-operation-fields > .footnote {
  grid-column: 1/-1;
}

/* CLR-4: стили панели «Инвесторам за месяц» (.investor-payouts, FIN-9,
   REQUIREMENTS.md п. 59) удалены вместе с investorPayoutPanel() в
   10-ledger.js — панель этого класса больше нигде не рисуется. Та же мысль
   («кому сколько уже можно отдать») теперь на рабочем столе своей разметкой
   (.desk-inv-table td.payout-due, 21-desk.css). */

/* ============================================================
   Телефон (POL-6, пачка 2). Настольная раскладка этим блоком не трогается.
   ============================================================ */
@media (max-width: 780px) {
  /* 9.1 (desk-3, мешает работать): «Сколько с какой квартиры» тянуло
     страницу вбок — scrollWidth 426 при clientWidth 322 (390) и 292 (360).
     Запрет поперечной прокрутки — решение владельца п. 56, разрешение сжать
     таблицу написано в этом же пункте. Заголовки получают перенос по словам
     (обычный: normal ломает строку на пробеле, не внутри слова). Одного
     переноса по пробелу мало: «Вознаграждение» и «Неизвестно» (money() у
     ещё не посчитанной суммы, 01-core.js) — каждое одно слово без пробела,
     14px/normal всё равно требует под него ≈161px без права переноса, и
     этого одного столбца хватает, чтобы стол снова уехал вбок. overflow-wrap:
     anywhere — запасной перенос ровно там, где слово не помещается целиком
     (переносит по пробелу первым делом, внутри слова — только когда деться
     некуда); на суммах не мешает — у money() разделитель разрядов неразрывный
     пробел (Intl.NumberFormat), «12 000 ₽» переносу по обычному пробелу не
     поддаётся и так. */
  .allocation-sources td,
  .allocation-sources th {
    padding: 8px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .allocation-sources td {
    font-size: var(--text-small);
  }

  /* 9.2 + 9.3 (desk-13, desk-14): подпись и значение стояли каждая своей
     строкой — 4 строки там, где хватает двух, 32px полей на каждую из
     четырёх секций дома («Управляющий», «Инвесторы и доли», хранитель,
     шаблоны тарифов). Подпись (h3) тише значения по кеглю и в разрядку —
     иначе она отличалась от строки под ней только весом.
     Разметка .hub-row не по этому файлу (24-tariffs-page.js, занят другой
     задачей) — заголовок и значение сводятся в одну строку через flex-wrap
     на их общей обёртке: у панели «Инвесторы и доли» под заголовком бывает
     несколько строк <p> (по одному инвестору) — они переносятся каждая на
     свою строку, заголовок встаёт перед первой. */
  .hub-row {
    padding: 10px 0;
  }

  .hub-row > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 4px;
  }

  .hub-row h3 {
    font-size: var(--text-small);
    letter-spacing: 0.04em;
  }

  .hub-row p {
    margin: 0;
  }

  /* 9.4 (desk-6, desk-29, мелочь): «Откуда взялась сумма» / «Сколько с какой
     квартиры» — без своего значка раскрытия (display: flex гасит родной
     треугольник summary), 16px лавандой читались как третье действие секции
     рядом с «Сменить хранителя». Значок — свой, без стороннего SVG и без
     правки JS (эти формы рисуют файлы других задач): уголок на рамках,
     поворот при открытии. Анимация — только если владелец включил движение
     (html[data-motion='on'], тот же приём, что у .panel-chevron). */
  .allocation-sources > summary {
    font-size: var(--text-small);
    gap: 8px;
  }

  .allocation-sources > summary:before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }

  .allocation-sources[open] > summary:before {
    transform: rotate(45deg);
  }

  html[data-motion='on'] .allocation-sources > summary:before {
    transition: transform 200ms var(--sc-ease-out, ease);
  }

  /* 9.5 (desk-25, мелочь): подпись под заголовком панели («Управляющий ·
     10% от полученной аренды») отстояла от него на 15px там, где заголовок
     и подпись должны стоять вплотную; нижний отступ (8px, из базового
     правила p) остаётся. */
  .panel-head .footnote {
    margin-top: 4px;
  }
}