/* Users screen — local styles. Inherits aq-app from styles.css. */

/* Drop the .aq-us ancestor — page renders its own scroll root. */
.us-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
/* House layout standard (2026-06-14): fluid up to 1400px, centred.
   Cap the direct children rather than the scroll container so the
   background + scrollbar stay full-bleed while content stays readable. */
.us-content > * {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Header ───────────────────────────────────────────────────── */
.us-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.us-header h1 {
  margin: 0 0 4px;
  font-family: var(--aq-ff-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--aq-text);
}
.us-header p {
  margin: 0;
  font-size: 13px;
  color: var(--aq-text-faint);
}

/* ── Summary strip ────────────────────────────────────────────── */
.us-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.6fr;
  gap: 1px;
  background: var(--aq-line);
  border: 1px solid var(--aq-line);
  border-radius: 10px;
  overflow: hidden;
}
.us-stat {
  background: var(--aq-surface);
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.us-stat-label {
  font-family: var(--aq-ff-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-text-faint);
}
.us-stat-value {
  font-family: var(--aq-ff-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--aq-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.us-stat-value.is-accent { color: var(--aq-success); }
.us-stat-sub {
  font-size: 11px;
  color: var(--aq-text-faint);
  margin-top: 1px;
}

.us-summary-cta {
  background: var(--aq-surface);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--aq-text-dim);
}
.us-summary-cta > svg { color: var(--aq-text-faint); flex-shrink: 0; }
.us-summary-cta > div { flex: 1; line-height: 1.4; }
.us-summary-cta strong {
  display: block;
  color: var(--aq-text);
  font-weight: 500;
  font-size: 13px;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.us-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--aq-surface);
  border: 1px solid var(--aq-line);
  border-radius: 10px;
  flex-wrap: wrap;
}
.us-search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--aq-surface-2);
  border: 1px solid var(--aq-line);
  border-radius: 7px;
  padding: 6px 10px;
  min-width: 240px;
  position: relative;
}
.us-search > svg { color: var(--aq-text-faint); }
.us-search input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  color: var(--aq-text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.us-search input::placeholder { color: var(--aq-text-faint); }
.us-search-clear {
  background: transparent; border: 0;
  color: var(--aq-text-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.us-filters { display: flex; align-items: center; gap: 8px; }
.us-segmented {
  display: inline-flex;
  background: var(--aq-surface-2);
  border: 1px solid var(--aq-line);
  border-radius: 7px;
  padding: 2px;
}
.us-segmented button {
  background: transparent; border: 0;
  padding: 5px 12px;
  border-radius: 5px;
  font: inherit; font-size: 12px;
  color: var(--aq-text-dim);
  cursor: pointer;
}
.us-segmented button:hover { color: var(--aq-text); }
.us-segmented button.is-active {
  background: rgba(255,255,255,0.08);
  color: var(--aq-text);
}

.us-select {
  background: var(--aq-surface-2);
  border: 1px solid var(--aq-line);
  border-radius: 7px;
  padding: 6px 9px;
  color: var(--aq-text);
  font: inherit; font-size: 12px;
  outline: none;
  cursor: pointer;
}
.us-select.sm { padding: 4px 8px; font-size: 11.5px; }
.us-select:hover { border-color: var(--aq-line-strong); }

.us-toolbar-spacer { flex: 1; }
.us-result-count {
  font-family: var(--aq-ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-text-faint);
  padding: 0 4px;
}

.us-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: var(--aq-surface-2);
  border: 1px solid var(--aq-line);
  border-radius: 7px;
  color: var(--aq-text);
  font: inherit; font-size: 12px;
  cursor: pointer;
  transition: background var(--aq-d-1) var(--aq-ease), border-color var(--aq-d-1) var(--aq-ease);
}
.us-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--aq-line-strong); }
.us-btn.ghost { background: transparent; }
.us-btn.sm { padding: 4px 10px; font-size: 11.5px; }
.us-btn.primary {
  background: var(--aq-accent);
  border-color: var(--aq-accent);
  /* color-mix derives a high-contrast text colour from the accent
     itself: 88% of the accent mixed into black yields readable text
     regardless of whether the active theme's accent is dark (purple)
     or near-white (monochrome). The previous hardcoded `color:white`
     vanished on the monochrome theme. May 2026 (Oli) feedback:
     "Invite teammate" was unreadable in the header. */
  color: color-mix(in oklch, var(--aq-accent) 12%, black);
  font-weight: 500;
}
.us-btn.primary:hover {
  background: color-mix(in srgb, var(--aq-accent) 92%, white);
  border-color: color-mix(in srgb, var(--aq-accent) 92%, white);
}
.us-btn.ghost.danger {
  color: var(--aq-danger);
  border-color: color-mix(in srgb, var(--aq-danger) 35%, var(--aq-line));
}

/* ── Layout ───────────────────────────────────────────────────── */
.us-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

/* ── Table ────────────────────────────────────────────────────── */
.us-tablewrap {
  background: var(--aq-surface);
  border: 1px solid var(--aq-line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.us-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: auto;
}
.us-table thead th {
  text-align: left;
  font-family: var(--aq-ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-text-faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--aq-line);
  background: var(--aq-surface-2);
}
.us-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--aq-line);
  color: var(--aq-text-dim);
  vertical-align: middle;
}
.us-table tbody tr:first-child td { border-top: 0; }
.us-row { cursor: pointer; transition: background var(--aq-d-1) var(--aq-ease); }
.us-row:hover { background: var(--aq-surface-2); }
.us-row.is-selected { background: color-mix(in srgb, var(--aq-accent) 9%, transparent); }
.us-row.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--aq-accent); }

/* Kebab-on-hover-only. May 2026 Linear-style simplification (Oli):
   the per-row ⋯ menu is always-rendered everywhere else in the CMS,
   but in the users list it adds visual noise at rest because admin
   actions (suspend, role change, etc.) are infrequent. Hidden until
   the row is hovered, then fades in. Tab-focus also reveals it
   (accessibility — keyboard users keep parity with mouse users). */
.us-row-kebab { opacity: 0; transition: opacity 0.15s ease; }
.us-row:hover .us-row-kebab,
.us-row:focus-within .us-row-kebab { opacity: 1; }

.us-cell-check { width: 36px; }
.us-cell-actions { width: 40px; text-align: right; }
.us-cell-mfa { width: 70px; }
.us-cell-active { width: 110px; color: var(--aq-text-faint); font-size: 11.5px; }
.us-cell-site { color: var(--aq-text); font-size: 12px; }

.us-checkbox {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid var(--aq-line-strong);
  border-radius: 3px;
  background: var(--aq-surface-2);
}

.us-person { display: flex; align-items: center; gap: 10px; }
.us-person-name {
  color: var(--aq-text);
  font-size: 12.5px;
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.us-person-email { color: var(--aq-text-faint); font-size: 11.5px; margin-top: 1px; }
.us-tag-you {
  font-family: var(--aq-ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  color: var(--aq-text-dim);
}

.us-avatar {
  border-radius: 50%;
  display: grid; place-items: center;
  /* Apple pass (May 2026): was a fixed warm orange-brown gradient on every
     avatar — high-chroma and identical for everyone, so it carried no info
     and fought the muted palette. Now a quiet translucent disc with
     muted-white initials; it recedes and lets the name do the work. */
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--aq-ff-display);
  font-weight: 500;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.us-avatar.is-ring {
  box-shadow: 0 0 0 2px var(--aq-bg), 0 0 0 3px var(--aq-accent);
}

/* Apple pass (May 2026): role badges were saturated filled chips in five
   competing chroma colours. Flattened to a small low-chroma family DOT +
   muted-white label — same visual language as the status dot, reads as
   hierarchy not decoration. No fill, no border, no pill outline. */
.us-rolepill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
}
.us-roledot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  /* dimmed so the colour is a hint, not a beacon */
  opacity: 0.85;
}
.us-statuspill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--aq-ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.us-statusdot {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.us-mfa {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-family: var(--aq-ff-mono);
  letter-spacing: 0.04em;
}
.us-mfa.is-on { color: var(--aq-text-dim); }
.us-mfa.is-off { color: var(--aq-text-faint); }

.us-iconbtn {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 4px;
  color: var(--aq-text-faint);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  line-height: 0;
}
.us-iconbtn:hover { background: rgba(255,255,255,0.06); color: var(--aq-text); }

.us-empty {
  padding: 40px;
  text-align: center;
  color: var(--aq-text-faint);
  font-size: 12.5px;
}

/* ── Detail panel ────────────────────────────────────────────── */
.us-detail {
  background: var(--aq-surface-grad), var(--aq-surface);
  border: 1px solid var(--aq-line);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 16px;
  align-self: flex-start;
}
.us-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.us-detail-id { display: flex; align-items: center; gap: 12px; }
.us-detail-id h3 {
  margin: 0;
  font-family: var(--aq-ff-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--aq-text);
  letter-spacing: -0.005em;
}
.us-detail-email {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--aq-text-faint);
}

.us-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.us-pill-mute {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  color: var(--aq-text-dim);
  font-family: var(--aq-ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--aq-line);
}

.us-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--aq-line);
  border: 1px solid var(--aq-line);
  border-radius: 7px;
  overflow: hidden;
}
.us-detail-stats .us-stat {
  padding: 10px 12px;
}
.us-detail-stats .us-stat-value {
  font-size: 17px;
}

.us-detail-section h4 {
  margin: 0 0 10px;
  font-family: var(--aq-ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-text-faint);
}

.us-kv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  border-top: 1px solid var(--aq-line);
}
.us-kv:first-of-type { border-top: 0; }
.us-kv > span:first-child {
  width: 60px;
  color: var(--aq-text-faint);
  flex-shrink: 0;
}
.us-kv-val {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--aq-text);
  font-size: 12px;
  flex-wrap: wrap;
}
.us-link {
  background: transparent; border: 0; padding: 0;
  color: var(--aq-accent);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.us-link:hover { text-decoration: underline; }

.us-perms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.us-perms li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--aq-text);
  padding: 3px 0;
}
.us-perms li.is-off { color: var(--aq-text-faint); text-decoration: line-through; text-decoration-color: var(--aq-line); }
.us-perm-mark {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--aq-surface-2);
  font-size: 10px;
  color: var(--aq-success);
}
.us-perms li.is-off .us-perm-mark { color: var(--aq-text-faint); }

.us-activity { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.us-activity li {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--aq-text-dim);
  line-height: 1.5;
}
.us-activity li em { color: var(--aq-text); font-style: normal; }
.us-act-time {
  width: 70px;
  flex-shrink: 0;
  font-family: var(--aq-ff-mono);
  font-size: 10.5px;
  color: var(--aq-text-faint);
  letter-spacing: 0.02em;
}

.us-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: -2px;
}
.us-detail-actions .us-btn { flex: 1; justify-content: center; }