/* The big-list card (it-73, Aldo 2026-10-02 — the legacy contacts table's shape): the contact list, each record
   list and the staff console's manual-import loans (it-80.15); other tables keep the plain house .table. The card is a .float-card .float-card--flush (surface, radius,
   shadow); this file is layout only, plus the table's look inside the card.

     .list-card__bar   above the table — the page's actions (contacts: bulk actions) left; count + pages right
     table.list-table  the house .table, borderless inside the card, sentence-case header band
     .list-card__foot  below the table — count + page size left; pages right

   The pager pieces are templates/shared/_pager.html; the pages themselves are styled in pager.css. */

.list-card__bar,
.list-card__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}
.list-card__bar { margin-bottom: var(--space-1, 0.25rem); }
.list-card__foot { margin-top: var(--space-1, 0.25rem); }

.list-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
}
.list-card__selected {
  color: var(--md-sys-color-primary);
  font-weight: 600;
  padding-inline: var(--space-2, 0.5rem);
}
.list-card__selected:empty { display: none; }

.list-card__paging {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-left: auto;
}
.list-card__count {
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.list-card__per {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}
.list-card__foot .pager { margin-left: auto; }

/* The table inside the card: the card is the frame, so no border or corners of its own. Rows sit on the card's own
   surface (the plain .table paints the page surface, which reads as a tint inside a white card); the header band is
   a faint wash of the text colour over the card (near-neutral — the container tones read lavender), sentence case; dividers are a hairline — the outline-variant at half strength. */
.list-table {
  --list-divider: color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
  border: none;
  border-radius: 0;
  background: transparent;
  /* The house .table clips (overflow: hidden) to keep its rounded border clean; without a border or corners there is
     nothing to clip, and the clip cut off anything that opens past a row — a last row's tooltip (it-80.16). */
  overflow: visible;
}
.list-table th,
.list-table td { border-bottom-color: var(--list-divider); }
.list-table th {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, var(--md-sys-color-surface-container-lowest));
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
/* The row actions stay a table cell (a flex <td> drops out of the table's row box and draws its divider out of line);
   the flex row is the .table__actions inside it. */
.list-table__actions { white-space: nowrap; }

/* A ticked row reads as selected (the bulk actions act on it). */
.list-table tbody tr:has([data-bulk-row]:checked) {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 60%, transparent);
}