/* =========================================================
 * 공통 페이징 바 스타일
 * - 기준 폰트 12px (셀렉트 박스가 "100개" 이내라 작은 사이즈로 통일)
 * - 좌측: 전체 건수, 우측: 페이지 컨트롤(이동 버튼 + 페이지 사이즈 셀렉트)
 * - 모든 페이지가 동일한 느낌으로 사용하도록 공통 fragment 와 함께 사용
 * ========================================================= */

.pagination-bar-container {
    /* 표준 — 그리드 박스 바로 아래에 딱 붙는다.
       single-grid / dual-grid(master section / detail section) / 검색결과 그리드 등
       모든 그리드에서 동일한 baseline 을 갖도록 margin-top 을 0 으로 강제.
       그리드 박스와의 시각 분리는 pagination-bar-container 자체의 background/border 가 담당. */
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.pagination-bar-container .pagination-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 1.4;
    margin-left: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* 좌측 끝 전체 건수 — pagination-bar-container 의 첫 번째 자식으로 위치 */
.pagination-bar-container > .pagination-info {
    font-size: 12px;
    color: #495057;
    margin: 0 auto 0 0;
    padding: 0 4px;
    width: auto;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* 레거시 호환 — 전체 건수가 .pagination-controls 내부에 있는 페이지 */
.pagination-bar-container .pagination-controls .pagination-info {
    order: -1;
    margin-right: auto;
    margin-left: 0;
}

/* 우측 컨트롤 영역 */
.pagination-bar-container .pagination-section {
    margin-left: auto;
}

.pagination-bar-container .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.pagination-bar-container .page-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 페이지 이동/번호 버튼 */
.pagination-bar-container .btn {
    padding: 2px 7px;
    min-width: 24px;
    height: 24px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    color: #495057;
    transition: all 0.15s ease;
}

.pagination-bar-container .btn:hover {
    background: #e9ecef;
}

.pagination-bar-container .btn.active,
.pagination-bar-container .btn-primary {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination-bar-container .btn.active:hover,
.pagination-bar-container .btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
}

/* 페이지 사이즈 셀렉트 — "100개" 이내라 폭 좁힘 */
.pagination-bar-container .form-select {
    padding: 0 18px 0 6px;
    height: 24px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    margin-left: 6px;
    font-size: 12px;
    line-height: 1.4;
    width: 64px;
    background-color: #fff;
}

/* 좌측 부가 버튼 그룹(메시지 발송 등)이 있는 페이지에서 전체 건수와 함께 좌측 정렬 */
.pagination-bar-container .message-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.pagination-bar-container .message-buttons .message-btn {
    padding: 2px 8px;
    height: 24px;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}

.pagination-bar-container .message-buttons .message-btn:hover {
    background: #e9ecef;
}

/* 레거시 호환 — pagination-bar-container 외부에서 단독으로 쓰이는 케이스 */
.pagination-container {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border-soft);
    border-radius: 0 0 6px 6px;
    font-size: var(--font-size-base);
}

/* =========================================================
 * 단독 페이징 셀렉터 (pagination-bar-container 없이 쓰는 페이지용)
 * 페이지 CSS 에서 .pagination-bar / .pagination-section /
 * .pagination-controls / .page-numbers 를 재정의하지 않는다.
 * ========================================================= */

.pagination-section {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-base);
}

/* 페이지 번호 영역 */
.page-numbers {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* 활성 페이지 버튼 — 의미컬러(주요 액션) */
.pagination-controls .btn.page-btn.active,
.pagination-controls .page-btn.active,
.page-numbers .page-btn.active {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

/* 페이지 정보 텍스트 */
.pagination-info {
    font-size: var(--font-size-base);
    color: var(--color-reset);
    white-space: nowrap;
}