/* User & access administration — user chips, tag lists, the label member
 * picker, and the agent access editor (allow/block columns + chips).
 *
 * Used by users.html, user_detail.html, labels.html, agent_detail.html.
 * Light admin surface; token-driven. */

/* Avatar circle — initial on a brand gradient disc. */
.kw-userchip__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A56AF, #8352E8);
  color: var(--kw-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.kw-userchip__avatar--sm { width: 22px; height: 22px; font-size: 0.625rem; }
.kw-userchip__avatar--lg { width: 48px; height: 48px; font-size: 1.125rem; }

/* User row: avatar + stacked name / subject. */
.kw-userchip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.kw-userchip__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kw-userchip__name {
  font-weight: 600;
  color: var(--kw-fg);
  font-size: 0.875rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kw-userchip:hover .kw-userchip__name { text-decoration: underline; }
.kw-userchip__sub {
  font-family: var(--kw-font-mono);
  font-size: 0.6875rem;
  color: var(--kw-fg-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wrapping list of pills (roles / groups / labels) in a table cell. */
.kw-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

/* Scrollable checkbox list of users in the label create / edit forms. */
.kw-userpicker {
  margin-top: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-md);
  background: var(--kw-bg-elevated);
}
.kw-userpicker__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  border-bottom: 1px solid var(--kw-border-soft);
}
.kw-userpicker__row:last-child { border-bottom: 0; }
.kw-userpicker__row:hover { background: var(--kw-bg-subtle); }
.kw-userpicker__row input { flex-shrink: 0; accent-color: var(--kw-blue); }

/* Access editor (agent detail: side-by-side allow / block columns). */
.kw-access-editor__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 760px) {
  .kw-access-editor__cols { grid-template-columns: 1fr; }
}
.kw-access-col {
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-md);
  background: var(--kw-bg-subtle);
  padding: 0.5rem 1rem 1rem;
  margin: 0;
  min-width: 0;
}
.kw-access-col--ok  { border-inline-start: 3px solid var(--kw-teal); }
.kw-access-col--err { border-inline-start: 3px solid var(--kw-red); }
.kw-access-col legend { padding: 0 0.25rem; }
.kw-access-col__hint {
  font-size: 0.6875rem;
  color: var(--kw-fg-muted);
  margin: 0.25rem 0 0.5rem;
}
.kw-access-col__label {
  display: block;
  font-family: var(--kw-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kw-fg);
  margin: 0.75rem 0 0.25rem;
}
.kw-access-col__sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--kw-fg-muted);
}
.kw-access-col__input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-md);
  font-size: 0.8125rem;
  background: var(--kw-bg-elevated);
  color: var(--kw-fg);
}
.kw-access-col__empty {
  font-size: 0.75rem;
  color: var(--kw-fg-muted);
  padding: 0.5rem 0.625rem;
  border: 1px dashed var(--kw-border-color);
  border-radius: var(--kw-radius-md);
}
.kw-access-col__labels { margin-top: 0.25rem; }
.kw-checkchip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-pill);
  cursor: pointer;
  background: var(--kw-bg-elevated);
  color: var(--kw-fg);
}
.kw-checkchip input { margin: 0; accent-color: var(--kw-blue); }

/* Inline destructive submit styled as a link (delete buttons in tables). */
.kw-linkbtn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--kw-red);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.kw-linkbtn-danger:hover { text-decoration: underline; }