// Sortable table headers

.table th a.selected {
  position: relative;
  text-decoration: underline;

  &.asc:after, &.desc:after {
    text-decoration: none;
    position: absolute;
    top: 0;
    right: -1em;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }

  &.asc:after {
    content: '\f0de'; //fa-sort-up
  }

  &.desc:after {
    content: '\f0dd'; //fa-sort-down
  }
}

table.messages {
  .payload {
    color: #999;
    font-size: 12px;
    font-family: monospace;
  }
}

// General

table.table {
  font-size: 14px;

  thead th {
    font-weight: 300;
    font-size: 14px;
    vertical-align: top !important;
    border: 1px solid $primary;
    border-top: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }

  tbody td {
    line-height: 1.2;
    padding: 8px;
    padding-top: 10px;
    border: none;
    border-bottom: 1px solid #222;
    border-bottom-width: 1px !important;
    vertical-align: middle;
  }

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

  a.btn.btn-primary {
    white-space: nowrap;
  }

  a:not(.btn) {
    cursor: pointer;
  }
}

// DataTables overrides

div.dataTables_wrapper div.dataTables_filter {
  label {
    color: $secondary;
  }
  input[type=search] {
    min-width: 270px;
  }
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
  top: 7px !important;
  right: 15.5px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
  top: 7px !important;
  right: 5px !important;
}

table.dataTable {
  border: 1px solid $primary;

  th {
    color: #828a93;
    color: $secondary;

    &.sorting_asc,
    &.sorting_desc {
      color: white;
    }
    &.sorting::after,
    &.sorting::before {
      color: $secondary;
      opacity: 1;
    }
  }
}

.dataTables_info {
  font-size: 12px;
  color: $secondary;
}

// User Management

#users-table {
  th.username {
    min-width: 80px;
  }

  th.registered {
    min-width: 120px;
  }
}
