/*
 * 詳細検索ページ専用のCSS。旧Select2向けの候補入力レイアウト調整
 * （home_detail_search.css）と、layout.scssにあったSelect2オーバーライドを
 * Tom Select向けに書き直し、ここへ統合した。
 *
 * Tom Selectの既定クラスは .ts-wrapper（ルート）> .ts-control（入力欄。
 * 複数選択時は選択済み .item チップと <input> を内包） / .ts-dropdown
 * （候補パネル）> .ts-dropdown-content（候補リスト）> .option（各候補行、
 * 強調中は .active、remove_buttonプラグインのチップ削除ボタンは .remove）
 * という構成。
 */

/*
 * 候補入力欄を上下中央揃えのflexレイアウトにする。
 * なぜなら、既定のブロック表示のままだとプレースホルダーや入力文字が
 * 枠の中心から下へずれるため。
 */
.detail-search-panel .ts-control {
  display: flex;
  align-items: center;
}

.ts-wrapper .ts-control {
  min-height: 42px;
  /* Select2の既定枠（#aaa）をTom Selectでも維持する。 */
  border-color: #aaa;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: none;
  color: var(--color-text);
  font-size: 16px;
}

.ts-wrapper.focus .ts-control {
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.ts-control {
  min-height: 40px;
  padding: 9px 42px 9px 12px;
  color: var(--color-text);
  line-height: 22px;
}

.simple_form .ts-wrapper {
  width: 100%;
}

.detail-search-panel .ts-wrapper {
  width: 100% !important;
}

.detail-search-panel .ts-control {
  min-height: 42px;
  max-height: 106px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  /*
   * developはSelect2の.select2-selection__rendered（縦paddingなし）を
   * .select2-selection--multiple（縦padding 2px×2）が包む二層構造で、
   * 内側の検索欄36px + 縦padding 4px + 枠線2px = 42pxとなる。Tom
   * Selectは.ts-control一層のみのため、縦paddingを2pxにして高さを揃える。
   */
  padding: 2px 7px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Tom Selectのclear-button用!important指定が右paddingを12pxへ戻すため、Select2と同じ7pxへ固定する。 */
.detail-search-panel .ts-control:not(.rtl) {
  padding-right: 7px !important;
}

.detail-search-panel .ts-control input {
  min-width: 150px;
  flex: 1 1 150px;
  width: 100% !important;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 5px 4px;
  /* developのSelect2検索欄（select2-bootstrap.css）と同じ字形・行高にする。 */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 22.4px !important;
}

/*
 * develop（layout.scss）の.select2-selection__choiceと同じく、in-field
 * チップは候補モード・自由入力モードを問わず常に非表示にする。選択内容は
 * 「選択中の条件」（lib/detail_search/active_filters.jsが.ts-control外の
 * 別コンテナへ描画する.detail-search-active-filter）でのみ表示する。
 */
.detail-search-panel .ts-wrapper.multi .ts-control > .item {
  display: none !important;
}

/* 候補OFF時も入力欄を広く使い、検索語へ続けて追記できるようにする。 */
.detail-search-panel .ts-wrapper.detail-search-free-text-mode .ts-control input {
  min-width: 0;
  width: 100% !important;
  flex: 1 1 100%;
}

.detail-search-panel.detail-search-candidates-disabled .ts-control {
  border-radius: var(--radius-sm);
}

.ts-wrapper.dropdown-active {
  z-index: 1060;
}

.ts-dropdown .optgroup-header {
  /* developのSelect2結果グループ（13px・太字・bodyと同じ行高）に揃える。 */
  padding: 6px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
}

/* Select2の候補ドロップダウンと同じ位置・行高・文字サイズに揃える。 */
.detail-search-panel .ts-dropdown {
  margin-top: 0;
  border-color: #aaa;
}
.detail-search-panel .ts-dropdown-content {
  max-height: calc(200px + 34.8px);
}
.detail-search-panel .ts-dropdown .option,
.detail-search-panel .ts-dropdown .detail-search-loading-more {
  padding: 6px;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.65;
}
.detail-search-panel .ts-dropdown .detail-search-suggestion-heading {
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.65;
}

.detail-search-original-song-dropdown .optgroup-header {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.ts-dropdown .option[role="group"] {
  padding: 0;
}

.ts-dropdown .optgroup .option {
  /* developのSelect2ネスト結果と同じ左インデントにする。 */
  padding-left: 15px;
}

.ts-dropdown .optgroup > .option:nth-child(even):not(.active) {
  background: var(--color-surface-muted);
}

.ts-dropdown .optgroup > .option:nth-child(odd):not(.active) {
  background: var(--color-surface);
}

/* 候補読み込み中・候補なし時の案内文（lib/detail_search/select_field.js）。 */
.ts-dropdown .detail-search-status {
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* 候補一覧の先頭に挿す見出し・上限到達メッセージ。 */
.ts-dropdown .detail-search-suggestion-heading,
.ts-dropdown .detail-search-max-items-message {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: 13px;
}

.ts-dropdown .detail-search-suggestion-heading strong {
  display: block;
  color: var(--color-text);
}

.ts-dropdown .detail-search-suggestion-heading span {
  color: var(--color-text-muted);
}

.ts-dropdown .detail-search-max-items-message {
  color: var(--color-warning);
}

.ts-dropdown .no-results:empty {
  display: none;
}

.ts-dropdown-content:empty,
.ts-dropdown:has(.no-results:empty) {
  display: none;
}

.ts-wrapper.dropdown-active:not(:has(.option:not(:empty))) .ts-control {
  border-radius: 4px;
}

.admin-filters .ts-wrapper {
  width: 100% !important;
}

@media (max-width: 767px) {
  .detail-search-panel .ts-control {
    max-height: 96px;
  }
}