@import '~antd/es/style/themes/default.less';

@background-color-container: #f5f5f5;
@border-radius: 2px;
.usingAnalysis {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: @background-color-container;

    :global {
        .@{ant-prefix}-spin-nested-loading,
        .@{ant-prefix}-spin-container {
            height: 100%;
        }
        .anticon {
            vertical-align: 0.125em; 
        }
        .back-btn {
            font-size: 16px;
            opacity: 0.75;
            cursor: pointer;
            line-height: 32px;
            user-select: none;
            .anticon {
                transform: translateX(0px);
                transition: transform 0.3s;
            }
            &:hover {
                .anticon {
                    transform: translateX(-4px);
                }
            }
        }

        .cua-content {
            width: 100%;
            height: 100%;
            min-width: 1150px;
            // padding: 5px 8px;
            // 顶部筛选条件
            .cua-header {
                background-color: #FFF;
                border-radius: @border-radius;
                padding: 8px;
                display: flex;
                align-items: center;
                gap: 20px;
    
                .filter-item {
                    min-width: 220px;
                    .@{ant-prefix}-select {
                        width: 140px;
                    }
                }
                .sub-title {
                    margin-left: auto;
    
                    font-size: 12px;
                    color: #aaa;
                }
            }
    
            .counter-list {
                margin-top: 4px;
                display: flex;
                gap: 4px;

                .@{ant-prefix}-card {
                    flex: 1 1;

                    .@{ant-prefix}-card-body {
                        padding: 8px;
                    }
                }
            }

            .cua-main {
                height: calc(100% - 136px);
                margin-top: 4px;
                display: flex;
                flex-direction: column;
                .cua-main-middle {
                    flex: 1;
                    overflow: hidden;
                    width: 100%;
                    min-height: 200px;
                    margin-bottom: 5px;
                    display: flex;
                    justify-content: space-between;
                    gap: 4px;
                }
                .cua-main-bottom {
                    flex: none;
                    height: 50%;
                    width: 100%;
                    min-height: 320px;
                    display: flex;
                    justify-content: space-between;
                    gap: 4px;
                    .cua-customer-view {
                        padding: 10px;
                        .table-cell-bold {
                            font-weight: bold;
                        }
                        .@{ant-prefix}-table-thead th {
                            text-align: center;
                        }
                    }
                }
                .cua-chart-box {
                    flex: 1;
                    background-color: #FFF;
                    padding: 4px 8px 8px 8px;
                    display: flex;
                    flex-direction: column;
                    .cua-chart-header {
                        flex: none;
                        display: flex;
                        align-items: center;
                        .cua-chart-title {
                            font-weight: bold;
                            line-height: 32px;
                            &::before {
                                content: "";
                                display: inline-block;
                                width: 3px;
                                height: 14px;
                                background-color: #1890ff;
                                vertical-align: -0.125em;
                                margin-right: 8px;
                            }
                        }
                        .cua-chart-subtitle {
                            margin-left: auto;
                        }
                    }
                    .cua-chart-content {
                        flex: 1;
                        overflow: hidden;
                    }

                    &.enviromentusing-chart-box {
                        .cua-chart-content {
                            overflow: visible;        
                        }                
                    }
                }
                
            }
        }
    }
}

.login-log-modal {
    :global {
        .login-log-modal-header {
            display: flex;
            margin-bottom: 16px;
            .@{ant-prefix}-form-item {
                margin-bottom: 0;
                margin-right: 8px;
            }
        }
        .login-log-modal-content {
            height: 500px;
        }
    }
}