/* .sortable-wrap is purely a JS-detection hook for tablesort-init.js —
   no scroll styling here. Material's own .md-typeset__scrollwrap (added
   at runtime around every table) provides the horizontal overflow,
   so adding overflow-x here would produce a second, nested scrollbar. */

/* Visual affordance: pointer cursor + a small sort indicator on sortable
   table headers, mirroring tablesort's defaults. */
.md-typeset table.sortable thead th {
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  font-weight: 700;
}
/* Show the up-down indicator on every sortable header from first render.
   Tablesort only adds role="columnheader" after a click, so an attribute
   filter here would leave headers blank until the user interacted. */
.md-typeset table.sortable thead th::after {
  content: " \2195"; /* up-down arrow */
  color: var(--md-default-fg-color--lighter);
  font-size: 0.85em;
}
.md-typeset table.sortable thead th[aria-sort="ascending"]::after {
  content: " \2191";
  color: var(--md-primary-fg-color);
}
.md-typeset table.sortable thead th[aria-sort="descending"]::after {
  content: " \2193";
  color: var(--md-primary-fg-color);
}

/* Slight tightening so the wide table is still readable. */
.md-typeset table.sortable td,
.md-typeset table.sortable th {
  padding: 0.35em 0.55em;
  font-size: 0.78rem;
  border: 1px solid var(--md-default-fg-color--lighter);
}

/* Filter input injected by table-filter.js above each .sortable-wrap. */
.md-typeset input.sortable-filter {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: 0.85em;
}
.md-typeset input.sortable-filter:focus {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: -1px;
}