/**
* 通用下拉選單樣式 (Standard Dropdown CSS)
* ============================================
* 統一全站下拉選單 (Tom Select) 與 Tagify 標籤輸入的外觀
*
* @version 2.0.0
* @lastUpdate 2026-02-24
*
* 使用方式:
* ─────────────────────────────────────────────
* 1. 在頁面 引入此 CSS:
*
*
* 2. HTML 結構 (使用 .rbt-modern-select 包裹):
*
*
*
*
* 3. JavaScript 初始化 (使用 DropdownUtils):
* DropdownUtils.init('#mySelect', { liveSearch: true, placeholder: '--請選擇--' });
*
* 更新日誌:
* ─────────────────────────────────────────────
* v2.0.0 (2026-02-24) - 移除所有 bootstrap-select CSS，改用 Tom Select 主題
* v1.2.0 (2026-01-12) - 新增 Modal 內下拉選單寬度跟隨容器的規則
* v1.1.0 (2026-01-05) - 修正 body 附加下拉選單的高度截斷問題
* v1.0.0 (2026-01-02) - 初始版本
*/
/* ==========================================================================
* 注意：bootstrap-select 的 CSS 規則已在 v2.0.0 中完全移除。
* 所有下拉選單現在使用 Tom Select，樣式見下方 .rbt-modern-select-ts 區塊。
* ========================================================================== */
/* ========================================= */
/* Tagify 標籤輸入樣式 */
/* ========================================= */
.tagify {
border: 2px solid #c4b5fd !important;
border-radius: 8px !important;
padding: 6px 10px !important;
min-height: 44px !important;
background: rgba(255, 255, 255, 0.9) !important;
transition: all 0.2s ease !important;
}
.tagify:hover {
border-color: #a78bfa !important;
}
.tagify:focus-within,
.tagify.tagify--focus {
border-color: #7c3aed !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
outline: none !important;
}
/* 標籤樣式 */
.tagify__tag {
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
color: #4338ca !important;
border-radius: 6px !important;
margin: 2px !important;
padding: 4px 8px !important;
font-size: 13px !important;
font-weight: 500 !important;
border: 1px solid #c4b5fd !important;
}
.tagify__tag:hover {
background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%) !important;
}
/* 標籤文字 */
.tagify__tag>div {
color: #4338ca !important;
}
/* 刪除按鈕 */
.tagify__tag__removeBtn {
color: #7c3aed !important;
font-size: 12px !important;
margin-left: 4px !important;
}
.tagify__tag__removeBtn:hover {
color: #dc2626 !important;
background: rgba(220, 38, 38, 0.1) !important;
border-radius: 50% !important;
}
/* 輸入框 */
.tagify__input {
padding: 4px !important;
font-size: 14px !important;
color: #374151 !important;
}
.tagify__input::before {
color: #9ca3af !important;
}
/* 下拉建議 */
.tagify__dropdown {
border: 2px solid #c4b5fd !important;
border-radius: 8px !important;
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.2) !important;
background: #fff !important;
z-index: 99999 !important;
}
.tagify__dropdown__wrapper {
border-radius: 8px !important;
overflow: hidden !important;
}
.tagify__dropdown__item {
padding: 10px 14px !important;
font-size: 14px !important;
color: #374151 !important;
transition: all 0.15s ease !important;
}
.tagify__dropdown__item:hover,
.tagify__dropdown__item--active {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
color: #4338ca !important;
}
/* 載入中狀態 */
.tagify--loading .tagify__input::after {
border-color: #7c3aed transparent transparent transparent !important;
}
/* 禁用狀態 */
.tagify--readonly,
.tagify[readonly] {
background: #f3f4f6 !important;
border-color: #d1d5db !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
}
.tagify--readonly .tagify__tag__removeBtn {
display: none !important;
}
/* ========================================= */
/* Tom Select 紫色主題 */
/* ========================================= */
/* 控制項（按鈕） */
.rbt-modern-select-ts.ts-wrapper .ts-control,
.ts-wrapper.rbt-modern-select-ts .ts-control {
background: #fff !important;
border: 2px solid #c4b5fd !important;
border-radius: 8px !important;
padding: 8px 12px !important;
min-height: 42px !important;
font-size: 14px !important;
color: #374151 !important;
cursor: pointer !important;
box-shadow: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.rbt-modern-select-ts.ts-wrapper .ts-control:hover {
border-color: #a78bfa !important;
}
.rbt-modern-select-ts.ts-wrapper.focus .ts-control {
border-color: #7c3aed !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}
/* 箭頭圖示 */
.rbt-modern-select-ts.ts-wrapper .ts-control::after {
content: '';
display: block;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #7c3aed;
}
/* 下拉選單容器 */
.rbt-modern-select-ts.ts-wrapper .ts-dropdown,
.ts-wrapper.rbt-modern-select-ts .ts-dropdown {
border: 3px solid #7c3aed !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25) !important;
background: #fff !important;
margin-top: 2px !important;
z-index: 99999 !important;
max-height: 800px !important;
overflow-y: auto !important;
}
/* 搜尋輸入框（dropdown_input plugin — 搜尋框在下拉選單內）*/
.rbt-modern-select-ts .ts-dropdown .dropdown-input-wrap {
padding: 8px 10px !important;
border-bottom: 2px solid #ede9fe !important;
background: #faf5ff !important;
}
.rbt-modern-select-ts .ts-dropdown .dropdown-input {
width: 100% !important;
padding: 8px 12px !important;
border: 2px solid #c4b5fd !important;
border-radius: 6px !important;
font-size: 14px !important;
color: #374151 !important;
background: #fff !important;
outline: none !important;
box-sizing: border-box !important;
transition: border-color 0.2s ease !important;
}
.rbt-modern-select-ts .ts-dropdown .dropdown-input:focus {
border-color: #7c3aed !important;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15) !important;
}
.rbt-modern-select-ts .ts-dropdown .dropdown-input::placeholder {
color: #9ca3af !important;
}
/* 選項列表區域 */
.rbt-modern-select-ts .ts-dropdown .ts-dropdown-content {
max-height: 700px !important;
overflow-y: auto !important;
padding: 4px 0 !important;
}
.rbt-modern-select-ts.ts-wrapper input,
.ts-wrapper.rbt-modern-select-ts input {
font-size: 14px !important;
color: #374151 !important;
}
/* 選項樣式 */
.rbt-modern-select-ts .ts-dropdown .option,
.ts-wrapper.rbt-modern-select-ts .ts-dropdown .option {
padding: 10px 14px !important;
font-size: 14px !important;
color: #374151 !important;
cursor: pointer !important;
transition: background-color 0.15s ease !important;
border-radius: 0 !important;
}
/* 選項 hover */
.rbt-modern-select-ts .ts-dropdown .option:hover,
.rbt-modern-select-ts .ts-dropdown .option.active {
background-color: #ede9fe !important;
color: #7c3aed !important;
}
/* 已選中選項 */
.rbt-modern-select-ts .ts-dropdown .option.selected {
background-color: #ddd6fe !important;
color: #6d28d9 !important;
font-weight: 600 !important;
}
/* 無結果 */
.rbt-modern-select-ts .ts-dropdown .no-results {
padding: 12px 14px !important;
color: #9ca3af !important;
font-size: 13px !important;
text-align: center !important;
}
/* 選中項目的文字 */
.rbt-modern-select-ts .ts-control .ts-item {
color: #374151 !important;
font-size: 14px !important;
}
/* placeholder */
.rbt-modern-select-ts .ts-control>input::placeholder {
color: #9ca3af !important;
}
/* 自訂滾動條 */
.rbt-modern-select-ts .ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
width: 6px;
}
.rbt-modern-select-ts .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 3px;
}
.rbt-modern-select-ts .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
background: #c4b5fd;
border-radius: 3px;
}
.rbt-modern-select-ts .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:hover {
background: #a78bfa;
}
/* 禁用狀態 */
.rbt-modern-select-ts.ts-wrapper.disabled .ts-control {
background: #f3f4f6 !important;
border-color: #d1d5db !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
}