/* ============================================================
 * Inscape Billing v2 — Stylesheet
 * Extracted from inscape-billing_v2.html
 * Split: 2026-05-16
 * ============================================================
 * Load order: billing.html → billing.css → billing.js
 * ============================================================ */

:root {
  --navy:    #1a1814;
  --teal:    #c8410a;
  --sky:     #e2ddd6;
  --beige:   #fff0ea;
  --white:   #FFFFFF;
  --green:   #2a5c3f;
  --red:     #c0392b;
  --yellow:  #b45309;
  --olive:   #2a5c3f;
  --blue:    #c8410a;
  --orange:  #b45309;
  --bg:      #f5f3ef;
  --s1:      var(--white);
  --s2:      #faf8f5;
  --s3:      #f0ede8;
  --border:  #e2ddd6;
  --b2:      #ccc8c0;
  --text:    #1a1814;
  --t2:      #7a7570;
  --t3:      #aaa69f;
  --accent:  var(--teal);
  --a2:      #a33508;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; }

.topbar { background:var(--navy); border-bottom:2px solid var(--teal); padding:0 16px; display:flex; align-items:center; height:52px; gap:6px; position:sticky; top:0; z-index:100; }
.brand { font-size:18px; font-weight:700; color:var(--white); letter-spacing:-0.5px; margin-right:10px; white-space:nowrap; }
.brand span { color:var(--sky); font-weight:400; font-size:12px; letter-spacing:0; opacity:.8; }
.nav-tabs { display:flex; flex:1; overflow-x:auto; scrollbar-width:none; gap:2px; }
.nav-tabs::-webkit-scrollbar { display:none; }
.ntab { padding:0 14px; height:52px; display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--sky); font-size:12px; font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; letter-spacing:0.03em; text-transform:uppercase; transition:color .15s,background .15s; }
.ntab:hover { color:var(--white); background:rgba(255,255,255,.07); }
.ntab.active { background:var(--teal); color:var(--white); border-bottom-color:transparent; }
.sync-area { display:flex; align-items:center; gap:8px; }
.sync-info { font-size:10px; color:var(--sky); font-family:'JetBrains Mono',monospace; white-space:nowrap; opacity:.75; }

.page { display:none; padding:16px; max-width:960px; margin:0 auto; }
.page.active { display:block; }

.card { background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(26,24,20,.06); }
.card-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--t2); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.card-title::before { content:''; width:3px; height:10px; background:var(--teal); border-radius:2px; }

.fg { display:flex; flex-direction:column; gap:4px; }
.fl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--t2); }
.fi, .fs { background:var(--s2); border:1px solid var(--border); border-radius:7px; padding:8px 11px; color:var(--text); font-size:12px; font-family:inherit; outline:none; transition:border-color .15s; width:100%; }
.fi:focus, .fs:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(200,65,10,.12); }
.fs { cursor:pointer; }
.fs option { background:var(--white); color:var(--text); }

/* v10.4: Searchable select component — Zoho-style typeahead dropdown */
.ss-wrap { position:relative; width:100%; }
.ss-input { background:var(--s2); border:1px solid var(--border); border-radius:7px; padding:8px 30px 8px 11px; color:var(--text); font-size:12px; font-family:inherit; outline:none; transition:border-color .15s; width:100%; cursor:text; }
.ss-input:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(200,65,10,.12); background:var(--white); }
.ss-input.ss-placeholder { color:var(--t2); }
.ss-caret { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--t2); font-size:10px; pointer-events:none; transition:transform .15s; }
.ss-wrap.ss-open .ss-caret { transform:translateY(-50%) rotate(180deg); }
.ss-clear { position:absolute; right:26px; top:50%; transform:translateY(-50%); color:var(--t2); font-size:14px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:3px; display:none; background:none; border:none; }
.ss-wrap.ss-has-value .ss-clear { display:block; }
.ss-clear:hover { color:var(--red); background:rgba(192,57,43,.08); }
.ss-panel { position:absolute; top:calc(100% + 2px); left:0; right:0; background:var(--white); border:1px solid var(--border); border-radius:7px; box-shadow:0 4px 16px rgba(26,24,20,.15); z-index:1000; max-height:260px; overflow-y:auto; display:none; }
.ss-wrap.ss-open .ss-panel { display:block; }
.ss-wrap.ss-up .ss-panel { top:auto; bottom:calc(100% + 2px); }
.ss-item { padding:8px 11px; font-size:12px; color:var(--text); cursor:pointer; border-bottom:1px solid var(--s2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-item:last-child { border-bottom:none; }
.ss-item:hover, .ss-item.ss-active { background:var(--s2); }
.ss-item.ss-selected { background:rgba(200,65,10,.08); font-weight:600; }
.ss-item .ss-match { background:rgba(180,83,9,.25); font-weight:600; }
.ss-empty { padding:10px 11px; font-size:11px; color:var(--t2); text-align:center; font-style:italic; }
.fr { display:grid; gap:10px; margin-bottom:10px; }
.fr.c2 { grid-template-columns:1fr 1fr; }
.fr.c3 { grid-template-columns:1fr 1fr 1fr; }
.fr.c4 { grid-template-columns:1fr 1fr 1fr 1fr; }

.btn { padding:8px 16px; border-radius:7px; border:none; cursor:pointer; font-size:12px; font-weight:700; font-family:inherit; letter-spacing:0.03em; transition:all .15s; display:inline-flex; align-items:center; gap:5px; }
.bp { background:var(--teal); color:var(--white); }
.bp:hover { background:var(--a2); }
.bs { background:var(--s2); color:var(--text); border:1px solid var(--border); }
.bs:hover { border-color:var(--b2); background:var(--s3); }
.bd { background:transparent; color:var(--red); border:1px solid var(--red); }
.bd:hover { background:var(--red); color:var(--white); }
/* olive green — positive/allocate actions */
.bg { background:var(--green); color:var(--white); }
.bg:hover { background:#1e4530; }
.bsm { padding:5px 10px; font-size:11px; }
.bxs { padding:3px 8px; font-size:10px; border-radius:5px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.fa { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

.badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; padding:2px 7px; border-radius:4px; }
.b-matched   { background:rgba(42,92,63,.12); color:var(--green); }
.b-partial   { background:rgba(180,83,9,.14); color:var(--yellow); }
.b-unmatched { background:rgba(192,57,43,.1);  color:var(--red); }

.bank-card { background:var(--s1); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; overflow:hidden; transition:border-color .15s; box-shadow:0 1px 3px rgba(26,24,20,.05); }
/* allocation-state color bar — CR: green=full, DR: red=full (money out) */
.bank-card.full      { border-left:3px solid var(--green); }
.bank-card.full.dr   { border-left:3px solid var(--red); }
.bank-card.partial   { border-left:3px solid var(--yellow); }
.bank-card.unmatched { border-left:3px solid var(--red); }
.bank-card.unmatched.cr { border-left:3px solid var(--t3); }
/* Legacy class kept for backward compat */
.bank-card.matched   { border-left:3px solid var(--green); }
.bank-card.matched.dr { border-left:3px solid var(--red); }
.bank-main { padding:12px 14px; display:flex; align-items:center; gap:10px; cursor:default; }
.btype-badge { width:32px; text-align:center; font-size:9px; font-weight:700; padding:3px 0; border-radius:4px; flex-shrink:0; font-family:'JetBrains Mono',monospace; }
.btype-cr { background:rgba(42,92,63,.12);  color:var(--green); }
.btype-dr { background:rgba(192,57,43,.12);  color:var(--red); }
.binfo { flex:1; min-width:0; }
.bnarr { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.b-invref { font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--sky,#3a6a8c); }
.bsub  { font-size:10px; color:var(--t2); margin-top:2px; }
.bamt  { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:500; flex-shrink:0; }
.bamt.cr { color:var(--green); }
.bamt.dr { color:var(--red); }
.bactions { display:flex; flex-direction:column; gap:4px; flex-shrink:0; align-items:flex-end; }

.party-pill { display:inline-flex; align-items:center; gap:5px; background:var(--s2); border:1px solid var(--border); border-radius:20px; padding:3px 10px; font-size:11px; font-weight:600; }
.party-pill.client { border-color:rgba(42,92,63,.4); color:var(--green); }
.party-pill.vendor { border-color:rgba(180,83,9,.35);  color:var(--orange); }

.toolbar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; align-items:center; }
.fi-sm { background:var(--s1); border:1px solid var(--border); border-radius:7px; padding:7px 10px; color:var(--text); font-size:11px; font-family:inherit; outline:none; flex:1; min-width:100px; }
.fi-sm:focus { border-color:var(--teal); }
.fs-sm { background:var(--s1); border:1px solid var(--border); border-radius:7px; padding:7px 10px; color:var(--text); font-size:11px; font-family:inherit; cursor:pointer; }

.bill-card { background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:8px; transition:border-color .15s; box-shadow:0 1px 3px rgba(26,24,20,.05); }
.bill-card:hover { border-color:var(--b2); }
/* v10.2: payment-state color bar (green=paid, yellow=partial, red=pending) */
.bill-card.paid    { border-left:3px solid var(--green); }
.bill-card.partial { border-left:3px solid var(--yellow); }
.bill-card.pending { border-left:3px solid var(--yellow); }
.bill-top  { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.bill-name { font-size:13px; font-weight:600; color:var(--text); }
.bill-id   { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--t2); margin-top:2px; }
.bill-meta { font-size:11px; color:var(--t2); margin-top:3px; }
.bill-amt  { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:500; text-align:right; color:var(--navy); }
.bill-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); flex-wrap:wrap; gap:6px; }
.bill-acts { display:flex; gap:5px; flex-wrap:wrap; }
.alloc-row { display:flex; justify-content:space-between; padding:5px 8px; background:var(--s2); border-radius:5px; margin-top:4px; font-size:11px; color:var(--t2); }
.alloc-row .mono { font-family:'JetBrains Mono',monospace; color:var(--green); }

/* v10.6: Multi-select + Print + Costing feature */
.sel-chk { width:16px; height:16px; cursor:pointer; accent-color:var(--teal); flex-shrink:0; margin:2px 2px 0 0; }
.bill-top-wrap { display:flex; align-items:flex-start; gap:10px; }
.bill-top-wrap .bill-top { flex:1; margin-bottom:8px; }
.bank-main .sel-chk { margin:0 2px 0 0; }

.cost-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; cursor:pointer; user-select:none; border:1px solid transparent; transition:all .15s; white-space:nowrap; font-family:inherit; }
.cost-badge.off { background:rgba(192,57,43,.08); color:var(--red); border-color:rgba(192,57,43,.25); }
.cost-badge.off:hover { background:rgba(192,57,43,.15); }
.cost-badge.on  { background:rgba(42,92,63,.12); color:var(--green); border-color:rgba(42,92,63,.3); }
.cost-badge.on:hover { background:rgba(42,92,63,.2); }

.sel-bar { position:sticky; top:52px; z-index:50; background:var(--navy); color:var(--white); border-radius:8px; padding:8px 12px; margin-bottom:10px; display:none; align-items:center; gap:10px; box-shadow:0 2px 8px rgba(26,24,20,.25); flex-wrap:wrap; }
.sel-bar.on { display:flex; }
.sel-bar .sel-count { font-size:12px; font-weight:600; flex:1; min-width:120px; }
.sel-bar .sel-count strong { color:var(--sky); font-family:'JetBrains Mono',monospace; }
.sel-bar .sel-total { font-size:11px; color:var(--sky); font-family:'JetBrains Mono',monospace; font-weight:500; }
.sel-bar button { background:var(--white); color:var(--navy); border:none; border-radius:6px; padding:6px 12px; font-size:11px; font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s; }
.sel-bar button:hover { background:var(--sky); }
.sel-bar button.sb-ghost { background:transparent; color:var(--sky); border:1px solid var(--teal); }
.sel-bar button.sb-ghost:hover { background:rgba(255,255,255,.08); color:var(--white); }

@media print {
  body * { visibility:hidden; }
  .print-area, .print-area * { visibility:visible; }
  .print-area { position:absolute; left:0; top:0; width:100%; padding:20px; }
}

.pmt-card  { background:var(--s1); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:7px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 3px rgba(26,24,20,.05); }
.pmt-info  { flex:1; min-width:0; }
.pmt-party { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.pmt-sub   { font-size:10px; color:var(--t2); margin-top:2px; }
.pmt-amt   { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:500; color:var(--green); flex-shrink:0; }

.setting-row   { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.setting-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--t2); }

.uwarn    { background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.4); border-radius:8px; padding:10px 14px; font-size:12px; color:var(--red); margin-bottom:14px; display:none; }
.uwarn.on { display:block; }

.sec-title { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--t3); margin:14px 0 8px; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px); background:var(--navy); border:1px solid var(--teal); color:var(--white); padding:10px 20px; border-radius:8px; font-size:12px; z-index:999; transition:transform .3s; pointer-events:none; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.ok  { background:#1a2e1e; border-color:var(--green); color:#5aab5e; }
.toast.err { background:#2e1a1a; border-color:var(--red);   color:#c47070; }

.empty { text-align:center; padding:40px 20px; color:var(--t3); }
.empty .ico { font-size:30px; margin-bottom:8px; }

.modal-backdrop { position:fixed; inset:0; background:rgba(30,45,58,.55); backdrop-filter:blur(2px); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.on { display:flex; }
.modal { background:var(--s1); border:1px solid var(--border); border-radius:12px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 10px 40px rgba(26,24,20,.25); }
.modal-head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:13px; font-weight:700; color:var(--text); }
.modal-sub { font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--t2); margin-top:2px; }
.modal-close { background:none; border:none; color:var(--t2); font-size:20px; cursor:pointer; padding:4px 8px; border-radius:4px; font-family:inherit; }
.modal-close:hover { background:var(--s2); color:var(--text); }
.modal-body { padding:16px 20px; }
.modal-foot { padding:12px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

.bill-acts .btn, .bactions .btn, .pmt-card .btn { white-space:nowrap; }
.be { background:transparent; color:var(--teal); border:1px solid var(--teal); }
.be:hover { background:var(--teal); color:var(--white); }
.pmt-actions { display:flex; gap:5px; flex-shrink:0; }

@media(max-width:600px) {
  .fr.c3,.fr.c4 { grid-template-columns:1fr 1fr; }
  .fr.c2 { grid-template-columns:1fr; }
}

/* ── BILL-LINK ROWS (multi-invoice allocation) ── */
.bill-links-wrap { margin-top:10px; display:none; }
.bill-links-wrap.on { display:block; }
/* ISSUE-6: 4-column grid: invoice | cash | tds | remove */
.bill-link-row { display:grid; grid-template-columns:1fr 100px 80px 28px; gap:6px; align-items:center; margin-bottom:6px; }
.bill-link-row .fs { font-size:11px; padding:7px 8px; }
.bill-link-row .fi { font-size:11px; padding:7px 8px; }
.bl-remove { background:none; border:1px solid var(--red); color:var(--red); border-radius:5px; width:28px; height:32px; cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bl-remove:hover { background:var(--red); color:var(--white); }
.bl-add-btn { font-size:11px; padding:5px 12px; margin-top:2px; }
.bl-summary { font-size:10px; color:var(--t2); margin-top:6px; padding:6px 8px; background:var(--s2); border-radius:6px; display:none; }
.bl-summary.on { display:block; }
.bl-summary.over { color:var(--red); font-weight:600; background:rgba(192,57,43,.08); }
.bl-col-labels { display:grid; grid-template-columns:1fr 100px 80px 28px; gap:6px; margin-bottom:3px; }
.bl-col-label { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--t3); }


/* ── DASHBOARD ── */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
.stat-card { background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:14px; }
.stat-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--t2); margin-bottom:6px; }
.stat-val { font-size:22px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.stat-sub { font-size:11px; color:var(--t3); margin-top:4px; }
.sv-g { color:var(--green); } .sv-r { color:var(--red); } .sv-y { color:var(--yellow); } .sv-a { color:var(--teal); }
.alert-item { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:var(--s1); border:1px solid var(--border); border-radius:8px; margin-bottom:6px; gap:10px; }
.alert-item.red { border-left:3px solid var(--red); } .alert-item.yellow { border-left:3px solid var(--yellow); } .alert-item.orange { border-left:3px solid var(--orange); }
.alert-name { font-size:12px; font-weight:600; } .alert-sub { font-size:11px; color:var(--t2); margin-top:2px; }
.alert-amt { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; flex-shrink:0; }
.alert-amt.r { color:var(--red); } .alert-amt.y { color:var(--yellow); } .alert-amt.o { color:var(--orange); }
.dash-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--t3); margin:16px 0 8px; }

/* ── REPORTS ── */
.report-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.rtab { padding:5px 13px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; background:var(--s2); color:var(--t2); border:1px solid var(--border); font-family:inherit; transition:all .15s; }
.rtab.active { background:var(--teal); color:var(--white); border-color:var(--teal); }
.rtab:hover:not(.active) { border-color:var(--b2); color:var(--text); }
.report-section { display:none; } .report-section.active { display:block; }
.rpt-filter { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.rs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
.rs-card { background:var(--s1); border:1px solid var(--border); border-radius:8px; padding:12px; text-align:center; }
.rs-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--t2); margin-bottom:5px; }
.rs-val { font-size:18px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.rpt-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:16px; }
.rpt-table th { background:var(--s2); padding:7px 10px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--t2); border-bottom:1px solid var(--border); }
.rpt-table th.r,.rpt-table td.r { text-align:right; }
.rpt-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.rpt-table tr:hover td { background:var(--s2); }
.rpt-table tfoot td { font-weight:700; border-top:2px solid var(--b2); border-bottom:none; background:var(--s2); }
.rpt-table .mono { font-family:'JetBrains Mono',monospace; }
.rpt-table .g { color:var(--green); } .rpt-table .r2 { color:var(--red); } .rpt-table .y2 { color:var(--yellow); }
.rpt-party-header { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:var(--s2); border-radius:7px; margin:14px 0 6px; }
.rpt-party-name { font-size:12px; font-weight:600; }
.rpt-party-bal { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; }
.aging-bucket-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--t3); margin:14px 0 6px; }
.pg-bar { display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 8px; flex-wrap:wrap; }
.pg-btn { background:var(--s1); border:1px solid var(--border); border-radius:6px; padding:5px 12px; font-size:11px; font-weight:600; font-family:inherit; color:var(--t2); cursor:pointer; transition:all .15s; }
.pg-btn:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.pg-btn.active { background:var(--teal); color:var(--white); border-color:var(--teal); }
.pg-btn:disabled { opacity:.35; cursor:not-allowed; }
.pg-info { font-size:11px; color:var(--t3); font-family:'JetBrains Mono',monospace; padding:0 6px; }
.build-footer { text-align:center; padding:18px 16px 10px; font-size:10px; color:var(--t3); font-family:'JetBrains Mono',monospace; letter-spacing:0.04em; }