/* 사용자 권한 관리 — 패턴 위 흰 CardView(머리 카드 · 사용자 목록 카드) + Modal(권한 · 캠퍼스 변경).
   dlab-* 컴포넌트 클래스는 덮어쓰지 않고, 감싸는 요소의 바깥 배치만 정한다. */

/* 역할별 권한 안내 — 접는 영역 안의 정의 목록(0단계, 여백으로만 나눈다) */
.users-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dlab-space-15); }
.users-guide > div { display: flex; flex-direction: column; gap: var(--dlab-space-5); }
.users-guide dd { color: var(--dlab-color-text-secondary); }
.users-guide-notes > p { color: var(--dlab-color-text-secondary); }

/* 도구 줄 — 검색 · 캠퍼스/역할/학생 레벨/정렬 Select · 초기화 Text 버튼 */
.users-search { flex-basis: 100%; }
.users-role-filter { flex: 1 1 160px; }
.users-results { color: var(--dlab-color-text-secondary); }

/* 표 칸 안 — 이름 · 이메일 · OS 안내를 세로로, 행 동작 Text 버튼은 한 줄로 */
.users-identity { display: flex; flex-direction: column; gap: var(--dlab-space-5); padding: var(--dlab-space-10) 0; min-width: 180px; }
.users-name { font-weight: var(--dlab-font-weight-bold); }
.users-secondary { color: var(--dlab-color-text-secondary); font-size: var(--dlab-font-size-description); line-height: var(--dlab-font-line-height-base); }
.users-nowrap { white-space: nowrap; }
.users-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--dlab-space-5); white-space: nowrap; }

/* Modal 안 — 대상 안내 · 라디오 묶음 · 확인 요약 */
.users-modal-target { color: var(--dlab-color-text-secondary); }
.users-radio-group { display: flex; flex-direction: column; gap: var(--dlab-space-10); }
.users-radio-group > legend { margin-bottom: var(--dlab-space-10); }
.users-radio-list { display: flex; flex-wrap: wrap; gap: var(--dlab-space-10) var(--dlab-space-20); }
.users-impact { color: var(--dlab-color-text-secondary); }
.users-impact:empty { display: none; }
.users-summary { display: flex; flex-direction: column; gap: var(--dlab-space-10); padding: var(--dlab-space-15); background: var(--dlab-color-bg-subtle); }
.users-summary > div { display: flex; flex-direction: column; gap: var(--dlab-space-5); }
.users-summary dt { color: var(--dlab-color-text-secondary); }
.users-summary dd { white-space: pre-wrap; }

@media (min-width: 720px) {
  .users-search { flex-basis: 240px; max-width: 400px; }
  .users-role-filter { flex: 0 0 180px; }
  .users-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dlab-space-20); }
}
@media (min-width: 1080px) {
  .users-guide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.users-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--dlab-space-5); }