/* Pay partners (static/shared/pay-partners.js): the same screen in the till and in
   the Sales tab. Colours come from whichever page hosts it. */
.pp-filters{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;align-items:end}
.pp-field{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted,#888);flex:1 1 110px;min-width:0}
.pp-field select,.pp-field input,.pp-search{width:100%;box-sizing:border-box;padding:7px 8px;font-size:14px;border:1px solid var(--line,#ddd);border-radius:9px;background:var(--surface-2,#f4f0e8);color:var(--ink,#222)}
.pp-search{flex:1 1 100%}
.pp-note{margin:0;padding:4px 12px;font-size:12px;color:var(--muted,#888)}
.pp-empty{padding:20px 12px;text-align:center;color:var(--muted,#888)}
.pp-error{color:#a3261d}
.pp-row{display:grid;grid-template-columns:20px minmax(0,1fr) 46px 32px 46px 46px;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line,#ddd);cursor:pointer;user-select:none}
.pp-row input{pointer-events:none;margin:0}
.pp-head{position:sticky;top:0;z-index:1;background:var(--surface,#fff);font-size:12px;font-weight:600}
.pp-num{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.pp-desc{font-size:14px;overflow-wrap:anywhere}
.pp-desc small{display:block;font-size:11px;color:var(--muted,#888)}
.pp-on{background:var(--surface-2,#f4f0e8)}
.pp-off{opacity:.42;cursor:default}
.pp-totals{display:flex;justify-content:space-between;gap:8px;padding:6px 16px}
.pp-tot{display:flex;flex-direction:column;align-items:flex-end}
.pp-tot small{font-size:11px;color:var(--muted,#888)}
.pp-tot strong{font-size:17px;font-variant-numeric:tabular-nums}
.pp-footer{display:flex;flex-direction:column;gap:8px}
.pp-topay{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
.pp-topay strong{font-size:22px;font-variant-numeric:tabular-nums}
.pp-pay-row{display:flex;align-items:center;gap:22px}
.pp-icon{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line,#ddd);background:var(--surface-2,#f4f0e8);color:var(--ink,#222);cursor:pointer}
.pp-ok{color:var(--accent,#a3261d);border-color:var(--accent,#a3261d)}
.pp-icon:disabled{opacity:.35;cursor:default}
.pp-paid-wrap{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#888);min-width:0}
.pp-paid{flex:1;min-width:0;text-align:right;font-size:20px;padding:6px 8px;border:1px solid var(--line,#ddd);border-radius:9px;background:var(--surface-2,#f4f0e8);color:var(--ink,#222)}
.pp-modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(0,0,0,.4);padding:16px}
.pp-modal{background:var(--surface,#fff);color:var(--ink,#222);border-radius:14px;padding:18px;width:min(360px,100%);box-sizing:border-box}
.pp-modal h2{margin:0 0 12px;font-size:17px}
.pp-confirm-row{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}
.pp-diff-on strong{color:#a3261d}
.pp-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.pp-btn{padding:10px 16px;border-radius:10px;border:1px solid var(--line,#ddd);background:var(--surface-2,#f4f0e8);color:var(--ink,#222);font-size:15px;cursor:pointer}
.pp-btn-primary{background:var(--accent,#a3261d);border-color:var(--accent,#a3261d);color:var(--on-accent,#fff)}
.pp-edit{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.pp-edit-field{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted,#888);margin-bottom:8px}
.pp-edit-field input,.pp-edit-field select{width:100%;box-sizing:border-box;padding:7px 8px;font-size:14px;border:1px solid var(--line,#ddd);border-radius:9px;background:var(--surface-2,#f4f0e8);color:var(--ink,#222)}
.pp-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
/* Sales tab: the button sits beside the title, and the screen gets a roomy dialog. */
.sales-page .page-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-card:has(.pp-shell){width:min(760px,calc(100vw - 16px));padding:0}
.pp-shell{display:flex;flex-direction:column;height:min(78dvh,660px)}
.pp-shell-body{flex:1;min-height:0;overflow:auto}
.pp-shell-foot{flex:none;padding:8px 12px;border-top:1px solid var(--line,#ddd)}
/* Narrow screens (a phone): the description gets a line of its own, the four figures sit under it. */
@media (max-width:520px){
  .pp-row{grid-template-columns:20px repeat(4,minmax(0,1fr));row-gap:2px}
  .pp-row input{grid-row:1 / span 2}
  .pp-desc,.pp-head>span:nth-child(2){grid-column:2 / -1}
}