/* ============================================================
 * Кабинет арендатора — разделы-списки (Р-105, этап E2): «Счета»,
 * «Договоры», «Платежи», блоки «Помещение» и «Стороны» карточки
 * договора, ссылка «Все счета» главной.
 * Компоненты — те же, что у главной и договора: группы .portal-card,
 * строки .portal-row, строки счетов главной (portal_home.css) и её
 * таблица бухгалтера (скоуп .portal-columns__main). Здесь — только новое:
 * фильтры, карточки договоров, платежи, страницы списка.
 * Mobile-first; от 900px — таблица счетов вместо карточек.
 * Только var(--ios-*); литералы — по списку в шапке portal.css.
 * ============================================================ */

/* --- Заголовок блока со ссылкой справа: «Счета · Все счета ›» --- */

.portal-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--ios-space-4);
}

.portal-section__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-touch-min);
  margin-bottom: var(--ios-space-3);
}

/* --- Фильтры «Счетов»: состояние ссылками-таблетками, договор списком,
 *     «Платежи» ссылкой. Таблетки — зона нажатия 44, выбранная — тёмная,
 *     как выбранная вкладка нижней панели (не только цветом: начертание) --- */

.portal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ios-space-3) var(--ios-space-6);
  margin-bottom: var(--ios-space-2);
}

.portal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ios-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-chips__item {
  display: flex;
}

.portal-body .portal-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-touch-min);
  padding: 0 var(--ios-space-4);
  border-radius: var(--ios-radius-pill);
  background: var(--ios-surface);
  color: var(--ios-text);
  font: var(--ios-type-button-nav);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ios-duration-fast) var(--ios-ease);
}

.portal-body .portal-chip:hover {
  background: var(--ios-tab-hover-bg);
  color: var(--ios-text);
  text-decoration: none;
}

.portal-body .portal-chip[aria-current="page"],
.portal-body .portal-chip[aria-current="page"]:hover {
  background: var(--ios-tab-current-bg);
  color: var(--ios-tab-current-text);
  font-weight: 600;
}

/* Договор — на телефоне во всю ширину: длинное «объект, помещение ·
 * № договора» не распирает страницу; на десктопе — по содержимому */
.portal-filters__lease {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ios-space-3);
  min-width: 0;
}

.portal-filters__field {
  flex: 1 1 auto;
  min-width: 0;
}

.portal-filters__select {
  max-width: 100%;
}

/* «Показать» нужна только без JS: auto-submit ставит hidden, а display
 * кнопки-таблетки иначе перебил бы его */
.portal-filters__apply[hidden] {
  display: none;
}

.portal-filters__payments {
  margin: 0;
}

.portal-filters__payments .portal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-touch-min);
}

/* Десктоп: фильтры в строку, «Платежи» — справа */
@media (min-width: 900px) {
  .portal-filters__lease {
    flex: 0 1 auto;
  }

  .portal-filters__select {
    width: auto;
  }

  .portal-filters__payments {
    margin-left: auto;
  }
}

/* --- Строка счёта в разделе: договор и периоды под номером, оплачено и
 *     остаток в раскрытии --- */

.portal-invoice__context {
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.portal-invoice__paid {
  margin: var(--ios-space-2) 0 0;
  padding: var(--ios-space-2) 0 0;
  border-top: 1px solid var(--ios-separator);
}

.portal-invoice__paid-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ios-space-3);
  font: var(--ios-type-secondary);
}

.portal-invoice__paid-row dt {
  color: var(--ios-text-secondary);
}

.portal-invoice__paid-row dd {
  margin: 0;
  white-space: nowrap;
}

/* --- Таблица раздела «Счета» (десктоп): столбцы «Договор», «Оплачено»,
 *     «Остаток» и дата оплаты под статусом. Остальное — таблица главной --- */

.portal-invoices-registry .portal-accounting {
  margin-top: var(--ios-space-4);
}

.portal-invoices-table__lease {
  overflow-wrap: break-word;
}

.portal-invoices-table__lease-number,
.portal-invoices-table__paid-on {
  display: block;
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
  font-variant-numeric: tabular-nums;
}

.portal-invoices-table__paid-on {
  margin-top: var(--ios-space-1);
  white-space: nowrap;
}

/* --- Пустые состояния разделов — по центру, на фоне --- */

.portal-list-empty {
  text-align: center;
}

.portal-list-empty .portal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-touch-min);
  margin-top: var(--ios-space-2);
}

/* --- Страницы списка: «Назад · Страница N из M · Дальше» --- */

.portal-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ios-space-2) var(--ios-space-6);
  margin-top: var(--ios-gap-section);
}

.portal-pager__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ios-space-1);
  min-height: var(--ios-touch-min);
  color: var(--ios-accent);
}

.portal-pager__link--prev::before {
  content: "‹";
  content: "‹" / "";
}

.portal-pager__link--next::after {
  content: "›";
  content: "›" / "";
}

.portal-pager__status {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

/* --- «Договоры»: карточки-ссылки. Нажимается вся карточка, но имя ссылки
 *     — номер договора: зона растянута псевдоэлементом ссылки --- */

.portal-leases__list {
  display: grid;
  gap: var(--ios-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-lease-card {
  position: relative;
  display: grid;
  gap: var(--ios-space-1);
  margin: 0;
  padding: var(--ios-space-4);
  transition: background-color var(--ios-duration-fast) var(--ios-ease);
}

.portal-lease-card:hover,
.portal-lease-card:focus-within {
  background: var(--ios-tab-hover-bg);
}

.portal-lease-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ios-space-2) var(--ios-space-3);
  margin: 0;
}

.portal-body .portal-lease-card__link {
  color: var(--ios-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.portal-lease-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ios-card-radius);
}

/* Фокус — кольцом по карточке, а не по строке номера */
.portal-body .portal-lease-card__link:focus-visible {
  outline: none;
}

/* Кольцо внутрь: группа .portal-card срезает выходящее за край */
.portal-body .portal-lease-card__link:focus-visible::after {
  outline: var(--ios-focus-width) solid var(--ios-focus);
  outline-offset: calc(-1 * (var(--ios-focus-width) + var(--ios-focus-offset)));
}

.portal-lease-card__object {
  margin: 0;
}

.portal-lease-card__facts {
  display: grid;
  gap: var(--ios-space-1);
  margin: var(--ios-space-1) 0 0;
}

.portal-lease-card__fact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ios-space-2);
  font: var(--ios-type-secondary);
}

.portal-lease-card__fact dt {
  color: var(--ios-text-secondary);
}

.portal-lease-card__fact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-lease-card__monthly {
  margin: var(--ios-space-1) 0 0;
  font-weight: 600;
}

/* --- Карточка договора: статус и срок под ответом шапки --- */

.portal-page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ios-space-1) var(--ios-space-3);
  margin: var(--ios-space-3) 0 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

/* --- «Стороны» и «Помещение»: длинные значения (адрес, полное название,
 *     номера счетов) переносятся, подпись — по верху строки --- */

.portal-lease-parties .portal-row__label,
.portal-lease-premises .portal-row__label {
  flex: none;
}

.portal-lease-parties .portal-row__value,
.portal-lease-premises .portal-row__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Реквизиты сторон на телефоне — подпись над значением, как в листе
 * «Оплата»: 20 цифр счёта и полное название не делят строку с подписью
 * и не рвутся посередине. От 900px — пары в строку */
.portal-lease-parties .portal-row {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ios-space-1);
}

.portal-lease-parties .portal-row__label {
  font: var(--ios-type-secondary);
}

.portal-lease-parties .portal-row__value {
  margin-left: 0;
  text-align: left;
}

@media (min-width: 900px) {
  .portal-lease-parties .portal-row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ios-space-3);
  }

  .portal-lease-parties .portal-row__label {
    font: inherit;
  }

  .portal-lease-parties .portal-row__value {
    margin-left: auto;
    text-align: right;
  }
}

/* Первая секция колонки — шапка уже дала отступ */
.portal-lease-columns__side > .portal-lease-premises:first-child {
  margin-top: 0;
}

/* --- «Платежи»: список в группе, у платежа — заголовок с датой и
 *     номером, сумма моно справа, назначение сноской, строки зачёта --- */

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

.portal-payment {
  padding: var(--ios-space-3) var(--ios-space-4);
}

.portal-payment + .portal-payment {
  border-top: 1px solid var(--ios-separator);
}

.portal-payment__head {
  display: flex;
  align-items: flex-start;
  gap: var(--ios-space-3);
}

.portal-payment__text {
  flex: 1;
  min-width: 0;
}

.portal-payment__title {
  margin: 0;
  font-weight: 600;
}

.portal-payment__payer {
  margin: var(--ios-space-1) 0 0;
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
  overflow-wrap: anywhere;
}

.portal-payment__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ios-space-1);
}

.portal-payment__amount {
  font-family: var(--ios-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Назначение — как пришло из банка: сноской, с переносом в любом месте */
.portal-payment__purpose {
  margin: var(--ios-space-2) 0 0;
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
  overflow-wrap: anywhere;
}

.portal-payment__lines {
  display: grid;
  gap: var(--ios-space-1);
  margin: var(--ios-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.portal-payment__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ios-space-3);
  font: var(--ios-type-secondary);
  font-variant-numeric: tabular-nums;
}

.portal-payment__line-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-payment__line-date {
  color: var(--ios-text-secondary);
}

.portal-payment__line-sum {
  flex: none;
  font-family: var(--ios-font-mono);
  white-space: nowrap;
}

/* Ссылка на счёт в строке зачёта — зона нажатия 44 по высоте
 * псевдоэлементом, строка списка остаётся плотной */
.portal-payment__line .portal-link {
  position: relative;
  white-space: nowrap;
}

.portal-payment__line .portal-link::after {
  content: "";
  position: absolute;
  inset: calc(50% - var(--ios-touch-min) / 2) 0;
}

.portal-payment__line--void,
.portal-payment__line--unallocated {
  color: var(--ios-text-secondary);
}

/* --- Итоги «Счетов»: на десктопе не шире строки текста — суммы рядом с
 *     подписями, а не через всю ширину таблицы (у «Платежей» колонка и
 *     так узкая) --- */

@media (min-width: 900px) {
  .portal-shell--wide .portal-list-totals {
    max-width: var(--ios-measure);
  }
}

/* --- «Уведомления» (Р-105, этап E3): счета и напоминания от УК, новые
 *     сверху. Строка — переход (portal-row--link); непрочитанное — точка
 *     акцентом и бейдж «Новое» (не только цветом), заголовок 600 --- */

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

.portal-notifications__item + .portal-notifications__item {
  border-top: 1px solid var(--ios-separator);
}

.portal-notification__dot {
  flex: none;
  width: var(--ios-space-2);
  height: var(--ios-space-2);
  margin-top: var(--ios-space-2);
  border-radius: var(--ios-radius-pill);
  background: transparent;
}

.portal-notification--unread .portal-notification__dot {
  background: var(--ios-accent);
}

.portal-notification__title {
  display: block;
  overflow-wrap: anywhere;
}

.portal-notification--unread .portal-notification__title {
  font-weight: 600;
}

.portal-notification__meta {
  display: block;
  overflow-wrap: anywhere;
}

.portal-notifications__summary {
  margin-top: 0;
}