/* Choices.js 커스텀 스타일 - Tailwind와 일관된 디자인 */

/* 기본 컨테이너 스타일 */
.choices {
  position: relative;
  margin-bottom: 0;
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #fff;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  min-height: 2.5rem;
  overflow: hidden;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-width 0.15s ease-in-out;
}

/* 포커스 시 테두리를 더 두껍게 하고 색상 강조 */
.choices__inner:focus,
.choices.is-focused .choices__inner {
  outline: none;
  border-color: #6b7280; /* gray-500 */
  border-width: 2px; /* 테두리 두껍게 */
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1); /* 그레이 그림자 효과 */
  padding: calc(0.375rem - 1px) calc(0.75rem - 1px); /* 테두리 두꺼워진 만큼 패딩 조정 */
}

/* 드롭다운이 열려있을 때도 동일한 포커스 스타일 적용 */
.choices.is-open .choices__inner {
  border-color: #6b7280; /* gray-500 */
  border-width: 2px; /* 테두리 두껍게 */
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
  padding: calc(0.375rem - 1px) calc(0.75rem - 1px); /* 테두리 두꺼워진 만큼 패딩 조정 */
}

/* 멀티 선택 아이템 스타일 */
.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  border-radius: 9999px; /* rounded-full */
  background-color: #e5e7eb !important; /* gray-200 */
  color: #374151 !important; /* gray-700 */
  border: 0 !important;
  border-color: transparent !important;
}

/* Choices.js의 기본 하이라이트 색상 오버라이드 */
.choices[data-type*="select-multiple"] .choices__inner .choices__item {
  background-color: #e5e7eb !important; /* gray-200 */
  border: 1px solid #e5e7eb !important; /* gray-200 */
  color: #374151 !important; /* gray-700 */
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #d1d5db !important; /* gray-300 */
  color: #1f2937 !important; /* gray-800 */
  border-color: #d1d5db !important; /* gray-300 */
}

/* 선택된 항목 클릭 시 포커스 스타일 */
.choices__list--multiple .choices__item:focus {
  outline: 2px solid #9ca3af !important; /* gray-400 */
  outline-offset: -2px !important;
  box-shadow: none !important;
}

.choices__list--multiple .choices__item:focus-visible {
  outline: 2px solid #9ca3af !important; /* gray-400 */
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* is-highlighted 상태의 모든 스타일 오버라이드 */
.choices__item.is-highlighted,
.choices__list--multiple .choices__item.is-highlighted,
.choices__list--multiple .choices__item.is-highlighted:focus,
.choices__list--multiple .choices__item.is-highlighted:hover,
.choices__list--multiple .choices__item.is-highlighted:active {
  background-color: #d1d5db !important; /* gray-300 */
  color: #1f2937 !important; /* gray-800 */
  box-shadow: none !important;
  border: none !important;
  outline: 2px solid #9ca3af !important; /* gray-400 */
  outline-offset: -2px !important;
}

/* 초기 로드 시 기본 스타일 강제 적용 */
.choices[data-type*="select-multiple"] .choices__inner .choices__item,
.choices[data-type*="select-multiple"] .choices__inner .choices__item.is-selected,
.choices[data-type*="select-multiple"] .choices__inner .choices__item.is-highlighted.is-selected {
  background-color: #e5e7eb !important; /* gray-200 */
  border: 1px solid #e5e7eb !important; /* gray-200 */
  color: #374151 !important; /* gray-700 */
}

/* 제거 버튼 스타일 */
.choices__button {
  text-indent: -9999px;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-image: none !important; /* 기본 이미지 제거 */
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-left: 0.125rem !important; /* 여백 더 줄임 - 2px */
  padding: 0;
  width: 1rem;
  height: 1rem;
  position: relative;
}

/* 제거 버튼 앞의 구분선 제거 */
.choices__list--multiple .choices__item::after {
  display: none !important;
}

/* 버튼 앞의 border 제거 */
.choices__list--multiple .choices__item .choices__button {
  border-left: none !important;
}

/* 기본 X 이미지 제거를 위한 pseudo element */
.choices__button::before {
  display: none !important;
}

/* 아이템과 버튼 사이의 모든 border 제거 */
.choices[data-type*="select-multiple"] .choices__button {
  border-left: none !important;
}

/* 새로운 X 버튼 스타일 */
.choices__button::after {
  content: '×' !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(50% - 1px) !important; /* 1px 위로 이동 */
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  color: #6b7280 !important; /* gray-500 */
  font-weight: normal !important;
  display: block !important;
}

.choices__button:hover::after {
  color: #374151 !important; /* gray-700 */
}

/* 드롭다운 스타일 */
.choices__list--dropdown {
  visibility: hidden;
  z-index: 10;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #d1d5db; /* gray-300 */
  top: 100%;
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.choices__list--dropdown.is-active {
  visibility: visible;
}

/* 드롭다운 아이템 스타일 */
.choices__list--dropdown .choices__item {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.choices__list--dropdown .choices__item--selectable {
  padding-right: 2rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f3f4f6; /* gray-100 */
}

/* 검색 입력 스타일 */
.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #fff;
  font-size: 0.875rem;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 0.25rem 0;
}

.choices__input:focus {
  outline: 0;
}

/* 플레이스홀더 스타일 */
.choices__placeholder {
  opacity: 0.5;
  color: #6b7280; /* gray-500 */
}

/* 에러 상태 */
.choices.is-invalid .choices__inner {
  border-color: #ef4444; /* red-500 */
}

.choices.is-invalid .choices__inner:focus,
.choices.is-invalid.is-focused .choices__inner {
  border-color: #ef4444; /* red-500 */
  border-width: 2px; /* 에러 상태에서도 포커스 시 테두리 두껍게 */
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); /* 에러 상태에서도 그림자 효과 */
  padding: calc(0.375rem - 1px) calc(0.75rem - 1px); /* 테두리 두꺼워진 만큼 패딩 조정 */
}

/* 비활성화 상태 */
.choices.is-disabled .choices__inner {
  background-color: #f3f4f6; /* gray-100 */
  cursor: not-allowed;
  user-select: none;
}

.choices.is-disabled .choices__input {
  background-color: #f3f4f6; /* gray-100 */
  cursor: not-allowed;
  user-select: none;
}