/* Shared table sort/filter affordances. Loaded alongside the page's own
   stylesheet, which keeps the table's colours and spacing; this file only
   adds the sort indicator and the filter bar.

   Self-contained values rather than variables: the pages disagree about
   variable names (--ink versus --text-primary), and a component that only
   works on three of five pages is worse than one that matches imperfectly
   on all of them. */

.dt-bar {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .5rem;
}
/* `display` beats [hidden], so a bar a page hides stays visible without
   this - the same trap as the hidden-row rule at the bottom of this file. */
.dt-bar[hidden] { display: none; }
.dt-search {
  flex: 0 1 22rem; min-width: 0;
  padding: 7px 10px; font: inherit; font-size: 14px;
  border: 1px solid rgb(128 128 128 / 35%); border-radius: 7px;
  background: transparent; color: inherit;
}
.dt-search:focus { outline: 2px solid #1d4ed8; outline-offset: -1px; }
.dt-count { font-size: 13px; opacity: .72; }

/* Sortable headers. The caret is always present but faint until the column
   is the active one, so the header does not jump sideways when it becomes
   sorted - a column that resizes on click is a column people click twice. */
.dt-sortable {
  cursor: pointer; user-select: none; white-space: nowrap;
  position: relative; padding-right: 1.1rem !important;
}
.dt-sortable:hover { color: inherit; }
.dt-sortable:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }

.dt-sortable::after {
  content: "↕"; position: absolute; right: .35rem;
  font-size: .72em; opacity: .28; font-weight: 400;
}
.dt-sortable[aria-sort="ascending"]::after  { content: "↑"; opacity: .95; }
.dt-sortable[aria-sort="descending"]::after { content: "↓"; opacity: .95; }

/* A hidden row must stay hidden whatever the table's own display rules say -
   `display: table-row` in a page stylesheet would otherwise beat [hidden]. */
tbody tr[hidden] { display: none !important; }