@import '../../../../styles/design-tokens';

.matrix {
  margin-top: 20px;
}

.phase {
  margin-top: 20px;
}

.phase:first-child {
  margin-top: 0;
}

.phaseHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.phaseTitle {
  font-size: 13px;
  font-weight: 600;
  color: $gray-700;
}

.requestHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

// Колонка с номером шага — узкая, содержимое по центру (важно при rowSpan на
// параллельный блок: иначе номер прижимался бы к верхней строке блока).
.stepCol {
  width: 56px;
  white-space: nowrap;
  text-align: center !important;
}

.parallelMark {
  color: $gold-600;
  font-weight: 600;
}

.flipY {
  svg { transform: scaleY(-1); }
}

// Подсветка строки при наведении здесь — своя, НЕ штатный DataTable.module.scss
// tbody tr:hover: та подсветка вешается через :hover на конкретный <tr>, а
// ячейки с rowSpan (номер шага, стрелки перестановки) физически принадлежат
// <tr> только первой строки блока — при наведении на вторую/третью строку
// параллельного блока эти ячейки не подсвечивались, получался видимый "вырез"
// в жёлтом фоне ровно на границе объединённой ячейки. Поэтому подсветка здесь
// — на уровне блока через React-состояние (см. hoveredBlock в
// ManageRequestsPhaseTable), а не через CSS :hover, а штатный tr:hover для
// этой конкретной таблицы отключаем, чтобы они не накладывались друг на друга.
.blockAwareWrap :global(tbody tr:hover) {
  background: transparent;
}

.rowHover td {
  background: $gold-50;
}

// IconButton по умолчанию (Button.module.scss/.iconButton) прозрачная — рамка
// появляется только по hover. В этой таблице кнопок много и часть из них не
// самоочевидна по смыслу (параллельность, перестановка шага), поэтому здесь
// рамка видна всегда — иначе выглядит как текст, а не как элементы управления.
// !important — переопределяет .iconButton независимо от порядка подключения
// стилей (это два разных CSS-модуля, порядок их правил в бандле не гарантирован).
.iconBtnVisible {
  border-color: $gray-300 !important;
  background: #fff !important;
}

// Включённое состояние кнопки «объединить с предыдущим шагом» — в отличие от
// остальных кнопок это переключатель состояния, а не разовое действие,
// поэтому оно залито (как в request-portal/shared/approval/ui/approval.module.scss/.iconBtnActive).
// !important по той же причине, что и у .iconBtnVisible.
.iconBtnActive {
  border-color: $gold-500 !important;
  background: $gold-500 !important;
  color: $navy-950 !important;

  &:hover:not(:disabled) {
    border-color: $gold-600 !important;
    background: $gold-600 !important;
  }
}

// Плашка-пикер под таблицей для добавления шага (вместо кнопки+модалки) —
// повторяет request-portal/shared/approval/ui/ApprovalMatrix.tsx/.matrixPicker.
.addRow {
  margin-top: 10px;
}

// Ячейка SLA просроченного АКТИВНОГО шага (см. isRowOverdue в utils/sla.ts) —
// только текст, без фона: фон был бы третьим одновременным акцентом в строке
// (жёлтая подсветка hover уже есть) и мешал бы, а не помогал заметить.
.slaOverdue {
  color: $red-500;
  font-weight: 600;
}