/* Billing & invoices — owner profile "Billing" card, the Payments-screen bills block, the generator modal, and the customer's "Payments & Bills".
   Builds on the existing .fin-* money styles (style.css); only what is new lives here. */
.bl-card { display: flex; flex-direction: column; gap: 10px; }
.bl-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.bl-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
.bl-row > span { color: #746B64; min-width: 110px; }
.bl-row small { color: #746B64; }
.bl-warn { color: #a3271b !important; }
.bl-inv { border: 1px solid #f0e6d8; border-radius: 14px; padding: 12px; background: #fff; margin-bottom: 10px; }
.bl-inv.is-void { background: #faf5f3; }
.bl-inv.is-void .bl-inv-amt span { text-decoration: line-through; color: #746B64; }
.bl-inv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bl-inv-top b { font-size: 15px; word-break: break-all; }
.bl-inv-meta { font-size: 13px; color: #746B64; margin: 4px 0; }
.bl-inv-amt { display: flex; gap: 10px; align-items: baseline; }
.bl-inv-amt span { font-size: 20px; font-weight: 800; color: #1f1a17; }
.bl-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.bl-acts a.fin-link { text-decoration: none; display: inline-flex; align-items: center; }
.bl-det { margin-top: 10px; border-top: 1px dashed #e6d9c6; padding-top: 10px; }
.bl-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.bl-tbl th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #746B64; padding: 6px 4px; background: #faf5ee; }
.bl-tbl td { padding: 7px 4px; border-bottom: 1px solid #f3ebdf; vertical-align: top; }
.bl-tbl .r { text-align: right; white-space: nowrap; }
.bl-sum { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.bl-total { font-size: 17px; border-top: 2px solid #1f1a17; margin-top: 4px; padding-top: 8px; }
.bl-note { font-size: 12.5px; color: #746B64; margin: 6px 0; }
.bl-h { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #746B64; }
.bl-gen { max-width: 560px; }
.bl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-adjs { margin: 4px 0 10px; }
.bl-adj { display: grid; grid-template-columns: minmax(0, 1fr) 110px 32px; gap: 6px; margin: 6px 0; }
.bl-adj input { min-height: 40px; box-sizing: border-box; width: 100%; }
.bl-prev { margin-top: 6px; border-top: 1px solid #f0e6d8; padding-top: 10px; }
.bl-who { display: flex; flex-direction: column; margin-bottom: 8px; font-size: 13px; }
.bl-who span { color: #746B64; }
.bl-foot { position: sticky; bottom: 0; background: #fff; padding: 10px 0 2px; }
.bl-footbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-footbtns .btn { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.bl-ok { background: #e3f3e6; border-radius: 12px; padding: 12px 14px; color: #1d6b32; }
.bl-ok p { margin: 4px 0 0; color: #1d6b32; }
.bl-summary { margin: 14px 0; }
.bl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bl-stat { background: #faf5ee; border: 1px solid #f0e6d8; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bl-stat b { font-size: 22px; }
.bl-stat small { color: #746B64; }
/* customer: Payments & Bills */
.pb-balance { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.pb-fig { background: #faf5ee; border: 1px solid #f0e6d8; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pb-fig span { font-size: 12px; color: #746B64; }
.pb-fig b { font-size: 18px; color: #1f1a17; }
.pb-fig.is-due { background: #fdf0ee; border-color: #f5cbc5; }
.pb-fig.is-due b { color: #a3271b; }
.pb-h { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #746B64; }
.pb-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid #f0e6d8; }
.pb-inv .pb-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-inv .pb-main small { color: #746B64; }
.pb-inv .pb-amt { font-weight: 800; text-align: right; }
.pb-inv .pb-amt small { display: block; font-weight: 600; color: #a3271b; }
.pb-inv.is-void { opacity: .6; }
.pb-latest { background: #fff8ee; border: 1px solid #f1dfc2; border-radius: 14px; padding: 12px; margin-bottom: 6px; }
@media (max-width: 420px) { .bl-two { grid-template-columns: 1fr; } .bl-adj { grid-template-columns: minmax(0, 1fr) 90px 28px; } }

/* ---- guided Generate Bill (4 steps) ---- */
.bl-gen { max-width: 640px; width: calc(100% - 24px); max-height: 94vh; overflow-y: auto; padding-bottom: 0; position: relative; }
.bl-gen-title { margin: 0 0 2px; }
.bl-gen-sub { margin: 0 0 10px; color: #746B64; font-size: 13px; }
.bl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.bl-steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #9a8f84; text-align: center; }
.bl-steps li b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #efe8df; color: #5d544c; font-size: 13px; }
.bl-steps li.on { color: #1f1a17; font-weight: 700; }
.bl-steps li.on b { background: #9b2017; color: #fff; }
.bl-steps li.done b { background: #1d6b32; color: #fff; }
.bl-card2 { border: 1px solid #f0e6d8; border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #fff; }
.bl-card2 h4 { margin: 0 0 8px; font-size: 15px; }
.bl-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid #efe5d6; border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.bl-opt.on { border-color: #9b2017; background: #fdf6f4; }
.bl-opt input { margin-top: 4px; }
.bl-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-opt small { color: #746B64; }
.bl-tag { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
.bl-tag.cur { background: #e3f3e6; color: #1d6b32; }
.bl-tag.prev { background: #efe8df; color: #5d544c; }
.bl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bl-segopt { border: 1px solid #efe5d6; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.bl-segopt input { position: absolute; opacity: 0; pointer-events: none; }
.bl-segopt.on { border-color: #9b2017; background: #fdf6f4; }
.bl-segopt small { color: #746B64; font-size: 12px; }
.bl-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.bl-days { display: flex; flex-direction: column; gap: 6px; }
.bl-day { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid #f0e6d8; border-radius: 12px; padding: 8px 10px; background: #fff; }
.bl-day.is-billed { background: #faf5f3; }
.bl-day.is-off { opacity: .6; }
.bl-pick { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.bl-pick input { width: 20px; height: 20px; }
.bl-day-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bl-day-main small { color: #746B64; }
.bl-billed { color: #a3271b !important; font-weight: 700; }
.bl-notbilled { color: #1d6b32 !important; }
.bl-day-rate { display: flex; align-items: center; gap: 6px; text-align: right; }
.bl-day-rate small { display: block; color: #746B64; }
.bl-day-rate .is-special { color: #9b2017; }
.bl-pencil { border: 1px solid #e6d9c6; background: #fff; border-radius: 10px; min-width: 40px; min-height: 40px; font-size: 18px; cursor: pointer; }
.bl-adj3 { display: grid; grid-template-columns: 96px 80px minmax(0, 1fr) 28px; gap: 6px; margin: 6px 0; }
.bl-adj3 input, .bl-adj3 select { min-height: 40px; box-sizing: border-box; width: 100%; }
.bl-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #f0e6d8; padding: 10px 0 12px; margin-top: 8px; z-index: 2; }
.bl-bar-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bl-bar-total span { color: #746B64; font-size: 13px; }
.bl-bar-total b { font-size: 22px; color: #9b2017; }
.bl-bar-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bl-bar-btns .btn { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.bl-sheet-wrap { position: fixed; inset: 0; background: rgba(31, 26, 23, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.bl-sheet { background: #fff; width: 100%; max-width: 640px; border-radius: 18px 18px 0 0; padding: 16px 16px 20px; max-height: 88vh; overflow-y: auto; box-sizing: border-box; animation: gdSheetUp .25s ease-out; }
.bl-sheet h4 { margin: 0 0 4px; }
/* Billing & Invoices center */
.bl-stat { cursor: pointer; text-align: left; font: inherit; }
.bl-stat.on { border-color: #9b2017; background: #fdf6f4; }
.bl-center-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.bl-center-tools input[type=search] { flex: 1 1 200px; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #e6d9c6; border-radius: 12px; }
.bl-crow { display: flex; justify-content: space-between; gap: 10px; padding: 11px 10px; border: 1px solid #f0e6d8; border-radius: 12px; margin-bottom: 8px; background: #fff; color: inherit; text-decoration: none; }
.bl-crow > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-crow small { color: #746B64; }
.bl-crow .r { text-align: right; align-items: flex-end; }
@media (max-width: 520px) {
  .bl-gen { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; margin: 0; }
  .bl-seg { grid-template-columns: 1fr 1fr; }
  .bl-adj3 { grid-template-columns: 1fr 1fr; }
  .bl-adj3 input[data-gd-reason] { grid-column: 1 / 3; }
  .bl-adj3 button { grid-column: 2; justify-self: end; }
}