/**
 * 筛选器统一样式 - 完全重写版本
 * 确保所有筛选器和搜索框的高度、宽度、间距完全一致
 */

/* 统一所有筛选器容器的间距 - 去掉所有间距 */
.filter-section .px-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 第一个筛选器左边距为0 */
.filter-section .px-1:first-child {
    padding-left: 0 !important;
}

/* 统一所有筛选器的基础样式 */
#monthFilter,
#expenseType,
#bankAccount,
#auditStatus,
#paymentPerson,
.filter-item .form-select,
.filter-item .form-control {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    height: 31px !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    background-color: #fff !important;
    color: #6c757d !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* 日期范围筛选器和内容搜索框使用更宽的宽度 */
#dateRangeContainer,
#dateRangeContainer input,
#dateRangeSimple,
#startDate,
#endDate,
#contentSearch {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 31px !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    background-color: #fff !important;
    color: #6c757d !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* 日期范围容器特殊样式 */
#dateRangeContainer {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 单个日期输入框样式 */
#startDate,
#endDate {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    margin: 0 !important;
    color: #6c757d !important;
    cursor: pointer !important;
    /* 强制去掉日历图标 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

/* 强制去掉WebKit浏览器的日历图标 */
#startDate::-webkit-calendar-picker-indicator,
#endDate::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    color: transparent !important;
    cursor: pointer !important;
    width: 0 !important;
    height: 0 !important;
}

/* 开始日期右边距 - 去掉间距 */
#startDate {
    margin-right: 0 !important;
}

/* 统一焦点状态样式 */
#monthFilter:focus,
#expenseType:focus,
#bankAccount:focus,
#auditStatus:focus,
#paymentPerson:focus,
#contentSearch:focus,
.filter-item .form-select:focus,
.filter-item .form-control:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 部门筛选器和其他select的下拉箭头 - 移除下拉箭头，并为清除按钮预留空间 */
#monthFilter,
#expenseType,
#bankAccount,
#auditStatus {
    padding-right: 24px !important; /* 增加右边距，为清除按钮留出空间 */
    background-position: right 0.5rem center !important;
    background-size: 0 !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 月份和日期选择器容器统一 */
#monthPickerContainer {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
}

/* 筛选器表单布局 */
#filterForm {
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    align-items: center !important;
    gap: 0 !important;
}

#filterForm .d-flex {
    align-items: center !important;
    gap: 0 !important;
}

.filter-item {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    display: flex !important;
    align-items: center !important;
}

/* 内容搜索框的容器使用更宽的宽度 */
.filter-item:has(#contentSearch) {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    #monthFilter,
    #expenseType,
    #bankAccount,
    #auditStatus,
    #paymentPerson,
    .filter-item .form-select,
    .filter-item .form-control {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
        font-size: 0.8rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    /* 日期范围筛选器和内容搜索框在小屏幕上使用更宽的宽度 */
    #dateRangeContainer input,
    #dateRangeSimple,
    #contentSearch {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        font-size: 0.8rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    #monthPickerContainer,
    .filter-item {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
    }
    
    /* 日期范围选择器容器在小屏幕上使用更宽的宽度 */
    #dateRangeContainer {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
    
    /* 内容搜索框的容器在小屏幕上使用更宽的宽度 */
    .filter-item:has(#contentSearch) {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
    
    .filter-section .px-1 {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }
    
    #monthFilter,
    #expenseType,
    #bankAccount,
    #auditStatus {
        padding-right: 0.4rem !important;
        background-position: right 0.5rem center !important;
        background-size: 0 !important;
        background-image: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
}

/* 滚动条样式 */
#filterForm::-webkit-scrollbar {
    height: 4px !important;
}

#filterForm::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 2px !important;
}

#filterForm::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 2px !important;
}

#filterForm::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1 !important;
}

/* 强制覆盖内联样式 */
.filter-section select.form-select-sm[style*="width"],
.filter-section input.form-control-sm[style*="width"] {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
}

/* 禁用状态样式 */
#monthFilter:disabled,
#expenseType:disabled,
#bankAccount:disabled,
#auditStatus:disabled,
#paymentPerson:disabled,
#contentSearch:disabled,
.filter-item .form-select:disabled,
.filter-item .form-control:disabled {
    background-color: #e9ecef !important;
    opacity: 1 !important;
}

/* 占位符样式 */
#paymentPerson::placeholder,
#contentSearch::placeholder,
.filter-item .form-control::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* ===========================================
   强制覆盖所有可能的内联样式
   =========================================== */

/* 使用更高的选择器优先级强制覆盖 */
.filter-section form#filterForm #monthFilter,
.filter-section form#filterForm #expenseType,
.filter-section form#filterForm #bankAccount,
.filter-section form#filterForm #auditStatus,
.filter-section form#filterForm #paymentPerson {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    height: 31px !important;
}

/* 日期范围筛选器和内容搜索框使用更宽的宽度 */
.filter-section form#filterForm #dateRangeContainer input,
.filter-section form#filterForm #dateRangeSimple,
.filter-section form#filterForm #contentSearch {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 31px !important;
}

/* 强制覆盖容器宽度 */
.filter-section form#filterForm #monthPickerContainer,
.filter-section form#filterForm .filter-item {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
}

/* 日期范围选择器容器使用更宽的宽度 */
.filter-section form#filterForm #dateRangeContainer {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
}

/* 内容搜索框的容器使用更宽的宽度 */
.filter-section form#filterForm .filter-item:has(#contentSearch) {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
}

/* 强制覆盖月份选择器包装器 */
.filter-section form#filterForm #monthPickerContainer .month-picker-wrapper {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
}

/* 强制覆盖任何带有style属性的元素 */
.filter-section [style*="width"] {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
}

/* 特别针对可能的内联样式覆盖 */
#monthFilter[style],
#expenseType[style],
#bankAccount[style],
#auditStatus[style],
#paymentPerson[style] {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    height: 31px !important;
}

/* 内容搜索框的内联样式覆盖 */
#contentSearch[style],
#dateRangeSimple[style] {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 31px !important;
}

/* 预设筛选器默认颜色，避免首次加载时的黑色闪烁 */
#monthFilter,
#expenseType,
#bankAccount,
#auditStatus {
    color: #6c757d !important;
}

/* 当筛选器选中有效值时，JavaScript会动态设置为黑色 */

/* 日期范围选择器容器使用更宽的宽度 */
#dateRangeContainer {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#monthPickerContainer .month-picker-wrapper {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
}

/* 强制去掉所有筛选器间距 */
#filterForm,
#filterForm .d-flex,
#filterForm .filter-item,
#filterForm .px-1 {
    gap: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 特别针对筛选器容器 */
.filter-section .px-1.filter-item {
    padding: 0 !important;
    margin: 0 !important;
}

/* 确保月份选择器容器没有间距 */
#monthPickerContainer {
    padding: 0 !important;
    margin: 0 !important;
}

/* 确保日期范围容器没有间距 */
#dateRangeContainer {
    padding: 0 !important;
    margin: 0 !important;
}

/* 部门筛选器隐藏规则 - 优先级最高 */
.filter-item[style*="display: none"],
.filter-item[style*="display:none"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 当部门筛选器被隐藏时，其内部的select也要隐藏 */
.filter-item[style*="display: none"] #simpleDeptSelector,
.filter-item[style*="display:none"] #simpleDeptSelector {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ===========================================
   筛选器文字格式统一规则 - 高优先级版本
   =========================================== */

/* 1. 没有筛选时字体为灰色（默认状态） */
.filter-section #monthFilter,
.filter-section #expenseType,
.filter-section #bankAccount,
.filter-section #auditStatus,
.filter-section #paymentPerson,
.filter-section #contentSearch,
.filter-section #dateRangeSimple,
.filter-section #startDate,
.filter-section #endDate {
    color: #6c757d !important; /* 灰色 */
}

/* 2. 有筛选时字体为蓝色（通过JavaScript动态添加类） - 使用最高优先级 */
.filter-section #monthFilter.filter-active,
.filter-section #expenseType.filter-active,
.filter-section #bankAccount.filter-active,
.filter-section #auditStatus.filter-active,
.filter-section #paymentPerson.filter-active,
.filter-section #contentSearch.filter-active,
.filter-section #dateRangeSimple.filter-active,
.filter-section #startDate.filter-active,
.filter-section #endDate.filter-active,
.filter-section form#filterForm #monthFilter.filter-active,
.filter-section form#filterForm #expenseType.filter-active,
.filter-section form#filterForm #bankAccount.filter-active,
.filter-section form#filterForm #auditStatus.filter-active,
.filter-section form#filterForm #paymentPerson.filter-active,
.filter-section form#filterForm #contentSearch.filter-active,
.filter-section form#filterForm #dateRangeSimple.filter-active,
.filter-section form#filterForm #startDate.filter-active,
.filter-section form#filterForm #endDate.filter-active {
    color: #0d6efd !important; /* 蓝色 */
    font-weight: 500 !important; /* 稍微加粗，增强视觉效果 */
}

/* 3. 下拉框选项文字为黑色 */
.filter-section #expenseType option,
.filter-section #bankAccount option,
.filter-section #auditStatus option {
    color: #212529 !important; /* 黑色 */
    background-color: #fff !important; /* 白色背景 */
}

/* 4. 隐藏禁用的下拉框选项（如"费用类型"、"银行账户"等占位符） */
.filter-section #expenseType option[disabled],
.filter-section #bankAccount option[disabled],
.filter-section #auditStatus option[disabled] {
    display: none !important; /* 完全隐藏不能选的选项 */
}

/* 5. 输入框占位符保持灰色 */
.filter-section #paymentPerson::placeholder,
.filter-section #contentSearch::placeholder,
.filter-section #dateRangeSimple::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* 6. 部门选择器（如果存在）也应用相同规则 */
.filter-section #simpleDeptSelector {
    color: #6c757d !important;
}

.filter-section #simpleDeptSelector.filter-active {
    color: #0d6efd !important;
    font-weight: 500 !important;
}

.filter-section #simpleDeptSelector option {
    color: #212529 !important;
    background-color: #fff !important;
}

.filter-section #simpleDeptSelector option[disabled] {
    display: none !important;
}

/* 7. 焦点状态时保持颜色规则 - 高优先级 */
.filter-section form#filterForm #monthFilter:focus,
.filter-section form#filterForm #expenseType:focus,
.filter-section form#filterForm #bankAccount:focus,
.filter-section form#filterForm #auditStatus:focus {
    color: #6c757d !important;
}

.filter-section form#filterForm #monthFilter.filter-active:focus,
.filter-section form#filterForm #expenseType.filter-active:focus,
.filter-section form#filterForm #bankAccount.filter-active:focus,
.filter-section form#filterForm #auditStatus.filter-active:focus {
    color: #0d6efd !important;
}

/* 8. 输入框有内容时也应用蓝色 - 高优先级 */
.filter-section form#filterForm #paymentPerson.filter-active,
.filter-section form#filterForm #contentSearch.filter-active {
    color: #0d6efd !important;
    font-weight: 500 !important;
}

/* 9. 特殊处理：确保选中非占位符选项时为蓝色 - 最高优先级 */
.filter-section form#filterForm #expenseType.filter-active,
.filter-section form#filterForm #bankAccount.filter-active,
.filter-section form#filterForm #auditStatus.filter-active,
.filter-section form#filterForm #monthFilter.filter-active {
    color: #0d6efd !important;
    font-weight: 500 !important;
}

/* 10. 强制覆盖任何可能的冲突样式 */
body .filter-section form#filterForm .filter-active,
body .filter-section .filter-active {
    color: #0d6efd !important;
    font-weight: 500 !important;
}