/* Mobile responsive tables → stacked cards. Active below lg (1023.98px),
   matching the shell's mobile-mode breakpoint. Desktop (≥1024px) is
   untouched. Add class "table-cards" to a <table>; every <td> gets
   data-label="…" (German). Use "cell-hide" on <td>/<th> to drop a column
   on mobile entirely. Use "btn-touch" on primary action buttons to
   guarantee a ≥40px tap target in card mode. */

@media (max-width: 1023.98px) {
  .table-cards thead { display: none; }

  /* Table grid must collapse in card mode: with table-fixed + colgroup the
     block rows get trapped in a 40px anonymous cell and the table stays
     colgroup-wide (872px) — clipped by overflow-hidden wrappers. Making the
     table/tbody block-level gives rows the real card width. */
  .table-cards, .table-cards tbody { display: block; }

  .table-cards tbody tr {
    display: block;
    background: var(--color-surface);
    border: var(--border);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  .table-cards tbody tr:hover { background: var(--color-surface); }

  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.4375rem 0;
    min-height: 2rem;
    border: none;
  }
  .table-cards td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-3);
    flex-shrink: 0;
  }

  .table-cards .cell-hide { display: none !important; }
  .table-cards .btn-touch {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }
  /* Flex children must be allowed to shrink below content width, or
     long values (file names, partners, pills) stick out of the card
     border — text-overflow/truncate can't kick in without this. */
  .table-cards td > * { min-width: 0; }
  /* Beleg list: file names capped at ~15 chars with ellipsis on mobile. */
  .table-cards .beleg-name { max-width: 15ch; }
}

/* Match workspace: mobile tabs — one panel at a time below lg.
   Alpine sets `view` and binds :data-view on .match-workspace; CSS picks
   the visible panel. At ≥lg both panels render side by side as today. */
@media (max-width: 1023.98px) {
  .match-workspace[data-view="txn"]   .panel-files,
  .match-workspace[data-view="files"] .panel-txn  { display: none; }
}