/* assets/bd-money-mobile.css — fix pack Session 10 (2026-09-28)
 *
 * Money on a phone.
 *
 * The headline problem: every statement table is `min-width:540px` inside a ~343px
 * screen. "Money You're Owed" — the single most important screen in the tool, the one
 * that answers "who owes me" — could only be read by dragging it sideways, a column at
 * a time, with the amount off the right edge. Below 720px each row becomes a card
 * instead: customer and job on the left, the amount large on the right, status and date
 * underneath. Nothing is hidden; the same cells are just stacked to fit a hand.
 *
 * Scoped to <=720px. Desktop keeps its tables exactly as they are.
 */

@media (max-width:720px){

  /* ── Statement tables become cards ───────────────────────────────────── */
  .bd-money-cards .table-scroll{ overflow:visible; }
  .bd-money-cards table.fin-table{ min-width:0 !important; width:100%; border-collapse:separate; border-spacing:0; }
  .bd-money-cards table.fin-table thead{ display:none; }   /* labels move onto each cell */
  .bd-money-cards table.fin-table tbody{ display:block; }

  .bd-money-cards table.fin-table tbody tr{
    display:grid;
    grid-template-columns:1fr auto;
    gap:2px 12px;
    background:#fff;
    border:1px solid var(--border-light,#E4E8EE);
    border-radius:10px;
    padding:12px 14px;
    margin:0 0 10px;
  }
  .bd-money-cards table.fin-table tbody tr:hover{ background:#fff; }

  .bd-money-cards table.fin-table td{
    display:block; border:none; padding:0;
    font-size:14px; color:var(--navy-deep,#0D1B2E);
    min-width:0; overflow-wrap:anywhere;
  }

  /* First cell (Customer) is the card's headline. */
  .bd-money-cards table.fin-table td:first-child{
    grid-column:1; font-weight:700; font-size:15px;
  }
  /* A numeric cell is the amount — big, right, and on the first row of the card. */
  .bd-money-cards table.fin-table td.num{
    grid-column:2; grid-row:1;
    font-weight:700; font-size:17px; text-align:right; white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  /* Everything else stacks down the left, labelled, so no column loses its meaning. */
  .bd-money-cards table.fin-table td:not(:first-child):not(.num){
    grid-column:1; font-size:13px; color:var(--slate,#5B6B80);
  }
  .bd-money-cards table.fin-table td:not(:first-child):not(.num)[data-label]::before{
    content:attr(data-label) ": ";
    font-weight:600; color:#8696aa;
  }
  /* A status pill already carries its own meaning — don't prefix it with "Status:".
     Matches the specificity of the rule above, or it loses and the prefix comes back. */
  .bd-money-cards table.fin-table td:not(:first-child):not(.num)[data-label="Status"]::before{ content:none; }
  .bd-money-cards table.fin-table td:not(:first-child):not(.num)[data-label="Status"]{ margin-top:6px; }

  .bd-money-cards .table-block{ background:transparent; border:none; padding:0; }

  /* An empty table shouldn't look like a broken card. */
  .bd-money-cards table.fin-table tbody tr.bd-empty-row{
    display:block; text-align:center; color:var(--slate,#5B6B80); font-size:14px;
  }

  /* ── Date range: one control instead of seven buttons ────────────────── */
  .bd-period-select{
    display:block; width:100%; min-height:44px;
    border:1px solid var(--border-light,#E4E8EE); border-radius:8px;
    background:#fff; color:var(--navy-deep,#0D1B2E);
    font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:600;
    padding:0 12px;
  }
  .bd-has-period-select .filter-btn[data-period]{ display:none !important; }

  /* ── Tap targets ─────────────────────────────────────────────────────── */
  .fin-mobile-tabs{ flex-wrap:wrap; }
  .fin-mobile-tabs button{ min-height:44px; }
  .select-mini, .btn-outline, .fin-addw-btn{ min-height:44px; }
}

@media (min-width:721px){
  .bd-period-select{ display:none !important; }
}