/* ========================================
   BRZ UI 컴포넌트 (Deep Dark Edition)
   ======================================== */

/* --------------------------------------------------------------------------
   1. 카드 (Cards) - 배경에 녹아드는 스타일
   -------------------------------------------------------------------------- */
.brz-card {
  background-color: var(--brz-bg-card);
  border: 1px solid var(--brz-border);
  border-radius: var(--brz-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  /* 그림자 최소화하여 플랫한 느낌 유지 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.brz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.brz-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brz-text-primary);
}

/* --------------------------------------------------------------------------
   2. 버튼 (Buttons) - 고대비 & 아웃라인
   -------------------------------------------------------------------------- */
.brz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--brz-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Primary: 브랜드 컬러 (보라색) */
.brz-btn-primary {
  background-color: var(--brz-primary);
  color: white;
}
.brz-btn-primary:hover {
  background-color: var(--brz-primary-hover);
  box-shadow: 0 0 12px rgba(109, 82, 236, 0.4); /* 은은한 발광 효과 */
}

/* Secondary: 어두운 회색 (보조) */
.brz-btn-secondary {
  background-color: var(--brz-bg-input);
  color: var(--brz-text-primary);
  border-color: var(--brz-border);
}
.brz-btn-secondary:hover {
  background-color: var(--brz-bg-hover);
  border-color: var(--brz-text-secondary);
}

/* Outline: 테두리만 있는 스타일 */
.brz-btn-outline {
  background-color: transparent;
  border: 1px solid var(--brz-border);
  color: var(--brz-text-secondary);
}
.brz-btn-outline:hover {
  border-color: var(--brz-text-primary);
  color: var(--brz-text-primary);
}

/* 아이콘 버튼 (단독 아이콘) */
.brz-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
  color: var(--brz-text-secondary);
  background: transparent;
  border: none;
}
.brz-btn-icon:hover {
  background-color: var(--brz-bg-hover);
  color: var(--brz-text-primary);
}

/* --------------------------------------------------------------------------
   3. 테이블 (Data Tables) - 다크 모드 최적화
   -------------------------------------------------------------------------- */
.brz-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--brz-border);
  border-radius: var(--brz-radius-md);
}

.brz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.brz-table thead th {
  background-color: var(--brz-bg-hover); /* 헤더를 약간 밝게 */
  color: var(--brz-text-secondary);
  font-weight: 600;
  padding: 12px 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--brz-border);
}

.brz-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--brz-border-light); /* 아주 연한 선 */
  color: var(--brz-text-primary);
  vertical-align: middle;
}

.brz-table tbody tr:last-child td {
  border-bottom: none;
}

.brz-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02); /* 마우스 올렸을 때 살짝 밝아짐 */
}

/* 사용자 프로필이 있는 셀 스타일 */
.brz-table-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brz-table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--brz-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--brz-text-secondary);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. 배지 (Badges) - 파스텔 톤 (눈이 편안함)
   -------------------------------------------------------------------------- */
.brz-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* 타입별 색상 (배경은 투명하게, 글씨는 선명하게) */
.brz-badge-primary {
  background-color: rgba(109, 82, 236, 0.15);
  color: #A78BFA; /* 밝은 보라 */
}

.brz-badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34D399; /* 밝은 초록 */
}

.brz-badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #FBBF24; /* 밝은 노랑 */
}

.brz-badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #F87171; /* 밝은 빨강 */
}

.brz-badge-neutral {
  background-color: var(--brz-bg-input);
  color: var(--brz-text-secondary);
  border: 1px solid var(--brz-border);
}

/* --------------------------------------------------------------------------
   5. 통계 위젯 (Dashboard Stats)
   -------------------------------------------------------------------------- */
.brz-stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  height: 100%;
}

.brz-stat-content {
  display: flex;
  flex-direction: column;
}

.brz-stat-label {
  font-size: 13px;
  color: var(--brz-text-secondary);
  margin-bottom: 8px;
}

.brz-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--brz-text-primary);
  letter-spacing: -0.02em;
}

.brz-stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brz-bg-input);
  color: var(--brz-text-primary);
}

/* --------------------------------------------------------------------------
   6. 페이지네이션 (Pagination)
   -------------------------------------------------------------------------- */
.brz-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
}

.brz-page-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  color: var(--brz-text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s;
}

.brz-page-btn:hover {
  background-color: var(--brz-bg-hover);
  color: var(--brz-text-primary);
}

.brz-page-btn.active {
  background-color: var(--brz-primary);
  color: white;
  font-weight: 600;
}