.container {
    padding: 10px 5px;
    background: #f5f5f5;
    min-height: 100vh;

    .mainCard {
        background: #fff;
        border-radius: 0px;
        // box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        // border: 1px solid #eaeaea;
        padding: 16px;
    }

    // KPI卡片区域（改为贴近截图样式）
    .kpiGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 20px;

        .kpiCard {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-radius: 6px;
            background: linear-gradient(180deg, #A1DED4 0%, #CBEDE74D 70%);
            // border: 1px solid transparent;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: border-color 0.2s, box-shadow 0.2s;

            &.kpiCardActive {
                border-color: #1890ff;
                box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.2);
            }

            &:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .kpiText {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .kpiValue {
                font-size: 24px;
                font-weight: 600;
                color: #333;
            }

            .kpiTitle {
                font-size: 12px;
                color: #4E5856;
            }

            .kpiIconBox {
                width: 40px;
                height: 40px;
                border-radius: 8px;
                background: #1D6E6A;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                flex-shrink: 0;
                border: 1px solid rgba(0, 0, 0, 0.06);
            }

            .kpiIcon {
                font-size: 20px;
                line-height: 1;
            }

            .kpiIconImg {
                width: 40px;
                height: 40px;
                display: block;
                object-fit: contain;
            }
        }
    }

    // 图表和活动区域
    .chartRow {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;

        .chartCard,
        .activityCard {
            flex: 1;
            background: #F3F9F8;
            border-radius: 4px;
            padding: 16px;
            box-shadow: 0 4px 6px rgba(118, 194, 181, 0.3);
            border: 1px solid #76C2B5;

            .chartHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                padding-bottom: 8px;
                border-bottom: 1px solid #f0f0f0;

                .chartTitle {
                    position: relative;
                    padding-left: 10px;
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                }

                .chartTitle::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 3px;
                    height: 18px;
                    background-color: #1D6E6A;
                    border-radius: 2px;
                }

                .timeSelect {
                    :global(.ant-select-selector) {
                        border-color: #2C9E9D !important;
                        border-radius: 2px;
                        padding: 0 8px;
                        background: transparent !important;
                        font-size: 13px;
                    }

                    :global(.ant-select-focused .ant-select-selector),
                    :global(.ant-select-selector:hover) {
                        border-color: #2C9E9D !important;
                        box-shadow: 0 0 0 2px rgba(29, 110, 106, 0.15);
                    }
                }
            }

            .chartContainer {
                height: 200px;
                width: 100%;
            }
        }

        .activityCard {
            .activityGrid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .activityCardItem {
                background: #fff;
                border: 1px solid #D6EEE9;
                // border-radius: 10px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
                padding: 12px 14px;
            }

            .activityCardHeader {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 6px;
            }

            .activityCardTitle {
                color: #006665;
                font-size: 14px;
                font-weight: 500;
            }

            .activityCardTime {
                color: #9AA3A1;
                font-size: 12px;
                flex-shrink: 0;
            }

            .activityCardDesc {
                color: #4E5856;
                font-size: 12px;
                line-height: 1.6;
            }
        }
    }

    // 底部区域 - 客户列表
    .bottomSection {
        flex: 1;
        display: flex;
        flex-direction: column;
        // border: 1px solid @section-border;
        background: #fff;
        padding: 5px 10px;

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

            // 装饰条
            .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: 90px;

                        // 选择框样式
                        .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;
                }
            }

            // 右侧按钮组
            .filterButtonsRight {
                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;
                }

                .exportBtn {
                    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;

            :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;
                }

                // 分页样式（绿色主题）
                // .ant-pagination {
                //     .ant-pagination-total-text {
                //         color: rgba(78, 88, 86, 1) !important;
                //     }
                //     .ant-pagination-item {
                //         border-radius: 2px;
                //         border-color: rgba(44, 158, 157, 1) !important;
                //     }
                //     .ant-pagination-item a {
                //         color: rgba(78, 88, 86, 1) !important;
                //     }
                //     .ant-pagination-item-active {
                //         border-color: rgba(0, 102, 101, 1) !important;
                //         background: rgba(240, 247, 247, 1) !important;
                //     }
                //     .ant-pagination-item-active a {
                //         color: rgba(0, 102, 101, 1) !important;
                //     }
                //     .ant-pagination-item:hover {
                //         border-color: rgba(0, 102, 101, 1) !important;
                //     }
                //     .ant-pagination-prev .ant-pagination-item-link,
                //     .ant-pagination-next .ant-pagination-item-link {
                //         border-radius: 2px;
                //         border-color: rgba(44, 158, 157, 1) !important;
                //         color: rgba(78, 88, 86, 1) !important;
                //     }
                //     .ant-select-selector {
                //         border-color: rgba(44, 158, 157, 1) !important;
                //         border-radius: 2px !important;
                //     }
                // }
            }
        }
    }
}