/* Карточка счёта в виде CRM v2 (docs/design-crm-v2.md, разделы 4, 6 и 9) по
 * образцу карточки договора: шапка со статусом и просрочкой, полосы фактов и
 * денег (ui.css .strip), баннер статуса, состав — детальная таблица
 * (shared/table, sticky_first), реквизиты, история, модал аннулирования.
 * Только токены из tokens.css — новых цветов нет. */

/* Баннер статуса под полосами — тон по статусу (триады текст/фон/рамка) */
.invoice-banner {
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-panel);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

.invoice-banner strong {
  font-weight: 600;
}

.invoice-banner--muted {
  color: var(--neutral);
  background: var(--neutral-bg);
  border-color: var(--neutral-border);
}

.invoice-banner--info {
  color: var(--info);
  background: var(--info-bg);
  border-color: var(--info-border);
}

.invoice-banner--success {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

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

/* «N дней просрочки» рядом со статусом в строке заголовка */
.invoice-overdue {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  font-weight: 600;
  color: var(--danger);
}

/* Остаток просроченного счёта в полосе денег */
.invoice-money__overdue {
  color: var(--danger);
}

/* Состав счёта: наименование с периодом — закреплённая колонка, расчёт —
 * моно приглушённым, переносится */
.invoice-lines__title {
  font-weight: 500;
}

.table td.invoice-lines__calc {
  min-width: 200px;
  font-family: var(--font-mono);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

/* Итоги состава: под таблицей, суммы — колонкой справа */
.invoice-totals {
  border-top: 1px solid var(--border-panel);
}

/* Строки итогов — общие с раскрытием пакета начислений (accruals.css),
 * в карточке без верхней черты: её даёт .invoice-totals */
.invoice-totals .accrual-totals {
  max-width: none;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Таймлайн «История документа»: заголовок, подпись, время */
.invoice-event__title {
  font-weight: 500;
}

.invoice-event__title--danger {
  color: var(--danger);
}

.invoice-event__sub {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
  /* Текст ошибки доставки и имя плательщика бывают без пробелов (Р-34) */
  overflow-wrap: anywhere;
}

.invoice-event__time {
  margin-top: var(--space-0-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

/* Форма модала аннулирования: стопка поясняющего текста и полей */
.invoice-cancel-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.invoice-cancel-form__note {
  margin: 0;
}

.invoice-cancel-form strong {
  color: var(--text);
}

/* Многострочное поле: базовый .field__input фиксирует высоту контрола.
 * Класс общий — им пользуются и формы других экранов (ДС, объект, помещение,
 * лист ожидания, заявка); перенести в ui.css — на этапе зачистки C4 */
.field__input--textarea {
  height: auto;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}