/* ============================================================
   ADMIN · USERS (doc 32) — built only from Almanac tokens.
   No new colour, no new shadow, no new table style: the table
   reuses the ruled/sunk-header grammar of .ap-tiertbl, the chips
   reuse the .v2-* chip metrics, the buttons are .btn primitives.
   ============================================================ */
.ua { max-width: 1120px; }
.ua-gloss { display: block; font-size: 11px; font-weight: var(--fw-strong); color: var(--ink-tertiary); letter-spacing: 0.02em; text-transform: none; }
.ua h1 .ua-gloss { font-size: 12px; margin-top: 2px; }
.ua-dash { color: var(--ink-tertiary); }
.ua-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- bar above the table ---------- */
.ua-bar { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); flex-wrap: wrap; }
/* the filter bar owns its own row so its container width equals the canvas
   width — the same container-query steps then fire here as on the hubs. */
.ua-bar .fbar { flex: 1 1 100%; width: 100%; order: 2; }
.ua-bar__add { white-space: nowrap; order: 1; margin-left: auto; }
.ua-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 220px; }
.ua-search svg { position: absolute; left: 10px; color: var(--ink-tertiary); pointer-events: none; }
.ua-search input {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 12px 9px 32px; min-height: 38px;
  color: var(--ink-primary); background: var(--surface-raised);
  border: 1px solid var(--line-default); border-radius: var(--radius-md);
}
.ua-search input::placeholder { color: var(--ink-tertiary); }
.ua-bar .btn { white-space: nowrap; }
.ua-count { font-size: 12px; color: var(--ink-tertiary); font-weight: var(--fw-strong); white-space: nowrap; }

/* ---------- the table ---------- */
.ua-tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.ua-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.ua-table th, .ua-table td { padding: 10px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ua-table th {
  background: var(--surface-sunk); color: var(--ink-tertiary); font-weight: var(--fw-strong);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.ua-table tbody tr:last-child td { border-bottom: none; }
.ua-row:hover td { background: var(--surface-sunk); }
.ua-row.is-open td { background: var(--surface-sunk); }
.ua-row.is-off .ua-email, .ua-row.is-off .ua-chip, .ua-row.is-off .ua-num { color: var(--ink-tertiary); }
.ua-row.is-off .ua-role { opacity: 0.62; }

.ua-emailbtn { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: inherit; text-align: left; min-height: 24px; }
.ua-email { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-primary); }
.ua-emailbtn:hover .ua-email { color: var(--accent-data); }
.ua-caret { display: inline-flex; color: var(--ink-tertiary); transition: transform var(--dur-state, 120ms) ease; }
.ua-caret.is-open { transform: rotate(90deg); color: var(--ink-primary); }

.ua-role { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: var(--fw-strong); border: 1px solid var(--line-soft); background: var(--surface-sunk); color: var(--ink-secondary); white-space: nowrap; }
.ua-role--partner { background: var(--accent-data-soft); color: var(--accent-data); border-color: transparent; }
.ua-role--admin { background: var(--accent-primary-soft); color: var(--accent-primary); border-color: transparent; }

.ua-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ua-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--surface-canvas); font-size: 11.5px; color: var(--ink-secondary); white-space: nowrap; }
.ua-chip__mark { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); }

.ua-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--state-warning-soft); color: var(--state-warning); font-size: 11.5px; font-weight: var(--fw-strong); white-space: nowrap; }

.ua-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.ua-status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--state-positive); }
.ua-status.is-off { color: var(--ink-tertiary); }
.ua-status.is-off .ua-status__dot { background: var(--ink-tertiary); }
.ua-table td.ua-num { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }

.ua-emptywrap { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.ua-foot { margin: var(--space-3) 0 0; font-size: 12px; color: var(--ink-tertiary); max-width: 760px; text-wrap: pretty; }

/* ---------- inline row expansion ---------- */
.ua-exprow > td { padding: 0 !important; background: var(--surface-canvas); border-bottom: 1px solid var(--line-soft); }
.ua-detail { padding: var(--space-4) var(--space-5) var(--space-4) 40px; display: flex; flex-direction: column; gap: var(--space-4); border-left: 2px solid var(--accent-primary); }
.ua-detail__grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) minmax(180px, 0.8fr); gap: var(--space-4) var(--space-5); }
.ua-detail__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: var(--space-3); }
.ua-detail__danger, .ua-detail__save { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.ua-guard { display: flex; flex-direction: column; gap: 4px; }
.ua-guard__why { margin: 0; font-size: 11.5px; color: var(--ink-tertiary); max-width: 300px; text-wrap: pretty; }
.ua-btn-sm { padding: 6px var(--space-3); font-size: 12.5px; min-height: 32px; }
.ua-btn-danger { color: var(--state-negative); border-color: var(--line-default); }
.ua-btn-danger:hover:not(:disabled) { background: var(--state-negative-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- form atoms (shared by the expansion and the create modal) ---------- */
.ua-form { display: flex; flex-direction: column; gap: var(--space-4); }
.ua-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ua-label { font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-tertiary); }
.ua-hint { margin: 0; font-size: 11.5px; color: var(--ink-tertiary); text-wrap: pretty; }
.ua-input { font: inherit; font-size: 13px; padding: 9px 12px; min-height: 38px; width: 100%; color: var(--ink-primary); background: var(--surface-raised); border: 1px solid var(--line-default); border-radius: var(--radius-md); }
.ua-input::placeholder { color: var(--ink-tertiary); font-family: var(--font-mono); font-size: 12px; }

.ua-seg { display: inline-flex; gap: 0; border: 1px solid var(--line-default); border-radius: var(--radius-md); overflow: hidden; width: fit-content; background: var(--surface-raised); }
.ua-seg button { font: inherit; font-size: 12.5px; font-weight: var(--fw-strong); padding: 7px 13px; min-height: 34px; border: none; background: none; color: var(--ink-secondary); cursor: pointer; border-right: 1px solid var(--line-soft); }
.ua-seg button:last-child { border-right: none; }
.ua-seg button:hover { background: var(--surface-sunk); }
.ua-seg button.is-on { background: var(--accent-primary-soft); color: var(--accent-primary); }

.ua-deptpick { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-deptpick.is-off { opacity: 0.5; }
.ua-deptopt { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; padding: 6px 11px; min-height: 32px; border: 1px solid var(--line-default); border-radius: 999px; background: var(--surface-raised); color: var(--ink-secondary); cursor: pointer; }
.ua-deptopt:hover:not(:disabled) { background: var(--surface-sunk); }
.ua-deptopt.is-on { background: var(--accent-primary-soft); color: var(--accent-primary); border-color: transparent; font-weight: var(--fw-strong); }
.ua-deptopt__mark { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; }
.ua-deptopt:disabled { cursor: not-allowed; }

.ua-switch { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; color: var(--ink-secondary); background: none; border: none; padding: 4px 0; min-height: 32px; cursor: pointer; }
.ua-switch__track { width: 34px; height: 19px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--line-default); position: relative; transition: background 120ms ease, border-color 120ms ease; }
.ua-switch__knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-tertiary); transition: transform 120ms ease, background 120ms ease; }
.ua-switch.is-on .ua-switch__track { background: var(--accent-primary-soft); border-color: var(--accent-primary); }
.ua-switch.is-on .ua-switch__knob { transform: translateX(15px); background: var(--accent-primary); }
.ua-switch.is-on { color: var(--ink-primary); font-weight: var(--fw-strong); }

.ua-provtag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; border: 1px dashed var(--line-default); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-tertiary); text-transform: uppercase; cursor: help; vertical-align: middle; }

/* ---------- create modal note ---------- */
.ua-notebox { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-sunk); border-radius: var(--radius-md); }
.ua-notebox__key { font-family: var(--font-mono); font-size: 14px; color: var(--ink-tertiary); letter-spacing: 1px; }
.ua-notebox p { margin: 0; font-size: 12.5px; color: var(--ink-secondary); text-wrap: pretty; }
.ua-notebox b { color: var(--ink-primary); }

/* ---------- credential reveal ---------- */
.ua-cred { display: flex; flex-direction: column; gap: var(--space-3); }
.ua-cred__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-sunk); }
.ua-cred__k { font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-tertiary); min-width: 84px; }
.ua-cred__v { font-size: 13px; color: var(--ink-primary); word-break: break-all; }
.ua-cred__row--pw { background: var(--accent-primary-soft); border-color: transparent; }
.ua-cred__pw { flex: 1; font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.04em; color: var(--ink-primary); word-break: break-all; user-select: all; }
.ua-warn { border: 1px solid var(--state-warning); background: var(--state-warning-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.ua-warn p { margin: 0; font-size: 12.5px; color: var(--ink-primary); text-wrap: pretty; }

.ua-confirm p { margin: 0 0 var(--space-3); font-size: 13px; color: var(--ink-secondary); text-wrap: pretty; }
.ua-confirm p:last-child { margin-bottom: 0; }
.ua-confirm__who { font-size: 13px !important; color: var(--ink-primary) !important; }

/* ---------- tablet / mobile ----------
   Measured against the CANVAS, not the viewport: the drawer eats ~264px, so a
   924px window leaves this surface ~609px. The row expansion lives in a
   <td colspan> inside the table, so the table's min-width would otherwise keep
   the editor 880px wide and push Save/Cancel outside the scroll box. Below a
   900px canvas the two low-priority columns fold into a meta line under the
   email and min-width is dropped, so table + expansion fit without scrolling. */
.ua { container-type: inline-size; }
.ua-rowmeta { display: none; }
@container (max-width: 1040px) {
  .ua-detail__grid { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 900px) {
  .ua-table { min-width: 0; }
  .ua-col-clevel, .ua-col-last { display: none; }
  .ua-rowmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0 20px; font-size: 11.5px; color: var(--ink-tertiary); }
  .ua-rowmeta .ua-num { font-size: 11.5px; }
  .ua-detail__grid { grid-template-columns: 1fr; }
  .ua-detail__foot { flex-direction: column; align-items: stretch; }
  .ua-detail__save { justify-content: flex-end; }
}
@container (max-width: 620px) {
  .ua-bar { gap: var(--space-2); }
  .ua-bar .btn { flex: 1 1 100%; }
  .ua-detail { padding: var(--space-4); }
  .ua-table th, .ua-table td { padding: 9px 10px; }
}
@media (max-width: 760px) {
  .ua-search input, .ua-input { font-size: 16px; }  /* prevent iOS zoom */
  .ua-cred__pw { font-size: 15px; }
}