/* Phase 5 - the user administration page.

   It reuses the CLASS NAMES of the PO Governance chrome (.wrap, .card,
   .po-head, .tw, .cadence) — but every one of those rules is scoped to
   #page-po, #page-home, #page-doi or #page-perf, so none of them reached this
   page and it rendered as raw HTML: serif text, native buttons, no card, no
   header. The chrome below re-declares that shell for #page-admin.

   The header block is deliberately a copy of the unified header in
   layout/header.css rather than an extra selector added to it: that file is a
   verbatim v15 extract that tools/phase1-verify.ps1 asserts byte-for-byte, and
   the admin page is Phase 5. Same values, so the nav is pixel-identical to
   Command Center. */

/* ================================================================== *
 * page shell                                                          *
 * ================================================================== */

#page-admin *{box-sizing:border-box}
#page-admin{
  min-height:100vh;
  background:var(--bg,#F6F7F9);color:var(--t1,#22303c);
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#page-admin .wrap{max-width:1280px;margin:0 auto;padding:24px}

/* ---- header: identical values to layout/header.css ---- */
#page-admin .dm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px}
#page-admin .dm-brand{display:flex;align-items:center;gap:10px;margin-right:6px}
#page-admin .dm-brand img{height:38px;width:auto;display:block}
#page-admin .dm-tabs{display:flex;gap:4px;background:#eef2f7;border-radius:12px;padding:5px}
#page-admin .dm-tab{
  font-family:inherit;font-size:13px;font-weight:700;border:none;background:transparent;
  color:#5c6b78;padding:8px 16px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap;
}
#page-admin .dm-tab:hover{color:#0A2E58}
#page-admin .dm-tab.active{background:#0F4583;color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.28)}
#page-admin .dm-meta{margin-left:auto;text-align:right;font-size:12px;color:#8a97a3;line-height:1.5}
#page-admin .dm-meta b{color:#0A2E58;font-size:13px}
#page-admin .dm-meta span{display:inline-block}
/* Five tabs plus the meta block fill the row here, so SessionBar's chip always
   wraps to a second line. Keep it on the right edge where it sits on every
   other page, and drop the divider rule that only makes sense mid-row. */
#page-admin .dm-nav{row-gap:6px}
#page-admin .bt-userchip{margin-left:auto;border-left:0;padding-left:0}

#page-admin .eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.11em;
  color:#0F4583;text-transform:uppercase;margin:18px 0 9px;
}
#page-admin .eyebrow::before{content:'';width:26px;height:4px;border-radius:2px;background:#7CBA43}
#page-admin h1{
  font-family:'Quicksand','Nunito Sans',system-ui,sans-serif;
  font-size:34px;font-weight:700;color:#0A2E58;margin:0 0 20px;
}

@media(max-width:900px){
  #page-admin .dm-meta{margin-left:0;text-align:left;width:100%;margin-top:6px}
  #page-admin h1{font-size:26px}
}
@media(max-width:560px){#page-admin .wrap{padding:16px}}

/* ---- the explanatory strip, same green as PO Governance ---- */
#page-admin .cadence{
  background:#F1F8E8;border:1px solid #D6EBC0;border-radius:12px;
  padding:14px 18px;margin-bottom:22px;
  display:flex;align-items:center;gap:14px;font-size:13.5px;line-height:1.55;flex-wrap:wrap;
}
#page-admin .cadence .tag{
  background:#fff;border:1px solid #D6EBC0;color:#4A7A1E;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;
  padding:5px 11px;border-radius:6px;flex:none;
}

/* ---- cards ---- */
#page-admin .card{
  background:#fff;border:1px solid #E4E7EC;border-radius:16px;
  padding:26px;margin-bottom:24px;
}
#page-admin .card h2{
  font-family:'Quicksand','Nunito Sans',system-ui,sans-serif;
  font-size:20px;font-weight:700;color:#0A2E58;margin:0;
  display:flex;align-items:center;gap:10px;
}
#page-admin .card h2::before{content:'';width:9px;height:9px;border-radius:50%;background:#0F4583;flex:none}
#page-admin .card .sub{font-size:13px;color:#667085;margin:5px 0 0 19px;max-width:70ch}
#page-admin .po-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:18px;
}
#page-admin .tw{overflow-x:auto}

/* ================================================================== *
 * page-specific pieces                                                *
 * ================================================================== */

#page-admin .adm-status{
  display:none;margin:0 0 16px;padding:11px 14px;border-radius:9px;
  font-size:12.5px;font-weight:600;
  background:var(--soft,#eef2f7);color:var(--t2,#5c6b78);
  border-left:4px solid var(--blue,#0F4583);
}
#page-admin .adm-status.show{display:block}
#page-admin .adm-status.err{
  background:#fdf1f1;color:#a13030;border-left-color:var(--c-sl,#d64545);
}

#page-admin .adm-headbtns{display:flex;gap:8px;flex-shrink:0}

#page-admin .adm-btn{
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  padding:7px 14px;border-radius:8px;transition:.15s;white-space:nowrap;
  border:1.5px solid var(--border,#dde5ec);background:#fff;color:var(--t2,#5c6b78);
}
#page-admin .adm-btn:hover{border-color:var(--blue,#0F4583);color:var(--blue,#0F4583)}
#page-admin .adm-btn.primary{background:var(--blue,#0F4583);border-color:var(--blue,#0F4583);color:#fff}
#page-admin .adm-btn.primary:hover{background:var(--blue-d,#0b3059)}
#page-admin .adm-btn.danger{color:var(--c-sl,#d64545);border-color:#f0c9c9}
#page-admin .adm-btn.danger:hover{background:var(--c-sl,#d64545);border-color:var(--c-sl,#d64545);color:#fff}

/* ---- table ----
   Rows are middle-aligned and hover-highlighted, and the two columns that must
   never wrap (status, action) say so, so the free width goes to the principal
   scope column — the only cell whose content is genuinely variable-length. */
#page-admin .adm-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
#page-admin .adm-tbl th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--t3,#8a97a3);
  padding:0 12px 12px;border-bottom:1px solid var(--border,#E4E7EC);
  white-space:nowrap;vertical-align:bottom;
}
#page-admin .adm-tbl th:first-child,#page-admin .adm-tbl td:first-child{padding-left:4px}
#page-admin .adm-tbl th:last-child,#page-admin .adm-tbl td:last-child{padding-right:4px}
#page-admin .adm-tbl td{
  padding:12px;border-bottom:1px solid #F2F4F7;vertical-align:middle;color:var(--t1,#22303c);
}
#page-admin .adm-tbl tbody tr:last-child td{border-bottom:none}
#page-admin .adm-tbl tbody tr:hover td{background:#FCFCFD}
/* the expanded row and its editor read as one block */
#page-admin .adm-tbl tr.on td,#page-admin .adm-tbl tr.on:hover td{background:var(--soft,#eef2f7)}
#page-admin .adm-tbl .r{text-align:right}
#page-admin .adm-tbl .c{text-align:center}
#page-admin .adm-tbl .nw{white-space:nowrap}
#page-admin .adm-user{font-weight:800;color:#0A2E58}
#page-admin .adm-sub{font-size:11.5px;color:var(--t3,#8a97a3);margin-top:2px;font-weight:400}
#page-admin .adm-when{
  white-space:nowrap;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--t3,#8a97a3);
}
#page-admin .adm-empty{padding:26px;text-align:center;color:var(--t3,#8a97a3);font-size:13px}

/* audit trail: endpoints are code, so they get code treatment and a fixed
   width for the verb — otherwise every path starts at a different x. */
#page-admin #adm_audit .adm-tbl{min-width:940px}
#page-admin .adm-ep{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:12px;color:var(--t2,#5c6b78);white-space:nowrap;
}
#page-admin .adm-meth{
  display:inline-block;min-width:52px;margin-right:8px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-align:center;
  color:var(--blue,#0F4583);background:var(--soft,#eef2f7);
  border-radius:5px;padding:2px 6px;
}
#page-admin .adm-note{font-size:11.5px;color:var(--t3,#8a97a3);line-height:1.45}

#page-admin .adm-tag{
  display:inline-block;font-size:11px;font-weight:700;
  background:var(--soft,#eef2f7);color:var(--blue,#0F4583);
  border-radius:6px;padding:3px 9px;margin:2px 3px 2px 0;white-space:nowrap;
}
#page-admin .adm-all{color:var(--t3,#8a97a3);font-style:italic;font-size:12.5px}
/* The state worth shouting about: can sign in, sees nothing. */
#page-admin .adm-warn{color:var(--red,#d64545);font-weight:700;font-size:11.5px}
/* the same class used as a footnote under the audit table, not inside a cell */
#page-admin .tw > .adm-warn{display:block;margin-top:14px}

#page-admin .adm-badge{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;border-radius:6px;padding:3px 8px;white-space:nowrap;
}
#page-admin .adm-badge.ok  {background:#eaf6e3;color:#4a7c2a}
#page-admin .adm-badge.off {background:#eef2f7;color:#8a97a3}
#page-admin .adm-badge.lock{background:#fdf1f1;color:#a13030}
#page-admin .adm-badge.st-ok  {background:#eaf6e3;color:#4a7c2a}
#page-admin .adm-badge.st-warn{background:#fdf3e4;color:#a5680a}
#page-admin .adm-badge.st-err {background:#fdf1f1;color:#a13030}

/* ---- editor / create form ---- */
#page-admin .adm-new{
  padding:16px;margin:0 0 4px;border-radius:10px;
  background:var(--soft,#eef2f7);border:1px solid var(--border,#dde5ec);
}
#page-admin .adm-editor td{background:#fff;box-shadow:inset 0 2px 0 var(--blue,#0F4583)}
#page-admin .adm-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px;
}
#page-admin .adm-grid label,#page-admin .adm-lab{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--t3,#8a97a3);
}
#page-admin .adm-grid input,#page-admin .adm-grid select{
  display:block;width:100%;box-sizing:border-box;margin-top:5px;
  font-family:inherit;font-size:12.5px;padding:8px 10px;
  border:1.5px solid var(--border,#dde5ec);border-radius:8px;background:#fff;color:var(--t1,#1f2d3a);
}
#page-admin .adm-grid input:focus,#page-admin .adm-grid select:focus{
  outline:0;border-color:var(--blue,#0F4583);
}

#page-admin .adm-scopewrap{margin-bottom:14px}
#page-admin .adm-scope{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:7px;
  padding:10px 12px;background:#fff;border:1.5px solid var(--border,#dde5ec);border-radius:8px;
}
#page-admin .adm-scope label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;
  color:var(--t2,#5c6b78);cursor:pointer;
}
#page-admin .adm-hint{font-size:11px;color:var(--t3,#8a97a3);margin-top:6px}
#page-admin .adm-actions{display:flex;gap:8px;flex-wrap:wrap}