/* ==========================================================================
 * People Admin — the portfolio-standard USER-ADMINISTRATION look.
 * ONE source of truth for what a "manage people / users / members" window
 * looks like across every app. Drop in with a single tag:
 *     <link rel="stylesheet" href="/people-admin.css">
 * then build the window out of the `pa-` classes below (member rows, avatars,
 * chips, buttons, form fields). Every app that does this renders an identical
 * user-admin window regardless of its own local theme tokens.
 *
 * people-admin.js links this same file, so the shared component and any app
 * that merely restyles its own admin window stay pixel-identical — change the
 * look here once and it moves everywhere.
 *
 * Tokens are namespaced `--pa-*` and the classes `pa-*`, so nothing collides
 * with a host page's own palette. Each `--pa-*` token INHERITS the host app's
 * matching token (`--accent`, `--paper`, `--line`, … the shared vocabulary in
 * /lib/tokens.css) so the window keeps one structure everywhere while staying
 * native to each app's brand — the portfolio blue is only the fallback when a
 * host defines nothing. Light + dark (prefers-color-scheme and an explicit
 * [data-theme]) both covered; when the host owns a token, the host owns its
 * dark value too, so inheritance flips automatically.
 * ======================================================================== */

:root {
  --pa-paper: var(--paper, #f6f7fb);
  --pa-card: var(--card, #fff);
  --pa-line: var(--line, #d9deeb);
  --pa-text: var(--text, #14203a);
  --pa-muted: var(--muted, #5a6784);
  --pa-faint: var(--faint, #8b96ad);
  --pa-accent: var(--accent, #4f6bed);
  --pa-accent-ink: var(--accent-ink, var(--accent, #33489e));
  --pa-accent-soft: var(--accent-soft, color-mix(in srgb, var(--accent, #4f6bed) 13%, transparent));
  --pa-bad: var(--bad, #cf4b3a);
  --pa-good: var(--good, #1f9d63);
  --pa-shadow: var(--shadow-h, 0 2px 4px rgba(14, 24, 48, .08), 0 20px 60px rgba(14, 24, 48, .22));
}
/* Fallbacks only: apply when the host defines no palette of its own. A host
 * that owns these tokens handles its own dark mode, so its value wins here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pa-paper: var(--paper, #0b1120);
    --pa-card: var(--card, #121c33);
    --pa-line: var(--line, #26324f);
    --pa-text: var(--text, #e8ecf6);
    --pa-muted: var(--muted, #9aa6c2);
    --pa-faint: var(--faint, #6b779a);
    --pa-accent: var(--accent, #7b8ff2);
    --pa-accent-ink: var(--accent-ink, var(--accent, #aebcf7));
    --pa-accent-soft: var(--accent-soft, color-mix(in srgb, var(--accent, #7b8ff2) 22%, transparent));
    --pa-bad: var(--bad, #f0705f);
    --pa-good: var(--good, #41c07f);
    --pa-shadow: var(--shadow-h, 0 2px 6px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .6));
  }
}
:root[data-theme="dark"] {
  --pa-paper: var(--paper, #0b1120);
  --pa-card: var(--card, #121c33);
  --pa-line: var(--line, #26324f);
  --pa-text: var(--text, #e8ecf6);
  --pa-muted: var(--muted, #9aa6c2);
  --pa-faint: var(--faint, #6b779a);
  --pa-accent: var(--accent, #7b8ff2);
  --pa-accent-ink: var(--accent-ink, var(--accent, #aebcf7));
  --pa-accent-soft: var(--accent-soft, color-mix(in srgb, var(--accent, #7b8ff2) 22%, transparent));
  --pa-bad: var(--bad, #f0705f);
  --pa-good: var(--good, #41c07f);
  --pa-shadow: var(--shadow-h, 0 2px 6px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .6));
}

/* ---- optional full modal shell (used by people-admin.js) ---------------- */
.pa-scrim { position: fixed; inset: 0; background: rgba(6, 10, 22, .5); z-index: 2147482000; opacity: 0; pointer-events: none; transition: opacity .16s; }
.pa-scrim.pa-open { opacity: 1; pointer-events: auto; }
.pa-modal { position: fixed; z-index: 2147482001; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.98); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; background: var(--pa-card); color: var(--pa-text); border: 1px solid var(--pa-line); border-radius: 20px; box-shadow: var(--pa-shadow); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.pa-modal.pa-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.pa-modal * { box-sizing: border-box; }

/* ---- header ------------------------------------------------------------- */
.pa-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 6px; }
.pa-h h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.pa-h p { margin: 4px 0 0; color: var(--pa-muted); font-size: 13px; }
.pa-x { margin-left: auto; cursor: pointer; border: 1px solid var(--pa-line); background: transparent; color: var(--pa-muted); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; flex: none; }
.pa-x:hover { color: var(--pa-text); }
.pa-body { padding: 8px 22px 20px; overflow: auto; }

/* ---- section label ------------------------------------------------------ */
.pa-slabel { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--pa-muted); text-transform: uppercase; margin: 18px 0 8px; }

/* ---- member row (the signature element) --------------------------------- */
.pa-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--pa-line); }
.pa-av { width: 30px; height: 30px; border-radius: 50%; background: var(--pa-accent-soft); color: var(--pa-accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.pa-sp { flex: 1; min-width: 0; }
.pa-sp .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-sp .me { font-size: 12px; color: var(--pa-faint); }
.pa-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 45%; }
.pa-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--pa-accent-soft); color: var(--pa-accent-ink); white-space: nowrap; }

/* ---- buttons ------------------------------------------------------------ */
.pa-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; padding: 8px 13px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--pa-text); white-space: nowrap; }
.pa-btn.pri { background: var(--pa-accent); color: #fff; }
.pa-btn.pri:hover { filter: brightness(1.06); }
.pa-btn.out { border-color: var(--pa-line); }
.pa-btn.out:hover { background: color-mix(in srgb, var(--pa-accent) 8%, transparent); }
.pa-btn.danger { color: var(--pa-bad); border-color: color-mix(in srgb, var(--pa-bad) 40%, transparent); }
.pa-btn.sm { padding: 5px 9px; font-size: 12px; border-radius: 8px; }
.pa-btn.link { color: var(--pa-muted); padding: 5px 6px; }
.pa-btn.link:hover { color: var(--pa-text); }
.pa-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---- form fields -------------------------------------------------------- */
.pa-f { display: block; font-size: 12px; font-weight: 600; color: var(--pa-muted); margin: 12px 0 4px; }
.pa-in, .pa-sel, .pa-ta { width: 100%; font: inherit; font-size: 14px; color: var(--pa-text); background: var(--pa-card); border: 1px solid var(--pa-line); border-radius: 10px; padding: 9px 11px; }
.pa-in:focus, .pa-sel:focus, .pa-ta:focus { outline: none; border-color: var(--pa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-accent) 22%, transparent); }
.pa-ta { min-height: 80px; resize: vertical; }
/* Checkbox rows: the box sits BESIDE its label, never under it. The fixed size
   overrides any host `input{width:100%}` that leaks into this modal. */
.pa-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; font-weight: 600; color: var(--pa-text); margin: 12px 0 2px; cursor: pointer; line-height: 1.35; }
.pa-check input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 2px 0 0; padding: 0; }
.pa-chks { display: flex; flex-wrap: wrap; gap: 7px; }
.pa-ck { cursor: pointer; border: 1.5px solid var(--pa-line); background: var(--pa-card); color: var(--pa-muted); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; }
.pa-ck.on { border-color: var(--pa-accent); color: var(--pa-accent-ink); background: var(--pa-accent-soft); }

/* ---- misc --------------------------------------------------------------- */
.pa-note { background: var(--pa-paper); border: 1px solid var(--pa-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--pa-muted); margin: 10px 0; }
.pa-empty { text-align: center; color: var(--pa-muted); padding: 26px; border: 1px dashed var(--pa-line); border-radius: 12px; }
.pa-drop { text-align: center; color: var(--pa-muted); padding: 16px; border: 1px dashed var(--pa-line); border-radius: 12px; cursor: pointer; margin-bottom: 8px; }
.pa-list { max-height: 46vh; overflow: auto; margin-top: 4px; }
.pa-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pa-tbl td { padding: 6px 6px; border-bottom: 1px solid var(--pa-line); }