/* FlowDesigner Bootstrap Dropdown 自定義樣式 */
/* 替代 bootstrap-select 的自定義 dropdown 樣式 */

/* CSS載入測試 - 這個樣式如果被載入會讓body有紅色邊框 */
body.css-test-marker {
    border: 2px solid red !important;
}

/* 基本 dropdown 容器 */
.flow-designer-dropdown {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    vertical-align: middle !important;
}

/* Dropdown 按鈕樣式 */
.flow-designer-dropdown-button {
    display: inline-flex !important;
    width: 100% !important;
    text-align: left !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 6px 25px 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    color: #555 !important;
    cursor: pointer !important;
    position: relative !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
}

.flow-designer-dropdown-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.flow-designer-dropdown-button .selected-text {
    flex-grow: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Dropdown 箭頭 - 使用 FontAwesome 圖標 */
.flow-designer-dropdown-button .dropdown-arrow {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
    color: #666 !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    transition: transform 0.2s ease-in-out !important;
}

/* 展開狀態時旋轉箭頭 */
.flow-designer-dropdown.show .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* 舊的 ::after 箭頭移除，改用 FontAwesome */
.flow-designer-dropdown-button::after {
    display: none !important;
}

/* 確保按鈕有足夠的右邊距給箭頭 */
.flow-designer-dropdown-button {
    padding-right: 25px !important;
}

/* Dropdown 選單 */
.flow-designer-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    min-width: 100% !important;
    padding: 5px 0 !important;
    margin: 2px 0 0 !important;
    font-size: 14px !important;
    color: #333 !important;
    text-align: left !important;
    list-style: none !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ccc !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Dropdown 項目 */
.flow-designer-dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: 3px 20px !important;
    clear: both !important;
    font-weight: normal !important;
    line-height: 1.42857143 !important;
    color: #333 !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}

.flow-designer-dropdown-item a {
    display: block;
    padding: 3px 20px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.flow-designer-dropdown-item:hover:not(.selected),
.flow-designer-dropdown-item:focus:not(.selected),
.flow-designer-dropdown-item a:hover:not(.selected),
.flow-designer-dropdown-item a:focus:not(.selected) {
    color: #262626 !important;
    background-color: #f5f5f5 !important;
    text-decoration: none !important;
}

.flow-designer-dropdown-item.selected,
.flow-designer-dropdown-item.selected a {
    color: #fff !important;
    background-color: rgb(0, 158, 150) !important;
}

.flow-designer-dropdown-item.selected:hover,
.flow-designer-dropdown-item.selected:focus,
.flow-designer-dropdown-item.selected a:hover,
.flow-designer-dropdown-item.selected a:focus {
    color: #fff !important;
    background-color: rgb(0, 158, 150) !important;
}

/* 顯示狀態 */
.flow-designer-dropdown.show .flow-designer-dropdown-menu {
    display: block !important;
}

/* 往上展開的下拉選單 (dropup) */
.flow-designer-dropdown.dropup .flow-designer-dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

/* 與現有 flowDesigner 樣式整合 */
.tb_sg .flow-designer-dropdown {
    margin: 0;
    display: inline-block;
    vertical-align: top;
}

.tb_sg .flow-designer-dropdown-button {
    font-size: 14px;
    padding: 3px 20px 3px 8px;
    min-height: 28px;
    line-height: 1.33;
}

.tb_sg .flow-designer-dropdown-item,
.tb_sg .flow-designer-dropdown-item a {
    font-size: 14px;
    padding: 2px 15px;
    line-height: 1.33;
}

/* 表格中的下拉選單樣式 */
.tb_mul .flow-designer-dropdown,
.tb_sg .flow-designer-dropdown {
    width: 100%;
}

.tb_mul .flow-designer-dropdown-button,
.tb_sg .flow-designer-dropdown-button {
    width: 100%;
    box-sizing: border-box;
}

/* 角色表格中的特殊樣式 */
#myRoleTable .flow-designer-dropdown {
    margin: 0;
}

#myRoleTable .flow-designer-dropdown-button {
    font-size: 14px;
    padding: 2px 18px 2px 6px;
    min-height: 26px;
    border: 1px solid #ddd;
}

/* 幣別選單特定樣式 */
#lineCurrencyCombo.flow-designer-dropdown {
    width: 120px !important;
    display: inline-block;
}

#lineCurrencyCombo .flow-designer-dropdown-button {
    width: 100% !important;
}

/* 彈出視窗中的樣式調整 */
.flow-designer-popup-container .flow-designer-dropdown {
    margin: 0;
}

.flow-designer-popup-container .flow-designer-dropdown-button {
    font-size: 14px;
    padding: 5px 22px 5px 10px;
}

/* 分流設定區域的樣式 */
.flow-designer-border-gray .flow-designer-dropdown {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.flow-designer-border-gray .flow-designer-dropdown-button {
    font-size: 14px;
    padding: 4px 20px 4px 8px;
    min-height: 30px;
}

/* title_1 區域中的樣式 */
.title_1 .flow-designer-dropdown {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: auto;
    min-width: 150px;
}

/* 安全機制選單樣式 */
.fix-securityflag .flow-designer-dropdown {
    width: 100%;
}

.fix-securityflag .flow-designer-dropdown-button {
    width: 100%;
}

/* 禁用狀態樣式 */
.flow-designer-dropdown-button:disabled,
.flow-designer-dropdown.disabled .flow-designer-dropdown-button {
    background-color: #f5f5f5;
    color: #777;
    cursor: not-allowed;
    opacity: 0.65;
}

/* 錯誤狀態樣式 */
.flow-designer-dropdown.error .flow-designer-dropdown-button,
.has-error .flow-designer-dropdown-button {
    border-color: #a94442;
}

.flow-designer-dropdown.error .flow-designer-dropdown-button:focus,
.has-error .flow-designer-dropdown-button:focus {
    outline: none;
    box-shadow: none;
}

/* 載入狀態 */
.flow-designer-dropdown.loading .flow-designer-dropdown-button {
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAALAAAAAAQABAAAAMuGLrc/jDKSatlQtScKdceCAjDII7HyFJuPkrb+CLrC8jyndycFrnciCGfflqjVg==');
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

/* 清除浮動 */
.flow-designer-dropdown::after {
    content: "";
    display: table;
    clear: both;
}

/* 確保 z-index 層級正確 */
.flow-designer-dropdown-menu {
    z-index: 1050 !important;
}

/* 在彈出視窗中確保更高的 z-index */
.flow-designer-popup-container .flow-designer-dropdown-menu,
#popup_container .flow-designer-dropdown-menu {
    z-index: 1060 !important;
}

/* 在 node_popup 和 line_popup 中的下拉選單提高 z-index */
#node_popup .flow-designer-dropdown-menu,
#line_popup .flow-designer-dropdown-menu {
    z-index: 10000 !important;
}

/* 在模態視窗中確保最高的 z-index */
.modal .flow-designer-dropdown-menu {
    z-index: 1070 !important;
}

/* 修正按鈕文字對齊和顯示 */
.flow-designer-dropdown-button .selected-text {
    display: inline-block;
    width: calc(100% - 20px);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

/* 確保按鈕在不同狀態下的一致性 */
.flow-designer-dropdown-button:active {
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* 修正下拉選單項目的 a 標籤樣式 */
.flow-designer-dropdown-item a {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.flow-designer-dropdown-item a:hover:not(.selected),
.flow-designer-dropdown-item a:focus:not(.selected) {
    color: #262626 !important;
    background-color: #f5f5f5 !important;
    text-decoration: none !important;
}

/* 修正選中項目的樣式繼承 */
.flow-designer-dropdown-item.selected a,
.flow-designer-dropdown-item.selected a:hover,
.flow-designer-dropdown-item.selected a:focus {
    color: #fff !important;
    background-color: rgb(0, 158, 150) !important;
}

/* 確保容器不會被截斷 */
.flow-designer-dropdown {
    overflow: visible;
}

/* 修正在某些容器中的顯示問題 */
.form-control .flow-designer-dropdown,
.input-group .flow-designer-dropdown {
    width: 100%;
    border: none;
    padding: 0;
    background: transparent;
}

.form-control .flow-designer-dropdown-button,
.input-group .flow-designer-dropdown-button {
    border-radius: 0;
    border: none;
    padding: 6px 25px 6px 12px;
}

/* 會簽人數 dropdown 特定樣式 */
.iteration-dropdown {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 60px !important;
}

.iteration-dropdown .flow-designer-dropdown-button {
    min-width: 60px !important;
    text-align: center !important;
    padding: 6px 25px 6px 12px !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    line-height: 1.42857143 !important;
}

.iteration-dropdown .flow-designer-dropdown-button:hover {
    border-color: #adadad !important;
    background-color: #e6e6e6 !important;
}

.iteration-dropdown.disabled .flow-designer-dropdown-button {
    background-color: #eeeeee !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.iteration-dropdown .flow-designer-dropdown-menu {
    min-width: 60px !important;
    left: 0 !important;
    right: auto !important;
}

.iteration-dropdown .flow-designer-dropdown-item {
    text-align: center !important;
    padding: 3px 8px !important;
    min-height: auto !important;
}

.iteration-dropdown .flow-designer-dropdown-item a {
    font-size: 13px !important;
    padding: 3px 0 !important;
    text-align: center !important;
    display: block !important;
}

/* 表格中的會簽人數欄位 */
.iteration-cell {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px !important;
}