/**
 * Zeal Portal — User Admin section styles
 * /tools/user-admin/admin.css
 *
 * Section-local styles for /tools/user-admin/. Layers on the design
 * system in /css/system/ — system primitives (.btn, .card, .chip,
 * .input, .select, .table, .form-tabs, .modal, .toast, plus PR 4's
 * .page-head, .filter-bar, .legend-strip, .avatar) handle the shared
 * register; this file holds the small section-specific bits: the
 * user-admin sub-nav, role cards, the page-local multi-select
 * dropdown, the user detail layout, the always-visible-checkbox
 * bulk bar, and the invite form (still on .ua-form-* until that
 * page is migrated).
 */

/* ── Layout ──────────────────────────────────────────── */
/* Admin section uses its own width: 1600px cap on desktop, full width
   below that. Tables get room to breathe. */
.ua-layout {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px 80px;
  box-sizing: border-box;
}
@media (max-width: 960px) {
  .ua-layout { padding: 0 20px 60px; }
}

/* ── Page background ──────────────────────────────────── */
/* The working ground (white) is owned by the register — .reg-working
   in css/system/register.css paints body + .p-main --paper. The old
   local --surface override here is retired (it fought the register on
   these now-working pages). */

/* ── Chip / pill overrides — rectangular, lowercase ───── */
/* The Claude Design prototype uses rectangular pills with lowercase
   labels for the User Admin register, not the system's default
   oval + uppercase tracking. Scope to .ua-layout so the global
   system primitives stay unchanged for other surfaces. */
.ua-layout .chip {
  border-radius: var(--r-soft);
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-cd);
  padding: 4px 9px;
}
.ua-layout .chip--category {
  border-radius: var(--r-soft);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.ua-layout .chip--status {
  border-radius: var(--r-soft);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.ua-layout .chip--completion {
  border-radius: var(--r-soft);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
/* Filter pills — slightly more padding, ink-on-paper hover register.
   Layout for .filter-bar lives in /css/system/components/filter-bar.css;
   the chip-size override is the User Admin's specific filter-pill
   register, scoped to .ua-layout so other surfaces consuming the
   filter-bar keep the system chip default. */
.ua-layout .filter-bar__pills .chip {
  padding: 5px 11px;
  font-size: 11px;
}
/* Role legend chips — slightly tighter than table chips. Same scoping
   rationale as the filter-bar pills. Layout for .legend-strip lives
   in /css/system/components/legend-strip.css. */
.ua-layout .legend-strip .chip--category { padding: 3px 8px; font-size: 11px; }

/* Search input now picks up --t-form (12px) from the system .input
   rule — no per-page override needed. */

/* ── Buttons — rectangular within user admin ──────────── */
/* The Claude Design handoff uses rectangular buttons (3px radius)
   throughout the User Admin section, not the system's pill default.
   Scoped to .ua-layout + the page-crown so other surfaces keep the
   pill register. .modal__actions catches confirm modals which render
   inside body but still belong to the admin context. */
.ua-layout .btn,
.ua-layout .page-head__actions .btn,
.modal__actions .btn {
  border-radius: var(--r-1, 3px);
}

/* ── Section nav (sub-nav inside User Admin) ─────────── */
/* Section nav — canonical .tabs (tabs.css) since the final cohesion
   pass; only the section-level margin lives here. */
.ua-sectionbar { margin-bottom: 24px; }

/* ── Toolbar (search + filter row) ───────────────────── */
/* Tabs — User detail (Profile / Access) uses system .form-tabs.
   Users list uses the system .filter-bar (filter-bar.css) for
   the prototype's dense filter-pill register. */
.ua-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Filter-bar layout lives in /css/system/components/filter-bar.css.
   Legend-strip layout lives in /css/system/components/legend-strip.css.
   Avatar geometry lives in /css/system/components/avatar.css. */

/* ── Person cell (avatar + name/email stack) ────────── */
.ua-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ua-person__body { min-width: 0; }
.ua-person__name {
  font-weight: 500;
  color: var(--ink, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ua-person__name a { color: inherit; text-decoration: none; }
.ua-person__name a:hover { color: var(--accent, var(--zeal-orange)); }
.ua-person__name .ua-you {
  font-family: var(--font-cd);
  font-size: 10px;
  color: var(--accent, var(--zeal-orange));
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.ua-person__email {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Last-seen cell colour modifiers ────────────────── */
.ua-last-seen-cell {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
}
.ua-last-seen-cell.is-live { color: var(--green, #1F7A4A); }
.ua-last-seen-cell.is-stale { color: var(--amber, #A66F0F); }
.ua-last-seen-cell.is-deactivated { color: var(--ink-4, rgba(0, 0, 0, 0.4)); }

/* ── MFA cell — stub ───────────────────────────────── */
/* MFA flag isn't yet surfaced from the auth layer (Cloudflare
   Access today, Supabase post-migration). Render `—` until the
   roadmap entry lands. */
.ua-mfa-cell {
  font-size: 12px;
  color: var(--ink-4, rgba(0, 0, 0, 0.4));
  font-variant-numeric: tabular-nums;
}

/* ── Joined cell ───────────────────────────────────── */
.ua-joined-cell {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Table-cell typography (used inside system .table) ─ */
.ua-table-name { font-weight: 500; }
.ua-table-name a { color: var(--ink, #000); text-decoration: none; }
.ua-table-name a:hover { color: var(--accent, var(--zeal-orange)); }
.ua-table-email { font-size: 13px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); }
.ua-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.ua-muted { color: var(--ink-4, rgba(0, 0, 0, 0.4)); font-style: italic; }

.ua-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: var(--font-std);
  font-size: 14px;
  background: transparent;
  border: 0;
}

/* ── Permission chip ─────────────────────────────────── */
/* Permission chip is data, not status — monospace key inside the
   system .chip wrapper. RoleChip uses the system .chip--category
   directly; StatusBadge uses .chip--status. */
.ua-chip-perm {
  padding: 3px 8px;
  border-radius: var(--r-1, 2px);
  background: var(--paper, #fff);
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  color: var(--ink, #000);
  font-family: var(--font-std);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin: 2px 4px 2px 0;
}
.ua-chip-perm-key {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.ua-chip-perm.is-muted { opacity: 0.55; }

/* ── User chip ───────────────────────────────────────── */
.ua-user-chip { display: inline-flex; flex-direction: column; }
.ua-user-chip-link { cursor: pointer; }
.ua-user-chip-link:hover .ua-user-chip-name { color: var(--accent, var(--zeal-orange)); }
.ua-user-chip-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink, #000);
  transition: color var(--dur-fast, 0.12s);
}
.ua-user-chip-email {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.ua-user-chip-empty { color: var(--ink-4, rgba(0, 0, 0, 0.4)); }

/* Modal + Toast rules live in /css/system/components/modal.css and
   /css/system/components/toast.css. admin-components.js renders the
   system class names. */

/* ── Skeleton loading — reuses bundle .skeleton treatment ── */
.ua-skeleton {
  display: block;
  height: 14px;
  background:
    linear-gradient(90deg,
      var(--paper-2, #F4EEE8) 0%,
      var(--zeal-warm-grey-50, #EDDDD0) 40%,
      var(--paper-2, #F4EEE8) 80%);
  background-size: 200% 100%;
  animation: ua-shimmer 1.4s var(--pe-std) infinite;
  border-radius: var(--pr-1);
}
.ua-skeleton-line { margin-bottom: 8px; }
.ua-loading-block { padding: 12px 0; }
@keyframes ua-shimmer { to { background-position: -200% 0; } }

/* ── Banner ──────────────────────────────────────────── */
.ua-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--pr-2);
  border: 1px solid transparent;
  font-family: var(--font-std);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.ua-banner-info {
  background: var(--p-info-wash);
  border-color: color-mix(in srgb, var(--p-info) 20%, transparent);
  color: var(--p-info);
}
.ua-banner-warn {
  background: var(--p-warning-wash);
  border-color: color-mix(in srgb, var(--p-warning) 20%, transparent);
  color: var(--p-warning);
}
.ua-banner-danger {
  background: var(--p-danger-wash);
  border-color: color-mix(in srgb, var(--p-danger) 20%, transparent);
  color: var(--p-danger);
}
.ua-banner-body {
  flex: 1;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  color: inherit;
}
.ua-banner-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: var(--pr-1);
  background: rgba(20, 17, 14, 0.06);
}
.ua-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}
.ua-banner-dismiss:hover { opacity: 1; }

/* ── User detail page (cards layered on system .card) ── */

/* Legacy .ua-card — still used by invite.html. After invite migrates,
   this block goes. .card is the system primitive. */
.ua-card {
  background: var(--p-card);
  border: 1px solid var(--p-rule);
  border-radius: var(--pr-2);
  padding: 24px 28px;
}
.ua-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.ua-card-title {
  font-family: var(--font-cd);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  margin: 0;
}

/* Danger zone styling — applied to system .card.ua-danger-zone */
.card.ua-danger-zone {
  border-color: color-mix(in srgb, var(--p-danger) 25%, transparent);
  background: var(--p-danger-wash);
}
.ua-danger-zone .card__title { color: var(--p-danger); }

/* Identity card crown — avatar + name + email + role chips +
   status, all inline. Tier 3 register: dense, hairline, no
   stacked sub-titles. The Edit action floats top-right via the
   shared .card__header. */
.ua-identity-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ua-identity-body { min-width: 0; flex: 1; }
.ua-identity-name {
  font-family: var(--font-ex);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink, #000);
  margin: 0;
  line-height: 1.2;
  text-transform: lowercase;
}
.ua-identity-email {
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin: 2px 0 0;
}
.ua-identity-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ua-identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  font-family: var(--font-cd);
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.04em;
}
.ua-identity-meta span { display: inline-flex; align-items: baseline; gap: 6px; }
.ua-identity-meta strong {
  color: var(--ink, #000);
  font-weight: 500;
  font-family: var(--font-std);
  font-size: 13px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ua-role-editor {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 12px;
}
.ua-role-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--p-rule-2);
  border-radius: var(--pr-1);
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--p-ink);
  background: var(--p-card);
  cursor: pointer;
  transition: border-color var(--pd-fast), background var(--pd-fast);
}
.ua-role-check:hover { border-color: var(--p-ink); }
.ua-role-check input { accent-color: var(--p-accent); }
.ua-role-check.disabled { opacity: 0.55; cursor: not-allowed; }
.ua-role-check.selected {
  background: var(--p-accent-wash);
  border-color: var(--p-accent);
}

.ua-permission-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ua-domain-group { margin-bottom: 14px; }
.ua-domain-group h5 {
  font-family: var(--font-cd);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  margin: 0 0 6px;
}

.ua-audit-list { list-style: none; padding: 0; margin: 0; }
.ua-audit-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--p-rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
}
.ua-audit-item:last-child { border-bottom: none; }
.ua-audit-action {
  font-family: var(--font-std);
  font-size: 14px;
  font-weight: 500;
  color: var(--p-ink);
}
.ua-audit-when {
  font-family: var(--font-cd);
  font-size: 11px;
  color: var(--p-ink-3);
  letter-spacing: 0.04em;
}
.ua-audit-actor {
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--p-ink-3);
}
.ua-audit-details {
  grid-column: 1 / -1;
  font-family: var(--font-std);
  font-size: 12px;
  color: var(--p-ink-3);
  line-height: 1.5;
}

/* ── Forms (invite — still on .ua-form-*) ─────────────── */
.ua-form-field { margin-bottom: 16px; }
.ua-form-label {
  display: block;
  font-family: var(--font-std);
  font-weight: var(--w-medium);
  font-size: var(--pt-small);
  color: var(--p-ink);
  margin-bottom: 6px;
}
.ua-form-input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--p-rule-2);
  border-radius: var(--pr-1);
  font-family: var(--font-std);
  font-size: var(--t-form, 12px);
  line-height: 1.3;
  color: var(--p-ink);
  background: var(--p-card);
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--pd-fast), box-shadow var(--pd-fast);
}
.ua-form-input:hover { border-color: var(--p-ink-3); }
.ua-form-input:focus {
  border-color: var(--p-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-accent) 18%, transparent);
}
.ua-form-help {
  font-family: var(--font-std);
  font-size: 12px;
  color: var(--p-ink-3);
  margin: 6px 0 0;
  line-height: 1.5;
}
.ua-form-error {
  background: var(--p-danger-wash);
  border: 1px solid color-mix(in srgb, var(--p-danger) 25%, transparent);
  color: var(--p-danger);
  padding: 10px 14px;
  border-radius: var(--pr-1);
  font-family: var(--font-std);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.5;
}
.ua-form-error a { color: inherit; font-weight: 500; text-decoration: underline; }

/* ── Roles grid ──────────────────────────────────────── */
.ua-roles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 900px) { .ua-roles-grid { grid-template-columns: 1fr 1fr; } }

/* Role card layers on system .card. Only the left-edge accent bar
   and the head/body layout are page-local. The accent consumes the
   PR 0 role tokens (--role-admin, --role-staff, --role-freelancer)
   so role colour stays consistent with chips. */
.ua-role-card {
  position: relative;
  overflow: hidden;
  padding: 14px 18px 14px 22px;
}
.ua-role-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rule, rgba(0, 0, 0, 0.08));
}
.ua-role-card-key-portal_admin::before,
.ua-role-card-key-finance_admin::before,
.ua-role-card-key-hr_admin::before { background: var(--role-admin, #6A3FA5); }
.ua-role-card-key-staff::before,
.ua-role-card-key-casual::before { background: var(--role-staff, #2C5A8F); }
.ua-role-card-key-freelancer::before { background: var(--role-freelancer, #A89A5E); }
.ua-role-card.is-open { grid-column: 1 / -1; }

.ua-role-card-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
}
.ua-role-card-headline { min-width: 0; }
.ua-role-card-title {
  font-family: var(--font-ex);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink, #000);
  margin: 0;
  text-transform: lowercase;
}
.ua-role-card-meta {
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin: 4px 0 0;
  line-height: 1.5;
}
.ua-role-card-numbers {
  font-family: var(--font-cd);
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.02em;
  text-align: right;
}
.ua-role-card-numbers strong { color: var(--ink, #000); font-weight: 500; }
.ua-role-card-toggle {
  background: none;
  border: 0;
  font-size: 18px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  padding: 4px 8px;
}
.ua-role-card-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}
.ua-role-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.ua-role-perm-list {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ua-role-perm-list { grid-template-columns: 1fr 1fr; } }
.ua-role-perm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--pr-1);
  font-family: var(--font-std);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--pd-fast), border-color var(--pd-fast);
}
.ua-role-perm:hover { background: var(--warm, var(--p-paper-2)); }
.ua-role-perm.on {
  border-color: var(--accent, var(--p-accent));
  background: var(--accent-soft, var(--p-accent-wash));
}
.ua-role-perm.disabled { opacity: 0.5; cursor: not-allowed; }
.ua-role-perm input { margin-top: 2px; accent-color: var(--accent, var(--p-accent)); }
.ua-role-perm-key {
  grid-column: 2;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink, #000);
}
.ua-role-perm-desc {
  grid-column: 2;
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  line-height: 1.45;
}

/* ── Filter bar (Pages + Audit) ─────────────────────── */
.ua-filter-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ua-filter-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.ua-filter-label {
  font-family: var(--font-cd);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.ua-audit-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.ua-audit-filter-card {
  margin-bottom: 18px;
}
.ua-audit-filter-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}
.ua-chip-row { display: flex; gap: 4px; flex-wrap: wrap; }

/* Pages — inline-edit row affordances. The select + Save / Cancel
   cluster sits inside the .table cell. */
.ua-inline-edit {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tier-functional .table tr.is-modified td {
  background: var(--accent-soft, color-mix(in oklab, var(--zeal-orange) 12%, transparent));
}

/* Audit — action label rendered as a low-key chip; details cell
   wraps at 420px. */
.ua-chip-action {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-std);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
}
.ua-audit-details-cell {
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  max-width: 420px;
  word-break: break-word;
}
.ua-load-more {
  text-align: center;
  margin-top: 16px;
}

/* ── Multi-select (sections, actions) — page-local per
     audit Q4. Trigger styled to match system .select; menu is
     section-local because no system equivalent exists yet. ─ */
.ua-multiselect { position: relative; display: inline-block; }
.ua-multiselect-trigger {
  text-align: left;
  cursor: pointer;
}
.ua-multiselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--paper, #fff);
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  border-radius: var(--pr-1, 2px);
  box-shadow: var(--shadow-2);
  padding: 4px 0;
  z-index: 800;
}
.ua-multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--ink, #000);
  cursor: pointer;
}
.ua-multiselect-item:hover { background: var(--warm, var(--p-paper-2)); }
.ua-multiselect-item input { accent-color: var(--accent, var(--p-accent)); }

/* ── User detail layout ──────────────────────────────── */
.ua-detail-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 1200px) {
  .ua-detail-layout { grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); }
}
.ua-detail-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ua-detail-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.ua-detail-tabs { margin-top: -4px; margin-bottom: 4px; }

/* Last seen sidebar card */
.ua-last-seen { font-family: var(--font-std); }
.ua-last-seen-time {
  font-family: var(--font-ex);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  line-height: 1.3;
}
.ua-last-seen-provider {
  font-size: 13px;
  color: var(--p-ink-3);
  margin-top: 4px;
}

/* ── Profile section (live since the crew-profile pass) ── */
.ua-profile-card {
  position: relative;
}
.ua-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .ua-profile-grid { grid-template-columns: 1fr 1fr; }
  .ua-profile-grid[data-single="true"] { grid-template-columns: 1fr; }
}
.ua-profile-field-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--p-paper-2);
  border: 1.5px dashed color-mix(in srgb, var(--zeal-purple) 30%, transparent);
  border-radius: var(--pr-1);
  color: var(--p-ink-3);
  cursor: default;
}
.ua-profile-coming-soon {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--p-paper-2);
  color: var(--p-ink-3);
  font-family: var(--font-cd);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* arc B — certification confirmation state (design §3.3). The chips
   themselves come from chips.css (pending = pending status chip + a
   pulsing dot, the house "needs attention" register; confirmed = a
   quiet neutral chip). This is only the inline layout of the pending
   chip beside its one-click confirm. Shared by the contacts person
   page and the /me/ zone via UserAdmin.CertConfirmControl. */
.ua-cert-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ua-cert-confirm-btn {
  white-space: nowrap;
}

.ua-detail-row-split {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .ua-detail-row-split { grid-template-columns: 1fr 1fr; } }

/* ── Sticky-bottom bulk bar — admin override ────────── */
/* The system .toolbar__bulk--sticky-bottom inherits the inline
   pill's `display: none` and reveals only when bulk mode +
   selection are both true. The User Admin list always renders
   in "implicit bulk mode" — checkboxes show whenever a row is
   selected. This override forces the bar to lay out as flex
   when .is-on is present, independent of body class. */
.ua-bulk-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 32px;
  background: var(--ink, #000);
  color: var(--paper, #fff);
  font-family: var(--font-std);
  font-size: 13px;
  transform: translateY(101%);
  transition: transform var(--dur-med, 220ms) var(--ease-out);
}
.ua-bulk-bar.is-on { transform: translateY(0); }
.ua-bulk-bar__count { font-variant-numeric: tabular-nums; }
.ua-bulk-bar__count b { font-weight: 500; }
.ua-bulk-bar__actions { display: flex; gap: 6px; }
.ua-bulk-bar__actions button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  padding: 5px 12px;
  font-family: inherit;
  font-size: inherit;
  border-radius: var(--r-soft);
  cursor: pointer;
  text-transform: lowercase;
}
.ua-bulk-bar__actions button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.ua-bulk-bar__actions button.is-danger {
  color: #ffb3b3;
  border-color: rgba(255, 179, 179, 0.35);
}
.ua-bulk-bar__actions button.is-danger:hover {
  background: var(--red-status, #C62828);
  border-color: var(--red-status, #C62828);
  color: #fff;
}

/* ── Row-level checkbox column ──────────────────────── */
/* Always-visible checkbox cell (first column on the users
   list). The system .tr__checkbox is only shown in bulk mode
   via body class; here we keep it visible at the column level
   instead. */
.ua-table-checkbox-cell { width: 28px; }
.ua-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule-3, rgba(0, 0, 0, 0.22));
  background: var(--paper, #fff);
  border-radius: var(--r-1);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.ua-checkbox:checked {
  background: var(--accent, var(--zeal-orange));
  border-color: var(--accent, var(--zeal-orange));
}
.ua-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
.tier-functional .table tbody tr.ua-row-selected td {
  background: color-mix(in srgb, var(--accent, var(--zeal-orange)) 6%, transparent);
}

/* Make space for the sticky bar so the table's last rows aren't
   hidden under it when the bar is visible. */
body.ua-has-bulk-bar { padding-bottom: 56px; }

/* ── Sync status card (sync observability increment) ──
   Minimal T3 readout over sync_runs / sync_last_success.
   Two rows, condensed labels, no run-history UI. */
.ua-sync-status { margin-top: 28px; max-width: 640px; }
.ua-sync-status__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
}
.ua-sync-status__row + .ua-sync-status__row {
  border-top: 1px solid var(--p-rule);
}
.ua-sync-status__label {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  flex: 0 0 160px;
}

/* ── People-surface merge (2026-07-06) ──
   Directory rows click through to the person detail page; email and
   phone are click-to-copy wherever they render. */
.tier-functional .table tbody tr.ua-row-link:hover td {
  background: color-mix(in srgb, var(--accent, var(--zeal-orange)) 4%, transparent);
}
.ua-copy-value {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: copy;
  text-align: left;
}
.ua-copy-value:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Person detail — directory-person state */
.ua-person-contact {
  display: grid;
  gap: 4px 16px;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  margin: 0;
}
.ua-person-contact dt {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  padding: 6px 0;
}
.ua-person-contact dd {
  margin: 0;
  padding: 6px 0;
  font-size: 14px;
}
.ua-person-contact dd .ua-contact-actions {
  margin-left: 8px;
  font-size: 12px;
}

/* Ambient direct-grants badge (directory rows, permission managers only) */
.ua-direct-badge {
  margin-left: 8px;
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zeal-orange);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--zeal-orange) 40%, transparent);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  vertical-align: 2px;
  white-space: nowrap;
}
.ua-direct-badge:hover {
  background: color-mix(in srgb, var(--zeal-orange) 8%, transparent);
}

/* ── portal admin home (arc C): lookups + confirmations ──
   (lookup tab switchers are canonical .seg since the final cohesion pass) */
.ua-lookup-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-tertiary, rgba(0, 0, 0, 0.55));
  max-width: 68ch;
}
.ua-lookup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-2, rgba(0, 0, 0, 0.08));
}
.ua-lookup-row.is-retired { opacity: 0.55; }
.ua-lookup-move { display: inline-flex; gap: 2px; }
.ua-lookup-name { flex: 1; min-width: 140px; }
.ua-lookup-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, rgba(0, 0, 0, 0.55));
  white-space: nowrap;
}
.ua-lookup-extra-text { width: 140px; }
.ua-lookup-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ua-lookup-add .input { flex: 1; }
.ua-lookup-retired { margin-top: 18px; }
.ua-lookup-retired-title {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(0, 0, 0, 0.55));
  margin-bottom: 4px;
}
.ua-confirm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-2, rgba(0, 0, 0, 0.08));
  flex-wrap: wrap;
}
.ua-confirm-who { min-width: 180px; }
.ua-confirm-what {
  font-weight: 600;
  font-size: 13px;
}
.ua-confirm-meta {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-tertiary, rgba(0, 0, 0, 0.55));
  flex: 1;
}

/* =========================================================
   The org view (arc F final, 2026-08-04)
   ---------------------------------------------------------
   The staff org map on the People page, behind the list | org
   segmented control. Display-only.

   Everything here is geometry — grid, spacing, hairlines. Type,
   colour and radii come from the tokens, and the interactive
   parts (the segmented control, the chips, the empty state)
   are the shared components. There is no local button, chip or
   card system in this block, by rule.
   ========================================================= */

.org-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5, 20px);
  margin-top: var(--s-5, 20px);
}

.org-dept {
  border: 1px solid var(--rule-2);
  border-radius: var(--r-soft);
  background: var(--paper);
  padding: var(--s-4, 16px) var(--s-5, 20px) var(--s-3, 12px);
}

/* the head of the chart (arc F coda): the same card, across the whole
   grid, so the tree reads top-down instead of the MD sitting in an
   alphabetical bucket beside Creative */
.org-dept--head { grid-column: 1 / -1; }

.org-dept__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2, 8px);
  padding-bottom: var(--s-3, 12px);
  /* the one structural line in the card — ink in the working register */
  border-bottom: 1px solid var(--rule-structural, var(--rule-2));
}
.org-dept__name {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: var(--t-h4, 16px);
  letter-spacing: var(--track-sub, -0.02em);
  text-transform: lowercase;
  margin: 0;
}
.org-dept__count {
  margin-left: auto;
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  letter-spacing: var(--track-wide, 0.08em);
  color: var(--ink-4);
}

.org-dept__list { list-style: none; margin: 0; padding: 0; }

.org-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3, 12px) 0;
  border-bottom: 1px solid var(--rule);
}
.org-person:last-child { border-bottom: none; }

/* a button, not a link: it navigates, but it is rendered from data the
   page already holds and carries no href worth copying. Styled to read
   as text so the card stays a list of people, not a list of controls. */
.org-person__name {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--t-body, 16px);
  font-weight: var(--w-medium);
  color: var(--ink);
  cursor: pointer;
}
.org-person__name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.org-person__name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.org-person__line {
  font-family: var(--font-cd);
  font-size: var(--t-meta, 13px);
  color: var(--ink-3);
}
.org-person__line b { font-weight: var(--w-medium); color: var(--ink-2); }
/* "no manager set" / "reports to someone not listed here" — quieter than
   a real answer, because it is the absence of one */
.org-person__unknown { color: var(--ink-4); font-style: italic; }

/* ═══ movement g: merging two organisations ═══════════════════
   Pick duplicate · merge into · pick survivor · preview · one confirm.
   Selection is a MODE with its own bar, so the row click that normally
   navigates cannot fire half-way through choosing two. */

.org-merge__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-family: var(--font-cd);
  font-size: var(--t-meta, 13px);
  color: var(--ink-2);
}

.org-merge__cb { width: 34px; text-align: center; }
.table tr.is-picked > td { background: color-mix(in srgb, var(--accent) 9%, transparent); }

/* the survivor choice. Two options, no default — which record is the real
   one is a judgement, and pre-selecting one invites a reflex confirm. */
.org-merge__pick { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-4) 0; }
.org-merge__opt {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-2); border-radius: var(--r-1);
  cursor: pointer;
}
.org-merge__opt:hover { border-color: var(--ink-3); }
.org-merge__opt.is-on { border-color: var(--ink); background: var(--warm); }
.org-merge__opt span { display: flex; flex-direction: column; gap: 2px; }
.org-merge__opt small { color: var(--ink-4); font-family: var(--font-cd); font-size: var(--t-micro, 11px); }

.org-merge__preview { margin-top: var(--s-4); }
.org-merge__head {
  font-family: var(--font-cd); font-size: var(--t-meta, 13px);
  color: var(--ink-3); margin-bottom: var(--s-2);
}
.org-merge__table td { padding: 4px 8px; font-size: var(--t-meta, 13px); }
.org-merge__table .org-merge__n {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--w-bold);
  width: 64px;
}
/* zero rows stay VISIBLE and dim. Hiding them would make "this table has
   nothing in it" and "this table was never checked" look identical. */
.org-merge__table tr.is-zero td { color: var(--ink-4); font-weight: var(--w-regular); }
.org-merge__total {
  margin: var(--s-3) 0; font-size: var(--t-meta, 13px); color: var(--ink-2);
}

/* ── movement i: the address IS the control ────────────────
   An email renders as a button that copies it, not as a mailto: link
   with a copy button beside it. Styled to read as the value it is —
   the affordance is the underline on hover, not a button shape, because
   a value that looks like a button reads as an action with a name. */
.ua-copyvalue {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  border-bottom: 1px dashed var(--rule-3, rgba(0,0,0,.22));
}
.ua-copyvalue:hover { color: var(--accent); border-bottom-style: solid; }
.ua-copyvalue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }