/* 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. */

/* The second section in the new-customer form. section-title carries no top margin of
   its own, so without this the heading sat on the checkbox above it and read as part
   of that row rather than the start of the address. */
.nc-gap{margin-top:22px}

/* The temporary password, read out to the customer once. */
.temp-password { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px 20px; border: 1px dashed var(--primary); border-radius: var(--radius-lg); background: var(--primary-ll); }
.temp-password b { font-family: ui-monospace, monospace; font-size: 28px; letter-spacing: 4px; color: var(--primary); user-select: all; }
.temp-password small { color: var(--muted); font-size: 12px; }

/* Customers waiting on the office for a password or an activation. */
.req-panel { margin-bottom: 12px; border-color: var(--warning, #f59e0b); }
.req-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.req-title { font-size: 14px; font-weight: 800; }
.req-title i { color: var(--warning, #f59e0b); }
.req-count { padding: 2px 10px; border-radius: 20px; background: var(--warning-l, #fef3c7); color: #92400e; font-size: 12px; font-weight: 700; }
.req-help { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.req-link { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.req-sub { display: block; color: var(--muted); font-size: 11px; }
.req-note { max-width: 260px; color: var(--text2); font-size: 12px; }
.req-act { white-space: nowrap; text-align: end; }
.req-act .btn + .btn { margin-inline-start: 4px; }

/* Deleting an account: the one panel in the profile that cannot be undone says so in red. */
.del-note{display:flex;gap:10px;align-items:flex-start;background:var(--danger-l);color:var(--text2);border:1px solid #FCA5A5;border-radius:var(--radius);padding:12px 14px;font-size:13px;line-height:1.7;margin-bottom:14px}
.del-note>.ti{color:var(--danger);font-size:18px;margin-top:2px}
.del-note strong{color:var(--danger)}