/* ============================================================================
 * Цели производства — самостоятельный лист раздела «Отчёты».
 * Шапка повторяет «Отчёт факт» (переиспользуем rfact-* классы: тулбар, поля,
 * кнопки, KPI). Здесь — только надстройки под этот лист: месяц-степпер, поиск
 * с иконкой, аккуратные тумблеры, выпадашка массового редактирования, светлая
 * таблица «Справочника операций» в ОДНУ ширину + поле цели/тумблер в ячейке.
 * ==========================================================================*/

/* ── Раскладка: rfact-shell держит высоту; таблица заполняет остаток ──────── */
.pg-shell { gap: 10px; }
.pg-shell .pg-toolbar { flex: 0 0 auto; }
.pg-shell .pg-kpis { flex: 0 0 auto; }

/* ── Шапка: ОДНА рамка (.rfact-toolbar), фильтры слева — кнопки вверху справа ── */
.pg-toolbar { padding: 10px 14px; }
.pg-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.pg-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.pg-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.pg-plan-sheet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(120, 150, 210, 0.28);
  background: #eef3fa;
  overflow: hidden;
}
.pg-plan-sheet .plan-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pg-plan-sheet .plan-pagination { flex: 0 0 auto; margin: 0; }

/* ── KPI: 3 в ряд, компактнее стандартных rfact-kpi (больше места таблице) ── */
.pg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-kpis .rfact-kpi { min-height: 0; padding: 13px 18px; }
.pg-kpis .rfact-kpi-value { font-size: 24px; }
.pg-kpis .rfact-kpi.is-green .rfact-kpi-value { color: #7ee0a8; }

/* ── Месяц-степпер (тёмный, в габаритах rfact-поля) ──────────────────────── */
.pg-ff-month .pg-month {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 0 5px;
  border: 1px solid rgba(120, 150, 210, 0.3);
  border-radius: 8px;
  background: rgba(8, 18, 36, 0.6);
}
.pg-month-nav {
  width: 22px;
  height: 24px;
  border: 0;
  background: none;
  color: #9fb4d8;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}
.pg-month-nav:hover { background: rgba(255, 255, 255, 0.08); color: #e9f0fb; }
.pg-month-val { color: #dceaff; font-size: 12px; font-weight: 600; min-width: 84px; text-align: center; }
.pg-month-cal { color: #7e95bd; display: inline-flex; }
.pg-month-cal svg { width: 14px; height: 14px; }

/* ── Поиск с иконкой (input наследует .rfact-ff input) ───────────────────── */
.pg-ff-search .pg-search-box { position: relative; display: block; }
.pg-ff-search .pg-search-box svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #6d83a9;
  pointer-events: none;
}
.pg-ff-search .pg-search-box input { padding-left: 30px; width: 240px; }

/* ── Тумблеры «Только с целью / активные» — аккуратные, в линию полей ─────── */
.pg-ff-toggle { justify-content: flex-end; }
.pg-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 21px;
  margin-top: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.pg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(110, 132, 170, 0.5);
  transition: background 0.15s;
}
.pg-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}
.pg-switch input:checked + .pg-switch-track { background: linear-gradient(180deg, #2f6fd0, #2456a8); }
.pg-switch input:checked + .pg-switch-track::after { transform: translateX(17px); }

/* ── «Действия с целями»: меню + панель массового редактирования ──────────── */
.pg-actbox { position: relative; }
.pg-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 272px;
  padding: 6px;
  border-radius: 11px;
  border: 1px solid rgba(120, 150, 210, 0.4);
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.98), rgba(13, 26, 50, 0.98));
  box-shadow: 0 18px 44px rgba(2, 8, 20, 0.6);
}
.pg-actbox.is-menu-open .pg-actions-menu { display: block; }
.pg-act-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  background: none;
  color: #dbe6f8;
  font: inherit;
  font-size: 13px;
  text-align: left;
  border-radius: 7px;
  cursor: pointer;
}
.pg-act-item:hover { background: rgba(61, 127, 212, 0.18); }
.pg-act-item svg { width: 15px; height: 15px; flex-shrink: 0; color: #9fb4d8; }

.pg-massedit-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 430px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(120, 150, 210, 0.4);
  background: linear-gradient(180deg, rgba(20, 38, 70, 0.98), rgba(13, 26, 50, 0.98));
  box-shadow: 0 18px 44px rgba(2, 8, 20, 0.6);
  display: none;
}
.pg-actbox.is-mass-open .pg-massedit-panel { display: block; }
.pg-massedit-grid { display: grid; grid-template-columns: 1.3fr 1.3fr 0.9fr; gap: 12px; }
.pg-massedit-note { margin: 12px 0 14px; font-size: 12px; color: #8ea4c8; line-height: 1.4; }
.pg-massedit-actions { display: flex; justify-content: flex-end; }
.pg-ff-val .pg-val-box { position: relative; display: block; }
.pg-ff-val .pg-val-box input { width: 100%; padding-right: 26px; }
.pg-ff-val .pg-val-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #7e95bd;
  font-size: 12px;
  pointer-events: none;
}

/* ── Таблица: движок «Справочника операций», но В ОДНУ ШИРИНУ (без h-скролла) */
.pg-fit-table { width: 100%; table-layout: fixed; min-width: 0; }
.pg-fit-table th,
.pg-fit-table td { overflow: hidden; text-overflow: ellipsis; }
/* Высота строк — как в «Справочнике операций»: наследуем padding/шрифт .plan-table
 * (3px 5px / 10px). Свои поля (цель/тумблер) делаем компактными, чтобы не раздували. */
.pg-fit-table tbody td { vertical-align: middle; }
/* Пустые строки добора сетки — высота как в «Справочнике операций». */
.pg-fit-table tbody tr.pg-empty-row td { height: 26px; }
.pg-fit-table td .cell-select,
.pg-fit-table td .employee-option-pill { max-width: 100%; }

/* Поле «Цель месяца» — белый ввод в светлой ячейке (компактный, под высоту строки) */
.pg-fit-table .pg-goal-input {
  width: 84px;
  max-width: 100%;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #c4d4ea;
  background: #fff;
  color: #1d2a3b;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  outline: none;
}
.pg-fit-table .pg-goal-input::placeholder { color: #9aa9bf; font-weight: 500; }
.pg-fit-table .pg-goal-input:focus { border-color: #3d7fd4; box-shadow: 0 0 0 2px rgba(61, 127, 212, 0.2); }

/* Тумблер «Вкл. в цель» в светлой ячейке — компактный */
.pg-fit-table .pg-switch { margin: 0; width: 30px; height: 16px; vertical-align: middle; }
/* Тумблер недоступен, пока в строке нет числа (сначала число — потом включить). */
.pg-fit-table .pg-switch.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pg-fit-table .pg-switch-track { background: rgba(150, 170, 200, 0.7); }
.pg-fit-table .pg-switch-track::after { width: 12px; height: 12px; top: 2px; left: 2px; }
.pg-fit-table .pg-switch input:checked + .pg-switch-track::after { transform: translateX(14px); }

/* Корректировка (±) — поле как у цели, поуже; «Итог» — расчётное число (цель+корр). */
.pg-fit-table .pg-corr-input {
  width: 64px; max-width: 100%; height: 24px; border-radius: 6px;
  border: 1px solid #c4d4ea; background: #fff; color: #1d2a3b;
  font: inherit; font-size: 10px; font-weight: 600; text-align: center; outline: none;
}
.pg-fit-table .pg-corr-input::placeholder { color: #9aa9bf; font-weight: 500; }
.pg-fit-table .pg-corr-input:focus { border-color: #3d7fd4; box-shadow: 0 0 0 2px rgba(61, 127, 212, 0.2); }
.pg-fit-table .pg-corr-input:disabled { background: #eef2f8; color: #b6c2d4; cursor: not-allowed; }
.pg-fit-table .pg-itog-cell { font-size: 11px; font-weight: 700; color: #243246; }
.pg-fit-table .pg-itog-cell.pg-itog-corr { color: #1f7a44; } /* итог отличается от цели — выделяем */

/* Период действия целей «от — до» в шапке (в часовом поясе компании). */
.pg-ff-period .pg-period-val {
  height: 30px; display: inline-flex; align-items: center; padding: 0 9px;
  border: 1px solid rgba(120, 150, 210, 0.3); border-radius: 8px;
  background: rgba(8, 18, 36, 0.6); color: #c6d6f3; font-size: 11px; white-space: nowrap;
}