/**
 * 筛选器容器样式修复
 * 确保顶部导航栏下面的筛选器容器的右边框扩大到屏幕右边界
 * 与财务记录列表容器保持一致
 */

/* 筛选器容器 - 强制扩展到屏幕右边界 */
.filter-section.card {
    width: 100vw !important; /* 使用100%视口宽度 */
    max-width: 100vw !important; /* 不限制最大宽度 */
    margin-right: 0 !important; /* 去掉右侧外边距 */
    margin-left: 0 !important; /* 去掉左侧外边距 */
    padding-right: 0 !important; /* 去掉右侧内边距 */
    border-right: none !important; /* 去掉右边框 */
    border-left: none !important; /* 去掉左边框 */
    position: relative !important; /* 相对定位 */
    left: 0 !important; /* 重置左偏移 */
    right: 0 !important; /* 确保延伸到右边 */
    border-radius: 0 !important; /* 移除圆角 */
}

/* 筛选器内容区域 - 确保内容正确对齐 */
.filter-section .card-body {
    padding-right: 0 !important; /* 去掉右侧内边距 */
    width: 100% !important; /* 宽度100% */
    max-width: 100% !important; /* 不限制最大宽度 */
}

/* 筛选器表单 - 确保表单元素布局合理 */
.filter-section .card-body form {
    width: 100% !important; /* 宽度100% */
    max-width: 100% !important; /* 不限制最大宽度 */
    padding-right: 15px !important; /* 右侧添加一点内边距 */
}

/* 筛选器行 - 确保行容器也扩展到屏幕右边界 */
.row.mt-0.mb-1 {
    width: 100vw !important; /* 使用100%视口宽度 */
    max-width: 100vw !important; /* 不限制最大宽度 */
    margin-right: 0 !important; /* 去掉右侧外边距 */
    margin-left: 0 !important; /* 去掉左侧外边距 */
    padding-right: 0 !important; /* 去掉右侧内边距 */
    position: relative !important; /* 相对定位 */
    left: 0 !important; /* 重置左偏移 */
    right: 0 !important; /* 确保延伸到右边 */
}

/* 筛选器列 - 确保列容器也扩展到屏幕右边界 */
.row.mt-0.mb-1 .col-12 {
    width: 100% !important; /* 宽度100% */
    max-width: 100% !important; /* 不限制最大宽度 */
    padding-right: 0 !important; /* 去掉右侧内边距 */
    margin-right: 0 !important; /* 去掉右侧外边距 */
}

/* 强制应用样式，覆盖其他可能的冲突样式 */
body .filter-section.card,
html .filter-section.card,
#app .filter-section.card,
#root .filter-section.card,
.container-fluid .filter-section.card {
    width: 100vw !important;
    max-width: 100vw !important;
    border-right: none !important;
    right: 0 !important;
}

/* 修复右侧内容区域与筛选器的对齐 */
#mainContent {
    padding-right: 0 !important; /* 去掉右侧内边距 */
    width: 100% !important; /* 宽度100% */
    max-width: 100% !important; /* 不限制最大宽度 */
}

/* 强制内联样式覆盖 - 针对可能存在的内联样式 */
.filter-section.card[style*="width"],
.row.mt-0.mb-1[style*="width"] {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
}

/* 修复在不同分辨率下的显示 */
@media (min-width: 768px) {
    .filter-section.card,
    .row.mt-0.mb-1,
    #mainContent {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 767px) {
    .filter-section.card,
    .row.mt-0.mb-1 {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
    }
    
    .filter-section .card-body form {
        padding-right: 10px !important; /* 在小屏幕上减小右侧内边距 */
    }
}