/* Billing: invoices, payments, billing settings (web/invoices.js). Phone first, theme colors. */
.bl-wrap .card b:first-child { display: block; }
.bl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.bl-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow, none); }
.bl-stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.bl-stat .v { font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--primary); overflow-wrap: anywhere; }
.bl-stat.late .v { color: var(--error); }
.bl-stat .m { font-size: 12.5px; }
.bl-tabs { margin: 12px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
.bl-tabs::-webkit-scrollbar { display: none; }
.bl-tabs .small-btn { padding: 7px 10px; white-space: nowrap; flex-shrink: 0; }
.bl-wrap .card > .btn + .m { margin-top: 6px; }
.bl-acts .btn + .m { margin: 6px 0 10px; }
.bl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.bl-list .bl-row:first-child { padding-top: 2px; }
.bl-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bl-main .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-main .m { color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.bl-amt { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-warn { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--error); }
.bl-late { color: var(--error); font-weight: 600; }
.bl-listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 2px 8px; font-size: 13.5px; color: var(--text-soft); }
.bl-listhead b { color: var(--text); font-size: 15px; }
.bl-sendbox { margin: 0 0 14px; }
.bl-sendbox .btn { margin-top: 0; }
.bl-sendbox .m { margin-top: 6px; text-align: center; }
.bl-prog { margin-top: 10px; }
.bl-bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.bl-bar span { display: block; height: 100%; width: 0; background: var(--link); transition: width .25s ease; }
.bl-mail { border-left: 4px solid var(--accent); }
.bl-mail .btn { margin-top: 10px; }
/* invoice screen */
.bl-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bl-dates > div { min-width: 0; }
.bl-dates .k, .bl-owe .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px; }
.bl-dates b { display: block; font-size: 14.5px; }
.bl-dates input { margin: 0; padding: 8px 10px; }
.bl-line { border-top: 1px solid var(--border); }
.bl-line:first-child { border-top: 0; }
.bl-lhead { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; border: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.bl-lhead:disabled { cursor: default; opacity: 1; }
.bl-line:first-child .bl-lhead { padding-top: 2px; }
.bl-line.need .bl-lhead .n { color: var(--error); }
.bl-led { padding: 4px 0 14px; }
.bl-led label:first-child { margin-top: 0; }
.bl-led .row { margin-top: 10px; }
.bl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-2 > div { min-width: 0; }
.bl-tax { border: 0; padding: 10px 0 0; }
.bl-addline { margin-top: 12px; width: 100%; padding: 10px; }
.bl-tots > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.bl-tots > div span { color: var(--text-soft); }
.bl-tots .big { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-size: 17px; }
.bl-tots .big span { color: var(--text); font-weight: 600; }
.bl-tots .due { font-size: 19px; }
.bl-tots .due span { color: var(--text); font-weight: 700; }
.bl-tots .due b { color: var(--primary); }
.bl-acts { margin: 14px 0; }
.bl-acts > .btn:first-child { margin-top: 0; }
.bl-acts .act-row { margin: 10px 0 0; }
.bl-acts .m { text-align: center; margin-top: 6px; }
.bl-h2 { margin: 18px 0 8px; }
.btn.bl-danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, var(--border)); }
.btn.bl-danger.danger { color: #fff; }
.bl-gets { flex-shrink: 0; align-self: center; font-size: 13px; font-weight: 700; color: var(--link); white-space: nowrap; }
/* client card */
.bl-owe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.bl-owe b { display: block; font-family: var(--font-heading); font-size: 26px; line-height: 1.1; color: var(--primary); }
.bl-owe b.late { color: var(--error); }
.bl-owe .bl-late { font-size: 13px; }
.bl-planed { padding: 0 0 12px; }
.bl-planed .row { margin-top: 12px; }
.bl-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bl-months button { padding: 9px 0; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: 600 13.5px var(--font-body); cursor: pointer; min-width: 0; }
.bl-months button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.bl-seg-sm { flex-wrap: nowrap; flex-shrink: 0; }
.bl-seg-sm button { min-width: 0; flex: 0 0 auto; padding: 7px 11px; }
.bl-sub { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.bl-sub + .bl-row { border-top: 0; }
/* settings */
.bl-suffix { display: flex; align-items: center; gap: 8px; }
.bl-suffix input { flex: 1; min-width: 0; }
.bl-suffix span { color: var(--text-soft); font-size: 14px; white-space: nowrap; }
.bl-at span { overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.bl-methods { display: grid; grid-template-columns: 1fr 1fr; }
.bl-methods .check-row, .bl-soon .check-row { border-top: 0; padding: 8px 2px; }
.bl-soon { opacity: .7; }
@media (max-width: 360px) { .bl-2, .bl-methods { grid-template-columns: 1fr; } .bl-months { grid-template-columns: repeat(4, 1fr); } }
.bl-wrap .person .m, #cl-billing .person .m { word-break: normal; overflow-wrap: anywhere; }
.bl-sub + .person { border-top: 0; padding-top: 8px; }
.bl-months + .m { margin-top: 6px; }
.bl-meth { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.bl-meth button { min-width: 0; }
/* season plan: what it covers (0073) */
.bl-cov .bl-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bl-covlist { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 0 10px; margin-top: 6px; }
.bl-covlist .check-row { border-top: 0; padding: 8px 2px; }
.bl-covlist .check-row .n { overflow-wrap: anywhere; }
/* seasonal contracts (web/contracts.js): customer page + Billing → Contracts */
.ct-card .ct-pays { margin-top: 8px; }
.ct-card .ct-pays .bl-row + .bl-row { border-top: 1px solid var(--border); }
.ct-card .bl-amt .pill { margin-left: 6px; vertical-align: middle; }
.ct-cancelled { margin-top: 4px; }
.ct-confirm { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.ct-what { padding-left: 18px; margin: 6px 0 10px; }
.ct-what li { margin: 4px 0; }
/* 0130: tap-to-edit drafts (web/inline-edit.js), running drafts, review */
.bl-lrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0 4px; }
.bl-line:first-child .bl-lrow { padding-top: 2px; }
.bl-lrow .bl-main .n { white-space: normal; }
.bl-lname { font-weight: 600; }
.bl-ldesc, .bl-lmeta { margin-top: 2px; }
.bl-lmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.bl-lmeta .bl-warn { display: inline; margin: 0; }
.bl-dot { color: var(--border); }
.bl-line.need .bl-lname .ie { color: var(--error); }
.ie-bt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; flex: 1 1 100%; }
.ie-bt label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.ie-bt label:nth-child(-n+5) { grid-column: 1 / -1; }
.ie-ed .ie-bt input, .ie-ed .ie-bt textarea { margin: 2px 0 0; width: 100%; font-weight: 400; }
.ie-bt .link { grid-column: 1 / -1; justify-self: start; }
.bl-lacts { display: flex; gap: 6px; justify-content: flex-end; padding: 0 0 10px; }
.bl-flag { margin-top: 8px; padding: 8px 10px; border-radius: 10px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); font-size: 13.5px; color: var(--text); }
.bl-flag .row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.bl-sugg { margin-top: 6px; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-sugg.hint { color: var(--text-soft); }
.bl-crew { margin-top: 6px; padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--border); font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.bl-crew .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bl-notes .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px; }
.bl-billto { grid-column: 1 / -1; }
.bl-billto b { font-weight: 600; }
.bl-appr { margin: 10px 0; font-weight: 600; color: var(--success, var(--primary)); }
#iv-apprbox .btn { margin-top: 10px; }
.bl-rrow { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
.bl-rrow:first-child { border-top: 0; }
.bl-rrow > .bl-row { flex: 1 1 auto; min-width: 0; border-top: 0; }
.bl-racts { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.bl-racts .small-btn { white-space: nowrap; }
.bl-eq { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.bl-eq > input, .bl-eq > textarea { flex: 1 1 180px; min-width: 0; margin: 0; }
.bl-eq .bl-suffix { flex: 0 0 140px; }
.bl-eq .bl-suffix input { margin: 0; }
.iv-prev { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: color-mix(in srgb, var(--text) 55%, transparent); }
.iv-prev-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--card); color: var(--text); border-bottom: 1px solid var(--border); }
.iv-prev-frame { flex: 1; width: 100%; border: 0; background: #e8e8e2; }
@media (max-width: 420px) { .bl-racts .te-b { width: 30px; height: 30px; } }

/* ---- 0132: month-end billing readiness (Billing → To review, and Home) */
.mr-card .mr-head { display: block; font-size: 16px; }
.mr-card.clear .mr-head { color: var(--ok, var(--primary)); }
.mr-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mr-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; }
.mr-item:first-child { border-top: 0; }
.mr-n { flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.mr-item.ok .mr-n { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.mr-item.ok .mr-t { color: var(--text-soft); }
.mr-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mr-body .mr-t { display: block; }
.mr-body .mr-go { margin-top: 6px; }
.mr-sub { margin: 6px 0 0; padding-left: 18px; }
.mr-sub li { margin: 3px 0; overflow-wrap: anywhere; }
.mr-add { color: var(--link); }
.mr-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.mr-acts { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.mr-only { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 2px 0; font-weight: 600; }

/* 0131: Venmo / Zelle / PayPal (Settings → Billing → Other ways to pay) and "Paid by Venmo" on an invoice */
.bl-op .bl-sub .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.bl-op .person { align-items: center; gap: 10px; }
.bl-qr { display: block; width: 96px; height: 96px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--border); }
.bl-qrbtns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.bl-qrbtns label.small-btn { cursor: pointer; text-align: center; }
.bl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.bl-quick .m { width: 100%; }

/* 0135: customers say they paid (web/sent-reports.js) */
.sr-card .sr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.sr-card .sr-row:first-of-type { margin-top: 6px; }
.sr-card .sr-t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.sr-card .sr-b { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-card .sr-m { flex-basis: 100%; }
.sr-card .sr-m.error { color: var(--danger, #b3261e); }
.sr-card .sr-row.done .sr-t { opacity: .6; }
/* 0136: payment reminders (Settings → Billing, the invoice screen, the Overdue list) */
.rm-fill { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--ok-bg); color: var(--primary); font-size: .92em; white-space: nowrap; }
.rm-step .rm-acts { margin-top: 6px; flex-wrap: wrap; }
/* 0137: the payment reminder builder (same step cards as Campaigns) */
.rm-sum { display: flex; align-items: center; gap: 8px; padding: 6px 2px; }
.rm-sum .rm-go { font-size: 22px; color: var(--text-soft); }
.rm-step .step-wait .ie { font-weight: 600; color: var(--text); }
.rm-pv-box { margin-top: 12px; }
.rm-pv-box summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--link); }
.rm-pv { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg); overflow-wrap: anywhere; }
.rm-pv-subj { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.rm-pv-body p, .rm-pv-body ul, .rm-pv-body ol, .rm-pv-body blockquote, .rm-pv-body h3 { margin: 0 0 10px; }
.rm-pv-body blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--text-soft); }
.fill-btn { display: inline-block; padding: 10px 18px; border-radius: 10px; background: var(--primary); color: var(--on-primary, #fff) !important; font-weight: 700; text-decoration: none; }
.rm-test { margin-top: 10px; align-items: center; flex-wrap: wrap; gap: 8px; }
.rm-test select { width: auto; max-width: 100%; margin: 0; }
.rm-card .btn { margin-top: 10px; }
.rm-card .rm-h .n { font-weight: 600; }
#bs-remind code { font-size: 13px; overflow-wrap: anywhere; }
.bl-rem { color: var(--text-soft); }
/* 0154: practice bills (customer billed the old way) + Compare with old bills */
.pill.bl-practice { background: #efe7fb; color: #5b3b8c; }
.bl-practicebox .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.bl-practicemsg { background: color-mix(in srgb, #7a5cb0 12%, var(--card)); color: var(--text); border-left: 4px solid #7a5cb0; }
.cmp-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.cmp-sum .k, .cmp-nums .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.cmp-sum b { font-size: 18px; }
.cmp-row { padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.cmp-row:last-child { border-bottom: 0; }
.cmp-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.cmp-name .n { font-weight: 600; overflow-wrap: anywhere; }
.cmp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.cmp-nums b { overflow-wrap: anywhere; }
.cmp-nums b.late { color: var(--error); }
.cmp-detail { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.cmp-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.cmp-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.cmp-lines li span { min-width: 0; overflow-wrap: anywhere; }
.cmp-detail .act-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-more summary { cursor: pointer; font-weight: 600; }
#cmp-paste textarea { width: 100%; }
#cmp-paste .btn { margin-top: 8px; }