/* ============================================================
   비즈차이나 서비스관리 테마 오버라이드
   /sub/bizchina-theme.css
   ------------------------------------------------------------
   ● 목적 : 메인페이지(블루→퍼플 그라데이션)와 통일된 디자인
   ● 원칙 : 순수 CSS 오버라이드만 사용 (기능/마크업/JS 변경 없음)
   ● 로드 : common.css 다음에 링크 → 색상/스타일만 덮어씀
   ============================================================ */

/* ── 폰트 ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;800;900&display=swap');

/* ── 1. bc- 디자인 토큰 재정의 (빨강 → 블루/퍼플) ──
   common.css 의 :root 보다 나중에 로드되어 값을 덮어씁니다.
   red 로 정의돼 있던 '주요 액션 컬러'를 브랜드 블루로 매핑하면
   카드·버튼·탭·스텝·페이지네이션이 자동으로 새 톤을 따릅니다. */
:root {
  /* ★ !important : 일부 페이지가 본문에서 common.css 를 재-include 해도
     소스 순서와 무관하게 항상 이 값이 적용되도록 강제 (빨강 복귀 방지) */
  --bc-red:     #2563eb !important;   /* primary action → 브랜드 블루 */
  --bc-red-d:   #1d4ed8 !important;   /* hover */
  --bc-red-l:   rgba(37,99,235,.10) !important;
  --bc-blue:    #6366f1 !important;   /* 보조 → 인디고 */
  --bc-blue-l:  rgba(99,102,241,.10) !important;
  --bc-purple:  #8b5cf6 !important;
  --bc-text:    #0f172a !important;
  --bc-dim:     #64748b !important;
  --bc-border:  #e2e8f0 !important;
  --bc-r:       16px;      /* 카드 라운드 확대 */

  /* 테마 전용 그라데이션 토큰 */
  --bcz-grad:    linear-gradient(135deg,#0047AB 0%,#2563eb 45%,#6366f1 75%,#8b5cf6 100%);
  --bcz-grad-sm: linear-gradient(135deg,#2563eb 0%,#6366f1 100%);
  --bcz-side:    linear-gradient(195deg,#0f172a 0%,#1e1b4b 55%,#312e81 100%);
}

/* ── 2. 전역 바탕 / 폰트 ──────────────────────── */
body.hold-transition,
body {
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}
.content-wrapper {
  background:#f1f5f9 !important;
}

/* ── 3. 사이드바 (다크 그라데이션) ────────────── */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background:var(--bcz-side) !important;
  box-shadow:4px 0 24px rgba(15,23,42,.18);
  overflow-x:hidden !important;        /* 가로 스크롤 방지 */
}
.main-sidebar .sidebar,
.main-sidebar .nav-sidebar,
.main-sidebar .nav-treeview { overflow-x:hidden !important; }
.main-sidebar .nav-sidebar .nav-item { max-width:100%; }
/* 브랜드(로고) 영역 ─ 가로형 워드마크 로고 */
.brand-link {
  border-bottom:1px solid rgba(148,163,184,.18) !important;
  background:rgba(255,255,255,.03);
  display:flex !important; align-items:center; justify-content:flex-start;
  padding:18px 18px !important;
  overflow:hidden;
}
.brand-image-wide {
  max-width:150px; width:100%; height:auto; display:block;
  opacity:.95; transition:opacity .2s;
}
.brand-link:hover .brand-image-wide { opacity:1; }
/* 사이드바 접힘 모드에서 로고 축소 대응 */
.sidebar-collapse .brand-image-wide { max-width:42px; }
/* 사용자 패널 */
.user-panel {
  border-bottom:1px solid rgba(148,163,184,.18) !important;
}
.user-panel .info a {
  color:#e2e8f0 !important;
  font-weight:600;
}
.user-panel .image img {
  border:2px solid rgba(99,102,241,.6);
}

/* 사이드바 메뉴 링크 (1depth) */
.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color:#dbe2ee !important;
  border-radius:8px !important;
  margin:3px 8px !important;
  max-width:calc(100% - 16px);   /* 좌우 마진(8+8)만큼 빼서 사이드바를 절대 벗어나지 않음 */
  padding:11px 14px !important;
  font-size:14.5px;
  font-weight:600;
  line-height:1.2;
  display:flex !important;        /* 아이콘+텍스트 세로 중앙 정렬 통일 */
  align-items:center;
  box-sizing:border-box !important;
  transition:all .2s;
}
.main-sidebar .nav-sidebar .nav-link p {
  color:inherit !important;
  margin:0; font-size:inherit; line-height:1.2;
  flex:1 1 auto; min-width:0;            /* 남은 공간 채움 → 우측 화살표 정렬 */
}
.main-sidebar .nav-sidebar .nav-link p .right { float:right; margin-top:2px; }
.main-sidebar .nav-sidebar .nav-link:hover {
  background:rgba(99,102,241,.20) !important;
  color:#fff !important;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background:var(--bcz-grad-sm) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(37,99,235,.30) !important;  /* 과한 글로우 완화 → 깔끔한 단일 박스 */
}
/* 2depth (하위 메뉴) */
.main-sidebar .nav-treeview > .nav-item > .nav-link {
  color:#aeb9cc !important;
  border-radius:8px !important;
  margin:2px 8px 2px 16px !important;
  max-width:calc(100% - 24px);   /* 좌우 마진(16+8)만큼 빼서 오버플로우 차단 */
  padding:9px 12px !important;
  font-size:13.5px;
  font-weight:500;
  box-sizing:border-box !important;
  display:flex; align-items:center;
}
.main-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background:rgba(99,102,241,.16) !important;
  color:#fff !important;
}
/* 아이콘 정렬 ─ 대시보드(nav-icon)와 기타 메뉴(fa) 간격 100% 통일 */
.main-sidebar .nav-sidebar > .nav-item > .nav-link > .nav-icon,
.main-sidebar .nav-sidebar > .nav-item > .nav-link > .fa,
.main-sidebar .nav-sidebar > .nav-item > .nav-link > .fas,
.main-sidebar .nav-sidebar > .nav-item > .nav-link > .far {
  width:1.5rem !important;
  min-width:1.5rem;
  flex:0 0 1.5rem;               /* flex 자식: 폭 고정, 줄어들지 않음 */
  margin-left:0 !important;
  margin-right:.5rem !important;
  text-align:center;
  font-size:1.05rem;
  color:#a5b4fc;
}
/* 활성 메뉴 아이콘 흰색 */
.main-sidebar .nav-sidebar .nav-link.active > .nav-icon,
.main-sidebar .nav-sidebar .nav-link.active > .fa,
.main-sidebar .nav-sidebar .nav-link.active > .fas,
.main-sidebar .nav-sidebar .nav-link.active > .far { color:#fff !important; }
/* 2depth 아이콘 */
.main-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
  color:#94a3b8;
  flex:0 0 1.1rem; width:1.1rem; min-width:1.1rem;
  margin-right:.4rem !important; margin-left:0 !important;
  text-align:center; font-size:.55rem;
}
.main-sidebar .nav-treeview > .nav-item > .nav-link.active > .nav-icon { color:#fff; }
/* 열린 트리메뉴 부모 강조 */
.main-sidebar .nav-sidebar .menu-open > .nav-link {
  background:rgba(148,163,184,.12);
}

/* ── 3-1. 미니(축소) 사이드바 ─ 정사각 라운드 버튼 통일 ── */
body.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
  justify-content:center !important; padding:14px 0 !important;
}
body.sidebar-collapse .main-sidebar:not(:hover) .brand-image-wide { max-width:38px; }
body.sidebar-collapse .main-sidebar:not(:hover) .user-panel { justify-content:center; padding-left:0; }
body.sidebar-collapse .main-sidebar:not(:hover) .user-panel .image { margin:0; }
body.sidebar-collapse .main-sidebar:not(:hover) .user-panel .image img { width:38px; height:38px; }

/* 모든 1depth 항목을 동일한 44×44 정사각 버튼으로 → 활성/비활성 크기 통일 */
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link {
  width:44px !important; height:44px !important; max-width:44px !important;
  margin:4px auto !important; padding:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  border-radius:12px !important;
}
/* 축소 시 텍스트 완전 숨김 → 박스 안에 아이콘만 정중앙 */
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > p {
  display:none !important; width:0 !important; margin:0 !important;
}
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > .nav-icon,
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > .fa,
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > .fas,
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > .far {
  margin:0 !important; width:auto !important; min-width:0; flex:none;
  font-size:1.15rem; line-height:1;
}
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link:hover {
  background:rgba(99,102,241,.20) !important;
}

/* ── 4. 상단 네비바 ───────────────────────────── */
.main-header.navbar {
  background:#ffffff !important;
  border-bottom:1px solid #e2e8f0 !important;
  box-shadow:0 2px 12px rgba(15,23,42,.05);
}
.main-header .nav-link { color:#334155 !important; }
.main-header .nav-link:hover { color:#2563eb !important; }
/* 등급/포인트 배지 */
.Tmoney-box span {
  background:var(--bcz-grad-sm) !important;
  color:#fff !important;
  font-weight:700;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}

/* ── 5. 콘텐츠 헤더 ───────────────────────────── */
.content-header h1,
.content-header .m-0 {
  font-weight:800 !important;
  color:#0f172a !important;
  letter-spacing:-.5px;
}
.content-header .breadcrumb { background:transparent; }
.content-header .breadcrumb-item.active { color:#2563eb; }

/* ── 6. 페이지 헤더 (bc-page) ─────────────────── */
/* 그라데이션 텍스트(clip)가 이모지까지 투명 처리하던 문제 → 단색으로 분리 */
.bc-page-ttl {
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:#1d4ed8 !important;
  font-weight:900 !important;
}

/* ── 6-1. 의미상 빨강 보존 (--bc-red 를 파랑으로 바꿔도 에러/삭제/지역색은 빨강 유지) ── */
.bc-alert-err {
  background:rgba(192,57,43,.10) !important;
  border-left-color:#c0392b !important;
  color:#922b21 !important;
}
.bc-bd-red   { background:rgba(192,57,43,.10) !important; color:#c0392b !important; }
.bc-del-btn  { color:#c0392b !important; }
.bc-rg-gz    { color:#c0392b !important; }   /* 광저우 지역 라벨(빨강 코드) */

/* ── 7. 카드 ──────────────────────────────────── */
.bc-card {
  border:1px solid #eef2f7 !important;
  border-radius:var(--bc-r) !important;
  box-shadow:0 6px 24px rgba(15,23,42,.06) !important;
  transition:box-shadow .25s,transform .25s;
}
.bc-card:hover {
  box-shadow:0 12px 36px rgba(37,99,235,.10) !important;
}
.bc-card-hd {
  border-bottom:1px solid #eef2f7 !important;
}
.bc-card-hd h3 { color:#0f172a; letter-spacing:-.2px; }

/* AdminLTE 기본 카드도 톤 맞춤 */
.card {
  border-radius:var(--bc-r) !important;
  box-shadow:0 6px 24px rgba(15,23,42,.06) !important;
  border:1px solid #eef2f7 !important;
}
.card-primary:not(.card-outline) > .card-header {
  background:var(--bcz-grad-sm) !important;
  border:0;
}

/* ── 8. 버튼 ──────────────────────────────────── */
.bc-btn-primary {
  background:var(--bcz-grad-sm) !important;
  box-shadow:0 6px 18px rgba(37,99,235,.28);
}
.bc-btn-primary:hover {
  background:linear-gradient(135deg,#1d4ed8 0%,#4f46e5 100%) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(37,99,235,.36);
}
.bc-btn-blue { background:var(--bc-purple) !important; }
.bc-btn-blue:hover { background:#7c3aed !important; }
/* AdminLTE 버튼 */
.btn-primary {
  background:var(--bcz-grad-sm) !important;
  border:0 !important;
  box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); }

/* ── 9. C머니 카드 (빨강 그라데 → 블루/퍼플) ── */
.bc-tm-card {
  background:var(--bcz-grad) !important;
  box-shadow:0 12px 32px rgba(37,99,235,.30);
}

/* ── 10. 스텝바 (active/done 색상) ────────────── */
.bc-step.active .bc-step-c {
  background:var(--bcz-grad-sm) !important;
  border-color:#2563eb !important;
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.bc-step.active::after { background:#2563eb !important; }

/* ── 11. 통계 카드 강조값 ─────────────────────── */
.bc-cv-red .bc-s-val { color:#2563eb !important; }
.bc-s-val { letter-spacing:-.5px; }
.bc-num { color:#2563eb !important; }

/* ── 12. 탭 / 필터바 / 테이블 헤더 미세조정 ──── */
/* 가로 탭: 좁은 화면에서 페이지를 밀지 않고 탭 영역 안에서만 스크롤 */
.bc-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.bc-tabs::-webkit-scrollbar { height:4px; }
.bc-tabs::-webkit-scrollbar-thumb { background:rgba(99,102,241,.35); border-radius:2px; }
.bc-tab { white-space:nowrap; }
.bc-tab.active { color:#2563eb !important; border-bottom-color:#2563eb !important; }
.bc-tbl thead tr { background:#f8fafc; }

/* ── 12-1. 페이지 인라인 빨강 컴포넌트 강제 블루 ──
   일부 페이지가 본문에서 common.css 를 재-include 하여 var(--bc-red) 가
   빨강으로 복귀하는 것을 변수에 의존하지 않고 하드코딩으로 덮어씀 */
.bc-type-tab.active {
  background:linear-gradient(135deg,#2563eb 0%,#6366f1 100%) !important;
  color:#fff !important;
}
.bc-step-badge { background:#2563eb !important; }
.bc-wh-opt.sel, .bc-wh-opt:hover,
.bc-work-opt.sel, .bc-work-opt:hover,
.bc-output-opt.sel, .bc-output-opt:hover,
.bc-ship-opt.sel, .bc-ship-opt:hover {
  border-color:#2563eb !important;
  background:rgba(37,99,235,.07) !important;
}
.bc-process-active { border-color:#2563eb !important; background:#2563eb !important; }
.bc-step.active .bc-step-c { background:#2563eb !important; border-color:#2563eb !important; }
.bc-step.active::after { background:#2563eb !important; }
.bc-step.active .bc-step-lbl { color:#2563eb !important; }
.bc-contents-tbl input:focus, .bc-contents-tbl select:focus { border-color:#2563eb !important; }
.bc-tbl th { color:#475569; }
.bc-tbl tbody tr:hover { background:#f5f8ff; }

/* ── 13. 배지 (선택 톤 보정) ──────────────────── */
.bc-bd-blue { background:rgba(37,99,235,.10); color:#2563eb; }
.bc-bd-purple { background:rgba(139,92,246,.12); color:#8b5cf6; }

/* ── 14. 입력 포커스 ──────────────────────────── */
.bc-fc:focus {
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}

/* ── 15. 페이지네이션 활성 ────────────────────── */
.bc-pg-btn.active {
  background:var(--bcz-grad-sm) !important;
  border-color:#2563eb !important;
}
.bc-pg-btn:hover { color:#2563eb; border-color:#2563eb; }

/* ── 15-1. 그누보드 기본 페이징(get_paging) 테마화 ── */
/* 접근성용 숨김 텍스트: /sub 영역에 정의가 없어 "열린/페이지"가 노출되던 문제 해결 */
.sound_only, .sr-only {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.bc-pagination .pg_wrap { display:flex; justify-content:center; width:100%; }
.bc-pagination .pg {
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
}
.bc-pagination .pg_page,
.bc-pagination .pg_current {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 13px;
  border-radius:9px; border:1px solid #e2e8f0; background:#fff;
  color:#475569; font-size:14px; font-weight:600; line-height:1;
  text-decoration:none; transition:all .15s; box-sizing:border-box;
}
.bc-pagination .pg_page:hover {
  border-color:#2563eb; color:#2563eb; background:#f5f8ff;
}
.bc-pagination .pg_current {
  background:var(--bcz-grad-sm,#2563eb) !important;
  border-color:#2563eb; color:#fff !important;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.bc-pagination .pg_start,
.bc-pagination .pg_prev,
.bc-pagination .pg_next,
.bc-pagination .pg_end { color:#64748b; font-weight:500; }

/* ── 16. 업로드존 hover ───────────────────────── */
.bc-upload-zone:hover,.bc-upload-zone.over {
  border-color:#6366f1 !important;
  background:rgba(99,102,241,.06) !important;
}

/* ── 16-1. 콘텐츠 래퍼 (마진 → 패딩 변환) ─────── */
.bc-wrap { margin:0 !important; padding:31px 21px !important; }

/* ── 17. 푸터 ─────────────────────────────────── */
.main-footer {
  background:#ffffff !important;
  border-top:1px solid #e2e8f0 !important;
  color:#64748b;
}
.main-footer strong { color:#0f172a; }

/* ── 18. 스크롤바(웹킷) ───────────────────────── */
.main-sidebar::-webkit-scrollbar { width:6px; }
.main-sidebar::-webkit-scrollbar-thumb { background:rgba(99,102,241,.4); border-radius:3px; }
