/*
 * Lista de registros. No celular e no tablet cada linha é um cartão; a partir do
 * notebook, vira tabela dentro de um cartão (no tablet, o menu lateral de 256px não
 * deixa espaço para as colunas). O HTML é uma <table> com data-label nas células.
 */
.record-list { width: 100%; border-collapse: separate; border-spacing: 0; }

.record-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.record-list tr {
  display: block;
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.record-list td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }

.record-list td::before {
  content: attr(data-label);
  color: var(--color-text-muted);
}

.record-list td.record-list__primary { padding-bottom: var(--space-2); }
.record-list td.record-list__primary::before,
.record-list td.record-list__actions::before { content: none; }
.record-list td.record-list__actions { justify-content: flex-end; margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) 0; padding: 0; }
.record-list td.record-list__actions:empty { display: none; }

.record-list td, .record-list th { overflow-wrap: anywhere; }

/* No papel A4 (cerca de 800px) também vira tabela: não há menu lateral. */
@media (min-width: 1024px), print {
  .record-list {
    border-radius: var(--radius-large);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .record-list thead { position: static; width: auto; height: auto; clip: auto; display: table-header-group; }

  .record-list tr { display: table-row; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: none; }

  .record-list th {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    text-align: left;
  }

  .record-list td {
    display: table-cell;
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width) solid var(--color-border-soft);
    vertical-align: middle;
  }

  .record-list tbody tr:hover td { background: var(--color-page); }
  .record-list td::before { content: none; }
  .record-list td.record-list__primary { padding-bottom: var(--space-3); }
  .record-list td.record-list__actions { margin: 0; padding-top: var(--space-3); text-align: right; border-top: var(--border-width) solid var(--color-border-soft); }
  .record-list td.record-list__actions:empty { display: table-cell; }
}