/* Simple styling for sortable table */

.table-sortable {
  width: 100%;
  border-collapse: collapse;
  /* background: #fff; */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.table-sortable th,
.table-sortable td {
  /* padding: 10px 12px; */
  text-align: left;
}
.table-sortable thead th {
  /* background: #f1f3f6; */
  cursor: pointer;
  user-select: none;
  position: relative;
}

.sort-indicator {
  display: inline-block;
  width: 12px;
  margin-left: 6px;
  font-size: 11px;
  color: #666;
}
.dark-mode .sort-indicator {
  display: inline-block;
  width: 12px;
  margin-left: 6px;
  font-size: 11px;
  color: #f1f1f1;
}
.table-sortable thead th.sort-asc::after {
  content: "\25B2";
  margin-left: 6px;
  font-size: 11px;
  color: #666;
}
.table-sortable thead th.sort-desc::after {
  content: "\25BC";
  margin-left: 6px;
  font-size: 11px;
  color: #666;
}
.dark-mode .table-sortable thead th.sort-asc::after,
.dark-mode .table-sortable thead th.sort-desc::after {
  color: #f1f1f1;
}
/* Small visual for active column */

@media (max-width: 700px) {
  .table-sortable th,
  .table-sortable td {
    padding: 8px;
  }
}