/* --- Tables: admin users, the missing-genre report ---------------------------------------------- */

/* A real <table class="table">, usually in a .panel.panel-flush:
     <th scope="col">           sentence-case column names
     <td class="num">           right-aligned tabular figures
     <td class="actions">       right-aligned .icon-btn-sm buttons named for their row
     <td data-label="Email">    the column name the phone layout shows before the value
     <td class="cell-break">    a value that may be one long unbroken string (an email,
                                a file name): it may break anywhere, so it gives way first
   No horizontal scrolling at any width.

   Cells wrap between words only: the page's `overflow-wrap: anywhere` would let the
   table layout squeeze a short column ("Listener") down to a letter per line. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  overflow-wrap: break-word;
}
.table th {
  padding: var(--space-3) var(--space-4);
  color: var(--fg-muted);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--motion-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-break { overflow-wrap: anywhere; }
.table .actions { width: 1%; text-align: right; white-space: nowrap; }
.table .actions .icon-btn + .icon-btn { margin-left: var(--space-1); }
/* A two-line cell: the name, then something about it in muted meta. */
.table .cell-sub { display: block; color: var(--fg-muted); font-size: var(--text-sm); }

/* Narrow screens: each row becomes a card without a second DOM. The head is hidden
   (still read by a screen reader); the first cell is the title line, the others meta
   lines under it, each led by its data-label; the actions sit at the right of the
   title. Give the table explicit roles (table, row, columnheader, cell) when building
   it, because some browsers drop table semantics once the display changes. */
@media (max-width: 40rem) {
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table, .table tbody { display: block; }
  .table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--hairline);
  }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td,
  .table td.num { grid-column: 1; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .table td + td { color: var(--fg-muted); font-size: var(--text-sm); }
  .table td.actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: auto; }
  .table td[data-label]::before { content: attr(data-label) " "; color: var(--fg-muted); }
}