@section-border: rgba(118, 194, 181, 1);
@section-bg: rgba(243, 249, 248, 1);

.container {
    margin: 0;
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    height: 100%;

    // 底部区域 - 油品列表
    .searchSection {
        flex: 1;
        display: flex;
        flex-direction: column;
        // border: 1px solid @section-border;
        background: #fff;
        padding: 30px 20px 0 20px;

        // 区域头部
        .sectionHeader {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;

            // 将右侧动作区推到最右侧
            .headerActions {
                display: flex;
                gap: 12px;
                margin-left: auto;

                .addBtn {
                    background-image: url('@/assets/business_basic/Bt_bg1.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border: none;
                }
            }

            // 装饰条
            .sectionBar {
                width: 2px;
                height: 16px;
                background: rgba(0, 102, 101, 1);
                border-radius: 1px;
            }

            // 标题
            .sectionTitle {
                font-size: 18px;
                font-weight: 600;
                color: #333;
            }
        }

        // 筛选内容区域
        .filterContent {
            display: flex;
            align-items: center;
            gap: 20px;
            // margin-bottom: 20px;
            flex-wrap: wrap;
            // justify-content: space-between;

            // 筛选项
            .filterItem {
                display: flex;
                align-items: center;
                gap: 12px;

                // 筛选标签
                .filterLabel {
                    color: #333;
                    font-size: 14px;
                }

                :global {

                    // 统一 Input.Search 边框颜色为绿主题
                    .ant-input-affix-wrapper {
                        border-radius: 0px !important;
                        border-color: rgba(44, 158, 157, 1) !important;
                    }

                    .ant-input-search-button {
                        border-radius: 0px !important;
                        border-color: rgba(44, 158, 157, 1) !important;
                    }

                    .ant-select {
                        min-width: 140px;

                        // 选择框样式
                        .ant-select-selector {
                            border-color: rgba(44, 158, 157, 1) !important;
                            border-radius: 2px !important;
                        }

                        &:hover .ant-select-selector {
                            border-color: rgba(44, 158, 157, 1) !important;
                        }

                        &.ant-select-focused .ant-select-selector {
                            border-color: rgba(44, 158, 157, 1) !important;
                            box-shadow: 0 0 0 2px rgba(44, 158, 157, 0.2) !important;
                        }
                    }
                }
            }


            // 筛选按钮组
            .filterButtons {
                display: flex;
                gap: 12px;

                .queryBtn {
                    background-image: url('@/assets/business_basic/Bt_bg1.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border: none;
                }

                .resetBtn {
                    background-image: url('@/assets/business_basic/Bt_bg2.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border: none;
                    color: #006665;
                }
            }

        }

        // 表格包装器
        .tableWrapper {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            .primaryActionBtn {
                color: #2D9E9D;
            }
            :global(.ant-table-wrapper) {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            // 表头样式
            :global {
                .ant-table-thead>tr>th {
                    color: rgba(51, 51, 51, 1) !important;
                    font-weight: 450 !important;
                    background-color: rgba(240, 247, 247, 1) !important;
                    text-align: center !important;
                }

                // 表体样式
                .ant-table-tbody>tr>td {
                    color: rgba(78, 88, 86, 1) !important;
                    font-weight: 400 !important;
                    text-align: center !important;
                }

                // 操作列按钮样式
                .viewDetailBtn {
                    color: rgba(0, 102, 101, 1) !important;

                    &:hover {
                        color: rgba(0, 102, 101, 1) !important;
                    }
                }

                .editBtn {
                    color: rgba(45, 158, 157, 1) !important;

                    &:hover {
                        color: rgba(45, 158, 157, 1) !important;
                    }
                }

                .deleteBtn {
                    color: rgba(255, 130, 109, 1) !important;

                    &:hover {
                        color: rgba(255, 130, 109, 1) !important;
                    }
                }

                // 状态列 Switch 样式
                .statusSwitch {

                    // 启用状态背景色
                    &.ant-switch-checked {
                        background-color: rgba(20, 106, 89, 1) !important;
                    }

                    // 停用状态背景色
                    &:not(.ant-switch-checked) {
                        background-color: rgba(153, 153, 153, 1) !important;
                    }
                }

                // 复选框样式
                .ant-checkbox-inner {
                    border-color: rgba(0, 102, 101, 1) !important;

                    &::after {
                        background-color: rgba(0, 102, 101, 1) !important;
                    }
                }

                .ant-checkbox-wrapper:hover .ant-checkbox-inner,
                .ant-checkbox:hover .ant-checkbox-inner {
                    border-color: rgba(0, 102, 101, 1) !important;
                }

                .ant-checkbox-checked .ant-checkbox-inner {
                    background-color: rgba(0, 102, 101, 1) !important;
                    border-color: rgba(0, 102, 101, 1) !important;
                }
            }
        }
    }
}