/* Shared table system: used by all table pages and sortable headers. */

:root {
  --tbl-bg: var(--card, #ffffff);
  --tbl-border: var(--border, #d1d5db);
  --tbl-header-bg: var(--iq-silver, #e5e7eb);
  --tbl-header-fg: var(--iq-graphite, #0f172a);
  --tbl-hover: rgba(20, 184, 166, 0.06);
}

table,
.tbl {
  border-collapse: collapse;
  width: 100%;
  background: var(--tbl-bg);
  border: 1px solid var(--tbl-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}

table th,
table td,
.tbl th,
.tbl td {
  padding: 10px;
  border-bottom: 1px solid var(--tbl-border);
  text-align: left;
  vertical-align: top;
}

body.density-compact table th,
body.density-compact table td,
body.density-compact .tbl th,
body.density-compact .tbl td {
  padding: 7px 8px;
}

table th,
.tbl th {
  background: var(--tbl-header-bg);
  font-weight: 600;
  color: var(--tbl-header-fg);
}

table tbody tr:hover td,
.tbl tbody tr:hover td {
  background: var(--tbl-hover);
}

table td.num,
table th.num,
.tbl td.num,
.tbl th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table tr:last-child td,
.tbl tr:last-child td {
  border-bottom: none;
}

.tbl--sticky thead th,
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--tbl-border);
}

.tbl-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tbl-header-fg);
  text-decoration: none;
  font-weight: 600;
}

.tbl-sort:hover {
  text-decoration: underline;
}

.tbl-sort__icon {
  font-size: 11px;
  opacity: 0.75;
  line-height: 1;
}

.tbl-sort--active .tbl-sort__icon {
  opacity: 1;
}

.tbl-client-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.tbl-client-sortable::after {
  content: "↕";
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
}

.tbl-client-sortable[data-client-sort-state="asc"]::after {
  content: "▲";
  color: #0f172a;
}

.tbl-client-sortable[data-client-sort-state="desc"]::after {
  content: "▼";
  color: #0f172a;
}