/* ============================================
   ShopSyncX — Global UI (v1.5 • Polished)
   ============================================ */

/* ---------- Base ---------- */
body {
  background-color: #f8fafc;
  color: #111827;
  font-family: "Inter", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

/* ---------- Cards ---------- */
.card {
  border-radius: 16px;
  border-color: #e5e7eb;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.card .card-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* ---------- Tables ---------- */
.table th .bi { opacity: .4; margin-left: .25rem; }
.table-hover tbody tr:hover td {
  background-color: color-mix(in srgb, var(--primary) 6%, transparent);
}
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}

/* 숫자 정렬 (재고 등) */
.num, td.num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Badges ---------- */
.badge { letter-spacing: .2px; }

/* Low/Out stock 강조 */
.badge-low {
  background: #fff3cd; color: #8a6d3b;
  border: 1px solid #ffe69c;
  padding: .15rem .4rem; border-radius: .375rem;
}
.badge-out {
  background: #fde2e1; color: #842029;
  border: 1px solid #f5c2c7;
  padding: .15rem .4rem; border-radius: .375rem;
}

/* ---------- Responsive Table (Mobile Card View) ---------- */
@media (max-width: 992px){
  .table-inventory thead { display: none; }
  .table-inventory tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    margin: .5rem 0;
    padding: .5rem .75rem;
    background: var(--surface);
  }
  .table-inventory tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem 0 !important;
    border: 0 !important;
  }
  .table-inventory tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 600;
    margin-right: .75rem;
  }
  .table-inventory tbody td.cell-check,
  .table-inventory tbody td.cell-thumb {
    grid-column: 1 / span 2; justify-content: flex-start;
  }
  .table-inventory tbody td.cell-action {
    grid-column: 1 / span 2; justify-content: flex-end;
    margin-top: .25rem;
  }
}

/* ---------- Links / Nav ---------- */
.nav-link {
  border-radius: 8px;
  color: #495057;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link.active, .nav-link:hover {
  background: #0d6efd;
  color: #fff;
}

/* ---------- Lists ---------- */
.list-group-item {
  border: 0;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.list-group-item:hover {
  background: #f1f5f9;
  border-left-color: #3b82f6;
}

/* ---------- Inputs / Buttons ---------- */
.input-group .btn { white-space: nowrap; }

/* ---------- Empty State ---------- */
.empty-state {
  position: absolute;
  inset: .5rem .75rem .75rem .75rem;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .25rem;
  text-align: center;
  border-radius: .75rem;
  padding: 36px 12px;
  border: 1px dashed rgba(0,0,0,0.08);
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.015), rgba(0,0,0,0.015) 10px,
    rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px
  );
}

.card.is-empty .empty-state { display: flex; }

.empty-state .empty-icon { font-size: 22px; margin-bottom: 6px; opacity: .8; }
.empty-state .empty-title { font-weight: 600; margin-bottom: 2px; }
.empty-state .empty-desc { font-size: .9rem; color: #6c757d; }

/* ---------- Charts ---------- */
.chart-placeholder {
  display: block;
  width: 100%;
  min-height: 220px;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,#f8f9fa,#f8f9fa 10px,#f1f3f5 10px,#f1f3f5 20px);
}
#chartRevenue, #chartCategories, #revenueChart, #categoriesChart {
  display: block; width: 100%; min-height: 220px; border-radius: 8px;
  background: none !important;
}

/* ---------- KPI micro-interactions ---------- */
.kpi-card {
  transition: transform 140ms ease, box-shadow 140ms ease;
  will-change: transform, box-shadow;
}
.kpi-card.kpi-hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
}

/* ---------- Theme tokens (Light / Dark) ---------- */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #0d6efd;
  --primary-600: #0b5ed7;
  --primary-700: #0a58ca;
}
:root[data-bs-theme="dark"]{
  --bg: #0f1217;
  --surface: #161a22;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #262b34;
  --primary: #5aa2ff;
  --primary-600: #4794ff;
  --primary-700: #3b86f0;
}

/* Global mappings */
body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.text-muted { color: var(--muted) !important; }

/* ---------- Layout: Topbar & Sidebar ---------- */
[data-bs-theme="light"] .topbar{
  background-color:#ffffff;
  border-bottom:1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-bs-theme="light"] .sidebar{
  background-color:#ffffff;
  border-right:1px solid #e5e7eb;
  box-shadow: 2px 0 4px rgba(0,0,0,.03);
}
[data-bs-theme="light"] .sidebar .nav-link{
  color:#374151;
  border-left:4px solid transparent;
  border-radius:6px;
  padding:8px 12px;
  margin:2px 6px;
  font-weight:500;
  transition: all .15s ease-in-out;
}
[data-bs-theme="light"] .sidebar .nav-link:hover{
  background-color:#e8f0fe;
  color: var(--primary);
}
[data-bs-theme="light"] .sidebar .nav-link.active{
  background-color:#e1ecff;
  color:#0a58ca;
  font-weight:600;
  border-left:4px solid var(--primary);
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.05);
}
[data-bs-theme="light"] .sidebar .text-muted{
  color:#a0a7b2 !important;
  font-weight:600;
  letter-spacing:.5px;
}
[data-bs-theme="light"] .sidebar .progress-bar{ background-color: var(--primary); }

/* ---------- Dark ---------- */
[data-bs-theme="dark"] .topbar{
  background-color:#161a22;
  border-bottom:1px solid #2b3038;
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .sidebar{
  background-color:#111418;
  border-right:1px solid #2b3038;
  box-shadow: 2px 0 8px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .sidebar .nav-link{
  color:#adb5bd;
  border-left:4px solid transparent;
  border-radius:6px;
  padding:8px 12px;
  margin:2px 6px;
  transition: all .15s ease-in-out;
}
[data-bs-theme="dark"] .sidebar .nav-link:hover{
  background-color:#1e2430;
  color: var(--primary);
}
[data-bs-theme="dark"] .sidebar .nav-link.active{
  background-color:#1f2835;
  color: var(--primary);
  font-weight:600;
  border-left:4px solid var(--primary);
  box-shadow: inset 0 0 0 1px rgba(90,162,255,.2);
}
[data-bs-theme="dark"] .sidebar .text-muted{
  color:#8b93a0 !important;
  font-weight:600;
  letter-spacing:.5px;
}

/* ---------- Dark Inputs ---------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea {
  background-color: #2b2b2b !important;
  color: #f1f1f1 !important;
  border-color: #444 !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #333 !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  color: #fff !important;
}
[data-bs-theme="dark"] label { color: #bbb !important; }

/* ---------- Micro details ---------- */
.sidebar .text-uppercase { letter-spacing:.8px; }
.navbar .btn { display:inline-flex; align-items:center; gap:4px; }
.navbar .bi-bell{ position:relative; }
.navbar .bi-bell::after{
  content:""; position:absolute; top:-3px; right:-3px;
  width:6px; height:6px; background:#dc3545; border-radius:50%;
}

/* ---------- Toolbar Layout ---------- */
.payments-toolbar{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.payments-toolbar .input-group.search-group{
  flex:1 1 420px;
  min-width:320px;
}
.payments-toolbar .search-group .form-control{ flex:1 1 auto; }
.payments-toolbar .form-select{ flex:0 0 auto; }
.payments-toolbar .btn-group.tools{
  flex:0 0 auto;
  white-space:nowrap;
  gap:.5rem;
}
.btn-fixed{ min-width:8rem; }
@media (max-width: 576px){
  .payments-toolbar .input-group.search-group{ flex-basis:100%; min-width:0; }
  .btn-fixed{ min-width:6.5rem; }
}

/* --- Plan gate overlay --- */
.locked { position: relative; filter: grayscale(0.15) opacity(0.75); }

.upgrade-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(0deg, rgba(255,255,255,.75), rgba(255,255,255,.75));
  border-radius: inherit;
  pointer-events: auto;
  z-index: 10;
}

[data-bs-theme="dark"] .upgrade-overlay {
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}

.upgrade-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: 999px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  font-size: .9rem; font-weight: 600;
}

/* ==== Empty State (통일 스타일) ==== */
.card.is-empty { position: relative; }
.card.is-empty > .card-body,
.card.is-empty .table-responsive { position: relative; }

.empty-state {
  position: absolute;
  inset: .5rem .75rem .75rem .75rem;          /* 카드 안쪽으로 살짝 여백 */
  display: none;                              /* 기본 감춤, JS로 토글 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .25rem;
  text-align: center;
  border-radius: .75rem;
  border: 1px dashed var(--bs-border-color);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 10px,
      rgba(0,0,0,.03) 10px,
      rgba(0,0,0,.03) 20px
    );
}

[data-bs-theme="dark"] .empty-state {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 10px,
      rgba(255,255,255,.05) 10px,
      rgba(255,255,255,.05) 20px
    );
  border-color: rgba(255,255,255,.15);
}

.empty-state .empty-icon { font-size: 1.25rem; opacity: .7; }
.empty-state .empty-title { font-weight: 700; opacity: .8; }
.empty-state .empty-desc  { font-size: .85rem; opacity: .75; }

/* 버튼 옆에 붙는 소형 플랜 칩 */
.feature-need.btn-chip{
  margin-left: .35rem;
  font-size: .7rem;
  padding: .05rem .4rem;
}

/* 카드가 empty일 때 원본 콘텐츠는 시각적으로 숨김 */
.card.is-empty canvas,
.card.is-empty table,
.card.is-empty ul { visibility: hidden; }

/* 리스트/테이블 "No data" 한 줄도 보기 좋게 */
.table .row-empty td {
  padding: 2.25rem 1rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
}

/* ==== Plan Gate (잠금 오버레이 & 라벨) ==== */
.locked { position: relative; filter: grayscale(.05) opacity(.85); }
.upgrade-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(255,255,255,.72), rgba(255,255,255,.72));
  z-index: 10;
}
[data-bs-theme="dark"] .upgrade-overlay {
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.upgrade-pill {
  display: inline-flex; gap: .5rem; align-items: center;
  padding: .5rem .75rem; border-radius: 999px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  font-size: .85rem; font-weight: 600;
}

/* 섹션 헤더에 붙는 “Requires Pro/Business” 칩 */
.feature-need {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}
 
/* 사이드바 최소 너비 설정 */
.sidebar {
    min-width: 260px !important;  /* 사이드바가 최소한 이 너비만큼은 유지되도록 설정 */
    transition: width 0.2s ease;
}

/* 사이드바가 collapsed 상태일 때에도 최소 너비 유지 */
html.sidebar-collapsed .sidebar {
    min-width: 260px !important;
}