/* Shared browser-side table renderer. Any ordinary table with thead/tbody becomes
 * sortable unless data-reactive="off" is set on it. */
.table-reactive > thead > tr > th[data-reactive-column] {
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}

.table-reactive > thead > tr > th[data-reactive-column]:hover {
  background: color-mix(in srgb, var(--bs-primary, #696cff) 12%, transparent);
}

.table-reactive > thead > tr > th[data-reactive-column]:focus-visible {
  outline: 2px solid var(--bs-primary, #696cff);
  outline-offset: -2px;
}

.table-reactive .tr-sort-indicator {
  display: inline-block;
  width: 1em;
  margin-inline-start: .35rem;
  color: var(--bs-secondary-color, #8592a3);
  font-size: .85em;
  line-height: 1;
  text-align: center;
}

.table-reactive th[data-reactive-sort-dir="asc"] .tr-sort-indicator::before { content: "\2191"; }
.table-reactive th[data-reactive-sort-dir="desc"] .tr-sort-indicator::before { content: "\2193"; }
.table-reactive th[data-reactive-sort-dir="none"] .tr-sort-indicator::before { content: "\2195"; }
.table-reactive th[data-reactive-sort-dir="asc"],
.table-reactive th[data-reactive-sort-dir="desc"] { color: var(--bs-primary, #696cff); }

@media (prefers-reduced-motion: reduce) {
  .table-reactive > thead > tr > th[data-reactive-column] { transition: none; }
}