/* ============================================================
   sellingmate 디자인 토큰 + 공통 컴포넌트 스킨
   - Bootstrap 5.1.3 위에 로드되어 브랜드 톤으로 정돈한다.
   - 기존 클래스/ID/마크업은 그대로 두고 스타일만 재정의한다.
   ============================================================ */

:root {
  /* 브랜드 */
  --sm-primary: #2563EB;
  --sm-primary-hover: #1D4ED8;
  --sm-primary-soft: #EFF6FF;
  /* 텍스트 */
  --sm-text: #111827;
  --sm-text-secondary: #4B5563;
  --sm-muted: #6B7280;
  /* 표면 */
  --sm-bg: #F9FAFB;
  --sm-surface: #FFFFFF;
  --sm-border: #E5E7EB;
  /* 상태 */
  --sm-success: #16A34A;
  --sm-success-soft: #DCFCE7;
  --sm-success-text: #166534;
  --sm-warning: #D97706;
  --sm-warning-soft: #FEF3C7;
  --sm-warning-text: #92400E;
  --sm-danger: #DC2626;
  --sm-danger-soft: #FEE2E2;
  --sm-danger-text: #991B1B;
  --sm-info: #0EA5E9;
  --sm-info-soft: #E0F2FE;
  --sm-info-text: #075985;
  --sm-neutral-soft: #F3F4F6;
  /* 형태 */
  --sm-radius: 8px;
  --sm-radius-sm: 6px;
  --sm-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.08);
  --sm-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --sm-font: 'Pretendard Variable', Pretendard, Inter, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}

/* ---------- 기본 ---------- */
body {
  font-family: var(--sm-font);
  background-color: var(--sm-bg);
  color: var(--sm-text);
  letter-spacing: 0;
}

a { color: var(--sm-primary); }
a:hover { color: var(--sm-primary-hover); }

/* 숫자 정렬 안정화: 표/금액/지표 */
.table, .tabular-nums, .kpi-value, .stat-value, .metric-value {
  font-variant-numeric: tabular-nums;
}

/* ---------- 내비게이션 ---------- */
.navbar.bg-light {
  background-color: var(--sm-surface) !important;
  border-bottom: 1px solid var(--sm-border);
  box-shadow: none;
}
.navbar-light .navbar-brand { color: var(--sm-text); font-weight: 700; }
.navbar-light .navbar-nav .nav-link { color: var(--sm-text-secondary); font-weight: 500; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus { color: var(--sm-text); }
.navbar-light .navbar-nav .nav-link.active { color: var(--sm-primary); font-weight: 600; }
.dropdown-menu {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow-md);
}
.dropdown-item { color: var(--sm-text-secondary); }
.dropdown-item:hover { background-color: var(--sm-neutral-soft); color: var(--sm-text); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--sm-primary); }

/* ---------- 버튼 ---------- */
.btn { border-radius: var(--sm-radius-sm); font-weight: 500; }
.btn:focus { box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2); }

.btn-primary {
  background-color: var(--sm-primary);
  border-color: var(--sm-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--sm-primary-hover) !important;
  border-color: var(--sm-primary-hover) !important;
}
.btn-outline-primary { color: var(--sm-primary); border-color: var(--sm-primary); }
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--sm-primary) !important;
  border-color: var(--sm-primary) !important;
  color: #fff;
}
.btn-success { background-color: var(--sm-success); border-color: var(--sm-success); }
.btn-success:hover, .btn-success:focus { background-color: #15803D !important; border-color: #15803D !important; }
.btn-outline-success { color: var(--sm-success); border-color: var(--sm-success); }
.btn-outline-success:hover { background-color: var(--sm-success) !important; border-color: var(--sm-success) !important; }
.btn-danger { background-color: var(--sm-danger); border-color: var(--sm-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #B91C1C !important; border-color: #B91C1C !important; }
.btn-outline-danger { color: var(--sm-danger); border-color: var(--sm-danger); }
.btn-outline-danger:hover { background-color: var(--sm-danger) !important; border-color: var(--sm-danger) !important; }
.btn-warning { background-color: var(--sm-warning); border-color: var(--sm-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background-color: #B45309 !important; border-color: #B45309 !important; color: #fff; }
.btn-info { background-color: var(--sm-info); border-color: var(--sm-info); color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: #0284C7 !important; border-color: #0284C7 !important; color: #fff; }

/* ---------- 링크/텍스트 유틸 ---------- */
.text-primary { color: var(--sm-primary) !important; }
.text-secondary { color: var(--sm-text-secondary) !important; }
.text-muted { color: var(--sm-muted) !important; }
.bg-primary { background-color: var(--sm-primary) !important; }

/* ---------- 카드 ---------- */
.card {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
  background-color: var(--sm-surface);
}
.card-header {
  background-color: var(--sm-surface);
  border-bottom: 1px solid var(--sm-border);
  font-weight: 600;
  color: var(--sm-text);
}

/* ---------- 테이블 ---------- */
.table { color: var(--sm-text); }
.table > :not(caption) > * > * { border-bottom-color: var(--sm-border); }
.table thead th, .table > thead {
  background-color: var(--sm-bg);
  color: var(--sm-text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  vertical-align: middle;
}
.table-light, .table thead.table-light th {
  background-color: var(--sm-bg) !important;
  color: var(--sm-text-secondary);
}
.table-hover > tbody > tr:hover > * { background-color: var(--sm-primary-soft); }
.table td { vertical-align: middle; }

/* 긴 목록용 sticky 헤더 (테이블을 .table-sticky-wrap으로 감싸 사용) */
.table-sticky-wrap { max-height: 70vh; overflow-y: auto; }
.table-sticky-wrap thead th { position: sticky; top: 0; z-index: 2; }

/* 숫자 컬럼 우측 정렬 유틸 */
.td-num, .th-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ---------- 배지: 부드러운 상태 배지 ---------- */
.badge { font-weight: 600; border-radius: var(--sm-radius-sm); letter-spacing: 0; }
.badge.bg-success { background-color: var(--sm-success-soft) !important; color: var(--sm-success-text) !important; }
.badge.bg-danger { background-color: var(--sm-danger-soft) !important; color: var(--sm-danger-text) !important; }
.badge.bg-warning { background-color: var(--sm-warning-soft) !important; color: var(--sm-warning-text) !important; }
.badge.bg-info { background-color: var(--sm-info-soft) !important; color: var(--sm-info-text) !important; }
.badge.bg-primary { background-color: var(--sm-primary-soft) !important; color: var(--sm-primary-hover) !important; }
.badge.bg-secondary { background-color: var(--sm-neutral-soft) !important; color: var(--sm-text-secondary) !important; }
.badge.bg-light { background-color: var(--sm-neutral-soft) !important; color: var(--sm-text-secondary) !important; }
.badge.bg-dark { background-color: var(--sm-text) !important; color: #fff !important; }

/* 공통 상태 배지 (여러 템플릿의 .status-badge 통합 기본값) */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--sm-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* 주문 상태 색상 맵 (orders.html 중복 정의 → 전역 단일화)
   탭 카운트 배지와 테이블 배지가 같은 색을 쓰도록 여기서만 관리한다. */
.status-ACCEPT { background-color: var(--sm-info-soft); color: var(--sm-info-text); }
.status-INSTRUCT { background-color: var(--sm-warning-soft); color: var(--sm-warning-text); }
.status-DEPARTURE { background-color: #F3E8FF; color: #6B21A8; }
.status-DELIVERING { background-color: var(--sm-success-soft); color: var(--sm-success-text); }
.status-FINAL_DELIVERY { background-color: var(--sm-primary-soft); color: var(--sm-primary-hover); }
.status-RETURN_PENDING { background-color: var(--sm-warning-soft); color: var(--sm-warning-text); }
.status-RETURNED { background-color: #EDE9FE; color: #5B21B6; }
.status-CANCELLED { background-color: var(--sm-danger-soft); color: var(--sm-danger-text); }
.status-NONE_TRACKING { background-color: var(--sm-neutral-soft); color: var(--sm-text-secondary); }

/* 매입처 반품 상태 (supplier_returns 소프트 톤 통일) */
.status-pending, .status-refund_pending { background-color: var(--sm-warning-soft); color: var(--sm-warning-text); }
.status-completed { background-color: var(--sm-success-soft); color: var(--sm-success-text); }
.status-already_shipped { background-color: var(--sm-neutral-soft); color: var(--sm-text-secondary); }

/* SweetAlert2는 항상 페이지 오버레이(z-index 9999/10000)보다 위 */
.swal2-container { z-index: 10500 !important; }

/* ---------- 폼 ---------- */
.form-control, .form-select {
  border-color: var(--sm-border);
  border-radius: var(--sm-radius-sm);
  color: var(--sm-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--sm-primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}
.form-label { font-weight: 500; color: var(--sm-text-secondary); margin-bottom: 0.25rem; }
.form-check-input:checked { background-color: var(--sm-primary); border-color: var(--sm-primary); }
.form-text { color: var(--sm-muted); }

/* ---------- 모달 ---------- */
.modal-content { border: 1px solid var(--sm-border); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow-md); }
.modal-header { border-bottom: 1px solid var(--sm-border); }
.modal-footer { border-top: 1px solid var(--sm-border); }
.modal-title { font-weight: 600; color: var(--sm-text); }

/* ---------- 알림 ---------- */
.alert { border-radius: var(--sm-radius); }
.alert-success { background-color: var(--sm-success-soft); border-color: #BBF7D0; color: var(--sm-success-text); }
.alert-danger { background-color: var(--sm-danger-soft); border-color: #FECACA; color: var(--sm-danger-text); }
.alert-warning { background-color: var(--sm-warning-soft); border-color: #FDE68A; color: var(--sm-warning-text); }
.alert-info { background-color: var(--sm-info-soft); border-color: #BAE6FD; color: var(--sm-info-text); }

/* ---------- 탭/페이지네이션 ---------- */
.nav-tabs { border-bottom-color: var(--sm-border); }
.nav-tabs .nav-link { color: var(--sm-text-secondary); }
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--sm-text); }
.nav-tabs .nav-link.active {
  color: var(--sm-primary);
  font-weight: 600;
  border-color: var(--sm-border) var(--sm-border) var(--sm-surface);
}
.nav-pills .nav-link.active { background-color: var(--sm-primary); }
.page-link { color: var(--sm-primary); }
.page-item.active .page-link { background-color: var(--sm-primary); border-color: var(--sm-primary); }

/* ---------- 진행/스피너 ---------- */
.progress { border-radius: var(--sm-radius-sm); background-color: var(--sm-neutral-soft); }
.progress-bar { background-color: var(--sm-primary); }

/* ---------- SweetAlert2 ---------- */
.swal2-popup { border-radius: var(--sm-radius) !important; font-family: var(--sm-font) !important; }
.swal2-styled.swal2-confirm { border-radius: var(--sm-radius-sm) !important; }
.swal2-styled.swal2-cancel { border-radius: var(--sm-radius-sm) !important; }

/* ---------- 반응형 안정화 ---------- */
@media (max-width: 767.98px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .btn-toolbar, .d-flex.flex-wrap { row-gap: 0.5rem; }
}

/* 메뉴가 많은 노트북 폭(992~1399px)에서 네비게이션 줄바꿈 최소화 */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar .navbar-nav .nav-link { padding-left: 0.45rem; padding-right: 0.45rem; font-size: 0.875rem; }
  .navbar .btn-sm { padding: 0.2rem 0.45rem; font-size: 0.8rem; }
  .navbar-brand { font-size: 1rem; }
}