@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%;

    // 顶部区域 - 基本信息
    .topSection {
        flex: 0 0 40%;
        display: flex;
        flex-direction: column;
        margin: 5px 15px 0 15px;
        border: 1px solid @section-border;
        background: @section-bg;
        padding: 12px 20px;

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

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

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

        // 顶部内容区域
        .topContent {
            flex: 1;
            display: flex;

            // 基本信息表单
            .basicForm {
                display: flex;
                width: 100%;
                gap: 32px;

                // 所有表单输入框边框颜色
                :global {

                    // Input 输入框
                    .ant-input {
                        border-color: rgba(44, 158, 157, 1) !important;

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

                        &:focus {
                            border-color: rgba(44, 158, 157, 1) !important;
                        }
                    }

                    // Select 下拉选择框
                    .ant-select-selector {
                        border-color: rgba(44, 158, 157, 1) !important;
                    }

                    .ant-select: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;
                    }

                    // TextArea 文本域
                    .ant-input-textarea {
                        .ant-input {
                            border-color: rgba(44, 158, 157, 1) !important;

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

                            &:focus {
                                border-color: rgba(44, 158, 157, 1) !important;
                            }
                        }
                    }
                }

                // 表单左侧
                .formLeft {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    // 表单行
                    .formRow {
                        display: flex;
                        gap: 24px;
                        margin-bottom: 16px;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        :global(.ant-form-item) {
                            flex: 1;
                            margin-bottom: 0;
                        }
                    }
                }

                // 表单右侧
                .formRight {
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    gap: 24px;
                    align-items: flex-start;

                    // 描述输入项
                    .descriptionItem {
                        // flex: 1;
                        display: flex;
                        width: 70%;
                        flex-direction: column;
                        margin-bottom: 0;

                        :global(.ant-input) {
                            flex: 1;
                        }

                        :global(.ant-input-textarea) {
                            height: 100%;
                        }
                    }

                    // 表单操作按钮
                    .formActions {
                        display: flex;
                        gap: 12px;
                        flex-shrink: 0;
                        align-self: flex-end;

                        // 保存修改按钮（主按钮）
                        :global(.ant-btn-primary) {
                            background-color: rgba(4, 95, 94, 0.5) !important;
                            border-color: rgba(0, 143, 142, 1) !important;

                            &:hover {
                                background-color: rgba(4, 95, 94, 0.7) !important;
                                border-color: rgba(0, 143, 142, 1) !important;
                            }

                            &:focus {
                                background-color: rgba(4, 95, 94, 0.5) !important;
                                border-color: rgba(0, 143, 142, 1) !important;
                            }
                        }

                        // 取消按钮（非主按钮）
                        :global(.ant-btn:not(.ant-btn-primary)) {
                            background-color: rgba(183, 229, 213, 0.2) !important;
                            border: 1px solid transparent !important;
                            border-image-source: conic-gradient(from 102.75deg at 50% 52.91%,
                                    rgba(249, 249, 249, 0.5) -32.95deg,
                                    rgba(140, 160, 156, 0.5) 10.52deg,
                                    rgba(140, 160, 156, 0.35) 32.12deg,
                                    rgba(255, 255, 255, 0.5) 60.28deg,
                                    rgba(255, 255, 255, 0.5) 107.79deg,
                                    rgba(140, 160, 156, 0.35) 187.59deg,
                                    #F9F9F9 207.58deg,
                                    rgba(255, 255, 255, 0.5) 287.31deg,
                                    rgba(249, 249, 249, 0.5) 327.05deg,
                                    rgba(140, 160, 156, 0.5) 370.52deg) !important;
                            border-image-slice: 1 !important;

                            &:hover {
                                background-color: rgba(183, 229, 213, 0.3) !important;
                            }

                            &:focus {
                                background-color: rgba(183, 229, 213, 0.2) !important;
                            }
                        }
                    }
                }
            }
        }
    }

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

        // 区域头部
        .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 {
                    .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;
            }

            // 右侧按钮组
            .filterButtonsRight {
                display: flex;
                gap: 12px;
                margin-left: auto;
            }
        }

        // 表格包装器
        .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;
                }
            }
        }
    }
}