/* Pay module — Ledger & Audit and the money-movement screens.
   Uses the deck's existing tokens where they exist, with plain fallbacks so the screen renders even
   before a token is defined. */

.pay-viewbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
.pay-filterrow { margin: 8px 0 12px; }

.pay-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.pay-chip.ok { background: rgba(16, 185, 129, .14); color: #0f9d68; }
.pay-chip.warn { background: rgba(217, 119, 6, .16); color: #b45309; }

.pay-kind { font-weight: 600; }
.pay-kind.refund { color: var(--danger-text, #c0392b); }

table.pay-ledger tfoot td,
table.pay-entries tfoot td { font-weight: 700; border-top: 2px solid var(--border, #e4e7ec); }

.pay-explain-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 2px 0 14px; }
.pay-explain-meta > div { display: flex; flex-direction: column; gap: 3px; }
.pay-explain-meta .l { font-size: 11px; color: var(--muted, #667085); text-transform: uppercase; letter-spacing: .03em; }
.pay-explain-meta .v { font-size: 13px; font-weight: 600; }
.pay-explain-h { font-size: 13px; font-weight: 700; margin: 14px 0 8px; }

.pay-revcard { padding: 16px 18px; border: 1px solid var(--border, #e4e7ec); border-radius: 12px; margin-bottom: 14px; background: var(--card, #fff); }
.pay-revcard-big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 640px) { .pay-explain-meta { grid-template-columns: 1fr; } }