/* ===================================
   Tom Select — SNUH 톤 매핑
   - 기본 .ts-default 위에 override
   - .form-control과 동일한 시각언어 (radius-md, border gray-300,
     focus primary-700, hover primary-25)
   =================================== */

/* ===================================
   드롭다운 캐럿 공간 확보 (전역 · 필수)
   =================================== */
/* 벤더 tom-select.default.min.css 는 캐럿 자리를 아래 식으로 확보한다.
     .ts-control:not(.rtl) { padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important; }
   그런데 벤더 :root 의 --ts-pr-clear-button 값이 단위 없는 `0` 이라
   `0 + 2rem` 이 CSS 문법상 무효가 되고, 결과적으로 padding-right 가
   초기값 0 으로 떨어져 캐럿 자리가 사라진다(!important 라 일반 규칙으로 못 덮음).
   → 긴 항목(예: 부서 필터의 '보스턴코리아 공동 연구 지원사업단')이 ▼ 아이콘과 겹쳤다.
   단위만 부여하면 벤더 계산식이 정상 복원된다: max(.75rem, 0px + 2rem) = 32px. */
:root {
  --ts-pr-clear-button: 0px;
}

/* 폭이 좁아 잘릴 때는 말줄임 처리 (캐럿 침범 대신 … 로 끊김) */
.ts-wrapper.single .ts-control > .item {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tom Select가 원본 select의 form-control 클래스를 wrapper에 복사하면서
   생기는 이중 보더/패딩 제거. wrapper는 컨테이너 역할만, 시각은 .ts-control이 담당 */
.ts-wrapper.form-control,
.ts-wrapper.form-control--sm {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  height: auto;
  min-height: 0;
  line-height: normal;
  margin: 0;
  vertical-align: middle;
}
.ts-wrapper.form-control:hover,
.ts-wrapper.form-control:focus,
.ts-wrapper.form-control.focus {
  border: none;
  box-shadow: none;
}

/* 닫힌 컨트롤 — .form-control과 동일 사양 */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-form);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  background-image: none; /* 기본 테마의 회색 그라디언트 제거 */
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: var(--transition);
}

/* hover — .form-control과 동일 (gray-500 border, 파란색 아님) */
.ts-wrapper.single:not(.focus):not(.dropdown-active) .ts-control:hover,
.ts-wrapper.multi:not(.focus):not(.dropdown-active) .ts-control:hover {
  border-color: var(--color-gray-500) !important;
  box-shadow: none !important;
}

/* focus / dropdown-active — .form-control:focus와 동일 (primary-700 + 옅은 shadow) */
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control,
.ts-wrapper.input-active .ts-control {
  border-color: var(--color-primary-700) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;
  outline: none;
}

.ts-wrapper.disabled .ts-control {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

/* placeholder 컬러 */
.ts-control input::placeholder,
.ts-control input::-webkit-input-placeholder {
  color: var(--color-gray-500);
}

/* 드롭다운 화살표 — Tom Select 기본 ::after 유지, 색만 SNUH 톤으로 */
.ts-wrapper.single .ts-control::after {
  border-color: var(--color-gray-700) transparent transparent transparent !important;
  margin-right: var(--space-1);
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  border-color: transparent transparent var(--color-gray-700) transparent !important;
}

/* 열린 드롭다운 박스 */
.ts-dropdown {
  margin-top: var(--space-1);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-form);
}

/* 옵션 */
.ts-dropdown .option {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-regular);
  color: var(--color-gray-700);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--color-primary-25);
  color: var(--color-primary-700);
}

.ts-dropdown .option.selected {
  background-color: var(--color-primary-50);
  color: var(--color-primary-900);
  font-weight: var(--fw-semibold);
}

/* 결과 없음 / 더보기 */
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-500);
  font-style: normal;
}

/* 다중 선택 태그 (multi) */
.ts-wrapper.multi .ts-control > div {
  margin: 2px var(--space-1) 2px 0;
  padding: var(--space-1) 10px;
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-sm);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
}

.ts-wrapper.multi .ts-control > div.active {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

/* 사이즈 변형 — .form-control--sm */
.form-control--sm + .ts-wrapper .ts-control,
.ts-wrapper.form-control--sm .ts-control {
  min-height: 40px;
  padding: var(--space-2) 14px;
  font-size: var(--fs-small);
}