/**
 * 루트 대시보드 CSS
 *
 * 루트 관리자 전용 대시보드 스타일입니다.
 * Bootstrap 5 기반으로 작성되었습니다.
 *
 * @file css/root-admin.css
 * @see pages/root-admin/dashboard.php
 */

/* ==================== 사이드바 ==================== */

/**
 * 사이드바 카드 스타일
 * 고정 위치 및 스크롤 지원
 */
.root-sidebar {
    position: sticky;
    top: 1rem;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/**
 * 사이드바 메뉴 활성화 상태
 * 노란색(warning) 테마 적용
 */
.root-sidebar .list-group-item.active {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.root-sidebar .list-group-item.active:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

/**
 * 사이드바 메뉴 호버 효과
 */
.root-sidebar .list-group-item:not(.active):hover {
    background-color: #fff3cd;
}

/* ==================== 통계 카드 ==================== */

/**
 * 통계 카드 기본 스타일
 * 호버 시 살짝 떠오르는 효과
 */
.root-stat-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.root-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/**
 * 통계 아이콘 컨테이너
 * 원형 아이콘 배경
 */
.root-stat-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/**
 * 통계 숫자 스타일
 * 큰 폰트로 강조
 */
.root-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

/* ==================== 테이블 ==================== */

/**
 * 🔧 table-responsive 내 드롭다운 메뉴 오버플로우 해결
 *
 * 문제: table-responsive의 overflow-x: auto가 드롭다운 메뉴를 클리핑함
 * 특히 테이블 행이 적을 때 (검색 결과 1개 등) 더 심각함
 *
 * 해결 방법:
 * 1. 모든 부모 컨테이너의 overflow를 visible로 설정
 * 2. dropdown-menu에 position: fixed 적용
 * 3. 충분한 z-index 확보
 * 4. HTML에서 data-bs-boundary="viewport" 추가 필요
 *
 * 주의: 이 스타일은 루트 대시보드 페이지에만 적용됩니다.
 */

/* 테이블 컨테이너의 overflow 제거 */
#root-dashboard-app .table-responsive {
    overflow: visible !important;
}

/* 카드 바디의 overflow 제거 */
#root-dashboard-app .card-body {
    overflow: visible !important;
}

/* 카드 자체의 overflow 제거 */
#root-dashboard-app .card {
    overflow: visible !important;
}

/* 드롭다운 메뉴 스타일 */
#root-dashboard-app .dropdown-menu {
    position: absolute !important;
    z-index: 1050 !important;
}

/* 드롭다운이 열렸을 때 메뉴 표시 보장 */
#root-dashboard-app .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/**
 * 테이블 행 호버 효과
 * 클릭 가능한 행에 적용
 */
.root-table-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.root-table-row:hover {
    background-color: #fff3cd !important;
}

/**
 * 테이블 헤더 스타일
 */
.table thead th {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.875rem;
}

/**
 * 테이블 셀 수직 정렬
 */
.table tbody td {
    vertical-align: middle;
}

/* ==================== 카드 공통 ==================== */

/**
 * 카드 헤더 스타일
 */
.card-header {
    font-weight: 600;
    font-size: 0.9rem;
}

/**
 * 카드 그림자 효과
 */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==================== 페이지네이션 ==================== */

/**
 * 페이지네이션 활성 상태
 * 노란색(warning) 테마
 */
.pagination .page-item.active .page-link {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.pagination .page-link {
    color: #6c757d;
}

.pagination .page-link:hover {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #212529;
}

/* ==================== 배지 ==================== */

/**
 * 배지 크기 조정
 */
.badge {
    font-weight: 500;
}

/* ==================== 반응형 ==================== */

/**
 * 모바일에서 사이드바 고정 해제
 */
@media (max-width: 767.98px) {
    .root-sidebar {
        position: relative;
        top: 0;
    }

    /* 통계 카드 크기 조정 */
    .root-stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .root-stat-number {
        font-size: 1.75rem;
    }

    /* 테이블 폰트 크기 조정 */
    .table {
        font-size: 0.875rem;
    }
}

/**
 * 태블릿 대응
 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .root-stat-number {
        font-size: 2rem;
    }
}

/* ==================== 차트 영역 ==================== */

/**
 * 차트 컨테이너
 */
#statsChart {
    max-height: 300px;
}

/* ==================== 로딩 상태 ==================== */

/**
 * 스피너 애니메이션 속도 조정
 */
.spinner-border {
    animation-duration: 0.75s;
}

/* ==================== 빠른 링크 ==================== */

/**
 * 빠른 링크 호버 효과
 */
.card-body a:hover {
    color: #ffc107 !important;
}

/* ==================== 유틸리티 ==================== */

/**
 * 경고색 배경 서브틀
 * Bootstrap 5.3 이하 버전 호환
 */
.bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

.bg-primary-subtle {
    background-color: rgba(13, 110, 253, 0.15) !important;
}

.bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.15) !important;
}