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

.view {
  width: 100%;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $sp-4;
  flex-wrap: wrap;
  margin-bottom: $sp-4;
}

.heading {
  display: flex;
  align-items: center;
  gap: $sp-3;
  margin: 0;
  font-family: $font-serif;
  font-size: $fs-page-title;
  font-weight: 600;
  color: $navy-900;
}

.count {
  padding: 2px 10px;
  border-radius: $r-full;
  background: $navy-100;
  color: $navy-700;
  font-family: $font-sans;
  font-size: $fs-label;
  font-weight: 600;
}

// Фильтр по статусу — только на вкладке «Инициированные». Стоит слева от поиска
// и прижат к нему: вместе это один блок «чем сузить список».
.statusFilter {
  // appearance: none + своя SVG-галочка — как в shared/ui/Select. Нативная
  // стрелка ОС рисуется своим шрифтом и рядом с остальными полями портала
  // выглядит чужеродно (и по-разному в разных браузерах).
  appearance: none;
  margin-left: auto;
  // Справа место под галочку; по вертикали — как у .search, чтобы оба контрола
  // в шапке были одной высоты.
  padding: 9px 34px 9px 13px;
  border: 1px solid $gray-300;
  border-radius: $r-sm;
  background-color: $white;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-family: $font-sans;
  font-size: $fs-sm;
  color: $gray-900;
  cursor: pointer;
  transition: .18s;

  @include input-focus-gold;
}

// Когда фильтр есть, отступ до края уже задан им (margin-left: auto) — иначе
// поиск сам отжимается вправо.
.statusFilter + .search {
  margin-left: 0;
}

.search {
  width: 280px;
  max-width: 100%;
  padding: 9px 13px;
  border: 1px solid $gray-300;
  border-radius: $r-sm;
  background: $white;
  font-family: $font-sans;
  font-size: $fs-sm;
  color: $gray-900;
  transition: .18s;

  @include input-focus-gold;

  &::placeholder {
    color: $gray-400;
  }
}

.empty,
.error {
  padding: $sp-6;
  background: $white;
  border: 1px solid $gray-200;
  border-radius: $r-md;
  color: $gray-500;
  font-size: $fs-sm;
}

.error {
  color: $red-500;
  border-color: $red-500;
  background: $red-50;
}

.tableWrap {
  background: $white;
  border: 1px solid $gray-200;
  border-radius: $r-md;
  box-shadow: $sh-1;
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: $fs-sm;

  th {
    text-align: left;
    padding: 12px 16px;
    background: $gray-50;
    border-bottom: 1px solid $gray-200;
    color: $gray-500;
    font-size: $fs-label;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  td {
    padding: 14px 16px;
    border-bottom: 1px solid $gray-100;
    color: $gray-900;
    vertical-align: middle;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  tbody tr:last-child td {
    border-bottom: 0;
  }
}

// Кликабельна вся строка (см. RequestsTableView — onClick на <tr>).
.row {
  cursor: pointer;
  transition: background .16s;

  &:hover {
    background: $gold-50;
  }

  &:focus-visible {
    outline: 2px solid $gold-500;
    outline-offset: -2px;
  }
}

.colId {
  width: 70px;
  color: $gray-400;
  white-space: nowrap;
}

.colType {
  width: 200px;
  color: $navy-700;
  font-weight: 500;
}

.colTitle {
  min-width: 240px;
}

.colDate {
  width: 110px;
  color: $gray-500;
  white-space: nowrap;
}

.colAuthor {
  width: 280px;
  color: $gray-500;
}

.colStatus {
  width: 190px;
}

.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: $r-md;
  font-size: $fs-caption;
  font-weight: 500;
  line-height: 1.3;
}

.statusDraft {
  background: $gray-100;
  color: $gray-700;
}

.statusOnApproval {
  background: $gold-100;
  color: $gold-600;
}

.statusApproved {
  background: $green-50;
  color: $green-600;
}

.statusRejected {
  background: $red-50;
  color: $red-500;
}

.statusReturned {
  background: $blue-50;
  color: $blue-600;
}

.statusDefault {
  background: $gray-100;
  color: $gray-500;
}