/* reports.css — отчёты по CRM (amoCRM): фильтры, цепочка выбранных срезов, статус синхронизации, таблицы с полосами, воронка.
   Владелец — агент `reports`. Правила: только var(--…) токены, без литеральных цветов, шрифтов и теней
   (tests/ui/test_ui_regulation.py), см. docs/THEMES.md. Таблицы уже обёрнуты в .table-wrap — страница не скроллится вбок. */

.rep { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
/* обёртки фильтров и отчёта (живое обновление меняет их содержимое) — без своего блока, раскладка как у .rep */
.rep-view { display: contents; }

/* ---------- фильтры (как .dash-filters) ---------- */
.rep-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.rep-filters .field { flex: 0 1 180px; min-width: 140px; }

/* ---------- выбранные срезы: чипы-ссылки с крестиком ---------- */
.rep-drill { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rep-drill a.chip { text-decoration: none; }
.rep-drill a.chip .icon { width: 12px; height: 12px; }

/* ---------- статус синхронизации: инфо слева, действия справа ---------- */
.rep-sync-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); }
.rep-sync-info { flex: 1 1 280px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.rep-sync-row > .actions, .rep-sync-row > .toolbar { flex: 0 0 auto; flex-wrap: wrap; gap: var(--s2); }

/* ---------- таблицы ---------- */
.rep-table th[scope="row"] { text-align: left; font-weight: var(--fw-semibold); text-transform: none; letter-spacing: normal;
  font-size: inherit; color: var(--fg); }
.rep-table .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }

/* полоса внутри ячейки: лежит под числом, число поверх */
.rep-bar-cell { position: relative; min-width: 120px; text-align: right; }
.rep-bar-cell .num { position: relative; padding-inline: var(--s2); }
.rep-bar-cell .rep-bar { position: absolute; inset-block: var(--s1); inset-inline-start: 0; max-width: 100%; }
.rep-bar { display: block; height: 100%; min-width: 2px; border-radius: var(--r-sm); background: var(--accent-soft); }
.rep-bar.success { background: var(--success-soft); }
@media (prefers-reduced-motion: no-preference) {
  .rep-bar { transition: width var(--dur) var(--ease); }
}

/* ---------- воронка ---------- */
.rep-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.rep-stage { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) var(--s3);
  border-inline-start: calc(var(--border-w) * 3) solid transparent; border-radius: var(--r-sm); background: var(--surface-2); }
.rep-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.rep-stage-name { font-weight: var(--fw-semibold); }
.rep-stage-bar { display: flex; align-items: center; gap: var(--s3); }
.rep-track { flex: 1 1 auto; min-width: 0; height: var(--s3); border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.rep-track .rep-bar { height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.rep-track .rep-bar.success { background: var(--success); }
.rep-stage-bar .num { flex: none; min-width: 8rem; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
/* наибольший провал — второй сигнал помимо чипа, не только цвет */
.rep-stage.worst { border-inline-start-color: var(--warn); background: var(--warn-soft); }
.rep-stage.won { border-inline-start-color: var(--success); }

/* ---------- выбор воронки в шапке карточки ---------- */
.rep-pick { flex: 0 1 240px; min-width: 160px; }

/* ---------- сделки: панель и таблица ---------- */
.rep-leads-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.rep-leads th, .rep-leads td { vertical-align: top; }
.rep-more { font-size: var(--fs-xs); color: var(--fg-muted); }
.rep-more summary { cursor: pointer; }
.rep-more[open] summary { margin-bottom: var(--s1); }
.rep-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: 0; }
.rep-dl dt { color: var(--fg-muted); }
.rep-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.rep-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }

@media (max-width: 640px) {
  .rep-filters .field { flex: 1 1 140px; }
  .rep-sync-row > .actions, .rep-sync-row > .toolbar { width: 100%; }
  .rep-pick { flex: 1 1 100%; }
  .rep-dl { grid-template-columns: 1fr; }
}