/* Compact data tables: short rows, actions on one line, slim buttons.
   Loaded last so it settles the older table rules; phones keep the card layout from style.css. */
th { padding: 9px 14px; }
td { padding: 9px 14px; vertical-align: middle; }
td small { margin-top: 2px; }
.nowrap { white-space: nowrap; }

@media (min-width: 621px) {
  /* Buttons size themselves from --control-size (controls.css); tables use a smaller one. */
  .row-actions { width: 1%; white-space: nowrap; --control-size: 32px; --control-icon-size: 14px; --control-gap: 6px; }
  .row-actions .button { padding: 0 10px; font-size: 11px; }
  .row-action-group { flex-wrap: nowrap; gap: 6px; }

  /* Visit rows: edit, invoice, done and partial side by side. */
  .visit-row-actions { min-width: 0; }
  .visit-row-actions .visit-controls { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; width: auto; }
  .visit-row-actions .visit-progress-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  .visit-row-actions .visit-controls .button { width: auto; flex: 0 0 auto; }
  .records-table .visit-meta { margin-top: 4px; }
  .records-table .visit-meta small { flex-basis: auto; }

  /* Material rows: a small thumbnail, and quick-add buttons next to icon-only edit and delete. */
  .material-cell { gap: 12px; min-width: 200px; max-width: 320px; }
  .material-thumbnail { width: 56px; height: 42px; }
  .material-supplier { min-width: 0; }
  .material-supplier a { white-space: nowrap; }
  .material-supplier small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .material-row-actions, .material-action-stack { width: auto; min-width: 0; }
  .material-action-stack { display: flex; align-items: center; gap: 10px; }
  .material-action-stack .shopping-control { width: auto; max-width: none; }
  .material-action-stack .shopping-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .material-action-stack .shopping-add-buttons { grid-template-columns: repeat(4, 38px); gap: 4px; }
  .material-action-stack .shopping-add-buttons .button { padding: 0; }
  .material-manage-actions { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid var(--line); gap: 4px; }
  .material-manage-actions .button { flex: 0 0 auto; padding: 0 9px; }
  .material-manage-actions .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}