/* ============================================================
   알림 템플릿 선택 팝업 (공용 fragment) — page-agnostic
   ------------------------------------------------------------
   fragments/notificationTemplateSelectPopup.html 의 룩 단일 정본.
   adminHeader :: headerResources 가 자동 로드.
   외곽 .modal-overlay / .modal-box / .modal-header / .modal-body /
   .modal-footer 는 modal.css 가 담당 — 여기는 팝업 내부 컴포넌트
   (필터 바 / 리스트 / 페이저 / 미리보기) 만 정의.
   ============================================================ */

/* 박스 너비 — modal.css 의 기본 룩 위에 사이즈만 override */
#notificationTemplateSelectPopup .modal-box {
    width: 800px;
    max-width: 95vw;
}

/* ===== 검색 필터 바 ===== */
.nts-filter-bar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}

.nts-filter-bar .nts-keyword-input {
    flex: 1;
}

/* ===== 목록 테이블 컨테이너 ===== */
.nts-list-wrap {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
}

/* ===== 목록 테이블 ===== */
.nts-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.nts-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 6px 8px;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.nts-list-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
}

.nts-list-table tbody tr {
    cursor: pointer;
}

.nts-list-table tbody tr:hover {
    background: var(--color-bg-alt);
}

.nts-list-table tbody tr.is-selected {
    background: #eff6ff;
}

.nts-list-table .nts-list-empty td {
    text-align: center;
    padding: 40px 12px;
    color: var(--color-text-disabled);
    cursor: default;
}

.nts-list-table .nts-list-empty:hover {
    background: transparent;
}

.nts-col-radio { width: 40px; text-align: center; }
.nts-col-type  { width: 80px; text-align: center; }
.nts-col-code  { width: 120px; }
.nts-col-use   { width: 70px; text-align: center; }

/* ===== 페이지네이션 ===== */
.nts-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

.nts-pagination .page-btn-small {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    cursor: pointer;
}

.nts-pagination .page-btn-small:hover:not(:disabled) {
    background: var(--color-bg-alt);
    border-color: var(--color-text-disabled);
}

.nts-pagination .page-btn-small:disabled {
    color: var(--color-text-disabled);
    background: var(--color-bg-alt);
    cursor: not-allowed;
}

.nts-pagination .nts-page-info {
    padding: 0 var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* ===== 미리보기 영역 ===== */
.nts-preview {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.nts-preview-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 6px;
}

.nts-preview-title {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin-bottom: 4px;
}

.nts-preview-content {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
}