/* mobile-cards.css — phone-only card view for wide .sheet data grids.
 *
 * Every rule is inside @media(max-width:640px) and scoped to `.sheet.mobilecards`
 * (a class only js/mobile-cards.js adds, only inside the app). So:
 *   • Desktop / tablet: nothing here applies — grids stay exactly as they were.
 *   • The marketing website: never loads this file and has no .sheet tables.
 * Removing this file + its <link> fully reverts the feature.
 */
@media (max-width: 640px) {
  /* table → stack of cards */
  .sheet.mobilecards { display: block; width: 100%; font-size: 14px; border: 0; background: transparent; }
  .sheet.mobilecards thead { display: none; }               /* headers move into per-cell labels */
  .sheet.mobilecards tbody,
  .sheet.mobilecards tfoot { display: block; width: 100%; }

  .sheet.mobilecards tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2px 14px;
    margin: 0 0 12px;
    box-shadow: var(--shadow-sm);
  }
  /* neutralize the desktop zebra + hover so each card reads as one surface */
  .sheet.mobilecards tbody tr:nth-child(even),
  .sheet.mobilecards tbody tr:hover { background: var(--surface); }

  /* each cell → a label · value row */
  .sheet.mobilecards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;                 /* undo desktop nowrap so long text wraps */
    text-align: right;
    color: var(--ink-800);
    min-height: 44px;                    /* comfortable tap target */
    box-sizing: border-box;
  }
  .sheet.mobilecards tbody td:last-child { border-bottom: 0; }

  .sheet.mobilecards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    max-width: 45%;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: left;
    line-height: 1.3;
  }

  /* first column reads as the card's headline */
  .sheet.mobilecards tbody td:first-child { font-weight: 600; color: var(--ink-900); font-size: 15px; }

  /* money columns keep the tabular mono treatment on the value side */
  .sheet.mobilecards tbody td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

  /* inline edit inputs stay tappable and right-aligned */
  .sheet.mobilecards tbody td input,
  .sheet.mobilecards tbody td select { max-width: 60%; text-align: right; }

  /* action cell (edit / delete / select) — no label, buttons hug the right */
  .sheet.mobilecards tbody td[data-label=""] { justify-content: flex-end; }
  .sheet.mobilecards tbody td[data-label=""]::before { display: none; }
  .sheet.mobilecards .rowact { justify-content: flex-end; gap: 4px; }

  /* rows that don't map 1:1 to columns (empty state, spanning notes) → full width, centered */
  .sheet.mobilecards tbody tr[data-mcspan] td { justify-content: center; text-align: center; min-height: 0; }
  .sheet.mobilecards tbody tr[data-mcspan] td::before { display: none; }

  /* totals row → its own tinted summary card */
  .sheet.mobilecards tfoot tr.sheet-totals {
    display: block;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2px 14px;
  }
  .sheet.mobilecards tfoot td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-strong);
    font-weight: 700; color: var(--ink-900); text-align: right;
  }
  .sheet.mobilecards tfoot td:last-child { border-bottom: 0; }
  .sheet.mobilecards tfoot td:empty { display: none; }

  /* the scroll wrapper no longer needs to scroll or frame anything */
  .sheet-wrap:has(.mobilecards) { overflow: visible; border: 0; background: transparent; box-shadow: none; padding: 0; }
}