/*
 * DataTables 2.x + 테마(app.min.css) 호환 정렬 아이콘
 *
 * [구조]
 *   DataTables 2.x 헤더 DOM:
 *   <th class="dt-orderable-asc dt-orderable-desc">
 *     <div class="dt-column-header">          ← app.min.css: display:flex
 *       <span class="dt-column-title">...</span>
 *       <span class="dt-column-order"></span>  ← 아이콘 대상 (기본 width:0)
 *     </div>
 *   </th>
 *
 * [해결]
 *   1. app.min.css의 th::after 비활성화 (DataTables 1.x 방식)
 *   2. .dt-column-order 에 size/position 부여
 *   3. ::after 에 tabler-icons 직접 명시
 */

/* 1. 테마의 th::after 비활성화 */
table.dataTable thead th::after {
    display: none !important;
}

/* 2. .dt-column-header: app.min.css의 padding-right:30px 제거, 텍스트·아이콘 세로 가운데 정렬 */
.dt-column-header {
    padding-right: 0 !important;
    align-items: center;
}

.dt-column-title {
    padding-right: 5px !important;
}

/* 4. .dt-column-order: 렌더링 공간 확보 */
.dt-orderable-asc .dt-column-order,
.dt-orderable-desc .dt-column-order,
.dt-ordering-asc .dt-column-order,
.dt-ordering-desc .dt-column-order {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 20px;
    flex-shrink: 0;
}

/* 5. 정렬 가능한 컬럼: 양방향 화살표 (기본, 반투명) */
.dt-orderable-asc .dt-column-order::after,
.dt-orderable-desc .dt-column-order::after {
    display: block;
    width: 16px;
    line-height: 20px;
    text-align: center;
    font-family: tabler-icons, sans-serif;
    font-size: 14px;
    font-style: normal;
    content: "\eb5a"; /* ti-arrows-sort */
    opacity: 0.4;
    color: var(--ins-secondary-color, #9ba6b7);
}

/* 아이콘 - 현재 오름차순 정렬 중 */
.dt-ordering-asc .dt-column-order::after {
    content: "\eb26"; /* ti-sort-ascending */
    opacity: 1;
}

/* 아이콘 - 현재 내림차순 정렬 중 */
.dt-ordering-desc .dt-column-order::after {
    content: "\eb27"; /* ti-sort-descending */
    opacity: 1;
}

/*
    정렬 활성화 되어 있는 컬럼 하이라이트 기능 (table order-column 클래스 선언 시 활성화)
    dataTables.min.css(기본)에는 내장되어 있으나 dataTables.bootstrap5.min.css에는 없어 직접 정의해서 사용
*/
table.order-column thead th.dt-ordering-asc,
table.order-column thead th.dt-ordering-desc {
    background-color: rgba(0, 0, 0, 0.04);
}

table.order-column tbody td.sorting_1 {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Bootstrap 모달이 열릴 때 body padding-right 자동 추가 방지, 없을 경우 DataTable 영역 표시에 문제가 생김 */
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden;
}

/*
 * DataTable 초기화 전 깜빡임(flash) 방지
 *
 * [적용 방법]
 *   슬롯 div 에 dt-slot 클래스 추가 + 슬롯 or 테이블을 감싸는 태그에 data-dt-area 속성 추가.
 *   ex) <div class="card-body" data-dt-area>
 *          <div class="dt-search-area dt-slot"></div>
 *       </div>
 *
 * [적용 범위]
 *   data-dt-area 속성이 없는 태그는 영향받지 않음 (조건부 셀렉터).
 *   태그 종류·클래스명에 무관 하게 data-dt-area 속성만 있으면 동작함.
 */
[data-dt-area]:has(.dt-slot):not(:has(.dt-slot .dt-search)) {
    visibility: hidden;  /* dataTables 슬롯 영역으로 인해 크기가 잠시 틀어 졌다 돌아 오는 현상 방지 */
    overflow: hidden; /* table-responsive class 선언으로 잠시 가로 크기가 틀어 졌다 돌아 오는 현상 방지 */
}
[data-dt-area]:has(.dt-slot .dt-search) {
    visibility: visible;
}