/* styles-report-fact.css — Отчёт «Факт»: тулбар, чипы месяца/периода, фильтр, кнопки режима.
   Выделено из styles-report-fact.css (890 строк, 10 строк до BLOCK-заслона 900) 2026-07-28.
   ПОРЯДОК ЗАГРУЗКИ ВАЖЕН: styles-report-fact.css → -kpi → -panels.
   План: .claude/tasks/zadacha-product-health.md */
/* styles-report-fact.css — UX-макет «Отчёт факт» (тёмная тема, семейство Дашборда).
   Префикс классов: rfact-. Бэкенда пока нет — это вёрстка прототипа. */

.page-shell.report-fact-mode {
  height: var(--report-fact-shell-height, auto);
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: none;
}

.rfact-shell {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
  border: 1px solid rgba(102, 133, 189, 0.36);
  border-radius: 16px;
  background:
    radial-gradient(840px 360px at 16% -26%, rgba(90, 153, 255, 0.08), transparent 60%),
    radial-gradient(760px 320px at 98% -16%, rgba(120, 100, 240, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(10, 24, 49, 0.96), rgba(8, 18, 36, 0.98));
  color: #c6d5ee;
}

/* ── Тулбар ─────────────────────────────────────────────────────────────── */
.rfact-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(106, 141, 204, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, #233f78, #203763);
}

.rfact-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rfact-toolbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Чип месяца наверху тулбара — в стиле даты/времени Дашборда (иконка + текст). */
.rfact-month-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid rgba(106, 141, 204, 0.4);
  background: rgba(13, 28, 60, 0.5);
  color: #aebfdc;
  font-size: 12.5px;
  font-weight: 600;
}
.rfact-month-chip b {
  color: #eaf2ff;
  font-weight: 700;
  text-transform: capitalize;
}
/* Чип периода действия целей «от — до» рядом с месяцем. */
.rfact-period-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(106, 141, 204, 0.28);
  background: rgba(13, 28, 60, 0.35);
  color: #8ea4c8;
  font-size: 11.5px;
  white-space: nowrap;
}
.rfact-period-chip b { color: #c6d6f3; font-weight: 600; }
/* Пометка «было N, ±M» под итоговой целью в таблице «Цели по операциям». */
.rfact-goal-cell { line-height: 1.15; }
.rfact-goal-note {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  font-weight: 500;
  color: #8aa0c6;
  white-space: nowrap;
}
.rfact-month-chip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #7db8ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rfact-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(106, 141, 204, 0.45);
  background: rgba(13, 28, 60, 0.5);
  color: #bcd0ef;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s, background 0.15s;
}
.rfact-filter-btn:hover {
  filter: brightness(1.14);
}
.rfact-filter-btn.is-active {
  background: rgba(58, 127, 212, 0.24);
  border-color: rgba(90, 153, 255, 0.55);
  color: #dceaff;
}
/* Фильтр содержит непустой выбор — зелёный акцент + точка-индикатор. */
.rfact-filter-btn.has-filter {
  border-color: rgba(47, 174, 107, 0.6);
  color: #9ce6bf;
}
.rfact-filter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fd6a0;
  box-shadow: 0 0 0 2px rgba(47, 174, 107, 0.25);
}

/* Выпадающая панель фильтра — раскрывается/убирается, поля «в длину». */
.rfact-filter-panel {
  display: none;
}

.rfact-filter-panel.open {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(106, 141, 204, 0.4);
  border-radius: 10px;
  background: rgba(13, 28, 60, 0.55);
}

.rfact-filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

/* Группа кнопок в конце строки фильтра (на месте бывшего «№ операции»). */
.rfact-line-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  align-self: flex-end;
}

/* Группа кнопок периода и переключатель режима «Месяц / День» — общий стиль. */
.rfact-period-group,
.rfact-mode-group {
  display: inline-flex;
  border: 1px solid rgba(120, 150, 210, 0.3);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(8, 18, 36, 0.5);
}

.rfact-period,
.rfact-mode {
  appearance: none;
  border: none;
  background: transparent;
  color: #bcd0ef;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* Переключатель режима — чуть крупнее кнопок периода (верх тулбара, у чипа). */
.rfact-mode { font-size: 12.5px; padding: 8px 15px; }

.rfact-period + .rfact-period,
.rfact-mode + .rfact-mode {
  border-left: 1px solid rgba(120, 150, 210, 0.22);
}

.rfact-period:hover,
.rfact-mode:hover {
  color: #dceaff;
}

.rfact-period.is-active,
.rfact-mode.is-active {
  background: linear-gradient(180deg, #2f6fd0, #2456a8);
  color: #fff;
}

/* Поле фильтра: подпись сверху, контрол снизу. */
.rfact-ff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: #a7bde0;
}

.rfact-ff > span {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.rfact-ff input,
.rfact-ff select {
  appearance: none;
  height: 30px;
  border: 1px solid rgba(120, 150, 210, 0.42);
  border-radius: 8px;
  background: rgba(10, 22, 46, 0.7);
  color: #eaf2ff;
  font-size: 12px;
  padding: 0 9px;
  color-scheme: dark;
}

.rfact-ff-date input {
  width: 132px;
}

.rfact-ff select {
  min-width: 150px;
}

.rfact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}

.rfact-btn.is-apply {
  background: linear-gradient(180deg, #2f6fd0, #2456a8);
  color: #fff;
}

.rfact-btn.is-ghost {
  background: rgba(120, 140, 180, 0.12);
  border-color: rgba(120, 150, 210, 0.3);
  color: #cdddf6;
}

.rfact-btn.is-outline {
  background: rgba(47, 174, 107, 0.12);
  border-color: rgba(47, 174, 107, 0.45);
  color: #8be3b6;
}

.rfact-btn:hover {
  filter: brightness(1.12);
}

/* «Цели производства» — статичная плашка (не кнопка): держит ширину тулбара,
   на клик/ховер не реагирует. Логики нет — только визуальный заголовок-маркер. */
.rfact-goal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(47, 174, 107, 0.45);
  background: rgba(47, 174, 107, 0.12);
  color: #8be3b6;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}

.rfact-btn-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}