/**
 * /app/assets/css/theme-admin.css
 * KDCA Admin 테마 — Bootstrap 5 위에 토큰 기반 override
 * Phase L-46 (2026-05-15): 흩어진 CSS 통일 1단계
 *
 * 원칙:
 *   - Bootstrap 클래스는 그대로 사용 (.btn, .card, .table, .badge, .modal, .nav-tabs)
 *   - 시각만 토큰으로 일관화 (Bootstrap CSS 변수 --bs-* 재매핑)
 *   - 현 admin 의 빨강 accent (#e41b45) 유지 — 디자인 불변
 *   - inline <style> 의 중복은 점진 제거
 *
 * 적용:
 *   <link rel="stylesheet" href="/app/assets/css/tokens.css">
 *   <link rel="stylesheet" href="/app/assets/css/theme-admin.css">
 *   ← Bootstrap CSS 다음에 로드해야 override 가 적용됨
 */

:root {
  /* ============================================================
   * Admin 영역 색상 (현행 디자인 그대로)
   * ============================================================ */
  --admin-primary:    #333333;       /* 사이드바 어두운 회색 */
  --admin-accent:     #e41b45;       /* 강조 빨강 (현행) */
  --admin-accent-soft: rgba(228,27,69,0.10);
  --admin-bg:         #f8f9fa;
  --admin-surface:    #ffffff;
  --admin-text:       #212529;
  --admin-text-muted: #6c757d;
  --admin-border:     var(--kdca-gray-300);
  --admin-sidebar-bg: #212529;
  --admin-sidebar-fg: #adb5bd;
  --admin-sidebar-hover-bg: rgba(255,255,255,0.05);

  /* ============================================================
   * Bootstrap CSS 변수 재매핑 — 클래스는 그대로, 색만 통일
   * ============================================================ */
  --bs-body-font-family: var(--kdca-font);
  --bs-body-font-size:   var(--kdca-text-sm);
  --bs-body-line-height: var(--kdca-leading-snug);
  --bs-body-color:       var(--admin-text);
  --bs-body-bg:          var(--admin-bg);

  --bs-primary:        var(--admin-accent);
  --bs-primary-rgb:    228, 27, 69;
  --bs-link-color:     var(--admin-accent);
  --bs-link-hover-color: #b51538;

  --bs-border-color:   var(--admin-border);
  --bs-border-radius:  var(--kdca-radius);
  --bs-border-radius-sm: var(--kdca-radius-sm);
  --bs-border-radius-lg: var(--kdca-radius-lg);

  --bs-secondary-color:    var(--admin-text-muted);
  --bs-secondary-bg:       var(--kdca-gray-200);
}

/* ============================================================================
 * 폰트 강제 적용 — admin 전체 (Bootstrap default 무력화)
 * ========================================================================== */
body, .form-control, .form-select, .btn, .table, .card, .nav, .modal {
  font-family: var(--kdca-font) !important;
}

/* ============================================================================
 * Card — 카드 톤 통일 (radius, 그림자, 헤더)
 * ========================================================================== */
.card {
  border: 1px solid var(--admin-border);
  border-radius: var(--kdca-radius-lg);
  box-shadow: var(--kdca-shadow-xs);
  background: var(--admin-surface);
}
.card-header {
  background: var(--kdca-gray-50);
  border-bottom: 1px solid var(--admin-border);
  font-weight: var(--kdca-fw-semibold);
  font-size: var(--kdca-text-sm);
  padding: 10px 14px;
  border-radius: var(--kdca-radius-lg) var(--kdca-radius-lg) 0 0;
}
.card-body { padding: var(--kdca-space-4); }
.card-footer {
  background: var(--kdca-gray-50);
  border-top: 1px solid var(--admin-border);
  padding: 10px 14px;
}

/* ============================================================================
 * Button — radius / weight / hover 통일
 * ========================================================================== */
.btn {
  border-radius: var(--kdca-radius-sm);
  font-weight: var(--kdca-fw-medium);
  transition: var(--kdca-transition);
  letter-spacing: -0.01em;
}
.btn-primary {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #b51538;
  border-color: #b51538;
}
.btn-outline-primary {
  color: var(--admin-accent);
  border-color: var(--admin-accent);
}
.btn-outline-primary:hover {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
}

/* ============================================================================
 * Table — admin 의 빽빽한 표 톤 유지 + 통일
 * ========================================================================== */
.table {
  font-size: var(--kdca-text-xs);
  --bs-table-bg: var(--admin-surface);
}
.table th, .table td {
  padding: 6px 10px;
  vertical-align: middle;
}
.table > :not(caption) > * > * {
  border-bottom-width: 1px;
  border-color: var(--admin-border);
}
.table-light th, .table-light {
  background-color: var(--kdca-gray-50) !important;
  color: var(--admin-text);
  font-weight: var(--kdca-fw-semibold);
}
.table-hover tbody tr:hover { background-color: var(--admin-accent-soft); }

/* ============================================================================
 * Form — input/select/label 통일
 * ========================================================================== */
.form-label {
  font-size: var(--kdca-text-xs);
  font-weight: var(--kdca-fw-medium);
  color: var(--admin-text-muted);
  margin-bottom: 4px;
}
.form-control, .form-select {
  font-size: var(--kdca-text-sm);
  padding: 6px 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--kdca-radius-sm);
  transition: var(--kdca-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 0.15rem var(--admin-accent-soft);
}
.form-control-sm, .form-select-sm {
  font-size: var(--kdca-text-xs);
  padding: 4px 8px;
}
.form-check-input:checked {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
}

/* ============================================================================
 * Badge — 통일된 외형
 * ========================================================================== */
.badge {
  font-size: var(--kdca-text-xs);
  font-weight: var(--kdca-fw-semibold);
  padding: 3px 7px;
  border-radius: var(--kdca-radius-sm);
  letter-spacing: 0;
}

/* ============================================================================
 * Alert — 통일된 외형
 * ========================================================================== */
.alert {
  border-radius: var(--kdca-radius);
  border: none;
  padding: 10px 14px;
  font-size: var(--kdca-text-sm);
}

/* ============================================================================
 * Nav-tabs — admin 탭 UI 통일
 * ========================================================================== */
.nav-tabs {
  border-bottom: 2px solid var(--admin-border);
}
.nav-tabs .nav-link {
  font-size: var(--kdca-text-sm);
  font-weight: var(--kdca-fw-medium);
  padding: 8px 14px;
  color: var(--admin-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
}
.nav-tabs .nav-link.active {
  color: var(--admin-accent);
  border-bottom-color: var(--admin-accent);
  background: transparent;
}

/* ============================================================================
 * Modal — radius + shadow
 * ========================================================================== */
.modal-content {
  border: none;
  border-radius: var(--kdca-radius-lg);
  box-shadow: var(--kdca-shadow-xl);
}
.modal-header {
  border-bottom: 1px solid var(--admin-border);
  padding: 14px 20px;
}
.modal-body { padding: 18px 20px; }

/* ============================================================================
 * Sidebar (admin 만) — 통일 톤
 * ========================================================================== */
.sidebar {
  background: var(--admin-sidebar-bg);
  width: 250px;
  min-height: 100vh;
  position: fixed;
  overflow-y: auto;
  max-height: 100vh;
}
.sidebar .nav-link {
  color: var(--admin-sidebar-fg);
  padding: 9px 18px;
  font-size: var(--kdca-text-sm);
  border-left: 3px solid transparent;
  transition: var(--kdca-transition-fast);
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #ffffff;
  background: var(--admin-sidebar-hover-bg);
  border-left-color: var(--admin-accent);
}
.sidebar .nav-link i { width: 22px; margin-right: 6px; }
.sidebar-brand {
  padding: 16px 20px;
  color: #ffffff;
  font-size: var(--kdca-text-lg);
  font-weight: var(--kdca-fw-bold);
  border-bottom: 1px solid #343a40;
}
.sidebar small.text-muted {
  display: block;
  padding: 8px 18px 4px;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--kdca-gray-600) !important;
}

/* ============================================================================
 * Stat-card (KPI 박스) — 일관 톤
 * ========================================================================== */
.stat-card {
  border-radius: var(--kdca-radius-lg);
  padding: 18px 20px;
  color: #ffffff;
  box-shadow: var(--kdca-shadow-sm);
}
.stat-card h3, .stat-card h4 { margin-bottom: 0; font-weight: var(--kdca-fw-bold); }
.stat-card .h3 { font-size: var(--kdca-text-3xl); font-weight: var(--kdca-fw-bold); }
.stat-card.bg-primary { background-color: var(--admin-accent) !important; }

/* ============================================================================
 * Page-header
 * ========================================================================== */
.page-header {
  border-bottom: 2px solid var(--admin-border);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.page-header h2 {
  font-size: var(--kdca-text-xl);
  font-weight: var(--kdca-fw-bold);
  margin-bottom: 0;
  letter-spacing: -0.02em;
}
.page-header .breadcrumb { font-size: var(--kdca-text-xs); margin-bottom: 0; }

/* ============================================================================
 * main-content 영역
 * ========================================================================== */
.main-content { margin-left: 250px; padding: 22px; }

/* ============================================================================
 * 코드/모노스페이스 — admin 표 안의 mb_id 등
 * ========================================================================== */
code {
  font-family: var(--kdca-font-mono);
  font-size: 0.85em;
  color: var(--admin-text);
  background: var(--kdca-gray-100);
  padding: 1px 5px;
  border-radius: var(--kdca-radius-xs);
}

/* ============================================================================
 * Bootstrap legacy 호환 — 기존 inline <style> 와 겹쳐도 안전
 * ========================================================================== */
.legacy-link::after { content: " ↗"; font-size: 10px; opacity: .6; }
.text-muted { color: var(--admin-text-muted) !important; }