/* Page group b: customers, accounts and catalog (Email Alerts card design). Loaded after panel.css. */

/* ---------- Cards with an icon header ---------- */
.pgb-card{min-width:0}
.pgb-h{padding:18px 22px;border-bottom:1px solid var(--line);align-items:center}
.pgb-h>div:not(.ea-h-right){flex:1 1 150px;min-width:0}
.pgb-h h2{font-size:17px;font-weight:800;overflow-wrap:anywhere}
.pgb-h p{margin:2px 0 0;color:var(--mute);font-size:13px;line-height:1.4}
.pgb-h .ea-h-right{gap:10px;flex-wrap:wrap}
.ea-ic.pgb-violet{background:#6d56d6}
.ea-ic.pgb-amber{background:#e0883a}
.ea-ic.pgb-rose{background:#d9506a}
.ea-ic.pgb-teal{background:#1f9aa6}

/* KPI icon chips */
.kpi .l i svg{width:18px;height:18px}
.kpi .l{align-items:center}
.kpi .v{overflow-wrap:anywhere}
.kpi .v.pgb-sm{font-size:18px;line-height:1.3}
.kpi .v.down{color:var(--bad)}
@media (max-width:1023px){.g3.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.g3.kpis>:last-child{grid-column:1/-1}}
@media (max-width:520px){.g3.kpis{grid-template-columns:minmax(0,1fr)}.g4.kpis{gap:12px}}

/* ---------- Filter bars ---------- */
.pgb-tb{gap:10px 12px}
.pgb-tb .input,.pgb-tb select.input{height:40px;width:auto;max-width:100%;flex:0 1 auto}
.pgb-tb .search{height:40px;max-width:380px;flex:1 1 260px;border-radius:10px;background:#fff}
.pgb-tb .input.pgb-wide{flex:1 1 280px;max-width:440px;min-width:0}
.pgb-tb input.pgb-grow{flex:1 1 240px;min-width:0;width:auto;max-width:none}
.pgb-tb input.pgb-file{height:40px;padding:6px 8px;max-width:100%;min-width:0}
.pgb-tb .btn-sm{min-height:40px;padding:0 14px}
.pgb-tb-end{border-top:1px solid var(--line);border-bottom:0}
.pgb-filter{padding:14px 22px}
.pgb-filter .sp{flex:1}
@media (max-width:640px){
  .pgb-tb,.pgb-filter{padding:12px 16px}
  .pgb-tb>*{flex:1 1 100%!important;max-width:none!important;width:100%!important}
  .pgb-tb .sp{display:none}
  .pgb-tb a.link{text-align:center}
}

/* ---------- Tables ---------- */
.pgb-card tbody tr:not([data-href]){cursor:default}
.pgb-card td small{margin-top:2px}
.pgb-name{color:var(--ink);text-decoration:none}
.pgb-name:hover b{color:var(--brand-2);text-decoration:underline;text-underline-offset:2px}
.pgb-card .tfoot{border-top:1px solid var(--line)}
.pgb-card .table-wrap{-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .pgb-card th,.pgb-card td{padding-left:14px;padding-right:14px}
  .pgb-h{padding:14px 16px}
  .pgb-h h2{font-size:16px}
  .pgb-card .tfoot{padding:12px 16px}
}

/* ---------- Forms ---------- */
.pgb-form{gap:18px 20px;padding:22px}
.pgb-tight{gap:14px}
.pgb-seg{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}
.pgb-seg label{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--mute);font-size:13px}
.pgb-seg label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pgb-seg input{accent-color:var(--brand);margin:0}
.pgb-upper{text-transform:uppercase}
.pgb-check{flex-direction:row!important;gap:10px;align-items:center;cursor:pointer}
.pgb-check input{accent-color:var(--brand);width:16px;height:16px}
.pgb-file{height:auto;padding:8px;width:100%}
.pgb-photo{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.pgb-photo img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;flex:none}
.pgb-photo .check{font-weight:500;display:flex;gap:8px;align-items:center}
.pgb-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:8px}
.pgb-more .pgb-photo{margin:0}
.pgb-foot{padding:16px 22px;flex-wrap:wrap;gap:10px;background:var(--surface-2);border-radius:0 0 14px 14px}
.pgb-foot-l{margin-right:auto;align-self:center}
.pgb-end{align-self:end}
.pgb-mt{margin-top:14px}
.pgb-mt-s{margin-top:8px}
.pgb-pre{white-space:pre-line}
.pgb-price{max-width:150px;height:38px}
.pgb-days{height:38px;width:auto;max-width:100%}
.pgb-wrap{flex-wrap:wrap}
.pgb-minw{min-width:min(100%,180px)}
.pgb-card textarea.input{line-height:1.5}
@media (max-width:640px){
  .pgb-form{padding:16px;gap:14px}
  .pgb-foot{padding:14px 16px}
  .pgb-foot .btn{flex:1 1 140px}
  .pgb-foot-l{flex:1 1 100%;margin:0 0 4px}
  .pgb-seg{width:100%}
  .pgb-seg label{flex:1 1 40%}
  .pgb-price{max-width:none;width:100%}
}

/* ---------- Layouts ---------- */
.pgb-split{align-items:start}
@media (min-width:1181px){.pgb-split{grid-template-columns:minmax(0,2.4fr) minmax(320px,1fr)}}
.pgb-side,.pgb-main{min-width:0}
.pgb-side{align-self:start;gap:20px}
.pgb-main{gap:20px}
.pgb-soon{align-self:start}
.pgb-card>.list .row.pgb-wrap{gap:10px 12px}
.pgb-card .dl dt{font-size:13px}
.pgb-card .dl dd{font-size:13.5px}

/* Renewal calendar: roomier cells on big screens */
.pgb-card .cal{gap:8px}
.pgb-card .cal .h{padding-bottom:2px;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.pgb-card .cal .d{min-height:88px;border-radius:10px;padding:8px}
.pgb-card .cal .d .num{font-weight:700;color:var(--ink)}
@media (max-width:1023px){.pgb-card .cal .d{min-height:62px}}
@media (max-width:640px){.pgb-card .cal{gap:4px}.pgb-card .cal .d{min-height:46px;padding:4px;border-radius:7px}}

/* Categories table: row forms */
.pgb-cat{min-width:640px}
.pgb-cat-td{padding:10px 22px}
.pgb-cat .row-wrap{gap:10px}
.pgb-cat .input{height:40px;width:auto;max-width:100%}
.pgb-cat .pgb-cat-name{width:240px}
.pgb-cat .pgb-sort{width:90px}
.pgb-cat .checks label{white-space:nowrap}
@media (max-width:640px){.pgb-cat{min-width:560px}.pgb-cat-td{padding:10px 14px}}

/* Dialogs in this group */
dialog.modal .form-grid .checks{padding-top:4px}

/* Customer detail tabs: compact so all eight fit on one row on wide screens */
.pgb-card>.tabs{padding:0 10px;gap:0 2px}
.pgb-card>.tabs a{padding:14px 9px;font-size:13.5px}
.pgb-card .ea-h-right{flex:none}

/* Renewals: wider side list, name on its own line, pill and buttons underneath */
@media (min-width:1181px){.pgb-split:has(.pgb-soon){grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr)}}
.pgb-soon .row.pgb-wrap .pgb-minw{flex:1 1 100%}
.pgb-soon .row.pgb-wrap .pill{margin-right:auto}
.pgb-card .cal .d{min-height:78px}

/* Toggle switches inside tables must be real boxes (the span was inline) */
.pgb-card .switch{display:inline-block;vertical-align:middle}
.pgb-card .switch input{display:block}
.pgb-card .switch input:not(:checked){background:#cfd9d5}

/* ---------- W2: order list columns, product actions, tracking preview, bulk stock ---------- */
.pgw2-orders{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.pgw2-orders table{min-width:1080px}
.pgw2-orders td small{display:block}
.pgw2-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pgw2-acts form{margin:0}
.w2-track{background:var(--surface-2,#f6f8f7);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:13px;overflow-wrap:anywhere}
.w2-track a{word-break:break-all}
.pgw2-stockhead{padding-bottom:0}
.pgw2-stockhead .toolbar{margin:0}

/* ---------- W7: order approval = two parts (staff approves the order, accountant checks the payment) ---------- */
.w7-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.w7-part{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--surface);min-width:0}
.w7-part.is-todo{border-color:var(--gold)}
.w7-part.is-done{border-color:var(--ok);background:var(--ok-soft)}
.w7-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.w7-head>div{min-width:0}
.w7-head b{display:block;color:var(--ink)}
.w7-head small{display:block;color:var(--mute);font-size:12.5px}
.w7-head .pill{margin-left:auto}
.w7-no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--brand);color:#fff;font-weight:700;font-size:13px}
.w7-no svg{width:15px;height:15px}
.w7-part.is-done .w7-no{background:var(--ok)}
.w7-say{margin:0;font-size:13.5px;line-height:1.5;color:var(--text)}
.w7-foot{margin:0;font-size:12.5px;line-height:1.5;color:var(--mute)}
.w7-part .pay-check{background:var(--surface)}
.w7-part form{margin:0}
/* Staff approved + payment verified, but the customer's wallet is short: one clear notice above both parts. */
.w7-hold{flex-direction:column;align-items:flex-start;gap:6px;line-height:1.5;min-width:0}
.w7-hold b{color:var(--ink);font-size:14px}
.w7-hold span{min-width:0}
@media (max-width:760px){.w7-two{grid-template-columns:minmax(0,1fr)}.w7-part{padding:12px}.w7-part .row-wrap .btn{flex:1 1 140px}.w7-hold .btn{width:100%}}

/* ---------- W16: admin order list, ONE row per order in the summary format (admin/orders/rows.blade.php, row.blade.php) ---------- */
/* Filter chips with counts */
.w16-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.w16-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 6px 0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.w16-chip .c{background:var(--surface-2);border:1px solid var(--line);color:var(--mute);border-radius:999px;font-size:11.5px;font-weight:700;padding:1px 8px;min-width:24px;text-align:center}
.w16-chip:hover{border-color:var(--brand-2)}
.w16-chip.is-queue{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.w16-chip.is-queue .c{background:#fff;border-color:var(--brand-line);color:var(--brand)}
.w16-chip.is-quiet{font-weight:500;color:var(--mute)}
.w16-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.w16-chip[aria-pressed="true"] .c{background:rgb(255 255 255/.2);border-color:transparent;color:#fff}
.w16-chip-sep{width:1px;height:22px;background:var(--line);margin:0 4px}

/* Bulk bar and report */
.w16-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 22px;background:var(--brand-soft);border-bottom:1px solid var(--brand-line);position:sticky;top:0;z-index:3}
.w16-bar[hidden],.w16-report[hidden]{display:none}
.w16-bar b{color:var(--brand)}
.w16-report{margin:14px 22px 0;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.5}
.w16-report.is-ok{background:var(--ok-soft);color:var(--ok)}
.w16-report.is-warn{background:var(--warn-soft);color:var(--gold-ink)}
.w16-rep-h{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.w16-rep-x{border:0;background:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 4px}
.w16-report ul{margin:8px 0 0;padding-left:18px}
.w16-report li{margin:2px 0}

/* The table */
.w16-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.w16 .w16-table{min-width:1040px}
.w16-table th{padding:10px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.w16-table td{padding:14px 12px;vertical-align:top;font-size:13px;line-height:1.45;background:inherit}
.w16-table td small{display:block;margin-top:2px;font-size:12px}
.w16-table .w16-sel{width:34px;padding:14px 0 0 16px}
.w16-table th.w16-sel{padding-top:10px}
.w16-sel input{width:16px;height:16px;accent-color:var(--brand)}
.w16-sel input:disabled{opacity:.35}
/* The row colour sits on the row itself, so the sticky Action cell can copy it (hover, ticked, cancelled). */
.w16-row{background:#fff;cursor:default}
.w16-row.is-picked{background:#f1f8f5}
.w16-row.is-closed{background:var(--surface-2)}
.w16-row.is-closed .w16-pn,.w16-row.is-closed .w16-thumb{opacity:.7}
.w16-row.is-busy{opacity:.55;pointer-events:none}
.w16-row.is-flash{animation:w16flash 1.5s ease-out}
@keyframes w16flash{from{background:#fff3cf}}
.w16-c-order{width:118px}
.w16-c-prod{width:190px}
.w16-c-pay{width:148px}
.w16-c-cust{width:138px}
.w16-c-ship{width:232px}
.w16-c-disp{width:108px}
.w16-c-act{width:128px}
/* On a laptop the table can be wider than the page: the Action column (ACCEPT) stays in view at the right edge. */
@media (min-width:901px){
  .w16-table th:last-child,.w16-table td.w16-c-act{position:sticky;right:0;z-index:2;box-shadow:-10px 0 12px -10px rgb(15 31 27/.2)}
  .w16-table th:last-child{background:var(--surface-2)}
}
/* On a small laptop the Dispatch column folds into the Order column (as a small status), so the whole row fits without sideways scrolling. */
.w16-disp-mini{display:none}
@media (min-width:901px) and (max-width:1380px){
  .w16 .w16-table{min-width:930px}
  .w16-table th.w16-c-disp,.w16-table td.w16-c-disp{display:none}
  .w16-c-order .w16-disp-mini{display:inline-flex;margin-top:4px}
}

.w16-no{font-weight:700;font-size:14px;display:inline-block}
.w16-table .w16-ago{color:var(--ok);font-weight:700}
.w16-c-order .pill{margin-top:8px;white-space:normal}
.w16-prod{display:flex;gap:10px;align-items:flex-start}
.w16-thumb{width:48px;height:48px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--brand-2)}
.w16-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.w16-thumb svg{width:22px;height:22px}
.w16-pt{min-width:0}
.w16-pn{display:block;color:var(--ink);overflow-wrap:anywhere;line-height:1.3}
.w16-q{display:inline-block;margin-top:3px;font-size:12px;color:var(--mute)}
.w16-q b{color:var(--ink)}
.w16-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;margin:0;align-items:center}
.w16-dl dt{color:var(--mute);font-size:12px}
.w16-dl dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
/* Payment cell: label and value on one line when they fit, the value drops below when they do not (never one letter per line). */
.w16-kv{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin:0 0 7px}
.w16-kv:last-child{margin-bottom:0}
.w16-kv>span:first-child{color:var(--mute);font-size:12px;min-width:44px}
.w16-kv em{font-style:normal;color:var(--ink)}
.w16-table td small.w16-warn{color:var(--warn);font-weight:600;margin-top:6px}
.w16-ph{font-weight:600;display:inline-block}
.w16-cn{color:var(--ink);text-decoration:none;display:block}
.w16-cn:hover b{color:var(--brand-2);text-decoration:underline;text-underline-offset:2px}
.w16-c-disp .pill{white-space:normal}

/* Courier, tracking ID and invoice no. written in the row */
.w16-form{display:flex;flex-direction:column;gap:8px;margin:0}
.w16-f{display:flex;flex-direction:column;gap:3px;margin:0;min-width:0}
.w16-f>span:first-child{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.w16-form .input,.w16-form select.input{height:34px;font-size:13px;padding:0 10px;border-radius:8px}
.w16-form select.input{padding-right:6px}
.w16-in{display:flex;gap:6px;align-items:center;min-width:0}
.w16-in .input{flex:1 1 auto;min-width:0}
.w16-lnk{flex:none;font-size:12px;font-weight:700;color:var(--brand-2);text-decoration:none;padding:6px 9px;border:1px solid var(--brand-line);border-radius:8px;background:var(--brand-soft)}
.w16-lnk:hover{border-color:var(--brand-2)}
.w16-lnk[hidden]{display:none}
.w16-foot{display:flex;align-items:center;gap:10px;min-height:32px;flex-wrap:wrap}
.w16-form .btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.w16-state{font-size:12.5px;font-weight:700;color:var(--mute)}
.w16-state.is-ok{color:var(--ok)}
.w16-state.is-bad,.w16-ferr,.w16-table small.w16-err{color:var(--bad)}
.w16-table small.w16-ferr{font-size:12px;font-weight:600;margin-top:0}
.w16-table small.w16-err[hidden]{display:none}
.w16-hint{margin:0;font-size:12px;color:var(--mute);line-height:1.4}
.w16-form .input.is-bad{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}

/* Action column */
.w16-act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.w16-act .btn{justify-content:flex-start;width:100%}
.w16-act .pill{align-self:flex-start}
.w16-accept{font-weight:800;letter-spacing:.05em;min-height:36px}
.w16-cancel{border:0;background:none;color:var(--bad);font-weight:700;font-size:13px;cursor:pointer;padding:6px 4px;text-align:center}
.w16-cancel:hover{text-decoration:underline;text-underline-offset:2px}
.w16-badge{background:var(--brand);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:0 6px;min-width:18px;text-align:center;line-height:18px}
.w16-say{margin:0;font-size:13.5px;line-height:1.5;color:var(--text)}

/* Phone and small tablet: every row becomes a card */
@media (max-width:900px){
  .w16-chips{flex-wrap:nowrap;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
  .w16-chips::-webkit-scrollbar{display:none}
  .w16-bar{padding:10px 16px}
  .w16-report{margin:12px 16px 0}
  .w16 .w16-table{min-width:0}
  .w16-table,.w16-table tbody{display:block}
  .w16-table thead{display:none}
  .w16-row{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:12px 14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
  .w16-table td,.w16-table td.w16-c-order,.w16-table td.w16-c-prod,.w16-table td.w16-c-pay,.w16-table td.w16-c-cust,.w16-table td.w16-c-ship,.w16-table td.w16-c-disp,.w16-table td.w16-c-act{display:block;width:auto;min-width:0;padding:0;border:0;background:none}
  .w16-row.is-picked{background:#f1f8f5}
  .w16-row.is-closed{background:var(--surface-2)}
  .w16-row.is-picked td,.w16-row.is-closed td{background:none}
  .w16-row.is-flash{animation:w16flash 1.5s ease-out}
  .w16-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .w16-table td.w16-c-order::before,.w16-table td.w16-c-act::before{display:none}
  .w16-table .w16-sel{position:absolute;top:14px;right:14px;width:auto;padding:0}
  .w16-c-order{grid-column:1/-1;padding-right:30px!important}
  .w16-c-prod{grid-column:1/-1}
  .w16-c-ship{grid-column:1/-1}
  .w16-c-disp{grid-column:1/-1}
  .w16-c-act{grid-column:1/-1}
  .w16-act{flex-direction:row;flex-wrap:wrap;gap:8px}
  .w16-act .btn{width:auto;flex:1 1 120px;justify-content:center;min-height:40px}
  .w16-accept{flex:1 1 100%!important}
  .w16-act .pill{align-self:center}
  .w16-act .w16-cancel{flex:0 0 auto;padding:8px 10px}
  .w16-form .input,.w16-form select.input{height:40px;font-size:14px}
  .w16-form .btn{min-height:40px}
}
.w16-table td[data-label=""]::before{display:none!important}
@media (max-width:359px){
  .w16-row{grid-template-columns:minmax(0,1fr);margin:12px 10px}
}
/* Printing the list: no buttons, chips or select boxes, and the sticky Action column is left out. */
@media print{
  .w16-chips,.w16-bar,.w16-report,.w16-form .btn,.w16-foot,.w16-lnk,.w16-sel,th.w16-c-act,td.w16-c-act{display:none!important}
  .w16 .w16-table{min-width:0}
  .w16-wrap{overflow:visible}
}

/* ---------- W14 (S1b): Payments verify card, Receive payment, Wallet & ledger "All customers", Money to receive ----------
   Wallet.live only. Same look as the sample pages (mockups/wallet-system-v2.html); every class starts with pgm-. */
.pgm-ok{color:var(--ok);font-weight:700}
.pgm-bad{color:var(--bad);font-weight:700}
.pgm-ink{color:var(--ink)}
.pgm-warn{color:var(--warn)}
.pgm-badtxt{color:var(--bad)!important;font-weight:600}
.pgm-strike{text-decoration:line-through;color:var(--mute)}
.pgm-fine{font-size:12.5px;color:var(--mute);line-height:1.5}
.pgm-fine b{color:var(--ink)}
.pgm-lock{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--mute);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.pgm-lock svg{width:12px;height:12px}
.pgm-tick{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-weight:600;cursor:pointer}
.pgm-tick input{margin-top:3px;accent-color:var(--brand)}

/* KPI strips */
.pgm-kpis{margin:0}
.pgm-kpis a.kpi{text-decoration:none;color:inherit}
.pgm-kpis a.kpi:hover{border-color:var(--brand-line)}
.pgm-kpis .kpi .v.ok{color:var(--ok)}
.pgm-kpis .kpi .v.bad{color:var(--bad)}
.pgm-kpis .kpi.adv{background:var(--ok-soft);border-color:#b8e0c8}
.pgm-kpis .kpi.hero{background:var(--brand);border-color:var(--brand)}
.pgm-kpis .kpi.hero .l,.pgm-kpis .kpi.hero .d{color:#bfe0d6}
.pgm-kpis .kpi.hero .v{color:#fff}

/* Equation / aging strip */
.pgm-eq{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.pgm-eq .eq-h{font-weight:700;color:var(--ink);margin-right:6px}
.pgm-eq .term{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;min-width:104px}
.pgm-eq .term small{color:var(--mute);font-size:11.5px}
.pgm-eq .term b{font-family:var(--display);font-size:17px;color:var(--ink)}
.pgm-eq .term.res{border-color:var(--gold);background:var(--gold-soft)}
.pgm-eq .term.fin{border-color:var(--ink)}
.pgm-eq .op{font-size:20px;color:var(--mute);font-weight:700}
.pgm-eq p{flex-basis:100%;margin:2px 0 0;font-size:12.5px;color:var(--mute)}

/* ----- the verify card ----- */
.pgm-cards-stack{gap:18px}
.pgm-vc{min-width:0}
.pgm-vc-h{border-bottom:1px solid var(--line)}
.pgm-vc-h>div:not(.ea-h-right){flex:1 1 260px;min-width:0}
.pgm-vc-h h2{font-size:17px;overflow-wrap:anywhere}
.pgm-vc-h .ea-h-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.pgm-amt{font-family:var(--display);font-size:22px;font-weight:800;color:var(--ink)}
.pgm-vc-b{display:flex;flex-direction:column;gap:18px;padding:20px 22px;max-height:none;overflow:visible}
.pgm-sums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.pgm-sums>div{padding:9px 14px;border-right:1px solid var(--line);min-width:0}
.pgm-sums>div:last-child{border-right:0}
.pgm-sums small{display:block;font-size:12px;color:var(--mute)}
.pgm-sums b{font:800 16px var(--display);color:var(--ink);overflow-wrap:anywhere}
.pgm-sums .bad b{color:var(--bad)}
.pgm-sums .ok b{color:var(--ok)}
.pgm-two-in{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;align-items:start}
.pgm-proof .doc-thumb{width:100%;max-height:320px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}
.pgm-noproof{border:1px dashed var(--line);border-radius:12px;padding:34px 14px}
.pgm-facts{gap:14px;min-width:0}
.pgm-facts .dl{gap:8px 16px}
.pgm-facts .dl dd .pill{vertical-align:middle}
.pgm-facts .field .input{max-width:420px}
.pgm-plan{display:flex;flex-direction:column;gap:14px;min-width:0;transition:opacity .15s}
.pgm-plan.is-busy{opacity:.5}
.pgm-plan-h{font-size:15px;color:var(--ink)}
.pgm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pgm-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;min-width:0}
.pgm-box h4{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);margin:0}
.pgm-box .in{padding:10px 14px;display:grid;gap:8px}
.pgm-line{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pgm-line small{display:block;color:var(--mute);font-size:12px}
.pgm-line>b:last-child{white-space:nowrap;flex:none}
.pgm-line b{color:var(--ink)}
.pgm-line b.pgm-ok{color:var(--ok)}
.pgm-line b.pgm-bad{color:var(--bad)}
.pgm-ord{font-size:13.5px;line-height:1.5;padding-left:10px;border-left:3px solid var(--ok);color:var(--text);font-weight:400}
.pgm-ord.pgm-bad{border-color:var(--bad);color:var(--bad)}
.pgm-ord.pgm-mute{border-color:var(--line);color:var(--mute)}
.pgm-ord b{color:var(--ink)}
.pgm-ba-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto}
.pgm-ba{min-width:0}
.pgm-ba th,.pgm-ba td{padding:9px 14px}
.pgm-ba tbody tr{cursor:default}
.pgm-ba td.ch{background:var(--gold-soft)}
.pgm-alert{align-items:flex-start}
.pgm-alert>div{min-width:0}
.pgm-alert.pgm-over{background:var(--warn-soft);color:var(--warn)}
.pgm-fund{margin-top:8px}
.pgm-note{align-items:flex-start}
.pgm-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.pgm-excess .input{max-width:420px}
.pgm-vc-f{background:var(--surface-2);border-radius:0 0 14px 14px}
.pgm-vc-f .btn{min-height:42px}
.pgm-rej-b{display:none;padding:16px 22px 20px;border-top:1px solid var(--line);gap:12px}
.pgm-vc form:has(.pgm-rej-t:checked) .pgm-rej-b{display:grid}
.pgm-rej-b .input{max-width:520px}

/* ----- Receive payment dialog ----- */
dialog.modal.pgm-rcv{max-width:min(680px,calc(100% - 24px))}
.pgm-rcv-b{gap:16px}
.pgm-rcv .choice label.off{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
.pgm-prev{border:1px dashed var(--brand-line);background:var(--surface-2);border-radius:12px;padding:12px 14px;display:grid;gap:6px;font-size:13px}
.pgm-prev .row{display:flex;flex-wrap:wrap;gap:6px 18px}
.pgm-prev .row span{white-space:nowrap}
.pgm-prev b{color:var(--ink)}
.pgm-over-d summary{cursor:pointer;color:var(--mute);font-size:13px}
dialog.modal.pgm-rev{max-width:min(600px,calc(100% - 24px))}
.pgm-rev-b{gap:14px}

/* ----- Money to receive / Wallet & ledger board ----- */
.pgm-board{min-width:0}
.pgm-board .ea-card-h .ea-h-right{margin-left:auto}
.pgm-board .search{height:40px;max-width:260px}
.pgm-tbl{min-width:1040px}
.pgm-tbl th,.pgm-tbl td{padding:12px 12px}
.pgm-tbl td.ttl{min-width:170px}
.pgm-tbl td.nw,.pgm-tbl td.num{white-space:nowrap}
.pgm-tbl td.age{min-width:180px}
.pgm-tbl td.age small{display:block;margin-top:4px;color:var(--mute);font-size:11.5px;white-space:normal}
.pgm-tbl tbody tr{cursor:default}
.pgm-tbl td.act{white-space:nowrap;position:sticky;right:0;background:#fff;box-shadow:-10px 0 10px -10px rgb(15 31 27/.25)}
.pgm-tbl th.act{position:sticky;right:0;box-shadow:-10px 0 10px -10px rgb(15 31 27/.25)}
.pgm-tbl tbody tr:hover td.act{background:var(--surface-2)}
.pgm-tbl td.act form{display:inline}
.pgm-tbl .xtra{display:none}
.pgm-tbl.pgm-more .xtra{display:table-cell}
.pgm-agebar{display:flex;gap:2px;height:6px;border-radius:99px;overflow:hidden;margin-top:6px;background:var(--surface-2)}
.pgm-agebar i{display:block;min-width:4px}
.pgm-chips{border-bottom:1px solid var(--line)}
.pgm-chips a b{font-weight:700;color:var(--mute)}
.pgm-chips .sp{flex:1}
.pgm-brk{margin-left:auto;font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:center;cursor:pointer}
.pgm-brk input{accent-color:var(--brand)}

/* ----- phones: rows become cards ----- */
@media (max-width:760px){
  .pgm-grid2{grid-template-columns:minmax(0,1fr)}
  .pgm-two-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pgm-vc-b{padding:16px}
  .pgm-vc-h{padding:14px 16px}
  .pgm-vc-h .ea-h-right{width:100%;margin-left:0}
  .pgm-sums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgm-sums>div:nth-child(2){border-right:0}
  .pgm-sums>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pgm-vc-f{padding:14px 16px}
  .pgm-vc-f .row-wrap{width:100%}
  .pgm-vc-f .row-wrap .btn{flex:1 1 100%}
  .pgm-rej-b{padding:14px 16px 16px}
  .pgm-eq{padding:12px;gap:8px 6px}
  .pgm-eq .eq-h{flex-basis:100%}
  .pgm-eq .term{min-width:0;flex:1 1 0;padding:6px}
  .pgm-eq .term small{font-size:10.5px;line-height:1.2}
  .pgm-eq .term b{font-size:13.5px;white-space:nowrap}
  .pgm-eq .op{font-size:16px}
  .pgm-kpis.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgm-cards table{min-width:0}
  .pgm-cards thead{display:none}
  .pgm-cards tbody,.pgm-cards tr,.pgm-cards td{display:block}
  .pgm-cards tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .pgm-cards td{padding:0;border:0;min-width:0;text-align:left!important}
  .pgm-cards td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--mute);font-weight:500}
  .pgm-cards td[data-l=""]::before{display:none}
  .pgm-cards td.ttl,.pgm-cards td.age,.pgm-cards td.act,.pgm-cards td.full{grid-column:1/-1}
  .pgm-cards td.ttl{font-size:15px}
  .pgm-cards td.act{display:flex!important;gap:8px;flex-wrap:wrap;position:static;box-shadow:none;background:transparent}
  .pgm-cards td.act .btn{flex:1}
  .pgm-cards td.act form{flex:1;display:flex}
  .pgm-cards td.act form .btn{flex:1}
  .pgm-cards td.hidem{display:none}
  .pgm-cards td.age{order:10}
  .pgm-cards td.act{order:11}
  .pgm-cards td.xtra,.pgm-tbl.pgm-more td.xtra{display:none}
  .pgm-tbl{min-width:0}
  .pgm-tbl th,.pgm-tbl td{padding:0}
  .pgm-tbl td.ttl,.pgm-tbl td.age{min-width:0}
  .pgm-tbl td.nw,.pgm-tbl td.num{white-space:normal}
  .pgm-board .search{max-width:none}
  .pgm-board .ea-h-right{width:100%;margin-left:0}
}

/* verify cards fold: the first ones are open, the rest are one line until opened */
.pgm-vc-d>summary{list-style:none;cursor:pointer}
.pgm-vc-d>summary::-webkit-details-marker{display:none}
.pgm-vc-d:not([open])>summary{border-bottom:0}
.pgm-vc-d:not([open])>summary:hover{background:var(--surface-2);border-radius:14px}
.pgm-chev{width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);margin:0 4px 3px;flex:none;transition:transform .15s}
.pgm-vc-d[open]>summary .pgm-chev{transform:rotate(-135deg);margin-bottom:-3px}

/* All payments table (wallet.live): ten columns that fit a 1440px screen */
.pgm-pt table{min-width:980px}
.pgm-pt th,.pgm-pt td{padding:11px 10px}
.pgm-pt td:first-child b,.pgm-pt td.num{white-space:nowrap}
.pgm-pt td.pgm-acts{white-space:nowrap}
.pgm-pt td.pgm-acts .btn{margin-left:4px}
.pgm-pt td.pgm-acts form{display:inline}
@media (max-width:640px){.pgm-pt table{min-width:0}.pgm-pt th,.pgm-pt td{padding:0}.pgm-pt td.pgm-acts{white-space:normal}}
.pgm-vc-f .btn:disabled{opacity:.45;cursor:not-allowed}
.pgm-vc-f .btn[aria-disabled=true]{opacity:.55}
.pgm-tbl th,.pgm-tbl td{padding:12px 10px}
.pgm-tbl td.num small{white-space:normal;max-width:130px;margin-left:auto}
.pgm-tbl td.age{min-width:170px}
.pgm-tbl td.ttl{min-width:150px}
@media (max-width:640px){.pgm-tbl td.num small{max-width:none;margin-left:0}}
@media (max-width:640px){
  .pgm-eq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgm-eq .eq-h,.pgm-eq p{grid-column:1/-1}
  .pgm-eq .op{display:none}
  .pgm-eq .term{min-width:0;padding:8px 10px}
  .pgm-eq .term b{font-size:15px;white-space:normal}
  .pgm-eq .term.fin{grid-column:1/-1}
  .pgm-eq .term small{font-size:11px}
}

/* ---------- W14 (S1b), HYBRID: "Wallet Rs w + pay the remaining Rs X directly" ---------- */
.note.pgm-hyb{background:var(--brand-soft);color:var(--brand);align-items:flex-start}
.note.pgm-hyb svg{width:18px;height:18px;flex:none;margin-top:1px}
.note.pgm-hyb b{color:var(--brand)}
.pgm-hyb-line{display:block;margin-top:2px;color:var(--brand);font-weight:600;font-size:12px}
.pgm-box .pgm-hyb-line{margin:0}
td .pgm-hyb-line{white-space:normal}
.pgm-sums em.pgm-held{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--brand);margin-top:1px}
/* All payments (wallet.live): reference and receipt numbers may wrap so every column still fits a 1440px screen */
.pgm-pt td.num.pgm-wrap{white-space:normal;overflow-wrap:anywhere;min-width:84px}
.pgm-pt td small{white-space:normal}
.pgm-pt table{min-width:0}
@media (min-width:641px){.pgm-pt th,.pgm-pt td{padding:11px 8px}}
@media (max-width:640px){.pgm-vc-f .row-wrap .btn{max-width:100%;white-space:normal;text-align:center;justify-content:center}}