/**
 * EDMS Select2 — common.css / overwrite.css 에서 이관한 앱 전용 스타일.
 * 로드 순서: vendor select2 + bootstrap-5 theme → … → common.css → 본 파일 (html.php).
 */
/* ── Select2 (default theme) ─────────────────────────────────── */
.select2-container .select2-selection--single {
    padding: 10px 16px !important;
    border: 1px solid var(--bs-border-muted);
    border-radius: 20px !important;
    background-color: #ffffff !important;
    font-size: var(--font-normal) !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    height: 40px;
    outline: none !important;
    box-shadow: none !important;
    background-position: right 20px center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    color: var(--bs-text) !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 16px !important;
    top: 0 !important;
}

/* 화살표 자리 비우기 ─────────────────────────────────────────
 * 화살표는 셀렉션의 배경 아이콘(오른쪽 끝에서 20px 지점 · 폭 16px)이라 오른쪽 36px 을 비워야 한다.
 * 그런데 셀렉션의 padding-right 는 16px 뿐이고 위 rendered 룰이 padding 을 0 으로 눌러,
 * 값이 길면 말줄임이 화살표 **밑에서** 잘려 글자와 화살표가 겹쳤다
 * (실측: 텍스트 오른쪽 여백 17px < 필요 36px — "Delta Global Services - KLAX · TOILET WATER SERVIC⌄").
 * 20px 을 더해 16+20=36px 을 확보한다. 텍스트는 왼쪽 정렬이라 짧은 값에는 영향이 없다. */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-right: 20px !important;
}

.select2-container .select2-selection__placeholder {
    color: var(--bs-text) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.select2-search__field {
    font-size: var(--font-normal) !important;
}

/* select2-bootstrap-5 테마는 --below/above 에서 border-top/bottom 을 없애고(border-top:0)
 * 셀렉트에 붙는 상/하 모서리를 각지게 만든다 → 상단 모서리에서 좌우 테두리만 남아 "테두리가 끊겨" 보였다.
 * 또 테마가 dropdown 테두리색을 #86b7fe(파랑)로 강제한다. 테마와 같은 specificity 로 덮어써
 * "완전한 테두리 + 전 모서리 라운드"의 떠 있는 카드로 통일한다(본 파일은 테마보다 나중 로드). */
.select2-container--bootstrap-5 .select2-dropdown {
    border: 1px solid var(--bs-border-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-top: 4px;
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
    border-top: 1px solid var(--bs-border-secondary);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--bs-border-secondary);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}

.select2-results__option {
    padding: 10px 16px;
    font-size: var(--font-normal) !important;
    color: #374151;
    background-color: #ffffff;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.select2-results__option:last-child {
    border-bottom: none;
}

.select2-results__option--highlighted {
    background: #3b82f6 !important;
    color: white !important;
}

.select2-results__option--selected {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 500;
}

/* ── optgroup(그룹) 헤더 ─────────────────────────────────────
 * 벤더의 그룹 스타일은 --default 테마 전용이라 이 앱(theme:'bootstrap-5')에는 적용되지 않는다.
 * 손대지 않으면 그룹 이름이 항목과 글자 크기·색이 같아 **항목처럼 읽힌다**
 * (Trip Estimator 의 Ground Handler 업체명이 비용 라벨과 구분되지 않던 원인).
 * 그룹 <li> 는 항목이 아니라 컨테이너이므로 위 .select2-results__option 의 패딩·테두리를 벗기고,
 * 안쪽 <strong class="select2-results__group"> 을 섹션 머리글로 세운다.
 * 다크 대응은 bootstrap.dark.theme.css 7-2 절. */
.select2-results__option--group {
    padding: 0;
    border-bottom: none;
    cursor: default;
}

/* 그룹 안 목록은 스크롤 컨테이너가 되면 안 된다 — .select2-results__options 의 max-height 를
 * 그대로 받으면 업체마다 별도 스크롤이 생겨 목록이 중첩된다. 스크롤은 바깥 하나로 충분하다. */
.select2-results__options--nested {
    max-height: none;
    overflow: visible;
}

/* ⚠️ 뒤의 긴 셀렉터는 select2-bootstrap-5-theme 를 이기기 위한 것 — 그쪽이 같은 속성을
 * (0,6,0)/(0,7,0) 특이도로 잡고 있어(color · padding-left) 짧은 셀렉터만 쓰면 조용히 밀린다(실측).
 * 앞의 짧은 셀렉터는 테마 없이(default) 쓰는 select 대비. 콤마 목록이라 각자 제 특이도를 갖는다. */
.select2-results__group,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
    display: block;
    padding: 8px 16px 4px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    color: #1d4ed8;
    font-size: var(--font-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: default;
}

/* 목록 맨 위 그룹 위에는 구분선이 필요 없다. */
.select2-results__options > .select2-results__option--group:first-child > .select2-results__group {
    border-top: none;
}

/* 그룹에 속한 항목은 한 단 들여써 소속을 보여준다. */
.select2-results__options--nested > .select2-results__option,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option {
    padding-left: 28px;
}

.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-bg-secondary) !important;
    border: 0 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    color: var(--bs-text) !important;
    outline: none !important;
    box-shadow: none !important;
    padding-right: 2.25rem !important;
}

.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--bs-text) !important;
    font-weight: 500 !important;
}

.select2-container--disabled .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

.select2.is-invalid .select2-selection {
    border-color: #dc3545 !important;
}

/* ── Select2 (bootstrap-5 theme) ─────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    font-weight: 500 !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    outline: none;
    box-shadow: 0 0 0 2px rgb(0 168 255 / 39%);
}

.select2-container--bootstrap-5.is-invalid .select2-selection {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0px var(--bs-danger);
}

.select2-container--bootstrap-5.is-invalid .select2-selection:focus {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0px rgba(220, 38, 38, 0.2);
}

/* Select2 값 미선택 시(is-invalid) danger 테두리 — 해당 select에 대응하는 Select2만 적용 */
select.is-invalid + .select2-container .select2-selection {
    border-color: var(--bs-danger) !important;
}

#vendorOverlayAddress .cust-field .select2-container {
    width: 100% !important;
}