@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;
}

.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;
}