/* The footer under every long list: count, numbered pages, rows per page
   (Daniel, 6 Oct 2026). Shared by the staff tables and the Files list. */
.tp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  background: var(--n-00);
  color: var(--ink-muted);
  font-size: var(--t-sm);
}
.tp-bar[hidden] {
  display: none;
}
.tp-count,
.tp-sizes {
  flex: 1 1 0;
  min-width: 0;
}
.tp-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tp-pages {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tp-sizes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.tp-sizes > span {
  margin-right: 6px;
}
.tp-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tp-btn:hover:not(:disabled) {
  background: var(--n-10);
}
.tp-btn[aria-current='page'],
.tp-btn[aria-pressed='true'] {
  background: var(--navy);
  color: var(--n-00);
  font-weight: 600;
}
.tp-btn:disabled {
  color: var(--n-50);
  opacity: 0.45;
  cursor: default;
}
.tp-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.tp-gap {
  min-width: 20px;
  text-align: center;
}
/* Rows off the current page. !important because phone layouts give table
   rows their own display. */
[data-tp-off] {
  display: none !important;
}
@media (max-width: 640px) {
  .tp-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .tp-count {
    flex-basis: 100%;
  }
  .tp-pages {
    flex: 1 1 auto;
  }
}