/* register.css — the match register used by the review queue and the approved
   screen, in the app and the demo. Only design tokens both pages define. */

.rfilters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 12px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 10px; font-size: 12.5px; color: var(--ink-soft); }
.rfilters label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rfilters input, .rfilters select { font: inherit; font-size: 12.5px; padding: 4px 7px; border: 1px solid var(--hair); border-radius: 7px; background: var(--card); color: var(--ink); }
.rfilters input[type=search] { width: 120px; } .rfilters input[type=number] { width: 72px; } .rfilters input[type=date] { width: 132px; }
.rfilters .rcount { margin-left: auto; font-family: var(--mono); font-size: 12px; }

.rwrap { border: 1px solid var(--hair); border-radius: 10px; overflow: auto; max-height: calc(100vh - 250px); background: var(--card); }
.reg { width: 100%; border-collapse: collapse; font-size: 13px; }
.reg th { position: sticky; top: 0; z-index: 2; background: var(--paper); box-shadow: 0 1px 0 var(--hair); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); padding: 8px 9px; white-space: nowrap; }
.reg th[data-sort] { cursor: pointer; user-select: none; }
.reg th[data-sort]:hover { color: var(--brand); }
.reg th.asc::after { content: " ↑"; color: var(--brand); } .reg th.desc::after { content: " ↓"; color: var(--brand); }
.reg th.money, .reg td.rmoney { text-align: right; }
.reg td { padding: 6px 9px; border-bottom: 1px solid var(--hair); line-height: 1.3; vertical-align: middle; white-space: nowrap; }
.reg td.rname { max-width: 176px; overflow: hidden; text-overflow: ellipsis; }
.reg td.rpat { color: var(--ink-soft); }
.reg td.rmono, .reg td.rmoney { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.reg td.rmoney.owed { border-left: 2px solid rgba(196,87,78,.5); background: rgba(196,87,78,.03); font-weight: 600; }
.reg td.rmoney.paid { font-weight: 600; }
.reg td.req, .reg .req { text-align: center; color: var(--green); font-family: var(--display); font-weight: 650; font-size: 16px; width: 22px; }
.reg td.racts { text-align: right; }
.reg tbody tr:hover td { background: var(--brand-soft); }
.reg tbody tr.focus td { background: #F3F7FC; }
.reg tbody tr.focus td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.reg tbody tr.sel td { background: #EAF3FF; }
.reg tbody tr.isopen td { border-bottom-color: transparent; }
.reg input[type=checkbox] { accent-color: var(--brand); width: 14px; height: 14px; vertical-align: middle; }
.reg .rexpand { font: inherit; font-size: 13px; width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--hair); background: var(--card); color: var(--ink-soft); cursor: pointer; }
.reg .rexpand:hover, .reg tr.isopen .rexpand { background: var(--brand); border-color: var(--brand); color: #fff; }
.reg .racts .btn { padding: 4px 9px; font-size: 12px; }
.reg .racts .btn + .btn { margin-left: 4px; }

.rconf { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rconf.high { background: var(--green-soft); color: var(--green); }
.rconf.medium { background: var(--amber-soft); color: #8A5A18; }
.rconf.review { background: var(--red-soft); color: var(--red); }
.rtyp { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.reg .pchip { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 999px; margin-right: 2px; white-space: nowrap; }
.reg .pchip.on { background: var(--green-soft); color: var(--green); }
.reg .pchip.off { background: var(--paper); color: var(--ink-soft); }

/* the detail row: everything the card used to show */
.reg tr.rdetail td { white-space: normal; background: var(--paper); padding: 10px 16px 14px 46px; border-bottom: 1px solid var(--hair); font-size: 12.5px; color: var(--ink); }
.reg .rwhy { color: var(--ink); margin-bottom: 8px; }
.reg .rwhy .ai-note { color: var(--green); }
.reg .racts .btn.icon { width: 28px; height: 26px; padding: 0; font-size: 13px; font-weight: 700; }
.reg .racts .btn.icon.confirm { background: var(--card); color: var(--green); border-color: var(--hair); }
.reg .racts .btn.icon.confirm:hover { background: var(--green); color: #fff; border-color: var(--green); }
.reg .racts .btn.icon.reject:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.reg .rparts { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 12px; align-items: start; }
.reg .rlab { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; }
.reg .rpart { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--hair); }
.reg .rpart b { font-weight: 600; }
.reg .rsub { color: var(--ink-soft); font-family: var(--mono); font-size: 11px; }
.reg .rli { font-family: var(--mono); font-size: 11.5px; color: var(--green); margin-top: 2px; }
.reg .rpart .rmoney { font-family: var(--mono); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg .rplan { margin-top: 8px; max-width: 420px; }
.reg .rplan .bar { height: 5px; background: var(--hair); border-radius: 99px; overflow: hidden; }
.reg .rplan .bar i { display: block; height: 100%; background: var(--green); }
.reg .rproof { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--hair); font-size: 12px; color: var(--ink-soft); }
.reg .receipt-chip { display: inline-block; font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; margin: 4px 4px 0 0; color: var(--brand); text-decoration: none; }
.reg .rempty { text-align: center; padding: 26px; color: var(--ink-soft); }

.rbulk[hidden] { display: none !important; }
.rbulk { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--brand-deep); color: #fff; border-radius: 12px;
  padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 14px 40px rgba(60,48,30,.25); font-size: 13.5px; }
.rbulk .btn { padding: 6px 12px; font-size: 13px; }
.rbulk .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.rbulk .btn.confirm { background: var(--green); }
.rkbd { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }
.rkbd .kbd, .kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--card); color: var(--ink-soft); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; }
.dot.ok { background: var(--green); } .dot.review { background: var(--brand); } .dot.partial { background: var(--amber); } .dot.gap { background: var(--red); } .dot.off { background: var(--hair); }
@media (max-width: 800px) { .rfilters .rcount { margin-left: 0; } .reg td.rpat, .reg th:nth-child(4) { display: none; } }

/* status pill for the unified ledger */
.rstat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--paper); color: var(--ink-soft); white-space: nowrap; }
.rstat.confirmed, .rstat.claim_only { background: var(--green-soft); color: var(--green); }
.rstat.pending { background: var(--brand-soft); color: var(--brand); }
.rstat.unpaid { background: var(--amber-soft); color: #8A5A18; }
.rstat.unexplained { background: var(--red-soft); color: var(--red); }
.rconf.record { background: var(--brand-soft); color: var(--brand); }

/* the EOB figures inside a claim's detail */
.reg .reobgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; margin: 6px 0 4px; }
.reg .reobgrid div { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; border-bottom: 1px dotted var(--hair); padding: 2px 0; }
.reg .reobgrid span { color: var(--ink-soft); }
.reg .reobgrid b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.reg .rdocs { margin-top: 4px; }
.reg .rextras { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--hair); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.reg .rextras .btn { font-size: 12px; padding: 4px 10px; }
.reg .rattach { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reg .rattach .btn { font-size: 11.5px; padding: 3px 9px; }

/* ---- tablets: drop the two least essential columns so the table fits ---- */
@media (max-width: 960px) {
  .reg td[data-c=patient], .reg th[data-c=patient], .reg td[data-c=paidDate], .reg th[data-c=paidDate],
  .reg td[data-c=dot], .reg th[data-c=dot], .reg td[data-c=eq], .reg th[data-c=eq] { display: none; }
  .reg td.rname { max-width: 150px; }
  .reg th, .reg td { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 800px) {
  .reg td[data-c=conf], .reg th[data-c=conf] { display: none; }
}

/* ---- phones: filters folded behind a button ---- */
.rfilters-toggle { display: none; margin-bottom: 8px; }
.rsort-m { display: none; }
@media (max-width: 700px) {
  .rfilters-toggle { display: inline-block; }
  .rfilters { display: none; }
  .rfilters.open { display: flex; }
  .rfilters label { width: 100%; justify-content: space-between; }
  .rfilters input[type=search], .rfilters select { flex: 1; min-width: 0; }
  .rfilters input[type=date] { width: 40%; } .rfilters input[type=number] { width: 30%; }
  .rfilters .rcount { margin-left: 0; width: 100%; }
}
/* ---- phones and tablets: one card per row ---- */
@media (max-width: 960px) {
  .rsort-m { display: flex; gap: 6px; }
  .rsort-m select { flex: 1; }
  .rwrap { max-height: none; overflow: visible; border-radius: 12px; }
  .reg.compact td { padding: 0; border: none; white-space: normal; }
  .reg.compact tr[data-k] { display: block; }
  .reg.compact tr[data-k] > td { display: block; }
  .rcard { padding: 10px 12px; border-bottom: 1px solid var(--hair); }
  .reg.compact tr.focus .rcard { background: #F3F7FC; box-shadow: inset 3px 0 0 var(--brand); }
  .reg.compact tr.sel .rcard { background: #EAF3FF; }
  .rcard .rc1, .rcard .rc2, .rcard .rc3 { display: flex; align-items: center; gap: 8px; }
  .rcard .rc1 { font-size: 14.5px; }
  .rcard .rc1 .rname { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }
  .rcard .rc1 .rmoney { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
  .rcard .rc1 .rmoney.owed { border-left: 2px solid rgba(196,87,78,.5); padding-left: 6px; }
  .rcard .rc2 { padding-left: 22px; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
  .rcard .rc2 .rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }
  .rcard .rc2 .rmoney { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
  .rcard .rc2 .req { width: auto; font-size: 14px; }
  .rcard .rc3 { padding-left: 22px; margin-top: 6px; justify-content: space-between; flex-wrap: wrap; row-gap: 6px; }
  .rcard .rmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--ink-soft); }
  .rcard .racts { display: flex; gap: 6px; }
  .reg.compact tr.rdetail td { padding: 10px 12px 14px; }
  .reg .rparts { grid-template-columns: 1fr; gap: 8px; }
  .reg .rparts .req { display: none; }
  .rbulk { left: 12px; right: 12px; transform: none; justify-content: space-between; }
}

/* long document names and descriptions wrap inside their cell instead of widening the table */
.reg td[data-c="docs"] { white-space: normal; max-width: 160px; }
.reg td[data-c="desc"] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.reg td.rpat { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
.reg td[data-c="docs"] .receipt-chip { display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.reg td.racts .btn.tiny { margin: 1px 2px 1px 0; }
.columns .col { min-width: 0; }
.rstat.matched { background: var(--green-soft); color: var(--green); }
.rstat.dismissed, .rstat.other { background: var(--paper); color: var(--ink-soft); }
.rstat.proposed { background: var(--brand-soft); color: var(--brand); }

.rplanchip { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); white-space: nowrap; vertical-align: 1px; }
@media (max-width: 1500px) { .reg td[data-c="source"], .reg th[data-c="source"], .reg td[data-c="paidDate"], .reg th[data-c="paidDate"], .reg td[data-c="docs"], .reg th[data-c="docs"] { display: none; } }