/* ── /roller — rol + yetki matrisi ─────────────────────────────────────────── */

.roles-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--va-sp-4);
  align-items: start;
}
@media (max-width: 900px) { .roles-layout { grid-template-columns: 1fr; } }

.roles-list { display: flex; flex-direction: column; gap: var(--va-sp-2); }

.roles-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--va-sp-3) var(--va-sp-4);
  background: var(--va-card);
  border: 1px solid var(--va-border);
  border-radius: var(--va-radius);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--va-transition);
}
.roles-card:hover { border-color: var(--va-border-strong); }
.roles-card--active { border-color: var(--va-accent); }
.roles-card-name { font-weight: 600; color: var(--va-text); display: flex; gap: var(--va-sp-2); align-items: center; }
.roles-card-badge {
  font-size: 11px; font-weight: 600;
  color: var(--va-text-dim);
  background: var(--va-elevated);
  border-radius: var(--va-radius-sm);
  padding: 1px 6px;
}
.roles-card-meta { font-size: 12px; color: var(--va-text-dim); }

.roles-detail { display: flex; flex-direction: column; gap: var(--va-sp-4); min-width: 0; }
.roles-empty { color: var(--va-text-dim); margin: 0; }
.roles-hint { font-size: 12px; color: var(--va-text-dim); margin: var(--va-sp-1) 0 0; }

.roles-matrix-head { display: flex; justify-content: space-between; gap: var(--va-sp-4); align-items: start; flex-wrap: wrap; }
.roles-matrix-actions { display: flex; align-items: center; gap: var(--va-sp-3); }
.roles-count { font-size: 12px; color: var(--va-text-dim); white-space: nowrap; }

.roles-matrix { display: flex; flex-direction: column; gap: var(--va-sp-4); margin-top: var(--va-sp-4); }
.roles-cat { border: 1px solid var(--va-border); border-radius: var(--va-radius); padding: var(--va-sp-3) var(--va-sp-4); }
.roles-cat-head { display: flex; justify-content: space-between; align-items: center; }
.roles-cat-count { font-size: 12px; color: var(--va-text-dim); }
.roles-group-desc { font-size: 12px; color: var(--va-text-muted); margin: var(--va-sp-2) 0 var(--va-sp-1); }
.roles-cat-claims {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--va-sp-1) var(--va-sp-4);
}

.roles-users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--va-sp-1); }
.roles-users li { display: flex; gap: var(--va-sp-3); align-items: baseline; }
.roles-user-name { color: var(--va-text); font-weight: 500; }
.roles-user-mail { color: var(--va-text-dim); font-size: 12px; }
.roles-danger { margin-top: var(--va-sp-4); display: flex; align-items: center; gap: var(--va-sp-3); }