/* static/css/custom_styles.css */

/* 리소스 할당시 유저 검색에 다크테마 적용이 안되는 것 방지용 */

/* Select2 컨테이너 기본 스타일 조정 (Bootstrap 5 form-control 과 유사하게) */
.select2-container--bootstrap-5 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px); /* var(--bs-body-font-size) * var(--bs-form-select-line-height) + var(--bs-form-select-padding-y) * 2 + var(--bs-form-select-border-width) * 2 와 유사 */
    padding: var(--bs-form-select-padding-y) var(--bs-form-select-padding-x);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color); /* Bootstrap 변수 사용 */
    background-color: var(--bs-body-bg); /* Bootstrap 변수 사용 */
    border: 1px solid var(--bs-border-color); /* Bootstrap 변수 사용 */
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* 선택된 항목 텍스트 정렬 및 색상 */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
    line-height: 1.5; /* 기본값 또는 조정 */
    padding-left: 0;
    padding-right: 0;
}

/* 화살표 아이콘 정렬 */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem); /* 내부 아이템 높이에 맞춤 */
    top: 50%;
    transform: translateY(-50%);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bs-body-color) transparent transparent transparent; /* Bootstrap 변수 사용 고려 */
}
.select2-container--bootstrap-5.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--bs-body-color) transparent; /* Bootstrap 변수 사용 고려 */
}


/* 드롭다운 패널 스타일 */
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent); /* Bootstrap 변수 사용 */
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), .15); /* Bootstrap 드롭다운 그림자와 유사하게 */
}

/* 드롭다운 내 검색창 스타일 */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg); /* Bootstrap 변수 사용 */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm); /* 약간 작은 radius */
    padding: var(--bs-form-select-padding-y) var(--bs-form-select-padding-x);
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bs-primary); /* 부트스트랩 primary 색상 */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}


/* 드롭다운 결과 항목 스타일 */
.select2-container--bootstrap-5 .select2-results__option {
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    color: var(--bs-body-color);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* 드롭다운 결과 항목 호버/포커스 스타일 */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    color: var(--bs-primary-text-emphasis); /* Bootstrap 변수 */
    background-color: var(--bs-primary-bg-subtle); /* Bootstrap 변수 */
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--bs-dropdown-link-active-bg);
}

/* "더 많은 결과 로딩 중..." 메시지 스타일 */
.select2-container--bootstrap-5 .select2-results__option--loading {
    color: var(--bs-secondary-color);
}

/* "결과 없음" 메시지 스타일 */
.select2-container--bootstrap-5 .select2-results__message {
    color: var(--bs-secondary-color);
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
}

/* 선택 해제(X) 버튼 스타일 (allowClear: true 사용 시) */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    /* 필요시 스타일 조정 */
    color: var(--bs-secondary-color);
    font-size: 1.2em; /* 아이콘 크기 조정 */
    right: 2.5rem; /* 화살표 왼쪽에 위치하도록 조정 */
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    color: var(--bs-danger);
}

/* static/css/custom_styles.css 또는 컴파일된 tables.css */
/* 왜 테이블에 다크 테마가 부분적으로만 적용되는지 미스테리 */


/* --- 다크 모드 스타일 --- */
html[data-bs-theme="dark"] {

    /* 일반 테이블 헤더 (thead에 table-light 클래스가 없을 경우) */
    .table > thead > tr > th {
        color: var(--bs-body-color); /* 다크 모드 기본 텍스트 색상 */
        background-color: var(--bs-tertiary-bg); /* 다크 모드 테이블 배경과 유사하게 */
        border-color: var(--bs-border-color-translucent);
    }

    /* ★★★ thead에 table-light 클래스가 적용된 경우의 스타일 덮어쓰기 ★★★ */
    .table thead.table-light th { /* a 태그가 아닌 th 자체에 배경과 글자색 적용 */
        color: var(--bs-body-color); /* 예: Bootstrap 다크 모드의 기본 텍스트 색상 */
        background-color: #343a40;  /* 예: Bootstrap의 $gray-800 과 유사한 어두운 색 */
                                     /* 또는 var(--bs-emphasis-color) 에 맞춰 var(--bs-secondary-bg) 등 */
        border-color: #495057;      /* 예: Bootstrap의 $gray-700 과 유사한 테두리 색 */
        text-decoration: none
    }

    /* thead.table-light 내부의 a 태그 색상 */
    .table thead.table-light th a {
        color: var(--bs-body-color); /* 부모 th의 색상을 상속받도록 (가장 간단) */
        text-decoration: none
    }
    .table thead.table-light th a:hover {
        color: var(--bs-body-color); /* 다크 모드 링크 호버 색상 */
    }

    /* thead.table-light 내부의 Font Awesome 아이콘 색상 */
    .table thead.table-light th a .fas {
        color: inherit; /* 링크 색상 상속 */
    }

    /* --- (선택 사항) 테이블 전체에 대한 다크 모드 기본 스타일 --- */
    
    .table {
        --bs-table-color: var(--bs-body-color);
        --bs-table-bg: var(--bs-secondary-bg);
        --bs-table-border-color: var(--bs-border-color-translucent);
        --bs-table-striped-color: var(--bs-body-color);
        --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.03);
        --bs-table-active-color: var(--bs-body-color);
        --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.06);
        --bs-table-hover-color: var(--bs-body-color);
        --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.045);
    }

}