/* styles-report-fact-panels.css — Отчёт «Факт»: аналитические панели — статусы, цели по операциям, участки, по мастерам.
   Выделено из styles-report-fact.css (890 строк, 10 строк до BLOCK-заслона 900) 2026-07-28.
   ПОРЯДОК ЗАГРУЗКИ ВАЖЕН: styles-report-fact.css → -kpi → -panels.
   План: .claude/tasks/zadacha-product-health.md */
/* ── Аналитические панели ───────────────────────────────────────────────── */
/* 2 ряда: [Статусы | Цели по операциям] сверху, [Участки | По мастерам] снизу.
   Таблицы «Цели» и «Мастера» выросли — им отдаём широкие колонки (2-3). */
.rfact-panels {
  display: grid;
  grid-template-columns: 1.2fr 1.45fr 1.4fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "status goals  goals"
    "sect   master master";
  gap: 10px;
  flex: 1 1 0;
  min-height: 0;
}
.rfact-panel-status { grid-area: status; }
.rfact-panel-goals  { grid-area: goals; }
.rfact-panel-sect   { grid-area: sect; }
.rfact-panel-master { grid-area: master; }

.rfact-panel {
  border: 1px solid rgba(106, 141, 204, 0.45);
  border-radius: 14px;
  background: linear-gradient(180deg, #233f78, #203763);
  box-shadow: inset 0 1px 0 rgba(204, 223, 255, 0.08);
  padding: 11px 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rfact-panel-title {
  flex: 0 0 auto;
}

.rfact-bars {
  flex: 1 1 auto;
}

/* «По мастерам» — таблица со скроллом, занимает высоту блока. */
.rfact-master-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 171, 221, 0.45) transparent;
}
.rfact-master-wrap::-webkit-scrollbar { width: 6px; }
.rfact-master-wrap::-webkit-scrollbar-track { background: transparent; }
.rfact-master-wrap::-webkit-scrollbar-thumb {
  background: rgba(143, 171, 221, 0.45);
  border-radius: 3px;
}
.rfact-master-table {
  table-layout: fixed;
}
/* Селектор с .rfact-master-wrap — чтобы перенос строки в шапке выиграл у более
   позднего .rfact-mini-table th { white-space: nowrap } (длинные названия в 2 строки). */
.rfact-master-wrap .rfact-master-table th {
  position: sticky;
  top: 0;
  background: #213a6c;
  z-index: 1;
  white-space: normal;
  line-height: 1.15;
  vertical-align: bottom;
}
.rfact-master-table td { white-space: nowrap; }
.rfact-mst-name {
  font-weight: 600;
  color: #eaf2ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Цифры статусов в «По мастерам» — жирные; цвет задаётся инлайн из
   REPORT_FACT_STATUS_VIEW (тот же, что у легенды «Статусы выполнения»). */
.rfact-mst-val { font-weight: 700; }
/* «Поставлено заданий» отделено от блока 5 статусов вертикальной чертой + отступом
   справа (визуально: «поставлено» отодвинуто влево от статусов). Месяц и День. */
.rfact-master-table .rfact-mst-set {
  border-right: 1px solid rgba(104, 138, 197, 0.30);
  padding-right: 14px;
}

/* «По участкам» — группа на участок, внутри строка на каждую ед. учёта. */
.rfact-sect-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rfact-sect-name {
  font-size: 12px;
  font-weight: 700;
  color: #a7bde0;
}
/* Участок, выбранный в фильтре — подсвечиваем чипом-акцентом. */
.rfact-sect-name.is-selected {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 7px;
  color: #dceaff;
  background: rgba(58, 127, 212, 0.26);
  border: 1px solid rgba(90, 153, 255, 0.55);
}
.rfact-sect-units {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rfact-su-row,
.rfact-su-head {
  display: grid;
  /* План справа в своей колонке, Факт слева в своей → числа близко друг к другу;
     остаток колонки «Факт» даёт воздух между Фактом и индикатором. */
  grid-template-columns: 40px 52px 48px 1fr 48px;
  align-items: center;
  column-gap: 7px;
  font-size: 11.5px;
}
/* Шапка колонок «План / Факт» — мелкие подписи над числами. */
.rfact-su-head { align-items: end; margin-bottom: 1px; }
.rfact-su-cap {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8aa0c6;
}
.rfact-su-cap.is-plan { text-align: right; }
.rfact-su-cap.is-fact { text-align: left; padding-left: 10px; }
.rfact-su-unit { color: #a7bde0; }
.rfact-su-plan { color: #d6e4fb; font-weight: 600; white-space: nowrap; text-align: right; }
/* padding-left — адекватный зазор между Планом и Фактом (не впритык). */
.rfact-su-fact { color: #d6e4fb; font-weight: 600; white-space: nowrap; text-align: left; padding-left: 10px; }
.rfact-su-track {
  height: 9px;
  border-radius: 5px;
  background: rgba(8, 18, 38, 0.4);
  overflow: hidden;
}
.rfact-su-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #4e8ed4, #6fb0f0);
}
.rfact-su-pct { color: #a7bde0; text-align: right; }

/* «Цели по операциям» — таблица со скроллом, занимает высоту блока. */
.rfact-panel-goals {
  display: flex;
  flex-direction: column;
}

.rfact-goals-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 171, 221, 0.45) transparent;
}

.rfact-goals-wrap::-webkit-scrollbar {
  width: 6px;
}

.rfact-goals-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.rfact-goals-wrap::-webkit-scrollbar-thumb {
  background: rgba(143, 171, 221, 0.4);
  border-radius: 999px;
}

.rfact-goals-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 171, 221, 0.65);
}

.rfact-goals-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

.rfact-goals-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #233f78;
  color: #a7bde0;
  font-weight: 600;
  text-align: left;
  padding: 6px 6px;
  line-height: 1.15;
  border-bottom: 1px solid rgba(106, 141, 204, 0.45);
}

.rfact-goals-table tbody td {
  padding: 8px 6px;
  color: #d6e4fb;
  border-bottom: 1px solid rgba(106, 141, 204, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rfact-goals-table tbody tr:hover td {
  background: rgba(90, 153, 255, 0.08);
}

.rfact-goals-name {
  white-space: normal;
}

.rfact-goals-table .t-center { text-align: center; }
/* Отступ справа у последней колонки «Выполнено в %» — значения уводим ощутимо
   левее от скроллбара (16px на широкой панели почти незаметно). */
.rfact-goals-table .t-right { text-align: right; padding-right: 32px; }

/* Заголовки панелей — в стиле h3 Дашборда: иконка + UPPERCASE, контрастно. */
.rfact-panel-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #e7f1ff;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* «(все)» рядом с «По участкам» в режиме без фильтра — мелкий шрифт как у План/Факт.
   text-transform:none — показываем строчными, как ввёл пользователь (заголовок — uppercase). */
.rfact-panel-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #8aa0c6;
}
.rfact-panel-title .rfact-h3-ico {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #9fc0ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* статусы / кольцо — колонкой, чтобы плотно заполнять высокий блок */
.rfact-status-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.rfact-donut-wrap {
  flex: 0 0 auto;
  width: 118px;
}

.rfact-donut {
  width: 118px;
  height: 118px;
  transform: rotate(-90deg);
}

.rfact-donut-seg {
  transition: stroke-dasharray 0.4s;
}

.rfact-donut-center {
  transform: rotate(90deg);
  transform-origin: 21px 21px;
}

.rfact-donut-num {
  fill: #eaf2ff;
  font-size: 7px;
  font-weight: 800;
  text-anchor: middle;
}

.rfact-donut-cap {
  fill: #a7bde0;
  font-size: 3.4px;
  text-anchor: middle;
}

.rfact-legend {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rfact-legend-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.rfact-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.rfact-legend-label {
  color: #dbe7fb;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rfact-legend-val {
  color: #eaf2ff;
  font-weight: 700;
}

.rfact-legend-pct {
  color: #a7bde0;
  min-width: 38px;
  text-align: right;
}

/* мини-таблицы */
.rfact-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rfact-mini-table th {
  text-align: left;
  color: #a7bde0;
  font-weight: 600;
  padding: 6px 6px;
  border-bottom: 1px solid rgba(104, 138, 197, 0.25);
  white-space: nowrap;
}

.rfact-mini-table td {
  padding: 11px 6px;
  color: #d6e4fb;
  border-bottom: 1px solid rgba(104, 138, 197, 0.12);
}

.rfact-mini-total td {
  font-weight: 700;
  color: #eaf2ff;
  border-top: 1px solid rgba(104, 138, 197, 0.35);
  border-bottom: none;
}

.rfact-strong {
  color: #7db8ff;
  font-weight: 700;
}

/* список групп участков (вертикальный, со скроллом при переполнении) */
.rfact-bars {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 171, 221, 0.45) transparent;
}
.rfact-bars::-webkit-scrollbar { width: 6px; }
.rfact-bars::-webkit-scrollbar-track { background: transparent; }
.rfact-bars::-webkit-scrollbar-thumb {
  background: rgba(143, 171, 221, 0.45);
  border-radius: 3px;
}

.rfact-mini-table .t-center { text-align: center; }
.rfact-mini-table .t-right { text-align: right; }

@media (max-width: 1400px) {
  .rfact-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Цвет процента по движению (однотипно с кольцами «Производственного заказа»):
   0% — нейтральный (движения нет), 1–50% — синий, >50% — зелёный.
   Правила в конце файла — перебивают базовый цвет .rfact-su-pct / .rfact-legend-pct / .rfact-strong. */
.rfact-pct-zero { color: #a7bde0; }
.rfact-pct-low  { color: #7db8ff; }
.rfact-pct-high { color: #5fd29a; }
/* Таблица «Цели по операциям»: базовое .rfact-goals-table tbody td специфичнее —
   перебиваем для колонки «Выполнено в %». */
.rfact-goals-table tbody td.rfact-pct-zero { color: #a7bde0; }
.rfact-goals-table tbody td.rfact-pct-low  { color: #7db8ff; }
.rfact-goals-table tbody td.rfact-pct-high { color: #5fd29a; }