/* Compact transaction cards on phones; desktop keeps the full editing grid. */
.transaction-mobile-details { display: none; }
@media (max-width: 700px) {
  .transaction-sheet { max-height: none; overflow: visible; border: 0; background: transparent; }
  .transaction-sheet table { display: block; min-width: 0; width: 100%; }
  .transaction-sheet thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .transaction-sheet tbody { display: grid; gap: 14px; width: 100%; }
  .transaction-sheet tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px; padding: 14px; border: 1px solid #3c536f;
    border-radius: 14px; background: #122235; min-width: 0;
  }
  .transaction-sheet tbody tr.has-draft { border-color: #69d2ce; }
  .transaction-sheet tbody tr.has-conflict { border-color: #e2ab6e; }
  .transaction-sheet tbody th, .transaction-sheet tbody td {
    position: static; min-width: 0; max-width: none; padding: 0;
    border: 0; background: transparent !important;
  }
  .transaction-sheet tbody th { grid-column: 1 / -1; order: 6; }
  .transaction-sheet tbody th span::before { content: 'Source row '; }
  .transaction-sheet .transaction-cell::before {
    display: block; margin-bottom: 5px; color: #b8cddd;
    font-size: 12px; font-weight: 600; line-height: 1.4;
  }
  .transaction-sheet .transaction-date { order: 1; }
  .transaction-sheet .transaction-date::before { content: 'Date'; }
  .transaction-sheet .transaction-amount { order: 2; }
  .transaction-sheet .transaction-amount::before { content: 'Amount ($)'; }
  .transaction-sheet .transaction-merchant { order: 3; grid-column: 1 / -1; }
  .transaction-sheet .transaction-merchant::before { content: 'Transaction name'; }
  .transaction-sheet .transaction-classification_label { order: 4; grid-column: 1 / -1; }
  .transaction-sheet .transaction-classification_label::before { content: 'Property / classification'; }
  .transaction-sheet .transaction-mobile-details { display: block; order: 5; grid-column: 1 / -1; }
  .transaction-sheet .transaction-mobile-details button {
    min-height: 44px; width: 100%; padding: 10px 12px; font-size: 14px;
    text-align: left; border-color: #3c536f; color: #c4e6f1;
  }
  .transaction-sheet .transaction-account { order: 7; grid-column: 1 / -1; }
  .transaction-sheet .transaction-account::before { content: 'Account'; }
  .transaction-sheet .transaction-account_mask { order: 8; grid-column: 1 / -1; }
  .transaction-sheet .transaction-account_mask::before { content: 'Card / account ending'; }
  .transaction-sheet .transaction-review_status { order: 9; grid-column: 1 / -1; }
  .transaction-sheet .transaction-review_status::before { content: 'Review status'; }
  .transaction-sheet .transaction-notes { order: 10; grid-column: 1 / -1; }
  .transaction-sheet .transaction-notes::before { content: 'Notes'; }
  .transaction-sheet tbody tr:not(.show-mobile-details) > th,
  .transaction-sheet tbody tr:not(.show-mobile-details) > .transaction-account,
  .transaction-sheet tbody tr:not(.show-mobile-details) > .transaction-account_mask,
  .transaction-sheet tbody tr:not(.show-mobile-details) > .transaction-review_status,
  .transaction-sheet tbody tr:not(.show-mobile-details) > .transaction-notes { display: none; }
  .transaction-sheet input, .transaction-sheet select {
    box-sizing: border-box; display: block; width: 100%; min-width: 0; max-width: 100%;
    min-height: 46px; padding: 10px; border: 1px solid #476079;
    background: #0a1828; border-radius: 8px; font-size: 16px; color: #edf5ff;
  }
  .transaction-sheet .transaction-amount input { text-align: left; }
  .transaction-sheet .transaction-save { order: 11; grid-column: 1 / -1; }
  .transaction-sheet .transaction-save .btn { min-height: 46px; padding: 11px; font-size: 15px; }
  .transaction-sheet .transaction-conflict { min-width: 0; }
  .transaction-sheet .transaction-classification_label button { min-height: 44px; }
}