/* ============================================================================
 * 前台統一下拉元件 web-select（issue #1014，2026-08-18）
 *
 * 【全站唯一一套下拉樣式】任何前台 <select> 只要標上 data-web-select 就是這個外觀。
 * 兩種形態的差別只有「有沒有搜尋框」：選項超過 10 個才出現搜尋，門檻由
 * public/web/js/web-select.js 的 SEARCH_THRESHOLD 決定，不由 CSS 控制。
 * 規範見 docs/frontendDevelop.md §「前台統一下拉元件（web-select）」——
 * 新頁面 MUST 沿用本元件，不得再為下拉另寫一套樣式。
 *
 * 【為什麼可以用最短選擇器】初始化時傳 theme: 'cms'，select2 掛上的是
 * .select2-container--cms，vendor 自帶的 default／bootstrap-5 主題規則一律選不到本元件；
 * 本檔又載於 select2.min.css 之後（layouts/css.blade.php 第三方區塊 → common.layout），
 * 故毋須與第三方比權重。本檔即本元件視覺的單一事實來源。
 *
 * 【改色與微調】一律只覆寫 --cms-select-* 變數（定義於 common/tokens.css）：
 *   - 主題換色 → themes/<theme>/base.css 的 :root 覆寫（欄位與展開面板一次同步）
 *   - 單頁對齊該頁輸入框的高度／圓角 → 該頁 common/pages/<feature>.css 對頁面容器覆寫
 *     （注意：面板由 select2 append 到 body，頁面層變數只影響收合狀態的欄位）
 * ============================================================================ */

/* --- 收合狀態：外觀對齊該頁的 .form-control --- */
.select2-container--cms .select2-selection--single {
  height: auto;
  min-height: var(--cms-select-height);
  padding: 0;
  font-size: var(--cms-select-font-size);
  color: var(--cms-select-text);
  background-color: var(--cms-select-surface);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M2 5.5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 13px 10px;
  border: 1px solid var(--cms-select-border);
  border-radius: var(--cms-select-radius);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-container--cms .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 34px 11px 14px;
  line-height: 1.5;
  color: var(--cms-select-text);
}

.select2-container--cms .select2-selection--single .select2-selection__placeholder {
  color: var(--cms-select-text-muted);
}

/* 箭頭改用上方的背景圖繪製，關掉 select2 原生的三角形容器 */
.select2-container--cms .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container--cms.select2-container--focus .select2-selection--single,
.select2-container--cms.select2-container--open .select2-selection--single {
  border-color: var(--cms-select-accent);
  box-shadow: 0 0 0 3px var(--cms-select-accent-soft);
}

/* 面板是浮起小卡、與欄位分離，故欄位展開時 MUST 保留完整外框與圓角
 * （select2 基礎樣式預設是連體式，會把貼合側的框線與圓角抹掉）。 */
.select2-container--cms.select2-container--open .select2-selection--single {
  border-radius: var(--cms-select-radius);
}

.select2-container--cms.select2-container--disabled .select2-selection--single {
  color: var(--cms-select-text-muted);
  background-color: var(--cms-select-hover);
  cursor: not-allowed;
}

/* 驗證失敗：原生 select 被 select2 隱藏，紅框改掛到它後面的容器上
 * （select2 一律把容器插在原 select 之後，故用相鄰兄弟選擇器） */
select.is-invalid + .select2-container--cms .select2-selection--single {
  border-color: var(--cms-select-danger);
}

select.is-invalid + .select2-container--cms.select2-container--focus .select2-selection--single,
select.is-invalid + .select2-container--cms.select2-container--open .select2-selection--single {
  border-color: var(--cms-select-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* --- 展開面板：與欄位留 4px 空隙的浮起小卡，全站同一種長相 --- */
.select2-container--cms .select2-dropdown {
  /* 蓋過 Bootstrap 5 的 modal（1055）：select2 基礎樣式只給 1051，面板會被 modal 蓋住。
     元件另於 modal 內把面板掛進 modal（見 web-select.js），此處為雙保險。 */
  z-index: 1056;
  overflow: hidden;
  color: var(--cms-select-text);
  background-color: var(--cms-select-surface);
  border: 1px solid var(--cms-select-border);
  border-radius: var(--cms-select-panel-radius);
  box-shadow: var(--cms-select-panel-shadow);
}

.select2-container--cms .select2-dropdown--below {
  margin-top: 4px;
  border-top: 1px solid var(--cms-select-border);
  border-top-left-radius: var(--cms-select-panel-radius);
  border-top-right-radius: var(--cms-select-panel-radius);
}

.select2-container--cms .select2-dropdown--above {
  margin-top: -4px;
  border-bottom: 1px solid var(--cms-select-border);
  border-bottom-left-radius: var(--cms-select-panel-radius);
  border-bottom-right-radius: var(--cms-select-panel-radius);
}

/* 搜尋列固定在面板頂端（捲動容器是下方的 options，故毋須 sticky） */
.select2-container--cms .select2-search--dropdown {
  padding: 10px 10px 9px;
  background-color: var(--cms-select-surface);
  border-bottom: 1px solid var(--cms-select-divider);
}

/* 左側放大鏡以 SVG 背景圖呈現（純 CSS，不動 DOM） */
.select2-container--cms .select2-search--dropdown .select2-search__field {
  min-height: 38px;
  padding: 8px 12px 8px 34px;
  font-size: var(--cms-select-option-font-size);
  line-height: 1.5;
  color: var(--cms-select-text);
  background-color: var(--cms-select-surface);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-width='1.6'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='M10.6 10.6 14 14'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 15px 15px;
  border: 1px solid var(--cms-select-border);
  border-radius: var(--cms-select-radius-inner);
  box-shadow: none;
}

.select2-container--cms .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--cms-select-accent);
  box-shadow: 0 0 0 3px var(--cms-select-accent-soft);
}

/* 清單容器：細捲軸取代瀏覽器預設的粗捲軸。
 * ⚠ max-height 與 overflow-y MUST 成對寫在這裡：本元件用自訂 theme，select2 自帶主題的
 * 「限高＋可捲動」那條規則選不到我們，只留 max-height 會變成清單被切掉又捲不動。
 * overscroll-behavior 讓清單捲到底時不會把整頁一起帶著捲。 */
.select2-container--cms .select2-results__options {
  max-height: 264px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cms-select-scrollbar) transparent;
}

.select2-container--cms .select2-results__options::-webkit-scrollbar {
  width: 10px;
}

.select2-container--cms .select2-results__options::-webkit-scrollbar-track {
  background: transparent;
}

.select2-container--cms .select2-results__options::-webkit-scrollbar-thumb {
  background-color: var(--cms-select-scrollbar);
  border: 3px solid var(--cms-select-surface);
  border-radius: 99rem;
}

.select2-container--cms .select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: var(--cms-select-text-muted);
}

/* 選項 */
.select2-container--cms .select2-results__option {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 34px 9px 12px;
  font-size: var(--cms-select-option-font-size);
  line-height: 1.5;
  color: var(--cms-select-text);
  border-radius: var(--cms-select-radius-inner);
  transition: background-color 0.15s ease;
}

/* 已選：不用整條色底，改為主色文字＋右側打勾（打勾以旋轉邊框畫，不依賴字型也不動 DOM） */
.select2-container--cms .select2-results__option--selected,
.select2-container--cms .select2-results__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--cms-select-accent);
  background-color: transparent;
}

.select2-container--cms .select2-results__option--selected::after,
.select2-container--cms .select2-results__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 5px;
  height: 9px;
  margin-top: -6px;
  border: solid var(--cms-select-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 名稱與右側附註（issue #1014）
 *
 * <option> 帶 data-note 時，該列會排成「名稱靠左、附註靠右」。原生 <select> 只能塞純文字，
 * 早期靠補點點「.......」硬撐對齊，中英混排字寬算不準、實際仍參差；改為兩個元素分邊之後
 * 不論名稱多長都真的對齊，也不再需要那串點。名稱過長時省略號截斷，附註一律完整顯示。
 */
.select2-container--cms .cms-select__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container--cms .cms-select__note {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--cms-select-text-muted);
  white-space: nowrap;
}

/* 已選項的附註跟著轉主色，但維持較淡的字重，不與名稱搶視線 */
.select2-container--cms .select2-results__option[aria-selected="true"] .cms-select__note {
  color: var(--cms-select-accent);
}

/* 游標所在列（滑鼠或鍵盤上下鍵）。放在已選之後，同權重時後者勝出，
 * 讓「已選且正被指到」也吃得到底色；只給底色、不改字色，打勾與主色文字才留得住。 */
.select2-container--cms .select2-results__option--highlighted {
  background-color: var(--cms-select-hover);
}

.select2-container--cms .select2-results__option--disabled,
.select2-container--cms .select2-results__option[aria-disabled="true"] {
  color: var(--cms-select-text-muted);
}

/* 「查無符合的項目」「搜尋中…」等提示列：置中淡字，且不畫打勾 */
.select2-container--cms .select2-results__message {
  padding: 16px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--cms-select-text-muted);
  text-align: center;
  background-color: transparent;
}

.select2-container--cms .select2-results__message::after {
  content: none;
}

@media (max-width: 767.98px) {
  /* 手機叫出軟鍵盤後可視高度會被吃掉，清單收短以免面板被推出畫面 */
  .select2-container--cms .select2-results__options {
    max-height: 216px;
  }
}