/* Collections readability / dark-mode contrast fix */
.colv2-page{
  --text:var(--ink);
  --soft:color-mix(in srgb,var(--panel-solid) 94%,var(--surface));
  --input-bg:var(--panel-solid);
  color:var(--ink);
}

.colv2-page .panel,
.colv2-page .colv2-account-card,
.colv2-page .colv2-account-modal,
.colv2-page .colv2-summary article,
.colv2-page .colv2-period,
.colv2-page .colv2-detail-grid>div,
.colv2-page .colv2-pullout-box{
  color:var(--ink);
}

.colv2-page h1,
.colv2-page h2,
.colv2-page h3,
.colv2-page strong,
.colv2-page b,
.colv2-page .colv2-account-client,
.colv2-page .colv2-account-card-top strong{
  color:var(--ink);
}

.colv2-page small,
.colv2-page .page-subtitle,
.colv2-page .colv2-result,
.colv2-page .colv2-account-location,
.colv2-page .colv2-account-card-bottom,
.colv2-page .colv2-pullout-meta,
.colv2-page .panel-head p{
  color:var(--muted);
}

.colv2-page input,
.colv2-page select,
.colv2-page textarea{
  color:var(--ink);
  background:var(--panel-solid);
}

.colv2-page input::placeholder,
.colv2-page textarea::placeholder{
  color:color-mix(in srgb,var(--muted) 86%,transparent);
  opacity:1;
}

/* Keep semantic amount/status colors readable in both themes. */
.colv2-page .colv2-balance{color:#d93f59!important}
.colv2-page .colv2-zero{color:#13825b!important}
.colv2-page .colv2-account-open{color:#1269a8!important}

:root[data-theme="dark"] .colv2-page{
  --soft:#12263a;
  --input-bg:#0d1d2f;
}

:root[data-theme="dark"] .colv2-page .panel,
:root[data-theme="dark"] .colv2-page .colv2-account-card,
:root[data-theme="dark"] .colv2-page .colv2-account-modal,
:root[data-theme="dark"] .colv2-page .colv2-summary article{
  color:#f1f6fc!important;
}

:root[data-theme="dark"] .colv2-page h1,
:root[data-theme="dark"] .colv2-page h2,
:root[data-theme="dark"] .colv2-page h3,
:root[data-theme="dark"] .colv2-page strong,
:root[data-theme="dark"] .colv2-page b,
:root[data-theme="dark"] .colv2-page .colv2-account-client,
:root[data-theme="dark"] .colv2-page .colv2-account-card-top strong,
:root[data-theme="dark"] .colv2-page td{
  color:#f3f8ff!important;
}

:root[data-theme="dark"] .colv2-page small,
:root[data-theme="dark"] .colv2-page .page-subtitle,
:root[data-theme="dark"] .colv2-page .colv2-result,
:root[data-theme="dark"] .colv2-page .colv2-account-location,
:root[data-theme="dark"] .colv2-page .colv2-account-card-bottom,
:root[data-theme="dark"] .colv2-page .panel-head p,
:root[data-theme="dark"] .colv2-page th{
  color:#aebfd2!important;
}

:root[data-theme="dark"] .colv2-page .colv2-balance{color:#ff7890!important}
:root[data-theme="dark"] .colv2-page .colv2-zero{color:#6fe0b2!important}
:root[data-theme="dark"] .colv2-page .colv2-account-open{color:#82ceff!important}

/* Readable chips in dark mode: use dark-tinted surfaces instead of light pills with dark text. */
:root[data-theme="dark"] .colv2-page .colv2-tag.pullout{
  background:#4a202b!important;
  color:#ffafbd!important;
  border-color:#8e4252!important;
}
:root[data-theme="dark"] .colv2-page .colv2-tag.cleared,
:root[data-theme="dark"] .colv2-page .colv2-pullout-pill.done{
  background:#123b30!important;
  color:#79e4ba!important;
  border-color:#2b765d!important;
}
:root[data-theme="dark"] .colv2-page .colv2-pullout-pill.cant{
  background:#483718!important;
  color:#ffd47e!important;
  border-color:#806329!important;
}
:root[data-theme="dark"] .colv2-page .colv2-status{
  background:#13283d!important;
  color:#eaf3fc!important;
  border-color:#31506d!important;
}

/* Collection/remittance values: strong contrast even when an older component stylesheet is cached. */
:root[data-theme="dark"] .colv2-page [class*="remit"],
:root[data-theme="dark"] .colv2-page [class*="cash-card"],
:root[data-theme="dark"] .colv2-page [class*="collection-card"]{
  color:#f3f8ff;
}
:root[data-theme="dark"] .colv2-page [class*="remit"] strong,
:root[data-theme="dark"] .colv2-page [class*="cash-card"] strong,
:root[data-theme="dark"] .colv2-page [class*="collection-card"] strong{
  color:#ffffff!important;
}
:root[data-theme="dark"] .colv2-page [class*="remit"] small,
:root[data-theme="dark"] .colv2-page [class*="cash-card"] small,
:root[data-theme="dark"] .colv2-page [class*="collection-card"] small{
  color:#afc0d2!important;
}

/* Preserve action button contrast. */
.colv2-page .primary-button,
.colv2-page .colv2-export{
  color:#fff!important;
}

/* --------------------------------------------------------------------------
   CASH COLLECTION REMITTANCE: turn the remaining wide table into cards.
   This is intentionally scoped to the Collections panel that still owns a
   .colv2-table-wrap, so the account/pullout card grid is left untouched.
   -------------------------------------------------------------------------- */
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap{
  width:100%;
  max-width:100%;
  overflow:visible!important;
  padding:14px;
  border-top:1px solid var(--line);
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap table{
  display:block;
  width:100%;
  min-width:0!important;
  border-collapse:separate;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap thead{
  display:none;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:14px;
  width:100%;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  min-width:0;
  padding:15px;
  border:1px solid #cddae6;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 5px 16px rgba(23,45,74,.08);
  overflow:hidden;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr:hover{
  border-color:#7eb9e4;
  box-shadow:0 10px 26px rgba(23,45,74,.13);
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td{
  display:block;
  min-width:0;
  padding:10px 11px!important;
  border:1px solid #e1e8ef!important;
  border-radius:11px;
  background:#f7fafd;
  color:#172033!important;
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td::before{
  display:block;
  margin-bottom:5px;
  color:#60748c;
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td strong{
  display:block;
  color:#172033!important;
  font-size:13px;
  line-height:1.35;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td small{
  display:block;
  margin-top:4px;
  color:#657991!important;
  font-size:10px;
  line-height:1.35;
}

/* Select checkbox stays in the upper-left corner. */
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(1){
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  width:24px;
  height:24px;
  padding:0!important;
  border:0!important;
  background:transparent;
  display:grid;
  place-items:center;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(1)::before{display:none}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(1) input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:#17825f;
  cursor:pointer;
}

/* Collection ID becomes the card heading. */
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2){
  grid-column:1/-1;
  padding-left:39px!important;
  background:#edf5fb;
  border-color:#d3e3ef!important;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2)::before{content:"Collection ID"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2) strong{
  color:#075a95!important;
  font-size:13px;
}

.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(3)::before{content:"Client / Account"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(4)::before{content:"Collector"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(5)::before{content:"Bill Paid"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(6)::before{content:"Collector Fee"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(7)::before{content:"Client Cash"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(8)::before{content:"Admin Receives"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(9)::before{content:"Collected"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(10)::before{content:"Cash Status"}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(11)::before{content:"Remittance"}

/* Amount boxes are color-coded while keeping strong contrast. */
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(5){
  background:#f3f7fb;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(6){
  background:#fff7df;
  border-color:#ecd39a!important;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(6) strong{
  color:#9a6400!important;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(7){
  background:#eaf9f3;
  border-color:#b9e4d3!important;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(7) strong{
  color:#0c7652!important;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(8){
  background:#eaf4fc;
  border-color:#bdd8ec!important;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(8) strong{
  color:#075a95!important;
}

/* The last three operational fields use the full card width where useful. */
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(9){grid-column:1/-1}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(10){align-self:stretch}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(11){align-self:stretch}

/* Empty/loading rows remain centered and do not inherit card field labels. */
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr:has(.colv2-empty){
  display:block;
  grid-column:1/-1;
  padding:0;
  border-style:dashed;
  box-shadow:none;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr:has(.colv2-empty) td{
  position:static;
  width:auto;
  height:auto;
  display:block;
  padding:28px!important;
  border:0!important;
  background:transparent;
  text-align:center;
}
.colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr:has(.colv2-empty) td::before{display:none}

/* Dark mode card palette. */
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr{
  border-color:#294660;
  background:#0d2134;
  box-shadow:0 7px 20px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr:hover{
  border-color:#4f8db8;
  box-shadow:0 11px 28px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td{
  border-color:#29445d!important;
  background:#10283e;
  color:#f3f8ff!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td::before{
  color:#9eb3c7;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td strong{
  color:#ffffff!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td small{
  color:#afc0d2!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2){
  background:#102f49;
  border-color:#315b7c!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2) strong{
  color:#8ed3ff!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(5){background:#13283d}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(6){
  background:#3c3019;
  border-color:#6b5529!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(6) strong{color:#ffd47e!important}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(7){
  background:#12382f;
  border-color:#2b6e58!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(7) strong{color:#85ebbe!important}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(8){
  background:#12324a;
  border-color:#315e7f!important;
}
:root[data-theme="dark"] .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(8) strong{color:#8fd3ff!important}

/* Responsive remittance card layout: no horizontal scrolling. */
@media(max-width:1050px){
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody{
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  }
}

@media(max-width:700px){
  :root[data-theme="dark"] .colv2-page small{color:#b8c8d9!important}
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap{padding:10px}
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody{
    grid-template-columns:1fr;
    gap:10px;
  }
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody tr{
    grid-template-columns:1fr;
    padding:12px;
    border-radius:13px;
  }
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2),
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(9){
    grid-column:auto;
  }
  .colv2-page .panel:has(.colv2-table-wrap) .colv2-table-wrap tbody td:nth-child(2){padding-left:39px!important}
}