/* Pengaturan rebuild — Profil, Keamanan & akses, Organisasi and Anggota (identity.js, members.js). Page styles on top of pg.css / pg-app.css; this team owns this file.
   Sections: 1 page head and rows · 2 Anggota's table · 3 the account task's steps (#overlay-account: the code, the
   authenticator key, the recovery codes) · 4 Anggota's dialogs · 5 phone. Dialog rules are scoped to this team's own
   wrappers (.pg-people-*) so Penagihan's dialogs in the same frame keep their own rhythm. */

/* ---------- 1. Page head and rows ---------- */
/* A row a change touched washes once, as Pelanggan's do. */
.pg-people-fresh, tr.pg-people-fresh > td { animation: pg-people-fresh 1.2s ease-out both; }
@keyframes pg-people-fresh { 0%, 35% { background-color: #fff5d6; } 100% { background-color: transparent; } }
/* The deletion asked for: a waiting mark. */
.pg-row-mark.pg-is-warn { background: var(--pg-warn-bg); color: var(--pg-warn); }
/* Lists in a row's side keep their own width (Bahasa, Negara, Provinsi). */
.pg-row-side .pg-select.pg-sm { width: auto; max-width: 260px; }
.pg-row-side .pg-select:disabled { opacity: .6; cursor: default; }
/* A row edited in place: the label over the field, the refusal under it. */
.pg-row-title label { color: inherit; font: inherit; }
.pg-row.pg-is-editing .pg-row-copy > .pg-error { margin: 2px 0 0; }
.pg-row-text .pg-btn.pg-link, .pg-page-lead .pg-btn.pg-link, .pg-fact dd .pg-btn.pg-link { min-height: 0; font-size: inherit; vertical-align: baseline; }
/* Load more at a list's foot. */
.pg-people-more { justify-content: space-between; }
.pg-people-more .pg-btn[aria-busy="true"] { cursor: progress; }

/* ---------- 2. Anggota's table ---------- */
.pg-people-count { color: var(--pg-faint); font-weight: 500; }
.pg-people-members th:nth-child(2) { width: 22%; }
.pg-people-members th:nth-child(3) { width: 30%; }
.pg-people-members tr:focus { outline: none; }
.pg-people-members tr:focus-visible > td { background: #fbfcfd; }
.pg-people-members .pg-select.pg-sm { width: auto; min-width: 92px; }
.pg-avatar.pg-people-other { background: #e4f4ec; color: #12704a; }
.pg-people-role { padding-left: 2px; color: var(--pg-ink); font-size: 13px; }
.pg-people-access { margin-left: -10px; gap: 6px; color: var(--pg-ink); font-weight: 500; }
.pg-people-access .pg-icon { width: 14px; height: 14px; color: var(--pg-muted); }
/* Narrower than the table needs (a tablet beside the sidebar), a person takes the phone's stacked rows (5). */
.pg-card:has(> .pg-people-members) { container-type: inline-size; }
@container (max-width: 600px) {
  .pg-people-members, .pg-people-members tbody, .pg-people-members tr, .pg-people-members td { display: block; }
  .pg-people-members thead { display: none; }
  .pg-people-members tr { position: relative; padding: 12px 16px; }
  .pg-people-members tr + tr { border-top: 1px solid var(--pg-rule); }
  .pg-card .pg-people-members :is(td, td:first-child, td:last-child) { padding: 0; border: 0; }
  .pg-card .pg-people-members td:first-child { padding-right: 40px; }
  .pg-people-members td.pg-act { position: absolute; top: 10px; right: 10px; width: auto; }
  .pg-people-members td.pg-people-role-cell { margin-top: 10px; }
  .pg-people-members td.pg-people-access-cell { margin-top: 6px; }
  .pg-people-members td.pg-people-access-cell.pg-quiet { padding-left: 2px; }
}

/* ---------- 3. The account task's steps ---------- */
/* Bridge gap (belongs in pg-app.css; listed in design/04-people.md): dialogs.css's `.lk-dialog .lkd-foot button` (44px,
   700, 10px radius) outranks .pg-btn in every pgDialog's foot. The kit's foot buttons are 36px on a desktop; the phone's
   sheet keeps pg-app.css's 44px. */
@media (min-width: 721px) {
  .lk-dialog.pg-dlg:not(.pg-dlg-legacy) .pg-dlg-foot .pg-btn { min-height: 36px; padding: 0 14px; border-radius: var(--pg-radius-ctl); font-weight: 600; }
}
.pg-people-step, .pg-people-form { display: block; margin: 0; }
.pg-people-step > * { margin: 0; }
.pg-people-step > * + * { margin-top: 12px; }
.pg-people-step > h4 + * { margin-top: 0; }
.pg-people-step p, .pg-people-form p { margin: 0; }
.pg-people-step .pg-callout { margin-top: 14px; }
.pg-dlg-body .pg-people-lead b { color: var(--pg-ink); font-weight: 600; overflow-wrap: anywhere; }
.pg-people-code-note { margin: 12px 0 0; color: var(--pg-muted); font-size: 13px; line-height: 1.55; }
.pg-people-code-note .pg-btn.pg-link { min-height: 0; font-size: inherit; vertical-align: baseline; }
/* The code's cells (signin.js codeFieldHtml) in the kit's size: 44 × 48, the next one lit in gold. */
.lk-dialog.pg-dlg .code-field { --cell-h: 48px; --cell-gap: 8px; --cell-line: #d3d9e4; --cell-gold: var(--pg-gold); --cell-bad: var(--pg-bad); gap: 6px; }
.lk-dialog.pg-dlg .code-box { width: max-content; max-width: 100%; }
.lk-dialog.pg-dlg .code-cells { grid-template-columns: repeat(var(--cells), 44px); }
.lk-dialog.pg-dlg .code-cell { border-radius: 9px; font-size: 18px; font-weight: 600; }
.lk-dialog.pg-dlg .code-box:focus-within .code-cell.is-next { border-color: var(--pg-gold); box-shadow: 0 0 0 3px rgba(198, 151, 73, .2); }
.lk-dialog.pg-dlg .code-box:focus-within .code-cell.is-next:not(.is-filled)::after { height: 20px; }
.lk-dialog.pg-dlg .pg-people-code-label { color: var(--pg-ink); font-size: 12.5px; font-weight: 600; }
.lk-dialog.pg-dlg .code-error { margin: 0; color: var(--pg-bad); font-size: 12px; font-weight: 600; line-height: 1.5; }
/* Masuk dua langkah: the QR code beside the key and its copy button. */
.pg-people-key { display: flex; align-items: center; gap: 18px; }
.pg-people-qr { flex: none; width: 132px; margin: 0; padding: 6px; border: 1px solid var(--pg-line); border-radius: 10px; background: #fff; }
.pg-people-qr .qr-code { display: block; width: 100%; height: auto; }
.pg-people-key .pg-field { flex: 1 1 auto; min-width: 0; }
.pg-people-key-row { display: flex; gap: 8px; min-width: 0; }
.pg-people-key-code { display: flex; align-items: center; min-width: 0; overflow: hidden; color: var(--pg-ink); font: 600 13px/1.4 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; font-variant-numeric: slashed-zero; }
.pg-people-key-row .pg-btn { flex: none; }
/* The recovery codes, shown once: two columns of a fixed-width face. */
.pg-people-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; padding: 0; list-style: none; border: 1px solid var(--pg-line); border-radius: 10px; overflow: hidden; }
.pg-people-codes li { padding: 8px 12px; }
.pg-people-codes li:nth-child(n + 3) { border-top: 1px solid var(--pg-rule); }
.pg-people-codes code { color: var(--pg-ink); font: 600 12.5px/1.5 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; font-variant-numeric: slashed-zero; }

/* ---------- 4. Anggota's dialogs ---------- */
.pg-people-form > .pg-group { margin-top: 18px; }
.pg-people-form .pg-group h4 { margin: 0 0 8px; color: var(--pg-ink); font-size: 12.5px; font-weight: 650; }
.pg-people-form .pg-sec-note { margin: 8px 0 0; }
.pg-people-form .pg-seg + .pg-checks, .pg-people-scope + .pg-checks { margin-top: 10px; }
.pg-people-line { margin: 8px 0 0; }
/* A Role an Admin cannot give rests, with who to ask. */
.pg-choice:has(input:disabled) { opacity: .6; cursor: default; }
.pg-choice:has(input:disabled):hover { background: #fff; }
.pg-people-checks .pg-tile { flex: none; }
.pg-people-checks-more { display: flex; justify-content: center; padding: 6px 12px; border-top: 1px solid var(--pg-rule); }
.pg-seg button:disabled { opacity: .6; cursor: default; }

/* ---------- 5. Phone (≤720px) ---------- */
@media (max-width: 720px) {
  .pg-people-members td:first-child { padding-right: 40px; }
  .pg-people-members td.pg-people-role-cell { margin-top: 10px; }
  .pg-people-members td.pg-people-access-cell { margin-top: 6px; }
  .pg-people-members td.pg-people-access-cell.pg-quiet { padding-left: 2px; }
  .lk-dialog.pg-dlg .code-box { width: 100%; }
  .lk-dialog.pg-dlg .code-cells { grid-template-columns: repeat(var(--cells), minmax(0, 1fr)); }
  .pg-people-key { flex-direction: column; align-items: stretch; }
  .pg-people-qr { align-self: center; }
  .pg-row-side .pg-select.pg-sm { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .pg-people-fresh, tr.pg-people-fresh > td { animation: none; } }