/* ================================================================
   CASHIER — Phase 8 Week 2 Track B
   Receptionist UI for D1-backed billing & payments.
   Owns: cashier nav view, modals (invoice/payment/credit), AR aging,
         daily takings, and EOD lock.
   ================================================================ */

/* ---------- shared modal scaffolding ---------- */
.cxOverlay{
  position:fixed; inset:0; z-index:9000;
  background:rgba(8,12,20,.72); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:24px 16px;
}
.cxOverlay.open{display:flex}
.cxModal{
  background:var(--surface,#fff); border-radius:14px;
  width:100%; max-width:760px; box-shadow:0 24px 64px rgba(0,0,0,.35);
  border:1px solid var(--border,#e5e7eb);
  overflow:hidden; margin:auto 0; animation:cxIn .14s ease-out;
}
@keyframes cxIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
.cxModal.lg{max-width:920px}
.cxModal.sm{max-width:520px}
.cxHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border,#e5e7eb);
  background:var(--surface-2,#f8fafc);
}
.cxHead h2{ font-size:16px; font-weight:600; margin:0; }
.cxClose{
  width:30px; height:30px; border:none; background:transparent;
  font-size:20px; cursor:pointer; border-radius:6px; color:#64748b;
}
.cxClose:hover{ background:#e2e8f0; color:#0f172a; }
.cxBody{ padding:16px 20px; max-height:calc(100vh - 200px); overflow-y:auto; }
.cxFoot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 18px; border-top:1px solid var(--border,#e5e7eb);
  background:var(--surface-2,#f8fafc);
}
.cxBtn{
  padding:9px 16px; border-radius:8px; font-size:14px; font-weight:500;
  border:1px solid #cbd5e1; background:#fff; color:#0f172a; cursor:pointer;
  transition:transform .05s ease;
}
.cxBtn:hover{ background:#f1f5f9; }
.cxBtn:active{ transform:translateY(1px); }
.cxBtn.primary{ background:#0f766e; color:#fff; border-color:#0f766e; }
.cxBtn.primary:hover{ background:#115e59; }
.cxBtn.danger{ background:#b91c1c; color:#fff; border-color:#b91c1c; }
.cxBtn.danger:hover{ background:#991b1b; }
.cxBtn.lg{ padding:14px 22px; font-size:15px; font-weight:600; }
.cxBtn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- form rows ---------- */
.cxRow{ display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.cxField{ flex:1 1 200px; display:flex; flex-direction:column; gap:4px; }
.cxField label{ font-size:12px; font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:.04em; }
.cxField input, .cxField select, .cxField textarea{
  padding:8px 10px; border:1px solid #cbd5e1; border-radius:7px;
  font-size:14px; background:#fff; color:#0f172a; min-height:36px;
}
.cxField input:focus, .cxField select:focus, .cxField textarea:focus{
  outline:2px solid #0f766e; outline-offset:-1px; border-color:#0f766e;
}
.cxField .hint{ font-size:11px; color:#64748b; }
.cxField.error input, .cxField.error select{ border-color:#dc2626; }
.cxFieldError{ font-size:12px; color:#dc2626; margin-top:2px; }

/* ---------- patient picker ---------- */
.cxPickerWrap{ position:relative; }
.cxPickerResults{
  position:absolute; top:100%; left:0; right:0; z-index:10;
  max-height:260px; overflow-y:auto;
  background:#fff; border:1px solid #cbd5e1; border-top:none;
  border-radius:0 0 8px 8px; box-shadow:0 6px 14px rgba(0,0,0,.08);
  display:none;
}
.cxPickerResults.open{ display:block; }
.cxPickerItem{
  padding:8px 12px; cursor:pointer; border-bottom:1px solid #f1f5f9;
  display:flex; justify-content:space-between; gap:10px;
}
.cxPickerItem:hover, .cxPickerItem.active{ background:#f0fdfa; }
.cxPickerItem .pickName{ font-weight:500; color:#0f172a; }
.cxPickerItem .pickMeta{ font-size:12px; color:#64748b; }
.cxPickerSelected{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:#f0fdfa; border:1px solid #14b8a6; border-radius:8px;
}
.cxPickerSelected .selName{ font-weight:600; color:#0f172a; }
.cxPickerSelected .selRef{ font-size:13px; color:#0f766e; font-family:ui-monospace,Menlo,monospace; }
.cxPickerSelected .selClear{
  margin-left:auto; background:transparent; border:none; cursor:pointer; color:#64748b;
  font-size:18px; padding:4px 8px;
}
.cxPickerSelected .selClear:hover{ color:#dc2626; }

/* ---------- treatment items table inside invoice modal ---------- */
.cxLines{ border:1px solid #e2e8f0; border-radius:8px; margin-top:8px; }
.cxLineHd{
  display:grid; grid-template-columns:1.4fr 80px 60px 100px 110px 36px;
  gap:8px; padding:8px 10px; background:#f8fafc;
  font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase;
  letter-spacing:.04em; border-bottom:1px solid #e2e8f0;
}
.cxLine{
  display:grid; grid-template-columns:1.4fr 80px 60px 100px 110px 36px;
  gap:8px; padding:8px 10px; border-bottom:1px solid #f1f5f9; align-items:center;
}
.cxLine:last-child{ border-bottom:none; }
.cxLine input{ padding:6px 8px; font-size:13px; min-height:32px; }
.cxLine .lineDel{
  background:transparent; border:none; cursor:pointer; color:#94a3b8;
  font-size:18px; line-height:1; padding:4px;
}
.cxLine .lineDel:hover{ color:#dc2626; }
.cxAddLine{
  display:flex; gap:8px; padding:10px; background:#fafbfc;
}
.cxAddLine .pickerWrap{ flex:1; position:relative; }
.cxLineSearch{
  width:100%; padding:8px 12px; border:1px dashed #cbd5e1; border-radius:7px;
  font-size:13px; background:#fff;
}
.cxLineSuggest{
  position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:120;
  background:#fff; border:1px solid #cbd5e1; border-radius:8px;
  max-height:280px; overflow-y:auto;
  box-shadow:0 8px 20px rgba(15,23,42,.18); display:none;
}
.cxLineSuggest.open{ display:block; }
.cxLineSuggestItem{
  padding:7px 12px; cursor:pointer; display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px solid #f1f5f9; font-size:13px;
}
.cxLineSuggestItem:hover, .cxLineSuggestItem.active{ background:#f0fdfa; }
.cxLineSuggestItem .siCode{ font-family:ui-monospace,Menlo,monospace; color:#475569; font-size:11px; }

/* ---------- invoice totals box ---------- */
.cxTotals{
  display:flex; justify-content:flex-end; gap:24px; padding:14px 16px;
  background:#f8fafc; border-radius:8px; margin-top:12px;
  font-size:14px;
}
.cxTotals .totL{ color:#64748b; margin-right:8px; }
.cxTotals .totV{ font-weight:600; font-family:ui-monospace,Menlo,monospace; }
.cxTotals .grand .totV{ font-size:18px; color:#0f766e; }

/* ---------- payment splits ---------- */
.cxSplits{ display:flex; flex-direction:column; gap:8px; }
.cxSplit{
  display:grid; grid-template-columns:160px 1fr 130px 36px;
  gap:8px; align-items:center;
}
.cxSplit select{ font-size:14px; }
.cxSplit input[type="text"]{ font-size:14px; }
.cxSplit input[type="number"]{ font-family:ui-monospace,Menlo,monospace; text-align:right; font-size:14px; }
.cxSplit .splitDel{
  background:transparent; border:none; cursor:pointer; color:#94a3b8; font-size:18px;
}
.cxAllocBox{
  margin-top:12px; padding:10px 12px; background:#fffbeb; border:1px solid #fde68a;
  border-radius:7px; font-size:13px; color:#78350f;
}
.cxAllocBox.ok{ background:#f0fdf4; border-color:#86efac; color:#14532d; }
.cxAllocBox.err{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* ---------- Cashier view layout ---------- */
.cxView{ padding:20px 24px 80px; }
.cxViewHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin-bottom:18px;
}
.cxViewHead h1{ font-size:22px; margin:0; font-weight:600; }
.cxViewHead .sub{ color:#64748b; font-size:13px; margin-top:2px; }
.cxViewActions{ display:flex; gap:8px; flex-wrap:wrap; }

.cxTabs{
  display:flex; gap:4px; border-bottom:1px solid #e2e8f0; margin-bottom:18px;
  overflow-x:auto;
}
.cxTab{
  padding:9px 16px; border:none; background:transparent;
  font-size:14px; font-weight:500; color:#64748b; cursor:pointer;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.cxTab:hover{ color:#0f172a; }
.cxTab.active{ color:#0f766e; border-bottom-color:#0f766e; }

.cxPanel{ display:none; }
.cxPanel.active{ display:block; }

/* ---------- KPI grid ---------- */
.cxKpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin-bottom:18px;
}
.cxKpi{
  background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px 16px;
}
.cxKpi .kpiL{ font-size:11px; color:#64748b; text-transform:uppercase; font-weight:600; letter-spacing:.04em; }
.cxKpi .kpiV{ font-size:22px; font-weight:600; color:#0f172a; margin-top:4px; font-family:ui-monospace,Menlo,monospace; }
.cxKpi .kpiSub{ font-size:12px; color:#64748b; margin-top:2px; }
.cxKpi.warn .kpiV{ color:#b45309; }
.cxKpi.bad .kpiV{ color:#b91c1c; }
.cxKpi.ok .kpiV{ color:#0f766e; }

/* ---------- AR aging table ---------- */
.cxAging{
  background:#fff; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden;
  margin-bottom:18px;
}
.cxAgingHd, .cxAgingRow{
  display:grid; grid-template-columns:120px repeat(4, 1fr) 1fr;
  gap:6px; padding:10px 14px; align-items:center;
}
.cxAgingHd{
  background:#f8fafc; font-size:11px; text-transform:uppercase;
  font-weight:600; color:#64748b; letter-spacing:.04em;
  border-bottom:1px solid #e2e8f0;
}
.cxAgingRow{ border-bottom:1px solid #f1f5f9; font-size:14px; }
.cxAgingRow:last-child{ border-bottom:none; }
.cxAgingRow.totals{ background:#f8fafc; font-weight:600; }
.cxAgingRow .src{ font-weight:600; }
.cxAgingRow .b{ font-family:ui-monospace,Menlo,monospace; text-align:right; }
.cxAgingRow .b.zero{ color:#cbd5e1; }
.cxAgingRow .b.warn{ color:#b45309; }
.cxAgingRow .b.bad{ color:#b91c1c; font-weight:600; }

/* ---------- Receivables list ---------- */
.cxList{ background:#fff; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.cxListHd, .cxListRow{
  display:grid; grid-template-columns:140px 90px 90px 110px 110px 1fr 110px 90px;
  gap:8px; padding:9px 14px; align-items:center;
  font-size:13px;
}
.cxListHd{
  background:#f8fafc; font-size:11px; text-transform:uppercase;
  font-weight:600; color:#64748b; letter-spacing:.04em;
  border-bottom:1px solid #e2e8f0;
}
.cxListRow{ border-bottom:1px solid #f1f5f9; }
.cxListRow:hover{ background:#fafbfc; }
.cxListRow:last-child{ border-bottom:none; }
.cxListRow .b{ font-family:ui-monospace,Menlo,monospace; text-align:right; }
.cxListRow .pillStatus{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
}
.pillStatus.pending{ background:#fef3c7; color:#92400e; }
.pillStatus.submitted{ background:#dbeafe; color:#1e40af; }
.pillStatus.partial{ background:#e0e7ff; color:#3730a3; }
.pillStatus.received{ background:#d1fae5; color:#065f46; }
.pillStatus.rejected{ background:#fee2e2; color:#991b1b; }
.pillStatus.written_off{ background:#e2e8f0; color:#475569; }
.pillSrc{
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  background:#f1f5f9; color:#334155;
}
.pillSrc.pdcc{ background:#fce7f3; color:#831843; }
.pillSrc.ump{ background:#ddd6fe; color:#4c1d95; }
.pillSrc.jfa{ background:#fed7aa; color:#7c2d12; }
.pillSrc.hcv{ background:#a7f3d0; color:#064e3b; }

/* ---------- Daily takings ---------- */
.cxTakings{
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:14px 16px;
}
.cxTakingsHead{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.cxTakingsTbl{ width:100%; border-collapse:collapse; font-size:14px; }
.cxTakingsTbl th, .cxTakingsTbl td{ padding:8px 10px; text-align:left; border-bottom:1px solid #f1f5f9; }
.cxTakingsTbl th{ font-size:11px; text-transform:uppercase; color:#64748b; font-weight:600; letter-spacing:.04em; }
.cxTakingsTbl td.b{ text-align:right; font-family:ui-monospace,Menlo,monospace; }
.cxTakingsTbl tfoot td{ font-weight:600; border-top:2px solid #e2e8f0; }

.cxLockBanner{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px; margin-bottom:14px; font-size:14px;
}
.cxLockBanner.locked{ background:#f0fdf4; border:1px solid #86efac; color:#14532d; }
.cxLockBanner.unlocked{ background:#fff7ed; border:1px solid #fdba74; color:#7c2d12; }
.cxLockBanner .lockIcon{ font-size:22px; }

/* ---------- inline patient drawer buttons ---------- */
.cxFinActions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding:10px 0;
  border-top:1px dashed #e2e8f0;
}

/* ---------- empty / loading states ---------- */
.cxEmpty{
  padding:40px 16px; text-align:center; color:#94a3b8; font-size:14px;
}
.cxLoading::after{
  content:"…"; animation:cxDot 1.4s steps(3,end) infinite;
}
@keyframes cxDot { 0%{content:"."} 33%{content:".."} 66%{content:"..."} }

/* ---------- toast ---------- */
.cxToast{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  background:#0f172a; color:#fff; padding:12px 20px; border-radius:10px;
  z-index:9500; font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.cxToast.show{ opacity:1; }
.cxToast.success{ background:#065f46; }
.cxToast.error{ background:#991b1b; }

/* ---------- mobile ---------- */
@media (max-width: 720px){
  .cxLineHd, .cxLine{ grid-template-columns:1fr 60px 70px 36px; }
  .cxLineHd .colTooth, .cxLineHd .colQty, .cxLine .colTooth, .cxLine .colQty{ display:none; }
  .cxListHd, .cxListRow{ grid-template-columns:120px 80px 1fr 90px; }
  .cxListHd > :nth-child(n+5):not(:last-child),
  .cxListRow > :nth-child(n+5):not(:last-child){ display:none; }
  .cxAgingHd, .cxAgingRow{ grid-template-columns:80px repeat(4, 1fr) 1fr; font-size:13px; }
}

/* Nudge animation when user clicks the backdrop \u2014 modal stays open */
.cxModal.cxNudge { animation: cxNudge 220ms ease-out; }
@keyframes cxNudge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.012); box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
  100% { transform: scale(1); }
}

/* Cross-branch invoice badge in the payment modal's invoice list.
   Shows when an outstanding invoice was originated at a different branch
   than the receiving counter (e.g. implant case spanning multiple clinics). */
.cxXBranch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ================================================================
   PAYMENT MODAL v4 — explicit per-visit allocation (Calvin May 2026)
   ================================================================ */

/* Hero — in Record Payment, render edge-to-edge with no top margin */
.cxPayHero{
  background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);
  color:#fff; padding:22px 24px 18px; border-radius:14px;
  position:relative; overflow:hidden;
  margin:14px 0 18px;
}
.cxPayBody > .cxPayHero{
  /* Cancel cxBody's 16px top + 20px side padding so the hero spans full width */
  margin:-16px -20px 18px;
  border-radius:0;
}
.cxPayHero::after{ content:""; position:absolute; right:-50px; top:-50px;
  width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); }
.cxPayHero::before{ content:""; position:absolute; right:50px; bottom:-30px;
  width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.06); }
.cxPayHeroEyebrow{ font-size:11px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; opacity:.85; margin-bottom:4px; position:relative; z-index:2; }
.cxPayHeroAmt{ font-size:36px; font-weight:800; letter-spacing:-1px;
  font-variant-numeric:tabular-nums; margin-bottom:4px; position:relative; z-index:2; }
.cxPayHeroSub{ font-size:13px; opacity:.92; position:relative; z-index:2; }

/* Split hero — balance on left, patient identity on right */
.cxPayHeroSplit{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cxPayHeroLeft{ flex:0 1 auto; min-width:0; position:relative; z-index:2; }
.cxPayHeroRight{ flex:1 1 auto; min-width:0; position:relative; z-index:3; text-align:right; }
.cxPayHeroPatient{ display:block; text-align:right; max-width:100%; min-width:0; }
.cxPayHeroName{
  font-size:26px; font-weight:800; letter-spacing:-.5px; line-height:1.15;
  color:#fff;
  /* Long Hong Kong names like "LUI MAN PAN" must wrap inside the hero, not
     get clipped by the flex container. break-word + overflow-wrap covers
     long unspaced strings; whiteSpace normal forces breaks at spaces. */
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.cxPayHeroCode{
  font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  opacity:.85; margin-top:6px; display:flex; align-items:center; gap:10px;
  justify-content:flex-end;
}
.cxPayHeroChange{
  background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.32);
  font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; cursor:pointer; transition:background .15s;
}
.cxPayHeroChange:hover{ background:rgba(255,255,255,.28); }
.cxPayHeroPicker{ width:min(360px, 100%); display:inline-block; text-align:left; }
.cxPayHeroPicker .cxPatientSearch{
  background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.4); color:#0f172a;
}
@media (max-width: 640px){
  .cxPayHeroSplit{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cxPayHeroRight{ text-align:left; width:100%; }
  .cxPayHeroPatient{ text-align:left; }
  .cxPayHeroCode{ justify-content:flex-start; }
  .cxPayHeroPicker{ width:100%; }
}

/* Section labels */
.cxSectionLabel{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:1.1px;
  color:#64748b; text-transform:uppercase; margin:14px 0 10px;
}
.cxSectionLabel .helper{
  text-transform:none; letter-spacing:0; font-weight:500;
  color:#94a3b8; font-size:12px;
}

/* Visit cards */
.cxVisitCards{ display:flex; flex-direction:column; gap:6px; }
.cxVisitCard{
  padding:14px 16px; border:2px solid #e2e8f0; border-radius:12px;
  background:#fff; cursor:pointer; transition:border-color .15s, background .15s;
}
.cxVisitCard:hover{ border-color:#cbd5e1; }
.cxVisitCard.selected{ border-color:#0f172a; background:#fafafa; }
.cxVisitCardRow{ display:flex; gap:14px; align-items:flex-start; }
.cxVisitCheckbox{
  width:22px; height:22px; border-radius:50%; border:2px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; font-size:12px; font-weight:700; flex-shrink:0; margin-top:2px;
}
.cxVisitCard.selected .cxVisitCheckbox{ background:#0f172a; border-color:#0f172a; color:#fff; }
.cxVisitInfo{ flex:1; min-width:0; }
.cxVisitName{ font-size:15px; font-weight:600; color:#0f172a; }
.cxVisitMeta{
  font-size:12px; color:#64748b; margin-top:4px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.cxVisitMeta .cxDot{ width:3px; height:3px; background:#cbd5e1; border-radius:50%; flex-shrink:0; }
.cxVisitAmt{ text-align:right; flex-shrink:0; }
.cxVisitBal{ font-size:17px; font-weight:700; color:#0f172a; font-variant-numeric:tabular-nums; }
.cxVisitOf{ font-size:11px; color:#94a3b8; margin-top:2px; font-variant-numeric:tabular-nums; }

/* Splits */
.cxSplits{ display:flex; flex-direction:column; gap:8px; }
.cxSplitRow{
  border:1.5px solid #e2e8f0; border-radius:12px; padding:12px;
  background:#fff; transition:border-color .15s, background .15s;
}
.cxSplitRow:has(.cxSubDetail[style*="display: none"]):not(:has(.cxAllocPill.active)){ }
.cxSplitMain{ display:grid; grid-template-columns:1fr 130px 30px; gap:8px; align-items:center; }
.cxSplitMethod, .cxSplitAmt{
  padding:11px 13px; border:1.5px solid #e2e8f0; border-radius:9px;
  font-size:14px; font-family:inherit; background:#fff; width:100%;
  color:#0f172a; font-weight:500;
}
.cxSplitMethod{ cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M6 8.5L1.5 4h9z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
.cxSplitAmt{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.cxSplitMethod:focus, .cxSplitAmt:focus{ outline:none; border-color:#0f172a; }
.cxSplitDel{
  width:30px; height:30px; border-radius:8px; background:#f8fafc; border:none;
  color:#94a3b8; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.cxSplitDel:hover{ background:#fee2e2; color:#dc2626; }

/* Goes-to picker */
.cxGoesTo{
  margin-top:10px; display:flex; align-items:center;
  gap:6px; flex-wrap:wrap;
}
.cxGoesToLabel{
  font-size:11px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:#64748b; flex-shrink:0; margin-right:2px;
}
.cxAllocPill{
  padding:7px 11px; border:1.5px solid #e2e8f0; background:#fff;
  border-radius:8px; font-size:12px; font-weight:600; color:#475569;
  cursor:pointer; transition:border-color .12s, background .12s, color .12s;
  white-space:nowrap;
}
.cxAllocPill:hover:not(.active){ border-color:#cbd5e1; }
.cxAllocPill.active{ border-color:#0f172a; background:#0f172a; color:#fff; }

/* Sub-detail (split mode) */
.cxSubDetail{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed #e2e8f0;
  display:flex; flex-direction:column; gap:6px;
}
.cxSubRow{
  display:grid; grid-template-columns:1fr 130px; gap:8px; align-items:center;
}
.cxSubLabel{
  font-size:13px; color:#0f172a; font-weight:500; padding-left:4px;
  display:flex; align-items:center; gap:6px;
}
.cxSubLabel .arrow{ color:#94a3b8; font-size:12px; }
.cxSubInput{
  padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:8px;
  font-size:13px; text-align:right; font-weight:600;
  font-variant-numeric:tabular-nums; width:100%;
}
.cxSubInput:focus{ outline:none; border-color:#0f172a; }
.cxSubMeta{ font-size:11px; padding:4px 4px 0; font-weight:600;
  display:flex; justify-content:flex-end; }
.cxSubMeta .match{ color:#10b981; }
.cxSubMeta .short{ color:#dc2626; }

.cxSplitActions{ display:flex; align-items:center; margin:10px 0 14px; }

/* Payment totals */
.cxPayTotals{
  background:#fafafa; border-radius:12px; padding:14px 16px;
  margin:8px 0 14px;
}
.cxPayTotRow{
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 0; font-size:13px; color:#475569;
}
.cxPayTotRow.grand{
  font-size:15px; color:#0f172a; font-weight:700;
  padding-top:9px; margin-top:5px; border-top:1px solid #e2e8f0;
}
.cxPayTotRow .num{ font-variant-numeric:tabular-nums; }
.cxPayTotRow .num.match{ color:#10b981; }
.cxPayTotRow .num.short{ color:#dc2626; }
.cxPayTotRow .num.over { color:#dc2626; font-weight:700; }

/* Per-visit allocation summary */
.cxAllocSummary{
  background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px;
  padding:12px 16px; margin-bottom:14px;
}
.cxAllocSummaryTitle{
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:#1d4ed8; font-weight:700; margin-bottom:8px;
}
.cxAllocSummaryRows{ display:flex; flex-direction:column; gap:4px; }
.cxAllocSummaryRow{
  display:grid; grid-template-columns:1fr auto auto; gap:12px;
  font-size:13px; color:#0f172a; align-items:center;
}
.cxAllocSummaryRow .num{ font-variant-numeric:tabular-nums; font-weight:700; }
.cxAllocSummaryRow .pill{
  font-size:10px; font-weight:700; letter-spacing:0.4px;
  padding:2px 8px; border-radius:20px;
}
.cxAllocSummaryRow .pill.paid    { background:#d1fae5; color:#047857; }
.cxAllocSummaryRow .pill.partial { background:#fef3c7; color:#92400e; }
.cxAllocSummaryRow .pill.unpaid  { background:#fee2e2; color:#b91c1c; }

/* Save button disabled state */
.cxBtn.primary:disabled{ background:#cbd5e1; border-color:#cbd5e1; color:#fff; cursor:not-allowed; }

/* ================================================================
   INVOICE MODAL v4 — matching style (light hero + section labels)
   ================================================================ */

.cxInvHero{
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  color:#fff; padding:20px 22px 16px; border-radius:14px;
  margin:14px 0 16px; position:relative; overflow:hidden;
}
.cxInvHeroEyebrow{ font-size:11px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; opacity:.75; margin-bottom:6px; }
.cxInvHeroAmt{ font-size:32px; font-weight:800; letter-spacing:-0.8px;
  font-variant-numeric:tabular-nums; }
.cxInvHeroSub{ font-size:13px; opacity:.85; margin-top:4px; }

/* Treatment line cards (replaces old .cxLine table layout) */
.cxLineCardList{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.cxLineCard{
  border:1.5px solid #e2e8f0; border-radius:12px; padding:12px;
  background:#fff;
  display:grid; grid-template-columns:1fr 70px 60px 110px 110px 30px;
  gap:8px; align-items:center;
}
.cxLineCard input{
  padding:9px 11px; border:1.5px solid #e2e8f0; border-radius:8px;
  font-size:13px; font-family:inherit; background:#fff; width:100%;
  color:#0f172a; font-weight:500;
}
.cxLineCard input:focus{ outline:none; border-color:#0f172a; }
.cxLineCard input.lPrice, .cxLineCard input.lQty{
  text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
}
.cxLineCard .lSub{
  font-size:14px; font-weight:700; color:#0f172a;
  text-align:right; font-variant-numeric:tabular-nums;
}
.cxLineCard .lineDel{
  width:30px; height:30px; border-radius:8px; background:#f8fafc;
  border:none; color:#94a3b8; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.cxLineCard .lineDel:hover{ background:#fee2e2; color:#dc2626; }