/**
* 通用下拉選單樣式 (Standard Dropdown CSS)
* ============================================
* 統一全站 bootstrap-select 下拉選單的外觀
* 特別處理附加到 body 的下拉選單（使用 container: 'body' 時）
*
* @version 1.2.0
* @lastUpdate 2026-01-12
*
* 使用方式:
* ─────────────────────────────────────────────
* 1. 在頁面 引入此 CSS:
*
*
* 2. HTML 結構 (使用 .rbt-modern-select 包裹):
*
*
*
*
* 3. JavaScript 初始化 (必須使用 container:'body')（一般頁面）:
* $('#mySelect').selectpicker({
* liveSearch: true,
* size: 10,
* noneResultsText: '查無結果',
* noneSelectedText: '--請選擇--',
* dropupAuto: false,
* container: 'body' // 重要！確保下拉選單不被父容器截斷
* });
*
* 【重要】Modal 內的下拉選單:
* ─────────────────────────────────────────────
* Modal 內的下拉選單【不要】使用 container: 'body'！
* 否則下拉選單寬度會使用預設 max-width: 350px，而非跟隨容器寬度。
*
* Modal 內正確的初始化方式（不加 container）:
* $('#modalSelect').selectpicker({
* style: '',
* styleBase: 'form-control',
* tickIcon: 'feather-check',
* size: 5
* // 注意：不加 container: 'body'
* });
*
* 如果必須使用 container: 'body'（例如怕被 overflow 截斷），
* 則需要在父容器加上 .dropdown-width-auto 類別強制跟隨寬度。
*
* 注意事項:
* ─────────────────────────────────────────────
* - 一般頁面：使用 container: 'body' 避免被父容器 overflow 截斷
* - Modal 內：不使用 container: 'body'，下拉選單會自動跟隨容器寬度
* - 如需強制跟隨寬度：在父容器加上 .dropdown-width-auto 類別
* - 選項列表最大高度 350px，超過會顯示滾動軸
* - 搭配 dropdown.utils.js 可使用 DropdownUtils.init() 簡化初始化
*
* 更新日誌:
* ─────────────────────────────────────────────
* v1.2.0 (2026-01-12) - 新增 Modal 內下拉選單寬度跟隨容器的規則
* v1.1.0 (2026-01-05) - 修正 body 附加下拉選單的高度截斷問題
* v1.0.0 (2026-01-02) - 初始版本
*/
/* ========================================= */
/* 下拉選單按鈕樣式 */
/* ========================================= */
.rbt-modern-select .bootstrap-select>.dropdown-toggle {
border: 2px solid #c4b5fd !important;
border-radius: 8px !important;
padding: 8px 12px !important;
background: rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
min-height: 44px !important;
transition: all 0.2s ease !important;
}
.rbt-modern-select .bootstrap-select>.dropdown-toggle:hover {
border-color: #a78bfa !important;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
}
.rbt-modern-select .bootstrap-select>.dropdown-toggle:focus {
border-color: #7c3aed !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
outline: none !important;
}
/* 下拉選單寬度繼承觸發按鈕 */
body>.bootstrap-select.dropdown>.dropdown-menu,
body>.bootstrap-select.dropdown.show>.dropdown-menu {
z-index: 99999 !important;
border: 3px solid #7c3aed !important;
border-radius: 12px !important;
box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3) !important;
overflow: visible !important;
/* 預設最大寬度限制，避免過寬 */
max-width: 350px !important;
background: #fff !important;
}
/* 確保 body 附加的下拉選單寬度與觸發按鈕一致 */
body>.bootstrap-select.dropdown {
min-width: 200px;
max-width: 350px;
}
/* ========================================= */
/* Modal 內下拉選單 - 跟隨容器寬度 */
/* ========================================= */
/* Modal 內的下拉選單不使用 container:'body'，直接跟隨父容器寬度 */
.modal .rbt-modern-select .bootstrap-select,
.standard-modal .rbt-modern-select .bootstrap-select,
.column-selector .rbt-modern-select .bootstrap-select {
width: 100% !important;
}
.modal .rbt-modern-select .bootstrap-select .dropdown-menu,
.standard-modal .rbt-modern-select .bootstrap-select .dropdown-menu,
.column-selector .rbt-modern-select .bootstrap-select .dropdown-menu {
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* filter-select 容器內的下拉選單也跟隨寬度 */
.filter-select .bootstrap-select,
.filter-select.rbt-modern-select .bootstrap-select {
width: 100% !important;
}
.filter-select .bootstrap-select .dropdown-menu,
.filter-select.rbt-modern-select .bootstrap-select .dropdown-menu {
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* ========================================= */
/* Optgroup 分組標題樣式 */
/* ========================================= */
.bootstrap-select .dropdown-menu .dropdown-header,
body>.bootstrap-select .dropdown-menu .dropdown-header {
font-size: 15px !important;
font-weight: 700 !important;
color: #4338ca !important;
padding: 12px 16px 8px 16px !important;
background: transparent !important;
border-bottom: 1px solid #e5e7eb !important;
margin-bottom: 4px !important;
}
/* ========================================= */
/* 下拉選單寬度限制（跟隨按鈕寬度） */
/* 適用於：進階搜尋篩選、日期選擇等需要緊湊顯示的場景 */
/* 使用方式：在父容器加上 .dropdown-width-auto 類別 */
/* ========================================= */
.dropdown-width-auto .bootstrap-select .dropdown-menu,
.dropdown-width-auto .bootstrap-select.show .dropdown-menu {
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* ========================================= */
/* 搜尋框樣式 */
/* ========================================= */
body>.bootstrap-select.dropdown>.dropdown-menu .bs-searchbox,
.bootstrap-select .dropdown-menu .bs-searchbox {
padding: 12px !important;
border-bottom: 1px solid #e9ecef !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .bs-searchbox input,
.bootstrap-select .dropdown-menu .bs-searchbox input {
border: 2px solid #c4b5fd !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .bs-searchbox input:focus,
.bootstrap-select .dropdown-menu .bs-searchbox input:focus {
border-color: #7c3aed !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
outline: none !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .bs-searchbox input::placeholder,
.bootstrap-select .dropdown-menu .bs-searchbox input::placeholder {
color: #9ca3af !important;
}
/* ========================================= */
/* 選項列表容器 */
/* ========================================= */
/* 下拉選單容器 - 不限制高度，讓 inner 控制 */
.bootstrap-select .dropdown-menu,
body>.bootstrap-select.dropdown>.dropdown-menu {
max-height: none !important;
overflow: visible !important;
}
/* 選項列表區域設定滾動 - 這裡控制實際高度 */
.rbt-modern-select .bootstrap-select .inner,
.rbt-modern-select .bootstrap-select .dropdown-menu .inner,
.rbt-modern-select .bootstrap-select .dropdown-menu.inner,
body>.bootstrap-select.dropdown>.dropdown-menu .inner,
.bootstrap-select .dropdown-menu .inner {
max-height: 350px !important;
min-height: auto !important;
height: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 6px 0 12px 0 !important;
/* 底部加更多間距 */
display: block !important;
}
/* 確保 ul 列表正確顯示 */
.rbt-modern-select .bootstrap-select .dropdown-menu ul.inner,
.bootstrap-select .dropdown-menu ul.inner,
body>.bootstrap-select .dropdown-menu ul {
max-height: 350px !important;
min-height: auto !important;
height: auto !important;
overflow-y: auto !important;
display: block !important;
padding: 6px 6px 12px 6px !important;
/* 底部加更多間距 */
}
/* 自訂滾動條 */
body>.bootstrap-select.dropdown>.dropdown-menu .inner::-webkit-scrollbar,
.bootstrap-select .dropdown-menu .inner::-webkit-scrollbar {
width: 6px;
}
body>.bootstrap-select.dropdown>.dropdown-menu .inner::-webkit-scrollbar-track,
.bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 3px;
}
body>.bootstrap-select.dropdown>.dropdown-menu .inner::-webkit-scrollbar-thumb,
.bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb {
background: #c4b5fd;
border-radius: 3px;
}
body>.bootstrap-select.dropdown>.dropdown-menu .inner::-webkit-scrollbar-thumb:hover,
.bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb:hover {
background: #a78bfa;
}
/* ========================================= */
/* 選項樣式 */
/* ========================================= */
/* 確保 li 元素正確顯示 */
.bootstrap-select .dropdown-menu li,
body>.bootstrap-select.dropdown>.dropdown-menu li {
display: block !important;
visibility: visible !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu .dropdown-item {
padding: 10px 16px !important;
font-size: 14px !important;
color: #374151 !important;
transition: all 0.15s ease !important;
border-radius: 0 !important;
display: block !important;
visibility: visible !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:hover {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
color: #4338ca !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .dropdown-item.active,
body>.bootstrap-select.dropdown>.dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected {
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
color: #4338ca !important;
font-weight: 500 !important;
}
/* 勾選圖示 */
body>.bootstrap-select.dropdown>.dropdown-menu .dropdown-item .check-mark,
.bootstrap-select .dropdown-menu .dropdown-item .check-mark {
color: #7c3aed !important;
}
/* ========================================= */
/* 無結果提示 */
/* ========================================= */
body>.bootstrap-select.dropdown>.dropdown-menu .no-results,
.bootstrap-select .dropdown-menu .no-results {
padding: 16px !important;
color: #6b7280 !important;
font-size: 14px !important;
text-align: center !important;
background: #f9fafb !important;
}
/* ========================================= */
/* 禁用狀態 */
/* ========================================= */
.bootstrap-select.disabled>.dropdown-toggle,
.bootstrap-select>.dropdown-toggle.disabled {
background: #f3f4f6 !important;
border-color: #d1d5db !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
}
/* ========================================= */
/* 響應式調整 */
/* ========================================= */
@media (max-width: 768px) {
body>.bootstrap-select.dropdown>.dropdown-menu,
.bootstrap-select .dropdown-menu {
min-width: auto !important;
width: calc(100vw - 32px) !important;
max-width: 400px !important;
}
body>.bootstrap-select.dropdown>.dropdown-menu .inner,
.bootstrap-select .dropdown-menu .inner {
max-height: 250px !important;
}
}
/* ========================================= */
/* 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;
}