/* =========================================================
   Free Bill Maker — the bill and receipt's own look.
   The shared look (tokens, form, buttons, print, invitation) is in
   ../base.css, which the page must load FIRST. The deposit slip
   loads this file too, for its lines, table and payment box.
   ========================================================= */

/* ---------- extra charge lines ---------- */
.tbm-extra { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr) 120px 46px; align-items: end; margin-bottom: 12px; }
.tbm-extra .tbm-error { margin: 0; }
/* The + add and × remove buttons are in ../base.css: the contract uses them too. */

/* ---------- bill / receipt switch above the document ---------- */
.tbm-doc { margin-bottom: 12px; }

/* ---------- the bill itself ---------- */
.tbm-bill-head { border-bottom: 2px solid var(--tbm-brand-600); padding-bottom: 12px; margin-bottom: 16px; }
.tbm-bill-listing { color: var(--tbm-slate-900); font-size: 20px; font-weight: 700; }
.tbm-bill-title { color: var(--tbm-brand-600); font-weight: 600; }

.tbm-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
.tbm-meta div, .tbm-pay dl div { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.tbm-meta dt, .tbm-pay dt { color: var(--tbm-slate-500); font-weight: 400; }
.tbm-meta dt::after, .tbm-pay dt::after { content: ":"; }
.tbm-meta dd, .tbm-pay dd { margin: 0; color: var(--tbm-slate-900); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 480px) { .tbm-meta { grid-template-columns: minmax(0, 1fr); } }

.tbm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbm-table th { text-align: left; font-size: 12px; color: var(--tbm-slate-500); font-weight: 600; border-bottom: 1px solid var(--tbm-slate-200); padding: 8px 4px; }
.tbm-table td { border-bottom: 1px solid var(--tbm-slate-200); padding: 10px 4px; vertical-align: top; color: var(--tbm-slate-900); }
.tbm-table .tbm-num { text-align: right; white-space: nowrap; }
.tbm-detail { color: var(--tbm-slate-500); font-size: 12px; margin-top: 2px; }
.tbm-table tfoot td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
.tbm-grand td { font-size: 18px; font-weight: 700; color: var(--tbm-brand-700); border-top: 2px solid var(--tbm-slate-900); padding-top: 12px; }

/* ---------- how to pay: bank details and the PromptPay QR ---------- */
.tbm-pay {
    margin-top: 20px; padding: 16px; border-radius: 12px; background: var(--tbm-slate-50);
    border: 1px solid var(--tbm-slate-200); display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.tbm-pay-text { flex: 1 1 200px; min-width: 0; font-size: 14px; }
.tbm-pay-text strong { color: var(--tbm-slate-900); }
.tbm-pay dl { margin: 6px 0 0; display: grid; gap: 4px; }
.tbm-qr { margin: 0 auto; text-align: center; flex: 0 0 auto; }
.tbm-qr-code { width: 168px; height: 168px; background: #fff; border-radius: 8px; padding: 6px; border: 1px solid var(--tbm-slate-200); }
.tbm-qr-code svg { display: block; width: 100%; height: 100%; }
.tbm-qr figcaption { font-size: 12px; color: var(--tbm-slate-500); margin-top: 6px; max-width: 180px; }
.tbm-qr figcaption b { display: block; color: var(--tbm-slate-900); font-size: 14px; }

/* ---------- receipt: paid stamp, amount received, signature line ---------- */
.tbm-received {
    margin-top: 20px; padding: 16px; border-radius: 12px; font-size: 14px;
    background: var(--tbm-slate-50); border: 1px solid var(--tbm-slate-200); position: relative;
}
.tbm-received p { margin: 0 0 6px; color: var(--tbm-slate-900); }
.tbm-received-stamp {
    display: inline-block; margin-bottom: 10px !important; padding: 4px 14px; border-radius: 8px;
    border: 2px solid #047857; color: #047857 !important; font-weight: 800; letter-spacing: .08em;
    transform: rotate(-4deg);
}
/* A receipt signed on the screen: the ink sits just above the "received by" line. */
.tbm-signature-ink { width: 60%; min-width: 180px; margin: 24px 0 0 auto; }
.tbm-signature-ink .tbm-sign-line { border-bottom: 0; margin: 0; }
.tbm-received .tbm-signature-ink + .tbm-signature { margin-top: 0 !important; }
.tbm-signature {
    margin: 36px 0 0 auto !important; width: 60%; min-width: 180px; padding-top: 6px;
    border-top: 1px solid var(--tbm-slate-400); text-align: center; color: var(--tbm-slate-500) !important;
}