/* ============================================================
   지큐 Admin — 공통 컴포넌트 클래스

   페이지마다 인라인 grid/색상으로 만들던 표·아바타·태그·빈상태를
   클래스로 공유. 새 페이지 만들 때는 이 클래스부터 쓰고,
   여기 없는 패턴은 페이지별 .css에 추가.

   토큰: variables.css의 --space-*, --text-*, --radius-* 사용.
   ============================================================ */


/* ── 텍스트 색상 유틸리티 ────────────────────────────────
   단일 color 인라인(style="color:var(--X)")을 대체. 클래스명은 토큰명과 동일하게 매핑. */
.text-default { color: var(--text); }
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-info    { color: var(--info); }
.text-caution { color: var(--caution); }
.text-primary { color: var(--ad-primary); }

/* ── 폰트 두께·크기 유틸리티 ──────────────────────────────
   반복 인라인(font-weight / font-size)을 대체. .text-* 색상 유틸과 조합해서 사용. */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fs-sm  { font-size: var(--text-sm); }  /* 12px */
.fs-xs  { font-size: var(--text-xs); }  /* 11px */
.tabular-nums { font-variant-numeric: tabular-nums; }


/* ── 반복 컴포넌트 ──────────────────────────────────────
   여러 페이지에서 반복되던 인라인 블록을 시맨틱 클래스로 추출. */
/* 통계 셀 (flex 자식, 가운데 정렬) — 알림 상세 모달 등 */
.stat-box {
  flex: 1;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
/* 목록 상단 헤더 바 (제목 + 액션 버튼) — 근로자/관리자 목록 */
.list-header-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}


/* ── 데이터 테이블 ──────────────────────────────────────
   grid-template-columns는 페이지마다 다르니 inline style로 지정.
   예) <div class="data-table__row" style="grid-template-columns: 32px 1fr 1fr 80px">
*/
.data-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table__head {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.data-table__row {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-fast);
}
.data-table__row:last-child { border-bottom: none; }
.data-table__row--clickable { cursor: pointer; }
.data-table__row--clickable:hover { background: var(--bg); }

.data-table__cell {
  font-size: var(--text-base);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table__cell--muted { color: var(--text-muted); }
.data-table__cell--num { font-variant-numeric: tabular-nums; }
.data-table__cell--right { text-align: right; }
.data-table__cell--name {
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}


/* ── 아바타 ────────────────────────────────────────────
   역할 정책:
   - 관리자: .avatar--circle.avatar--admin
   - 근로자: .avatar--square.avatar--worker
*/
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.avatar--xs { width: 24px; height: 24px; font-size: var(--text-xs); }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-sm); }
.avatar--md { width: 32px; height: 32px; font-size: var(--text-base); }
.avatar--lg { width: 36px; height: 36px; font-size: var(--text-md); }
.avatar--xl { width: 42px; height: 42px; font-size: 16px; }

.avatar--circle { border-radius: 50%; }
.avatar--square { border-radius: var(--radius-sm); }

.avatar--admin   { background: var(--ad-primary); }
.avatar--worker  { background: var(--mg-gradient); }
.avatar--neutral { background: #94a3b8; }


/* ── 태그/칩 ───────────────────────────────────────────
   상태/카테고리 표시용 inline 라벨. 베이스 클래스 + 모양 modifier + 색 modifier 조합.

   모양:
   - 기본 .tag           : padding 2/8, radius 10, weight 600 (작은 인라인 라벨)
   - .tag--label         : padding 4/12, radius 6, weight 700 (상태 라벨 — 워커카드/테이블)
   - .tag--micro         : padding 1/4, radius 4, weight 700 (이름 옆 초미니)
   - .tag--pill          : padding 4/12, radius 999 (완전 둥근 pill — 슈퍼관리자 콘솔)
   색:
   - .tag--default/success/info/caution/danger/admin/worker (부드러운 배경+진한 글자)
   - .tag--solid-danger/solid-caution (흰 글자, 색 채워진 배경)
   변형:
   - .tag--dot::before (앞에 같은 색 원 점)
   - .tag--mono (코드/식별자 태그 — worker_code 등. 글꼴은 본문과 동일하게 통일)
*/
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}
.tag--label { padding: var(--space-1) var(--space-3); border-radius: 6px; font-size: var(--text-xs); font-weight: 700; }
.tag--micro { padding: 1px var(--space-1); border-radius: 4px; font-size: var(--text-xs); font-weight: 700; }
.tag--pill  { padding: var(--space-1) var(--space-3); border-radius: 999px; }

.tag--default { background: var(--bg-subtle); color: var(--text-muted); }
.tag--success { background: var(--success-light); color: var(--success); }
.tag--info    { background: var(--info-light);    color: var(--info); }
.tag--caution { background: var(--caution-bg);    color: var(--caution); }
.tag--danger  { background: var(--danger-bg);     color: var(--danger); }
.tag--admin   { background: var(--ad-primary-light); color: var(--ad-primary); }
.tag--worker  { background: var(--mg-primary-light); color: var(--mg-primary); }
.tag--solid-danger  { background: var(--danger);  color: white; }
.tag--solid-caution { background: var(--caution); color: white; }

.tag--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tag--mono { font-family: inherit; }


/* 빈 상태(.empty-state)는 layout.css가 단일 정의 — renderEmptyState()가 뱉는
   .empty-icon/.empty-text/.empty-sub 규약과 일치 */


/* ── 페이지 헤더 ───────────────────────────────────────
   본문 영역 최상단 타이틀+서브타이틀
*/
.page-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: var(--space-1);
}


/* ── 인라인 코드 칩(복사 버튼) ─────────────────────────
   초대코드(WS-XXXXXX, WK-XXXXXX) 같은 식별자 표시 + 클릭 복사
*/
.code-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.code-chip:hover {
  background: var(--bg-subtle);
  border-color: var(--text-muted);
}
.code-chip__icon { font-size: var(--text-sm); color: var(--text-muted); }


/* ── 섹션 카드 ─────────────────────────────────────────
   header(상단바) + body 구조. 페이지의 큰 위젯 박스 표준.
   <div class="section-card">
     <div class="section-card__header">
       <span class="section-card__title">제목</span>
       <span>...액션</span>
     </div>
     <div class="section-card__body">...</div>
   </div>

   변형:
   - .section-card--hover-shadow : 호버 시 그림자 강조 (리포트 패널)
   - .section-card--lg : 헤더/바디 패딩이 더 큼 (슈퍼관리자 콘솔)
   - .section-card__header--shaded : 헤더 배경 회색 (리포트)
   - .section-card__body--no-pad : 바디 패딩 0 (테이블 직접 박는 경우)
*/
.section-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.section-card--hover-shadow { transition: box-shadow var(--transition); }
.section-card--hover-shadow:hover { box-shadow: var(--shadow-md); }

.section-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  gap: var(--space-3);
}
.section-card--lg .section-card__header { padding: var(--space-5) var(--space-6); }
.section-card__header--shaded { background: var(--bg); }

.section-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.section-card--lg .section-card__title { font-size: var(--text-xl); }

.section-card__body { padding: var(--space-4) var(--space-5); }
.section-card--lg .section-card__body { padding: var(--space-5) var(--space-6); }
.section-card__body--no-pad { padding: 0; }