/* Zoho Books из кабинета (18.09.2026, «Проект 3»). Только классы zf-* и
   lw-zoho-*; цвета — переменные темы, те же, что у графиков «Финансов». */
.zf-root { display: flex; flex-direction: column; gap: 12px; }
.zf-tiles { margin-bottom: 4px; }
.zf-line { fill: none; stroke-width: 2; }
.zf-line.fin-c-pay, .zf-dot.fin-c-pay { stroke: var(--rp-blue, #2f7bff); }
.zf-dot { fill: var(--rp-panel, #fff); stroke-width: 2; }
.zf-zero { stroke: var(--rp-ink-3, #6b7a90); stroke-dasharray: 3 3; }
.zf-note { margin: 0; }
.zf-hbars { display: flex; flex-direction: column; gap: 6px; }
.zf-hbar-row { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.zf-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-hbar-track { height: 10px; border-radius: 6px; background: var(--rp-line, rgba(127,127,127,0.15)); overflow: hidden; }
.zf-hbar-fill { display: block; height: 100%; border-radius: 6px; }
.zf-hbar-fill.fin-c-rev { background: var(--rp-green, #4ade80); }
.zf-hbar-fill.fin-c-exp { background: var(--rp-amber, #fbbf24); }
.zf-hbar-fill.fin-c-open { background: var(--rp-blue, #2f7bff); }
.zf-hbar-value { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rp-ink-2, inherit); }
.zf-aging { display: flex; flex-direction: column; gap: 6px; }
.zf-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--rp-line, rgba(127,127,127,0.15)); }
.zf-stack-seg { display: block; height: 100%; }
.zf-stack-seg.fin-c-rev { background: var(--rp-green, #4ade80); }
.zf-stack-seg.fin-c-open { background: var(--rp-blue, #2f7bff); }
.zf-stack-seg.fin-c-exp { background: var(--rp-amber, #fbbf24); }
.zf-stack-seg.fin-c-late { background: var(--rp-red, #f87171); }
.zf-aging-keys { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.zf-runway.is-good .pay-kpi-value { color: var(--rp-green, #16a34a); }
.zf-write { padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.zf-write.is-off { background: var(--rp-panel-2, rgba(127,127,127,0.08)); }
.zf-write.is-on { background: rgba(74, 222, 128, 0.12); }
.zf-actions-title { margin: 8px 0 0; }
.zf-form { border: 1px solid var(--rp-line, rgba(127,127,127,0.18)); border-radius: 10px; padding: 8px 12px; }
.zf-form > summary { cursor: pointer; font-weight: 600; }
.zf-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.zf-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.zf-field.zf-inline { flex-direction: row; align-items: center; gap: 8px; }
.zf-field-label { color: var(--rp-ink-3, #6b7a90); }
.zf-input { min-width: 0; }
.zf-result { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.zf-result.is-error { color: var(--rp-red, #dc2626); }
.zf-recon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.zf-recon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.zf-recon-count.is-open { color: var(--rp-amber, #b45309); }
.zf-proposal { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--rp-line, rgba(127,127,127,0.15)); }
.lw-zoho-inv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; margin: 4px 0; }
.zf-confirm, .lw-zoho-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--rp-panel-2, rgba(127,127,127,0.08)); }
.zf-confirm p, .lw-zoho-confirm p { flex-basis: 100%; margin: 0; }
.lw-zoho-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }

/* ДЕНЬГИ В КАРТОЧКЕ — СТОЛБИКОМ, А НЕ В ОДНУ СТРОКУ (владелец, 20.09.2026:
   «выглядит не очень аккуратно и слово вылазит из рамки»).

   Корень у обоих блоков один: и Zoho, и «Оплата онлайн» рисуются с классом
   .lw-field, а он для ОДНОЙ подписи и ОДНОГО значения — flex в строку с
   justify-content: space-between. Детей же здесь пять-шесть: подпись, текст
   состояния, ряд кнопок, список счетов, выбор стадии, галочка агента. Строка
   их сплющивала: текст вставал узкой колонкой, подсказка налезала на кнопку,
   список стадий обрезался на середине слова.

   Здесь блок становится колонкой — подпись сверху, всё остальное под ней во
   всю ширину панели. Высота строки .lw-field (38px) блоку из шести детей не
   нужна и только мешала. */
.lw-field.lw-zoho {
  display: block; align-items: stretch; justify-content: flex-start;
  min-height: 0; padding: 8px 0;
}
.lw-field.lw-zoho > .lw-field-label { display: block; margin-bottom: 6px; }

/* ПОДПИСЬ РЯДОМ С ПОЛЕМ МОЖЕТ ПЕРЕНОСИТЬСЯ. .lw-field-status задан как
   `white-space: nowrap; flex: 0 0 auto` — для короткого «Сохранено» это
   правильно, но здесь этим же классом подписаны целые предложения: «Агент
   может попросить ссылку на оплату (одобряет человек)». Неразрывная строка,
   которой запрещено сжиматься, и вылезала за рамку карточки. */
.lw-zoho-actions .lw-field-status {
  white-space: normal; flex: 1 1 200px; min-width: 0; line-height: 1.4;
}
/* Выбор стадии и сумма читаются слева и не обрезаются: 220px в .lw-field-input
   рассчитаны на короткое значение поля, а не на «По умолчанию: стадия
   выигрыша». */
.lw-zoho-actions .lw-field-input { max-width: 100%; text-align: start; }
.lw-zoho-actions select.lw-field-input { flex: 1 1 220px; }
.lw-zoho-actions input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
@media (max-width: 640px) {
  .zf-hbar-row { grid-template-columns: 1fr; }
}