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

.wrap {
  background: #fff;
  border-radius: $r-lg;
  box-shadow: $sh-1;
  overflow: hidden;
  border: 1px solid $gray-200;
}

// Внутренний скролл-контейнер: если колонок больше, чем помещается в узкую
// колонку страницы (например, в редакторе SharePoint), таблица должна
// скроллиться по горизонтали, а не обрезаться по overflow:hidden у .wrap.
.scroll {
  overflow-x: auto;
}

.table {
  // min-width, не width: при большом числе колонок таблица должна иметь
  // право стать шире контейнера — тогда её подхватит .scroll (overflow-x).
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table thead th {
  text-align: left;
  padding: 13px 18px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: $gray-400;
  font-weight: 600;
  background: $gray-50;
  border-bottom: 1px solid $gray-200;
  white-space: nowrap;
}

.table tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid $gray-100;
  color: $gray-700;
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: .12s; }
.table tbody tr:hover { background: $gold-50; }

.stickyCell {
  position: sticky;
  right: 0;
}

.table thead th.stickyCell { z-index: 2; }

.table tbody td.stickyCell {
  background: #fff;
  box-shadow: -6px 0 6px -6px rgba(15, 36, 64, .12);
  z-index: 1;
}

.table tbody tr:hover td.stickyCell { background: $gold-50; }

.primaryCell {
  font-weight: 500;
  color: $navy-900;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cellNote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  max-width: 420px;
  font-size: 11.5px;
  line-height: 1.4;
  color: $gray-500;

  svg { margin-top: 1px; }
}

.cellNoteWarn { color: $amber-700; }

.actionsCell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}

.empty {
  padding: 48px 20px;
  text-align: center;
  color: $gray-400;
  font-size: 13px;
}