/* ============================================================
   통계 페이지 공통 CSS — admin-service 모든 통계 화면에서 동일 룩
   ------------------------------------------------------------
   대상 페이지:
     - 구직자/채용자/위촉/DB판매자/연간회원 통계
     - 라이선스/포인트/콘텐츠/DB판매/환불 통계 (recruitment/license/*)
     - 인재찾기 통계 (talent/exposures/*)

   사용 패턴:
     <div class="conts-area">
       <div class="stat-filter-bar">           ← 필터 + 액션 버튼
         <div class="stat-filter-left">…</div>
         <div class="stat-filter-right">…</div>
       </div>

       <div class="stat-table-container">       ← 흰 박스 + 가로 스크롤
         <table class="stat-table">
           <thead><tr><th class="col-no">No.</th>…</tr></thead>
           <tbody>
             <tr>
               <td class="no-cell">…</td>
               <td class="day-cell">…</td>
               <td class="data-cell">…</td>
             </tr>
           </tbody>
           <tfoot>
             <tr class="total-row">
               <td class="total-label" colspan="2">월간총계</td>
               <td class="total-cell">…</td>
             </tr>
           </tfoot>
         </table>
       </div>

       <div th:replace="fragments/common/pagingBar :: pagingBar(...)"></div>
     </div>

   - 외곽 wrapper(.conts-area / pagingBar) 는 기존 single-grid 사상 그대로 사용.
   - 버튼은 admin 공용 룰(.krds-btn small btn-search/btn-reset/btn-edit) 그대로.
   - 페이지 CSS 에서 이 파일의 클래스(.stat-*, .col-*, .no-cell/day-cell/data-cell,
     .total-row/-label/-cell, .change-rate) 를 재정의하지 않는다.
   ============================================================ */

/* ── 필터 바 ─────────────────────────────────────────── */

.stat-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 10px;
}

.stat-filter-left,
.stat-filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stat-filter-bar .krds-form-input,
.stat-filter-bar .krds-form-select,
.stat-filter-bar input[type="month"],
.stat-filter-bar input[type="date"] {
    height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 12px;
    cursor: pointer;
}

.stat-filter-bar .krds-form-input:focus,
.stat-filter-bar .krds-form-select:focus,
.stat-filter-bar input[type="month"]:focus,
.stat-filter-bar input[type="date"]:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.stat-filter-bar .stat-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-strong);
}

.stat-filter-bar .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text);
    cursor: pointer;
}

.stat-filter-bar .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* ── 통계 테이블 ─────────────────────────────────────── */

.stat-table-container {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow-x: auto;
}

.stat-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
    font-size: 12px;
}

/* 헤더 */
.stat-table thead th {
    background-color: var(--color-bg-alt);
    color: var(--color-text-strong);
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--color-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 컬럼 너비 표준 */
.stat-table .col-no    { width: 50px;  min-width: 50px; }
.stat-table .col-day   { width: 56px;  min-width: 56px; }
.stat-table .col-label { width: 160px; min-width: 160px; }
.stat-table .col-data  { width: 120px; min-width: 110px; }

/* 바디 */
.stat-table tbody td {
    padding: 8px;
    text-align: right;
    border: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
    background-color: #ffffff;
}

.stat-table tbody tr:hover td {
    background-color: #f0f9ff;
}

/* 셀 정렬 변형 */
.stat-table .no-cell {
    text-align: center !important;
    font-weight: 500;
    color: var(--color-text-muted);
}

.stat-table .day-cell {
    text-align: center !important;
    font-weight: 600;
    color: var(--color-text-strong);
}

.stat-table .label-cell {
    text-align: left !important;
    color: var(--color-text-strong);
}

.stat-table .data-cell {
    text-align: right;
    white-space: nowrap;
}

/* 클릭 가능한 데이터 셀 (탈퇴 상세 등) */
.stat-table .link-cell {
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
}

.stat-table .link-cell:hover {
    color: var(--color-primary-hover);
}

/* 빈 데이터 / 로딩 셀 */
.stat-table .empty-cell {
    text-align: center !important;
    padding: 40px 8px !important;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── 증감률 표시 ─────────────────────────────────────── */

.stat-table .change-rate {
    font-weight: 500;
    margin-left: 4px;
    font-size: 11px;
}

.stat-table .change-rate.positive {
    color: #dc2626;
}

.stat-table .change-rate.negative {
    color: #2563eb;
}

.stat-table .prev-month-label {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}

/* ── 푸터 (월간/연간/총계) ────────────────────────────── */

.stat-table thead .total-row td,
.stat-table tfoot .total-row td,
.stat-table thead .total-label,
.stat-table tfoot .total-label,
.stat-table thead .total-cell,
.stat-table tfoot .total-cell {
    background-color: #fff7ed;
    color: var(--color-text-strong);
    font-weight: 600;
    border: 1px solid var(--color-border);
    padding: 10px 8px;
    white-space: nowrap;
}

.stat-table thead .total-label,
.stat-table tfoot .total-label {
    text-align: center !important;
}

.stat-table thead .total-cell,
.stat-table tfoot .total-cell {
    text-align: right;
}

/* 총계(월간총계 등)는 헤더 행 바로 아래(표 상단)에 노출한다.
   thead 안에 총계 <tr class="total-row"> 를 두는 방식으로 배치를 고정한다.
   (tfoot + display:table-header-group 은 thead 가 있으면 브라우저가 무시하므로 쓰지 않는다.) */

/* ── 카드/요약 박스 (선택사용) ────────────────────────── */
/* 통계 페이지 상단에 "이번달 가입 / 누적 / 활성 등" 카드가 있을 때 사용 */

.stat-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.stat-summary-card {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-summary-card .stat-card-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.stat-summary-card .stat-card-value {
    font-size: 18px;
    color: var(--color-text-strong);
    font-weight: 700;
}

.stat-summary-card .stat-card-sub {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── 레거시 호환 — 기존 페이지 클래스(.filter-container/.statistics-table-*) 매핑 ────────────
   기존 페이지들이 점진적으로 .stat-* 로 마이그레이션되는 동안에도 동일 룩을 받도록.
   신규 페이지에서는 .stat-* 만 사용. */

.filter-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 10px;
}

.filter-container .filter-left,
.filter-container .filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-container .krds-form-select,
.filter-container .krds-form-input,
.filter-container input[type="month"],
.filter-container input[type="date"] {
    height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 12px;
    cursor: pointer;
}

.filter-container .krds-form-select:focus,
.filter-container .krds-form-input:focus,
.filter-container input[type="month"]:focus,
.filter-container input[type="date"]:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 엑셀 다운로드 등 우측 액션 버튼 — admin 공용 .krds-btn 룩에 맞춤 */
.excel-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 4px 12px;
    background-color: #ffffff;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.excel-download-btn:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-text-disabled);
}

.excel-download-btn:active {
    background-color: var(--color-bg-strong);
}

/* 기존 .statistics-table-container / .statistics-table 매핑 */
.statistics-table-container {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow-x: auto;
}

.statistics-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
    font-size: 12px;
}

.statistics-table thead th {
    background-color: var(--color-bg-alt);
    color: var(--color-text-strong);
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.statistics-table .col-no    { width: 50px;  min-width: 50px; }
.statistics-table .col-day   { width: 56px;  min-width: 56px; }
.statistics-table .col-label { width: 160px; min-width: 160px; }
.statistics-table .col-data  { width: 120px; min-width: 110px; }

.statistics-table tbody td {
    padding: 8px;
    text-align: right;
    border: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
    background-color: #ffffff;
}

.statistics-table tbody tr:hover td {
    background-color: #f0f9ff;
}

.statistics-table .no-cell {
    text-align: center !important;
    font-weight: 500;
    color: var(--color-text-muted);
}

.statistics-table .day-cell {
    text-align: center !important;
    font-weight: 600;
    color: var(--color-text-strong);
}

.statistics-table .label-cell {
    text-align: left !important;
    color: var(--color-text-strong);
}

.statistics-table .data-cell {
    text-align: right;
    white-space: nowrap;
}

.statistics-table .link-cell {
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
}

.statistics-table .link-cell:hover {
    color: var(--color-primary-hover);
}

.statistics-table .change-rate {
    font-weight: 500;
    margin-left: 4px;
    font-size: 11px;
}

.statistics-table .change-rate.positive { color: #dc2626; }
.statistics-table .change-rate.negative { color: #2563eb; }

.statistics-table .prev-month-label {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}

.statistics-table thead .total-row td,
.statistics-table tfoot .total-row td,
.statistics-table thead .total-label,
.statistics-table tfoot .total-label,
.statistics-table thead .total-cell,
.statistics-table tfoot .total-cell {
    background-color: #fff7ed;
    color: var(--color-text-strong);
    font-weight: 600;
    border: 1px solid var(--color-border);
    padding: 10px 8px;
    white-space: nowrap;
}

.statistics-table thead .total-label,
.statistics-table tfoot .total-label { text-align: center !important; }
.statistics-table thead .total-cell,
.statistics-table tfoot .total-cell  { text-align: right; }

/* 페이징 컨테이너 룩은 /css/common/grid-paging.css 단일 정본.
   통계 페이지도 동일 룩을 받도록 여기서는 재정의하지 않는다. */