/* ════════════════════════════════════════════════════════════════════
 * Reusable permission list  —  pairs with js/components/permission-list.js
 * --------------------------------------------------------------------
 * Renders rows of [ label ][ View ][ Edit ]. Entity-agnostic; the host
 * controls width/scroll (the widget fills its container and never sets a
 * fixed pixel width). Rows use flex + wrap so on a narrow container the
 * View/Edit controls drop below the label instead of overflowing.
 * px is used only for borders/hairlines and small control gaps.
 * ════════════════════════════════════════════════════════════════════ */

.perm-list {
  font-family: 'Outfit', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

.perm-list__empty {
  padding: 1rem 0.75rem;
  color: #8a94a6;
  font-size: 0.8125rem;
  text-align: center;
}

.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Horizontal padding lives on the row (not the host pane) so the
     selected/hover highlight fills the full width edge-to-edge. */
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eef1f5;
}
.perm-row:last-child { border-bottom: 0; }

.perm-row--granted { background: rgba(0, 47, 108, 0.03); }
.perm-row--active  { background: rgba(0, 104, 156, 0.10); }

/* Label — plain text, or a select button when selectable */
.perm-row__label {
  flex: 1 1 40%;
  min-width: 0;               /* allow ellipsis inside flex */
  font-size: 0.8125rem;
  color: #1d2733;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perm-row__label--select {
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #002f6c;
}
.perm-row__label--select:hover { text-decoration: underline; }

/* Controls cluster — wraps below the label on narrow widths */
.perm-row__ctls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.perm-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #4a5568;
  cursor: pointer;
  user-select: none;
}
.perm-ctl input { cursor: pointer; margin: 0; }
.perm-ctl input:disabled { cursor: default; }
.perm-ctl input:disabled + span { color: #9aa3b2; }

.perm-ctl--edit span { color: #b3541e; }
.perm-ctl--view span { color: #1565c0; }