/* ============================================
   jsGrid 페이지네이션을 Bootstrap pagination 스타일로 변환
   ============================================ */

/**
 * jsGrid 페이지네이션 컨테이너 스타일링
 * 
 * 사용 위치:
 * - 모든 통계 페이지 (inbound, outbound, inbound_fail, outbound_fail 등)
 * - 관리 페이지 (user, dept, did, holiday, spam, acl, role, permission, log 등)
 * - 내선번호 상세 페이지 (stat/did.php, stat/cid.php)
 * 
 * 사용 파일:
 * - Views: 모든 통계 및 관리 페이지의 .table-pagination 요소
 * - JS: jsGrid 초기화 시 pagerContainer 옵션으로 지정
 * 
 * 목적: jsGrid의 기본 페이지네이션을 Bootstrap 스타일로 변환하여 일관된 UI 제공
 */
.table-pagination .jsgrid-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 2px;
}

/**
 * 페이지네이션 컨테이너 기본 스타일
 * 
 * 사용 위치: 모든 .table-pagination 요소
 * 목적: 페이지네이션 영역의 기본 폰트 크기 및 색상 설정
 */
.table-pagination {
    font-size: 0.75rem;
    color: var(--text);
}

/**
 * jsGrid 페이지네이션 링크 스타일
 * 
 * 사용 위치: jsGrid 페이지네이션 내부의 링크 요소
 * 목적: 페이지 번호 링크의 기본 스타일 설정
 */
.table-pagination .jsgrid-pager span a {
    color: var(--text);
    text-decoration: none;
}

/**
 * jsGrid 페이지네이션 버튼 스타일 (Bootstrap page-link 스타일 적용)
 * 
 * 사용 위치:
 * - .jsgrid-pager-nav-button: First, Prev, Next, Last 네비게이션 버튼
 * - .jsgrid-pager-page: 페이지 번호 버튼
 * 
 * 목적: jsGrid 페이지네이션 버튼을 Bootstrap pagination 스타일과 일치시킴
 * 
 * 참고: span 영역도 클릭 가능하도록 pointer-events: auto 설정
 */
.table-pagination .jsgrid-pager-nav-button,
.table-pagination .jsgrid-pager-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    margin-right: 1px;
    padding: 2px 10px;
    min-width: 28px;
    height: 28px;
    line-height: 1.4;
    font-size: 0.75rem;
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--input-line);
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
    position: relative;
}

/**
 * jsGrid 페이지네이션 버튼 내부 span 요소 스타일
 * 
 * 사용 위치: .jsgrid-pager-nav-button, .jsgrid-pager-page 내부의 span 요소
 * 목적: span 영역도 클릭 가능하도록 설정하고 전체 영역을 클릭 가능하게 만듦
 */
.table-pagination .jsgrid-pager-nav-button span,
.table-pagination .jsgrid-pager-page span {
    pointer-events: auto;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * jsGrid 페이지네이션 버튼 호버 스타일
 * 
 * 사용 위치:
 * - 활성화된 네비게이션 버튼 (First, Prev, Next, Last)에 마우스 오버 시
 * - 현재 페이지가 아닌 페이지 번호 버튼에 마우스 오버 시
 * 
 * 목적: 버튼에 마우스를 올렸을 때 시각적 피드백 제공
 */
.table-pagination .jsgrid-pager-nav-button:hover:not(.jsgrid-pager-nav-inactive-button),
.table-pagination .jsgrid-pager-page:hover:not(.jsgrid-pager-current-page) {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    border-color: var(--input-line);
}

/**
 * 활성화된 페이지 (현재 페이지) 스타일
 * 
 * 사용 위치: 현재 선택된 페이지 번호 버튼
 * 목적: 현재 페이지를 시각적으로 강조하여 사용자가 현재 위치를 쉽게 인식
 */
.table-pagination .jsgrid-pager-page.jsgrid-pager-current-page {
    background-color: #7c818f;
    border-color: #7c818f;
    color: #fff;
    font-weight: 600;
    cursor: default;
}

/**
 * 비활성화된 네비게이션 버튼 스타일
 * 
 * 사용 위치: First/Prev/Next/Last 버튼이 비활성화된 경우 (첫 페이지/마지막 페이지)
 * 목적: 비활성화된 버튼을 시각적으로 구분하여 클릭 불가능함을 표시
 */
.table-pagination .jsgrid-pager-nav-inactive-button {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/**
 * 모바일 반응형 스타일 (화면 너비 767px 이하)
 * 
 * 사용 위치: 모바일 기기 및 작은 화면
 * 목적: 화면 공간 절약을 위해 First/Prev/Last 버튼 숨김, Next 버튼만 표시
 * 
 * jsGrid 페이지네이션 구조: [First] [Prev] [Pages...] [Next] [Last]
 */
@media (max-width: 767px) {

    /**
     * First 버튼 숨김 (첫 번째 네비게이션 버튼)
     * 모바일에서는 공간 절약을 위해 숨김 처리
     */
    .table-pagination .jsgrid-pager-nav-button:first-of-type {
        display: none !important;
    }

    /**
     * Prev 버튼 숨김 (두 번째 네비게이션 버튼)
     * 모바일에서는 공간 절약을 위해 숨김 처리
     */
    .table-pagination .jsgrid-pager-nav-button:nth-of-type(2) {
        display: none !important;
    }

    /**
     * Last 버튼 숨김 (마지막 네비게이션 버튼)
     * 모바일에서는 공간 절약을 위해 숨김 처리
     */
    .table-pagination .jsgrid-pager-nav-button:last-of-type {
        display: none !important;
    }

    /**
     * 모바일 환경에서 페이지네이션 버튼 크기 조정
     * 
     * 사용 위치: 모바일 화면의 모든 페이지네이션 버튼
     * 목적: 작은 화면에서 버튼 크기를 줄여 공간 절약
     */
    .table-pagination .jsgrid-pager-page,
    .table-pagination .jsgrid-pager-nav-button {
        padding: 2px 8px;
        font-size: 0.7rem;
        min-width: 24px;
        height: 24px;
    }
}