/* Pretendard 폰트 적용 */
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/PretendardVariable.ttf') format('truetype'),
         url('../fonts/PretendardVariable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


body {
    font-size:14px;
    font-family: 'Pretendard' !important;
}

/* =============================================
   커머스 OS — #00AD50 메인 컬러 대비 보정
   ============================================= */

/* 1. 사이드바(colored) 위 active 메뉴 가시성
      — 흰 배경 + 진한 녹색 텍스트로 명확히 구분 */
[data-sidebar-theme="colored"] .sidebar-item.active > .sidebar-link,
[data-sidebar-theme="colored"] .sidebar-item > .sidebar-link.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* 2. 사이드바 hover 상태 */
[data-sidebar-theme="colored"] .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* 3. 사이드바 위 헤더(그룹 제목) 대비 강화 */
[data-sidebar-theme="colored"] .sidebar-header {
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

/* 4. primary 버튼 — 흰 글자 명확히 */
.btn-primary {
    color: #fff !important;
    font-weight: 500;
}
.btn-primary:hover {
    background-color: #009944 !important;
    border-color: #009944 !important;
}

/* 5. badge-subtle-primary — 연두색 배경 위 텍스트 대비 */
.badge-subtle-primary {
    background-color: rgba(0, 173, 80, 0.15) !important;
    color: #007a38 !important;
}

/* 6. badge-subtle-success — primary와 구분되도록 더 진한 녹색 */
.badge-subtle-success {
    background-color: rgba(13, 138, 62, 0.13) !important;
    color: #0d5c28 !important;
}

/* 7. text-primary — 가독성 확보 */
.text-primary {
    color: #009944 !important;
}

/* 8. 신호등 뱃지 명확한 색상 정의 */
.badge.bg-success {
    background-color: #0d8a3e !important;
    color: #fff !important;
}

/* 9. progress-bar bg-success 구분 */
.progress-bar.bg-success {
    background-color: #0d8a3e !important;
}

/* 10. 손익 테이블 text-success 대비 */
.text-success {
    color: #0d8a3e !important;
}

/* 11. 카드 border-success */
.border-success {
    border-color: #0d8a3e !important;
}

/* 12. border-start-3 유틸리티 */
.border-start-3 {
    border-left-width: 3px !important;
}
.border-top-3 {
    border-top-width: 3px !important;
}

/* 13. avatar subtle 배경 */
.bg-primary-subtle {
    background-color: rgba(0, 173, 80, 0.12) !important;
}
.bg-success-subtle {
    background-color: rgba(13, 138, 62, 0.12) !important;
}
.bg-warning-subtle {
    background-color: rgba(229, 165, 75, 0.15) !important;
}
.bg-danger-subtle {
    background-color: rgba(217, 83, 79, 0.12) !important;
}
.bg-info-subtle {
    background-color: rgba(31, 155, 207, 0.12) !important;
}

/* 14. 네비게이션 바 유저 이름 가시성 */
.navbar-bg .nav-link,
.navbar-bg .nav-link span {
    color: #495057 !important;
}

/* 15. 테이블 hover row */
.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 173, 80, 0.04);
}

/* =============================================
   ROAS 상태 인디케이터 컴포넌트
   ============================================= */
.roas-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1;
}
.roas-indicator .roas-val {
    font-size: 0.95rem;
    font-weight: 700;
}
.roas-indicator .roas-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.roas-indicator.good .roas-val,
.roas-indicator.good .roas-label { color: #0d8a3e; }

.roas-indicator.hold .roas-val,
.roas-indicator.hold .roas-label { color: #8a6200; }

.roas-indicator.bad .roas-val,
.roas-indicator.bad .roas-label  { color: #c0392b; }

/* 신호등 dot */
.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.good   { background: #0d8a3e; box-shadow: 0 0 0 3px rgba(13,138,62,.15); }
.status-dot.hold   { background: #d4a017; box-shadow: 0 0 0 3px rgba(212,160,23,.15); }
.status-dot.bad    { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }

/* 범례 pill */
.legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
}
.legend-pill.good { background: rgba(13,138,62,.1);  color: #0d8a3e; }
.legend-pill.hold { background: rgba(212,160,23,.12); color: #8a6200; }
.legend-pill.bad  { background: rgba(192,57,43,.1);  color: #c0392b; }