/* 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; }