/* The admin console's sortable, paged lists (table.js; TODO #219, #220): the
   Runs screen and the Input Queue. Tokens come from tokens.css.

   THE BOX SCROLLS, NOT THE PAGE. The table sits in a box of bounded height
   that scrolls inside itself, with the header row held at the top, so 500 rows
   do not push the pager off the screen. On a phone the box scrolls sideways
   too, and only the box: the toolbar and the pager wrap to the width. */

.listbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  margin:var(--s-3) 0;font-size:var(--text-sm)}
.listbar .listq{flex:1 1 16rem;min-width:0;max-width:32rem;font:inherit;
  padding:var(--s-1) var(--s-2);border:1px solid var(--line);border-radius:var(--radius)}
.listbar input[type=date]{font:inherit;padding:var(--s-1)}
.listbar .listsize{margin-left:auto}

.tbox{max-height:min(70vh,44rem);overflow:auto;max-width:100%;
  border:1px solid var(--line);border-radius:var(--radius)}
.tbox table{min-width:44rem}
.tbox thead th{position:sticky;top:0;z-index:1;background:var(--surface)}

th[data-sort]{white-space:nowrap}
.sortbtn{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.sortbtn:hover{color:var(--fg)}
th[aria-sort=ascending] .sortbtn,th[aria-sort=descending] .sortbtn{color:var(--fg)}
.sortarrow{font-size:.7em}

.pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  margin:var(--s-3) 0;font-size:var(--text-sm)}
.pager .listcount{color:var(--muted);font-variant-numeric:tabular-nums;padding:0 var(--s-2)}
.pager button{font:inherit;font-size:var(--text-sm)}
.listnote{font-size:var(--text-sm);color:var(--muted);margin:var(--s-2) 0}
/* Loading, an error, or nothing to show: no empty bordered box. */
.tbox:has(> table[hidden]){display:none}