/* ==========================================================================
   MKH - Users
   Visual language from the Claude Design project.
   Requires tokens.css, base.css, components.css and layout.css.
   ========================================================================== */

/* The table has a floor below which its columns stop being readable; under
   that it scrolls, and below the card breakpoint it is replaced outright. */
.users-table { min-width: 720px; }

.users-table .col-role   { width: 170px; }
.users-table .col-status { width: 120px; }
.users-table .col-seen   { width: 180px; }

/* The role repeated under the person's name, for the card layout only. */
.person__role { display: none; }

/* --------------------------------------------------------------------------
   Card list

   Below a certain width a six-column table is the wrong object: dropping
   columns loses information, and sideways scrolling hides it. Each user
   becomes a card instead, which keeps every field visible.
   -------------------------------------------------------------------------- */

.user-cards { display: none; flex-direction: column; }

.user-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  transition: background-color var(--dur-fast) var(--ease);
}
.user-card:hover { background: var(--surface-2); }
.user-card.is-selected { background: var(--primary-soft); }
.user-card[hidden] { display: none; }

.user-card > .check { margin-top: 11px; }
.user-card .avatar { width: 38px; height: 38px; border-radius: 11px; font-size: var(--fs-sm); }

.user-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.user-card__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-card__name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--txt); }
.user-card__user { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--txt-3); }
.user-card__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.user-card__meta .badge { height: 22px; padding: 0 9px; font-size: 11px; }
.user-card__seen { font-size: var(--fs-xs); color: var(--txt-3); }

/* --------------------------------------------------------------------------
   Narrowing

   Keyed to the content container, like the dashboard grid - the rail changes
   the available width by ~178px, more than a whole column.
   -------------------------------------------------------------------------- */

@container content (max-width: 700px) {
  .users-table-wrap { display: none; }
  .user-cards { display: flex; }
}

@container content (max-width: 620px) {
  .toolbar__search { flex: 1 0 100%; }
  .toolbar__end { margin-left: 0; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1020px) {
    .users-table-wrap { display: none; }
    .user-cards { display: flex; }
  }
}