/* Lifted from mocks/admin/sales/customers.html.

   Twelve rules came across that nothing here draws: the mock's own .content page box
   (which is not in admin.css and overrides page-level layout - the trap recorded on
   8 September), its .cust-filter-bar (this screen uses the shared .filters-row - the
   same trap from the other side), a second avatar size, and status and type chips that
   duplicate names admin.css already owns. All removed. */
.ks.orange::before{background:var(--warning);}
.ks.slate::before{background:var(--slate);}
.ks.accent::before{background:var(--accent);}
.debt-cell{font-weight:700;color:var(--danger);}
.debt-cell.zero{color:var(--success);}
.profile-header{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg);border-radius:var(--radius-lg);margin-bottom:16px;}
.profile-avatar-lg{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;flex-shrink:0;}
.profile-name{font-size:16px;font-weight:800;color:var(--text);line-height:1.45;}
.profile-meta{font-size:13px;color:var(--muted);margin-top:3px;}
/* Pushed to the far end of the header. It was margin-right:auto written inline - a
   physical side in an RTL page, which happens to land correctly and stops doing so
   the day anything here is read left to right. */
.profile-state{margin-inline-start:auto;}
/* The badge and the acts on it, stacked at the far end. The badge says where the
   customer stands; the buttons under it are the only way to move them - kept out of
   the edit form so blocking is never a side effect of pressing Save. */
.profile-state-col{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.profile-state-col .profile-state{margin-inline-start:0;}
.profile-state-acts{display:flex;gap:6px;}

/* The open invoices a payment can go against. A payment is always against one
   invoice - there is no general payment - so this is a choice, not a filter. */
.pay-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:14px;}
.pay-inv{text-align:start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);cursor:pointer;line-height:1.45;}
.pay-inv:hover{border-color:var(--primary-l);}
.pay-inv.is-on{border-color:var(--primary);background:var(--primary-ll);}
.pay-inv-no{font-size:13px;font-weight:700;color:var(--text);}
.pay-inv-due{font-size:13px;font-weight:700;color:var(--danger);margin-top:4px;}

/* A tick with its sentence beside it, so the box is not a square with no meaning. */
.cust-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);line-height:1.5;}
.cust-check input{width:16px;height:16px;accent-color:var(--primary);}

/* Why the action will not go, next to the button that will not go. */
.edit-why{align-self:center;margin:0;}
.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.pstat{background:var(--bg);border-radius:var(--radius);padding:12px;text-align:center;}
.pstat-label{font-size:11px;color:var(--muted);margin-bottom:3px;}
.pstat-val{font-size:16px;font-weight:800;color:var(--text);}
.dtabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:14px;}
.dtab{padding:8px 16px;border:none;background:none;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;}
.dtab.active{color:var(--primary);border-bottom-color:var(--primary);}
.dtab-pane{display:none;}
.dtab-pane.active{display:block;}
.mini-tbl{width:100%;border-collapse:collapse;font-size:13px;}
/* The mock gives this one table a solid navy head. Every other small table in the
   system - the order modal's items, the invoice lines - carries the light head that
   admin.css defines, so a navy bar here reads as a different kind of object inside the
   same kind of window. Aligned with the rest. */
.mini-tbl th{background:var(--bg);color:var(--muted);padding:8px 10px;text-align:right;font-size:11px;font-weight:700;border-bottom:1px solid var(--border);}
.mini-tbl td{padding:8px 10px;border-bottom:1px solid var(--border);}
.mini-tbl tr:last-child td{border-bottom:none;}
.mini-tbl tr:hover td{background:var(--primary-ll);}
.points-log{display:flex;flex-direction:column;gap:6px;}
.point-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg);border-radius:8px;}
.point-item .pi-desc{font-size:13px;font-weight:600;}
.point-item .pi-date{font-size:11px;color:var(--muted);}
.point-item .pi-val{font-weight:800;font-size:14px;}
.pi-amount{text-align:end;}
.pi-val.earn{color:var(--success);}
.pi-val.spend{color:var(--danger);}

/* ── The list as one body ───────────────────────────────────────────────────
   The table ran wall to wall with a white pager bar floating beneath it, so the two
   read as loose objects on the page. Now they share a panel: table above, pager as
   its foot, on the same 20px axis as every other screen. */