/* WealthPilot | css/g3.css — page styles of G3 — Receipts + Bills & Cards (pages/receipts.js, pages/bills.js).
 * Only selectors with this group's own prefixes (spec 8.1); shared components live in core/styles.css. */

/* ─── RECEIPT TILES — white tile, photo on top, three short lines under it (7.3) ─── */
.rcpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:var(--gap)}
.rcpt-thumb{overflow:hidden;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rd);box-shadow:var(--sh)}
.rcpt-tile-photo{position:relative;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--bg4);color:var(--t3);font-size:var(--fs-12)}
.rcpt-tile-photo img{display:block;width:100%;height:100%;object-fit:cover}
.rcpt-status{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--bg2)}
.rcpt-matched{background:var(--pos)}
.rcpt-unmatched{background:var(--warn)}
.rcpt-tile-body{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px 10px}
.rcpt-amt{font-size:var(--fs-14);font-weight:700;color:var(--t1)}
.rcpt-amt .muted{font-size:var(--fs-13);font-weight:400}
.rcpt-shop,.rcpt-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-12)}
.rcpt-shop{color:var(--t2)}
.rcpt-meta{color:var(--t3);font-variant-numeric:tabular-nums}
.rcpt-tile-body .tag{align-self:flex-start;margin-top:4px}

/* ─── RECEIPT MODALS — photo box, facts line, the receipt and its bank lines (7.3) ─── */
.rcpt-photo-lg{display:flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:var(--rd);overflow:hidden;background:var(--t1)}
.rcpt-photo-lg img{display:block;width:100%;max-height:38vh;object-fit:contain}
.rcpt-photo-lg.no-photo{gap:8px;min-height:56px;background:var(--bg3);color:var(--t3);font-size:var(--fs-13)}
.rcpt-facts{margin:0 0 14px;color:var(--t2)}
.match-receipt{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:14px;border-radius:var(--rd);background:var(--bg3)}
.match-thumb{flex:0 0 48px;height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--rd-sm);background:var(--bg4);color:var(--t3)}
.match-thumb img{width:100%;height:100%;object-fit:cover}
.match-info{flex:1;min-width:0}
.match-info .cell-title,.match-info .cell-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-label{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:var(--fs-12);color:var(--t3)}
.match-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bd2)}
.match-row:last-child{border-bottom:0}
.match-row>.num{font-weight:600}

/* ─── BUSY OVERLAY — upload and AI reading (7.3) ─── */
.busy-overlay{position:fixed;inset:0;z-index:var(--z-busy);display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim)}
.busy-box{display:flex;align-items:center;gap:14px;padding:20px 24px;border-radius:var(--rd-lg);background:var(--bg2);box-shadow:var(--sh-pop);font-weight:600}

/* ─── BILLS — due date and its status tag on one line (7.4) ─── */
.bill-due{display:flex;align-items:center;gap:8px}

/* ─── CREDIT CARDS — dark cards (v7), each a button to Settings › บัญชี (7.4) ─── */
.cc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:16px}
.cc-card{padding:16px 18px;border-radius:var(--rd);background:radial-gradient(circle 40px at calc(100% - 10px) 10px,rgba(255,255,255,.04) 99%,transparent),linear-gradient(135deg,var(--t1),#2d2d44);color:var(--bg2)} /* v7's corner circle, drawn inside the card */
.cc-card .muted,.cc-card .zero,.cc-name,.cc-label,.cc-pct{color:rgba(255,255,255,.7)}
.cc-name{margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-11);font-weight:600}
.cc-num{margin-bottom:12px;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.cc-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.cc-label{font-size:var(--fs-11);font-weight:400}
.cc-bal{font-size:var(--fs-18);font-weight:700}
.cc-limit{font-size:var(--fs-14);font-weight:600;text-align:right}
.cc-use{display:flex;align-items:center;gap:8px;margin-top:12px}
.cc-use .prog{flex:1;background:rgba(255,255,255,.18)}
.cc-pct{font-size:var(--fs-11)}

@media (max-width:768px){
  .rcpt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}