body,
ul,
li {
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* 设置滚动条的样式  background-color: #0f3a5c;*/
::-webkit-scrollbar {
    width: 6px !important;
    height: 10px !important;
    background-color: transparent;
    border-radius: 0;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: transparent !important;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba($color: $color-info, $alpha: 0.3);
}

html {
    font-family:
        Metropolis,
        Avenir Next,
        Helvetica Neue,
        Arial,
        sans-serif;
}

// 全局样式
.bg {
    background-color: var(--theme-bg-custom);
}

.fullPage {
    height: 100%;
    width: 100%;
}

.corporate-customers {
    width: 100%;
    display: flex;

    .full-page {
        display: flex;
        flex-direction: column;
        position: relative;

        .main-table-container {
            height: 0;
            flex: 1;
            box-shadow: $system-box-shadow1;
            overflow: hidden;

            .table-content {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 16px;
                height: calc(100%);
            }
        }
    }

    .table-page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--theme-bg-custom);

        .table-page-content {
            width: 100%;
            display: flex;
            flex: 1;
            transition: all 0.15s;
            overflow: hidden;

            .left-tree {
                border-radius: 8px;
                overflow: hidden;
                margin: 16px 0 16px 16px;
                background-color: var(--theme-system-module-1);
                width: 300px;
                box-shadow: $system-box-shadow1;

                :deep(.el-tree-node__content) {
                    padding: 2px 0;
                }
            }

            .right-table {
                flex: 1;
                width: 0;

                .search-box {
                    padding: 20px;
                    transition: all 1s;
                    background-color: var(--theme-system-module-1);
                    border-radius: 8px;
                    box-shadow: $system-box-shadow1;
                    margin-bottom: 14px;

                    .btn-box {
                        margin-bottom: 10px;
                    }

                    .search-box-combination {
                        display: flex;
                        column-gap: 16px;
                        align-items: center;

                        .basis {
                            min-width: 460px;
                        }

                        .search-box-label {
                            min-width: 80px;
                            text-align: right;
                            font-size: 14px;
                        }
                    }

                    .el-input__inner {
                        border-color: $system-border-color2;
                    }
                }

                .table-content {
                    width: 100%;
                    height: 100%;

                    .btn-box {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .right-btn-group {
                            width: 100px;
                            height: 34px;
                            box-sizing: border-box;
                            border: 1px solid $system-border-color3;
                            border-radius: 4px;
                            display: flex;
                            justify-content: space-evenly;
                            align-items: center;
                            // overflow: hidden;
                            position: relative;

                            .btn-group-item {
                                flex: 1;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                                overflow: hidden;
                                border-radius: 4px;

                                i {
                                    font-size: 16px;
                                    color: #94bad1;
                                }
                            }

                            .btn-group-item:hover,
                            .btn-group-item.active {
                                background-color: $color-primary;

                                i {
                                    color: $color-white;
                                }
                            }

                            .btn-group-item:nth-child(1) {
                                border-top-right-radius: 0;
                                border-bottom-right-radius: 0;
                            }

                            .btn-group-item:nth-child(3) {
                                border-top-left-radius: 0;
                                border-bottom-left-radius: 0;
                            }

                            .btn-group-item:nth-child(2) {
                                border-radius: 0;
                                border-left: 1px solid $system-border-color3;
                                border-right: 1px solid $system-border-color3;
                            }

                            .table-header-setting {
                                position: absolute;
                                width: 180px;
                                height: 278px;
                                right: 0;
                                top: calc(100% + 10px);
                                background: var(--theme-table-setting-bg);
                                box-shadow: 0px 2px 5px 0px rgba(51, 169, 255, 0.6);
                                border-radius: 4px 4px 4px 4px;
                                border: 1px solid #1368bf;
                                z-index: 2002;
                                padding: 12px 10px 8px 16px;
                                box-sizing: border-box;
                                display: flex;
                                flex-direction: column;

                                .el-scrollbar {
                                    height: 0;
                                    flex: 1;
                                }

                                .el-scrollbar__wrap {
                                    margin-bottom: 0 !important;
                                }

                                .el-scrollbar__bar.is-horizontal {
                                    display: none !important;
                                }

                                .el-checkbox {
                                    box-sizing: border-box;
                                    width: 100%;
                                    margin-bottom: 10px;
                                    margin-right: 0;
                                    display: flex;
                                    align-items: center;

                                    .el-checkbox__label {
                                        flex: 1;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                }

                                .el-checkbox:last-of-type {
                                    margin-bottom: 0px;
                                }

                                .el-checkbox:first-of-type {
                                    margin-bottom: 10px !important;
                                }
                            }

                            .table-header-setting:focus-visible {
                                outline: none;
                            }
                        }
                    }

                    .table-list {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    .edit-add-detail {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--theme-edit-add-detail-bg);
        padding: 16px;
        box-sizing: border-box;

        .edit-add-detail-new-content {
            display: flex;
            border-radius: 10px;
            overflow: hidden;

            .form-content {
                height: auto;
            }
        }

        &.detail {
            .form-content {
                display: flex;

                .el-form {
                    flex: 1;

                    .el-upload,
                    .el-upload-list__item-status-label,
                    .el-icon-close,
                    .el-icon-close-tip {
                        display: none;
                    }

                    .el-form-item {
                        display: flex;

                        .el-form-item__content {
                            width: 0;
                            flex: 1;
                            display: flex;
                            align-items: center;

                            .text {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                -o-text-overflow: ellipsis;
                                font-size: 14px;
                                line-height: 24px;
                                color: $system-table-text-color;
                                font-weight: 500;

                                &.show-all {
                                    display: inline-block;
                                    overflow: visible; /* 使内容完全显示 */
                                    white-space: normal; /* 允许换行 */
                                    text-overflow: clip; /* 关闭省略号效果 */
                                }
                            }
                        }
                    }
                }
            }
        }

        .form-content {
            flex: 1;
            height: 0;
            background-color: var(--theme-form-content-bg);
            padding: 20px 20px 20px 20px;
            border-radius: 10px;
            box-shadow: $system-box-shadow1;
            display: flex;
            justify-content: center;

            .el-form {
                overflow-x: hidden;
                overflow-y: scroll;
                max-height: 100%;

                &::-webkit-scrollbar {
                    display: none;
                    width: 6px !important;
                }

                .rows:first-child {
                    margin-top: 0px;
                }

                .rows {
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid $system-border-color2;
                    margin-bottom: 16px;
                    padding: 10px 0;
                    margin-top: 20px;

                    .rows-left {
                        margin-right: 10px;

                        .rows-hr {
                            width: 3px;
                            height: 18px;
                            background-color: $system-border-color1;
                            border-radius: 2px;
                        }
                    }

                    .rows-title {
                        .text-overflow {
                            width: 100%;
                            font-size: 16px;
                            color: $color-white;
                        }
                    }
                }

                .el-form-item {
                }

                .tag-box {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px 10px;
                }

                .dynamic-boxes-btn {
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 20px;
                }

                .attachment-tips-text {
                    display: flex;
                    color: var(--theme-attachment-tips-text);
                    column-gap: 3px;
                    font-size: 13px;

                    span {
                        color: var(--theme-attachment-tips-text);
                        font-size: 13px;
                    }
                }

                .btn-content {
                    width: 100%;
                    height: 36px;
                    border: 1px dashed $system-border-color3;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                    cursor: pointer;
                    transition: all 0.15s;
                    border-radius: 4px;
                    margin-bottom: 20px;

                    .el-icon-plus {
                        margin: 0 0 0 3px;
                    }

                    span,
                    i {
                        font-size: 14px;
                        transition: all 0.15s;
                    }

                    &:hover {
                        border-color: $system-border-color1;

                        span,
                        i {
                            color: $system-hover-active-text;
                        }
                    }
                }
            }

            &.show-scrollbar {
                .el-form {
                    margin-right: -18px;
                    padding-right: 10px;

                    &::-webkit-scrollbar {
                        display: block;
                    }
                }
            }
        }

        .footer {
            height: 100px;
            background-color: var(--theme-form-content-bg);
            margin-top: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            box-shadow: $system-box-shadow1;
        }

        .page-form {
            width: 70%;

            .download-btn-container {
                position: absolute;
                top: 50px;
                right: 50px;

                .download-icon {
                    font-size: 24px !important;
                    margin-right: 20px;
                    cursor: pointer;
                }

                .action-icon {
                    font-size: 24px !important;
                    cursor: pointer;
                }
            }

            .page-title {
                text-align: center;

                .page-main-title {
                    color: var(--theme-text-inverse);
                    font-size: 32px;
                    font-weight: 700;
                    margin: 40px 0 9px 0;
                }

                .page-line {
                    width: 100%;
                    border: 1px solid var(--theme-page-line-border);
                    margin-bottom: 40px;
                }
            }

            .title-collapse {
                display: flex;
                align-items: center;

                img {
                    width: 16px;
                    height: 16px;
                    margin: 0 8px 0 16px;
                }

                div {
                    font-size: 16px;
                    font-weight: 700;
                }
            }

            .required-asterisk {
                color: #f56c6c;
                font-size: 14px;
            }
        }
    }
}
.main-table-container {
    .search-box {
        padding: 20px;
        transition: all 1s;
        background-color: var(--theme-system-module-1);
        border-radius: 8px;
        box-shadow: $system-box-shadow1;
        margin-bottom: 14px;

        .btn-box {
            margin-bottom: 10px;
        }

        .search-box-combination {
            display: flex;
            column-gap: 16px;
            align-items: center;

            .basis {
                min-width: 460px;
            }

            .search-box-label {
                min-width: 80px;
                text-align: right;
                font-size: 14px;
            }
        }

        .el-input__inner {
            border-color: $system-border-color2;
        }
    }

    .table-content {
        width: 100%;
        height: 100%;

        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .right-btn-group {
                width: 100px;
                height: 34px;
                box-sizing: border-box;
                border: 1px solid $system-border-color3;
                border-radius: 4px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                // overflow: hidden;
                position: relative;

                .btn-group-item {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    overflow: hidden;
                    border-radius: 4px;

                    i {
                        font-size: 16px;
                        color: #94bad1;
                    }
                }

                .btn-group-item:hover,
                .btn-group-item.active {
                    background-color: $color-primary;

                    i {
                        color: $color-white;
                    }
                }

                .btn-group-item:nth-child(1) {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }

                .btn-group-item:nth-child(3) {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }

                .btn-group-item:nth-child(2) {
                    border-radius: 0;
                    border-left: 1px solid $system-border-color3;
                    border-right: 1px solid $system-border-color3;
                }

                .table-header-setting {
                    position: absolute;
                    width: 180px;
                    height: 278px;
                    right: 0;
                    top: calc(100% + 10px);
                    background: var(--theme-table-setting-bg);
                    box-shadow: 0px 2px 5px 0px rgba(51, 169, 255, 0.6);
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #1368bf;
                    z-index: 2002;
                    padding: 12px 10px 8px 16px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;

                    .el-scrollbar {
                        height: 0;
                        flex: 1;
                    }

                    .el-scrollbar__wrap {
                        margin-bottom: 0 !important;
                    }

                    .el-scrollbar__bar.is-horizontal {
                        display: none !important;
                    }

                    .el-checkbox {
                        box-sizing: border-box;
                        width: 100%;
                        margin-bottom: 10px;
                        margin-right: 0;
                        display: flex;
                        align-items: center;

                        .el-checkbox__label {
                            flex: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }

                    .el-checkbox:last-of-type {
                        margin-bottom: 0px;
                    }

                    .el-checkbox:first-of-type {
                        margin-bottom: 10px !important;
                    }
                }

                .table-header-setting:focus-visible {
                    outline: none;
                }
            }
        }

        .table-list {
            width: 100%;
            height: 100%;
        }
    }
}

.quill-editor {
    .ql-snow {
        border: 1px solid $system-border-color3 !important;

        .ql-formats {
            svg {
                path,
                line,
                rect,
                polyline {
                    stroke: $color-text-placeholder;
                }
            }

            .ql-picker {
                color: $color-text-placeholder;

                &:hover {
                    color: $system-hover-active-text;
                }

                .ql-picker-label {
                    svg {
                        polygon {
                            stroke: $color-text-placeholder;
                        }
                    }
                }
            }

            button {
                &:hover {
                    svg {
                        path,
                        line,
                        rect,
                        polyline {
                            stroke: $system-hover-active-text;
                        }
                    }
                }
            }
        }
    }

    .ql-editor {
        min-height: 100px !important;

        &::before {
            color: $color-text-placeholder !important;
            font-size: 13px;
        }

        img {
            width: 200px;
            height: 200px;
        }
    }
}

.import-popover {
    background-color: var(--theme-system-module-1);
    border: 1px solid $system-border-color1 !important;

    .popover-container {
        .popover-container-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .popover-container-title-left {
                font-size: 14px;
                column-gap: 5px;

                i {
                    color: $color-warning;
                    font-size: 18px;
                }
            }

            .popover-container-title-right {
                padding: 3px;
                cursor: pointer;

                i {
                    font-size: 18px;

                    &:hover {
                        color: $color-error;
                    }
                }
            }
        }

        .popover-container-content {
            font-size: 14px;
            text-indent: 22px;
            margin: 10px 0 15px;
            line-height: 22px;
        }

        .popover-container-btn {
            display: flex;
            justify-content: flex-end;
            column-gap: 10px;
        }
    }
}

.full-page {
    width: 100%;
    height: 100%;
    padding: 16px 16px 16px 16px;
    box-sizing: border-box;
    // background-color: var(--theme-bg-custom);
}

.main-table-container {
    height: calc(100% - 70px);
    padding: 0;
    // margin: 14px 0 0 0 !important;
    box-sizing: border-box;
    border-radius: 8px;
    transition: height 0.3s linear;
    -webkit-transition: height 0.3s linear;
    -moz-transition: height 0.3s linear;
    -ms-transition: height 0.3s linear;
    -o-transition: height 0.3s linear;
    display: flex;
    flex-direction: column;

    .search-wrapper {
        max-height: 76px;
        background-color: var(--theme-search-wrapper-bg);
        box-sizing: border-box;
        padding: 20px 20px 0 20px;
        border-bottom: 1px solid var(--theme-border-search);
        transition: all 0.3s linear;
        overflow: hidden;
    }

    .search-wrapper.show {
        max-height: 400px;
        padding: 20px 20px 0 20px;
    }

    .search-wrapper.hide {
        max-height: 0 !important;
        padding: 0;
    }

    .table-container {
        flex: 1;
        padding: 20px !important;
        background-color: var(--theme-search-wrapper-bg);
        position: relative;
        box-sizing: border-box;
        transition: all 0.3s linear;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .title {
            font-size: 16px;
        }

        .title-icon {
            font-size: 18px;
            font-weight: bold;
            color: #409eff;
            margin-right: 10px;
        }
    }
}

.el-date-table.is-week-mode .el-date-table__row.current div {
    background-color: rgba(67, 161, 255, 0.5);
}

.el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: rgba(67, 161, 255, 0.5);
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.el-input.is-disabled .el-input__inner {
    -webkit-text-fill-color: val(--theme-text-inverse) !important;
    color: val(--theme-text-inverse) !important;
}
.is-disabled .el-input__inner:hover,
.is-disabled .el-checkbox__inner:hover {
    border: 0 !important;
}
// 功能页面样式
.unit-style {
    color: var(--theme-text-inverse);
    margin-left: 8px;
    white-space: nowrap;
}

.page-form .el-form-item__content {
    // color: #cceeff;
    color: var(--theme-text-inverse);
}

.operation-buttons {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-link {
        text-align: center;
        padding: 0 8px;
    }
}

.name-style {
    // color: #00ffff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-col-start {
    align-items: flex-start;
}

.flex-col-end {
    align-items: flex-end;
}

.full-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

@for $i from 0 through 200 {
    .flex-gap-#{$i} {
        gap: #{$i}px;
    }
    .flex-gap-row-#{$i} {
        row-gap: #{$i}px;
    }
    .flex-gap-col-#{$i} {
        column-gap: #{$i}px;
    }
}

@for $i from 0 through 100 {
    .flex-#{$i} {
        flex: #{$i};
    }
}

.title-collapse {
    display: flex;
    align-items: center;

    img {
        width: 16px;
        height: 16px;
        margin: 0 8px 0 16px;
    }

    div {
        font-size: 16px;
        font-weight: 700;
    }
}

.required-asterisk {
    color: #f56c6c;
    font-size: 14px;
}

/*
  width height
*/
@for $i from 0 through 1000 {
    .height-#{$i} {
        height: #{$i} + '%';
    }
    .height-px-#{$i} {
        height: #{$i}px;
    }
    .width-#{$i} {
        width: #{$i} + '%';
    }
    .width-px-#{$i} {
        width: #{$i}px;
    }
}

/*
  padding margin
*/
@for $i from 0 through 200 {
    .padding-#{$i} {
        padding: #{$i}px;
    }
    .padding-col-#{$i} {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
    }
    .padding-row-#{$i} {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
    }
    .padding-top-#{$i} {
        padding-top: #{$i}px;
    }
    .padding-bottom-#{$i} {
        padding-bottom: #{$i}px;
    }
    .padding-left-#{$i} {
        padding-left: #{$i}px;
    }
    .padding-right-#{$i} {
        padding-right: #{$i}px;
    }
    .margin-#{$i} {
        margin: #{$i}px;
    }
    .margin-col-#{$i} {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
    }
    .margin-row-#{$i} {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
    }
    .margin-top-#{$i} {
        margin-top: #{$i}px;
    }
    .margin-bottom-#{$i} {
        margin-bottom: #{$i}px;
    }
    .margin-left-#{$i} {
        margin-left: #{$i}px;
    }
    .margin-right-#{$i} {
        margin-right: #{$i}px;
    }
}

.relative {
    position: relative;
}

.el-collapse-item__wrap {
        background-color: var(--theme-system-module-1) !important;
}

.overflow-hidden {
    overflow: hidden;
}
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    color: var(--theme-text-primary);
    padding-left: 10px;

    .el-icon {
        font-size: 18px;
        margin-top: -2px;
    }
}

.content-area {
    /* 确保容器的高度计算正确 */
    box-sizing: border-box;

    .el-collapse {
        /* 通过添加 1px 来补偿 border 导致的 1px 高度差 */
        margin-bottom: 1px;
    }
}

.content-area-menu {
    /* 确保容器的高度计算正确 */
    box-sizing: border-box;

    .el-collapse {
        /* 通过添加 1px 来补偿 border 导致的 1px 高度差 */
        margin-bottom: 1px;
    }
}