/* ============================================================
   Components — CM-style shell overrides + new components
   - 기존 .tb / .sectabs / .sectab / .btn 등을 CM 룩으로 오버라이드
   - 신규 .card / .kpi / .btn-primary / .stat-chip / .ip-badge 추가
   ============================================================ */

/* ====================  TOPBAR (.tb override)  ==================== */
.tb {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  height: auto !important;
  padding: 12px 24px !important;
  position: relative;
  gap: 16px;
}
.tb::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, #8B5CF6 50%, #EC4899 100%);
}
.tb .logo {
  background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
  color: #fff !important;
  width: 36px; height: 36px;
  border-radius: var(--radius);
}
.tb-ttl { color: var(--fg); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.tb-sub { color: var(--fg-muted); font-size: 11px; letter-spacing: .04em; }

/* ====================  CONNECTION BADGE  ==================== */
.conn {
  padding: 6px 12px !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600;
}
.cok  { color: #047857 !important; border-color: rgba(16,185,129,.4) !important; background: rgba(16,185,129,.10) !important; }
.cerr { color: #B91C1C !important; border-color: rgba(239,68,68,.4) !important; background: rgba(239,68,68,.10) !important; }
.cwait{ color: #B45309 !important; border-color: rgba(245,158,11,.4) !important; background: rgba(245,158,11,.10) !important; }

/* ====================  CACHE BAR  ==================== */
.cachebar {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.cb-ttl { color: var(--fg) !important; }
.cb-sub { color: var(--fg-muted) !important; }

/* ====================  SECTION TABS (.sectabs / .sectab override)  ==================== */
.sectabs {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 24px !important;
  gap: 4px !important;
  box-shadow: none !important;
}
.sectab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg-muted) !important;
  letter-spacing: -.005em;
  font-family: var(--font-sans);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.sectab:hover {
  color: var(--fg) !important;
  background: transparent !important;
  border-bottom-color: var(--border-hi) !important;
}
.sectab.on,
.sectab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
}

/* ====================  BUTTONS (.btn 변형 오버라이드)  ==================== */
.btn {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .12s;
  letter-spacing: -.005em;
}
.btn.bp {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 6px rgba(99,102,241,.3);
}
.btn.bp:hover { background: var(--primary-600) !important; box-shadow: 0 4px 12px rgba(99,102,241,.4); }
.btn.bo {
  background: var(--bg-1) !important;
  color: var(--fg) !important;
  border-color: var(--border-hi) !important;
  box-shadow: var(--shadow-sm);
}
.btn.bo:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--bg-2) !important; }
.btn.bprint {
  background: var(--bg-1) !important;
  color: var(--fg-muted) !important;
  border-color: var(--border-hi) !important;
}
.btn.bprint:hover { color: var(--primary) !important; border-color: var(--primary) !important; }

/* ====================  YEAR SELECT  ==================== */
.sel {
  background: var(--bg-1) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--radius) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500;
}

/* ====================  CARD (new component)  ==================== */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap;
}
.card-title {
  font-size: 16px; font-weight: 700;
  color: var(--fg); letter-spacing: -.01em;
}
.card-sub { font-size: 12px; color: var(--fg-muted); }
.card-actions { display: flex; gap: 8px; align-items: center; }

/* ====================  KPI ROW  ==================== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kpi-label {
  font-size: 12px; letter-spacing: .02em;
  color: var(--fg-muted); font-weight: 600;
}
.kpi-value {
  font-size: 30px; font-weight: 700;
  color: var(--fg); margin-top: 6px;
  line-height: 1.1; letter-spacing: -.02em;
  font-family: var(--font-sans);
}
.kpi-sub { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }

/* ====================  STATUS CHIP  ==================== */
.stat-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 11px; font-weight: 700;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-muted);
  white-space: nowrap;
}
.stat-chip.ok      { background: #D1FAE5; color: #065F46; }
.stat-chip.warn    { background: #FEF3C7; color: #92400E; }
.stat-chip.danger  { background: #FEE2E2; color: #991B1B; }
.stat-chip.info    { background: #DBEAFE; color: #1E40AF; }
.stat-chip.primary { background: var(--primary-100); color: var(--primary-700); }
.stat-chip.muted   { background: var(--bg-3); color: var(--fg-muted); }

/* Dark 모드용 stat-chip 톤 조정 */
:root[data-theme="dark"] .stat-chip.ok      { background: rgba(16,185,129,.18); color: #6EE7B7; }
:root[data-theme="dark"] .stat-chip.warn    { background: rgba(245,158,11,.18); color: #FCD34D; }
:root[data-theme="dark"] .stat-chip.danger  { background: rgba(239,68,68,.18);  color: #FCA5A5; }
:root[data-theme="dark"] .stat-chip.info    { background: rgba(14,165,233,.18); color: #93C5FD; }
:root[data-theme="dark"] .stat-chip.primary { background: rgba(99,102,241,.22); color: #C7D2FE; }

/* ====================  IP-STYLE BADGE  ==================== */
.ip-badge {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}
.ip-badge:hover { border-color: var(--primary); color: var(--primary); }

/* ====================  THEME TOGGLE BUTTON  ==================== */
.theme-toggle {
  background: var(--bg-1) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--radius) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  cursor: pointer;
  transition: all .12s;
  letter-spacing: -.005em;
  box-shadow: var(--shadow-sm);
}
.theme-toggle:hover { border-color: var(--primary) !important; color: var(--primary) !important; }