/**
 * 移除筛选器下拉箭头的CSS - 强制覆盖版本
 * 适用于部门、费用类型、银行账户、审核状态筛选器
 * 使用最高优先级确保覆盖其他CSS文件中的下拉箭头样式
 */

/* 部门筛选器隐藏规则 - 最高优先级 */
.filter-item[style*="display: none"] #simpleDeptSelector,
.filter-item[style*="display:none"] #simpleDeptSelector,
div[style*="display: none"] #simpleDeptSelector,
div[style*="display:none"] #simpleDeptSelector {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* 隐藏的部门筛选器容器 */
.filter-item[style*="display: none"],
.filter-item[style*="display:none"],
div[style*="display: none"].filter-item,
div[style*="display:none"].filter-item {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 移除下拉箭头 - 针对部门、费用类型、银行账户、审核状态筛选器 */
#simpleDeptSelector::-ms-expand,
#expenseType::-ms-expand,
#bankAccount::-ms-expand,
#auditStatus::-ms-expand {
    display: none !important;
}

/* 使用最高优先级的选择器强制移除下拉箭头 */
.filter-section form#filterForm #simpleDeptSelector,
.filter-section form#filterForm #expenseType,
.filter-section form#filterForm #bankAccount,
.filter-section form#filterForm #auditStatus,
#simpleDeptSelector,
#expenseType,
#bankAccount,
#auditStatus {
    /* 移除默认下拉箭头 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* 强制移除任何背景图像 */
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 0 !important;
    
    /* 移除Firefox中的下拉箭头 */
    text-indent: 0.01px !important; 
    text-overflow: '' !important;
    
    /* 强制移除任何背景 */
    background: #fff !important;
}

/* 强制覆盖任何可能的背景图像设置 - 使用更具体的选择器 */
.filter-section .card-body form#filterForm #simpleDeptSelector,
.filter-section .card-body form#filterForm #expenseType,
.filter-section .card-body form#filterForm #bankAccount,
.filter-section .card-body form#filterForm #auditStatus {
    background-image: none !important;
    background: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 移除任何可能出现的箭头图标 */
#simpleDeptSelector + .dropdown-arrow,
#expenseType + .dropdown-arrow,
#bankAccount + .dropdown-arrow,
#auditStatus + .dropdown-arrow,
#simpleDeptSelector ~ .dropdown-icon,
#expenseType ~ .dropdown-icon,
#bankAccount ~ .dropdown-icon,
#auditStatus ~ .dropdown-icon {
    display: none !important;
}

/* 强制覆盖Bootstrap和其他框架的下拉箭头样式 */
.form-select,
.filter-section .form-select,
.filter-section select.form-select-sm {
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 移除筛选器下拉选择器的边框阴影效果 */
#simpleDeptSelector:focus,
#expenseType:focus,
#bankAccount:focus,
#auditStatus:focus {
    box-shadow: none !important;
    border-color: #ced4da !important;
    background-image: none !important;
    background: #fff !important;
}

/* 确保在任何状态下都不显示下拉箭头，并移除悬停效果 */
#simpleDeptSelector:hover,
#expenseType:hover,
#bankAccount:hover,
#auditStatus:hover,
#simpleDeptSelector:active,
#expenseType:active,
#bankAccount:active,
#auditStatus:active {
    background-image: none !important;
    background: #fff !important;
    transform: none !important;  /* 移除任何变换效果 */
    box-shadow: none !important; /* 移除阴影效果 */
    border-color: #ced4da !important; /* 保持原始边框颜色 */
}

/* 使用伪元素强制覆盖任何可能的背景 */
#simpleDeptSelector::before,
#expenseType::before,
#bankAccount::before,
#auditStatus::before,
#simpleDeptSelector::after,
#expenseType::after,
#bankAccount::after,
#auditStatus::after {
    display: none !important;
}

/* 最终强制覆盖 - 使用内联样式级别的优先级 */
body .filter-section #simpleDeptSelector,
body .filter-section #expenseType,
body .filter-section #bankAccount,
body .filter-section #auditStatus {
    background-image: none !important;
    background: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 通用下拉箭头移除 - 兼容现代浏览器 */
#expenseType,
#bankAccount,
#auditStatus {
    /* 移除默认下拉箭头 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* 确保不会出现其他浏览器特殊样式 */
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    padding-right: 8px !important; /* 缩小右侧内边距 */
    
    /* 移除Firefox中的下拉箭头 */
    text-indent: 0.01px !important; 
    text-overflow: '' !important;
    
    /* 移除任何背景图像 */
    background: none !important;
}

/* 移除任何可能出现的箭头图标 */
#expenseType + .dropdown-arrow,
#bankAccount + .dropdown-arrow,
#auditStatus + .dropdown-arrow,
#expenseType ~ .dropdown-icon,
#bankAccount ~ .dropdown-icon,
#auditStatus ~ .dropdown-icon {
    display: none !important;
}

/* 强制覆盖Bootstrap下拉箭头样式 */
.form-select {
    background-image: none !important;
}

/* 特定针对筛选器容器中的下拉选择器 */
.filter-section .form-select,
.filter-section select.form-select-sm {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    padding-right: 8px !important;
}

/* 确保选择器宽度适应内容 */
#expenseType,
#bankAccount,
#auditStatus {
    width: auto !important;
    min-width: 100px !important;
    text-align: left !important;
}

/* 移除筛选器下拉选择器的边框阴影效果 */
#expenseType:focus,
#bankAccount:focus,
#auditStatus:focus {
    box-shadow: none !important;
    border-color: #ced4da !important; /* 保持原始边框颜色 */
}

/* 防止筛选器容器和清除按钮的悬停效果 */
.filter-item,
.filter-item:hover,
.dept-clear-btn,
.dept-clear-btn:hover,
.dept-clear-btn:focus,
.dept-clear-btn:active {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    background: none !important;
    border: none !important;
}

/* 确保筛选器容器不会影响清除按钮的尺寸 */
.filter-item {
    position: relative !important;
}

.filter-item .dept-clear-btn,
.filter-item .filter-clear-btn,
.px-1 .filter-clear-btn {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    min-width: 16px !important;
    flex: none !important;
    display: none; /* 默认隐藏，由JavaScript控制显示 */
    z-index: 10 !important;
}

/* 当清除按钮需要显示时的样式 */
.filter-item .filter-clear-btn[style*="display: flex"],
.filter-item .filter-clear-btn[style*="display: block"],
.px-1 .filter-clear-btn[style*="display: flex"],
.px-1 .filter-clear-btn[style*="display: block"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 确保清除按钮始终保持红色，无任何效果 - 支持所有筛选器 */
.dept-clear-btn,
.filter-clear-btn {
    color: #dc3545 !important;
    background: none !important;
    border: none !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    box-shadow: none !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    min-width: 16px !important;
    font-size: 14px !important;
    line-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    flex: none !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.dept-clear-btn:hover,
.dept-clear-btn:focus,
.dept-clear-btn:active,
.filter-clear-btn:hover,
.filter-clear-btn:focus,
.filter-clear-btn:active {
    color: #dc3545 !important;
    background: none !important;
    border: none !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    box-shadow: none !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    min-width: 16px !important;
    font-size: 14px !important;
    line-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    flex: none !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
}

/* 隐藏flatpickr自带的清除按钮 */
.flatpickr-input[readonly]:not(:disabled):focus + .flatpickr-clear,
.flatpickr-clear,
.flatpickr-clear-button,
input[data-input] + .flatpickr-clear {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* 隐藏flatpickr输入框内的清除图标 */
.flatpickr-input::-webkit-search-cancel-button,
.flatpickr-input::-webkit-search-decoration,
.flatpickr-input::-webkit-search-results-button,
.flatpickr-input::-webkit-search-results-decoration {
    display: none !important;
}

/* 隐藏所有可能的flatpickr清除相关元素 */
[data-clear],
.flatpickr-wrapper .clear-button,
.flatpickr-wrapper .close-button,
.flatpickr-wrapper [title="Clear"],
.flatpickr-wrapper [title="清除"],
.flatpickr-wrapper [aria-label="Clear"],
.flatpickr-wrapper [aria-label="清除"] {
    display: none !important;
    visibility: hidden !important;
}

/* 确保日期范围输入框内没有多余的清除按钮 */
#dateRange::-webkit-search-cancel-button,
#dateRange::-webkit-search-decoration,
#dateRange::-webkit-search-results-button,
#dateRange::-webkit-search-results-decoration,
#dateRange::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* 隐藏可能出现在日期范围容器中的额外清除按钮 */
#dateRangeContainer .clear,
#dateRangeContainer .clear-button,
#dateRangeContainer .close,
#dateRangeContainer .close-button,
#dateRangeContainer [class*="clear"],
#dateRangeContainer [class*="close"]:not(.filter-clear-btn) {
    display: none !important;
}

/* 更强力的隐藏规则 - 隐藏所有可能的清除相关按钮和元素 */
#dateRangeContainer *[class*="clear"]:not(.filter-clear-btn),
#dateRangeContainer *[id*="clear"],
#dateRangeContainer *[data-clear],
#dateRangeContainer button:not(.filter-clear-btn),
#dateRangeContainer .flatpickr-clear,
#dateRangeContainer .date-range-clear:not(.filter-clear-btn) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* 确保只有我们的清除按钮可见 */
#dateRangeContainer .filter-clear-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    pointer-events: auto !important;
}