/* styles-report-fact-kpi.css — Отчёт «Факт»: KPI-карточки — шапка, единицы учёта, бейдж процента, тона.
   Выделено из styles-report-fact.css (890 строк, 10 строк до BLOCK-заслона 900) 2026-07-28.
   ПОРЯДОК ЗАГРУЗКИ ВАЖЕН: styles-report-fact.css → -kpi → -panels.
   План: .claude/tasks/zadacha-product-health.md */
/* ── KPI-карточки ───────────────────────────────────────────────────────── */
.rfact-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rfact-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(106, 141, 204, 0.45);
  background: linear-gradient(180deg, #233f78, #203763);
  box-shadow: inset 0 1px 0 rgba(204, 223, 255, 0.08);
  min-height: 74px;
}

/* Шапка карточки: иконка вплотную к заголовку, наверху. */
.rfact-kpi-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.rfact-kpi-ico-sm {
  display: inline-flex;
  flex-shrink: 0;
}
.rfact-kpi-ico-sm svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Заголовок карточки — единая стилистика с заголовками панелей (UPPERCASE, 760),
   чтобы он читался как «шапка блока», а не терялся под числами. */
.rfact-kpi-label {
  font-size: 11.5px;
  color: #a7bde0;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rfact-kpi-value {
  font-size: 27px;
  font-weight: 800;
  color: #eaf2ff;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.rfact-kpi-unit {
  font-size: 12px;
  font-weight: 500;
  color: #a7bde0;
}

.rfact-kpi-sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: #9fb6d9;
}

/* KPI раздельно по единицам учёта. Единицы текут ГОРИЗОНТАЛЬНО (вправо, в
   свободное место карточки) и переносятся — карточка не растёт вниз, ширина
   фиксирована сеткой. */
.rfact-kpi-body {
  flex: 1 1 auto;
  min-width: 0;
}
.rfact-kpi-units {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: baseline;
  column-gap: 26px;
  row-gap: 4px;
}
/* Много единиц (>6, до ~12): мельче + 6 колонок (6 сверху / 6 снизу). */
.rfact-kpi-units.is-dense {
  grid-template-columns: repeat(6, max-content);
  column-gap: 16px;
  row-gap: 3px;
}
.rfact-kpi-uline {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1.1;
}
.rfact-kpi-uval {
  font-size: 16px;
  font-weight: 700;
  color: #eaf2ff;
}
.rfact-kpi-units.is-dense .rfact-kpi-uval {
  font-size: 14px;
}
.rfact-kpi-units.is-dense .rfact-kpi-unit {
  font-size: 11px;
}
.rfact-kpi-empty .rfact-kpi-uval {
  color: #8aa0c6;
}

.rfact-empty-cell {
  padding: 16px;
  text-align: center;
  color: #8aa0c6;
  font-size: 12px;
}
.rfact-loading {
  padding: 4px 2px 0;
  color: #9fb6d9;
  font-size: 12px;
}

/* Круглый бейдж с процентом справа (вместо прежней иконки). */
.rfact-kpi-pct {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
  border: 2px solid transparent;
}
.rfact-kpi.is-blue .rfact-kpi-pct { background: rgba(90, 153, 255, 0.14); color: #9cc4ff; border-color: rgba(90, 153, 255, 0.5); }
.rfact-kpi.is-teal .rfact-kpi-pct { background: rgba(43, 182, 168, 0.16); color: #4fd6c6; border-color: rgba(43, 182, 168, 0.5); }
.rfact-kpi.is-green .rfact-kpi-pct { background: rgba(47, 174, 107, 0.16); color: #5fd29a; border-color: rgba(47, 174, 107, 0.5); }
.rfact-kpi.is-amber .rfact-kpi-pct { background: rgba(239, 169, 60, 0.16); color: #f0b54a; border-color: rgba(239, 169, 60, 0.5); }
.rfact-kpi.is-purple .rfact-kpi-pct { background: rgba(139, 124, 240, 0.16); color: #a394ff; border-color: rgba(139, 124, 240, 0.5); }
.rfact-kpi.is-red .rfact-kpi-pct { background: rgba(232, 93, 110, 0.16); color: #ff7d8c; border-color: rgba(232, 93, 110, 0.5); }

/* Шапка (иконка + заголовок) — тон-акцент. */
.rfact-kpi.is-blue .rfact-kpi-head { color: #a3cbff; }
.rfact-kpi.is-teal .rfact-kpi-head { color: #5fe0d0; }
.rfact-kpi.is-green .rfact-kpi-head { color: #82e3b2; }
.rfact-kpi.is-amber .rfact-kpi-head { color: #ffc96a; }
.rfact-kpi.is-red .rfact-kpi-head { color: #ff8b98; }
.rfact-kpi.is-purple .rfact-kpi-head { color: #b3a6ff; }

/* Цвет заголовка карточки = акцент тона (как в образце). */
.rfact-kpi.is-blue .rfact-kpi-label { color: #a3cbff; }
.rfact-kpi.is-teal .rfact-kpi-label { color: #5fe0d0; }
.rfact-kpi.is-green .rfact-kpi-label { color: #82e3b2; }
.rfact-kpi.is-amber .rfact-kpi-label { color: #ffc96a; }
.rfact-kpi.is-red .rfact-kpi-label { color: #ff8b98; }
.rfact-kpi.is-purple .rfact-kpi-label { color: #b3a6ff; }