@import '@/assets/css/element-variables.scss';

/* 设置滚动条的样式  background-color: #0f3a5c;*/
::-webkit-scrollbar {
  width: 10px !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: $--system-border-color5;
}

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

// 全局样式
.bg {
  background-color: $--system-background-color;
}

.corporate-customers {
  width: 100%;
  height: 100%;
  display: flex;
  background: url(~@/assets/img/loading.gif) no-repeat 50%;

  .transition-group {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .fold-left-enter-active {
    animation: fold-left-in 0.5s;
  }

  .fold-left-leave-active {
    animation: fold-left-on 0.5s;
  }

  .fold-right-enter-active {
    animation: fold-right-in 0.5s;
  }

  .fold-right-leave-active {
    animation: fold-right-on 0.5s;
  }

  @keyframes fold-left-in {
    0% {
      transform: translate3d(-10%, 0, 0);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes fold-left-on {
    0% {
      transform: translate3d(0%, 0, 0);
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      transform: translate3d(10%, 0, 0);
      opacity: 0;
    }
  }

  @keyframes fold-right-in {
    0% {
      transform: translate3d(10%, 0, 0);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes fold-right-on {
    0% {
      transform: translate3d(0%, 0, 0);
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      transform: translate3d(-10%, 0, 0);
      opacity: 0;
    }
  }


  .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;
        height: calc(100%);
      }
    }
  }

  .table-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: $--system-background-color;

    .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: $--system-module-color1;
        width: 300px;
        box-shadow: $--system-box-shadow1;

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

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

        .search-box {
          padding: 20px;
          transition: all 1s;
          background-color: $--system-module-color1;
          border-radius: 8px;
          box-shadow: $--system-box-shadow1;

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

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

      }
    }
  }

  .edit-add-detail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: $--system-background-color;
    padding: 20px;
    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: $--system-module-color1;
      padding: 10px 20px;
      border-radius: 10px;
      box-shadow: $--system-box-shadow1;

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

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

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

          .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: $--color-text-placeholder;
          column-gap: 3px;
          font-size: 13px;

          span {
            color: $--color-text-placeholder;
            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: $--system-module-color1;
      margin-top: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      box-shadow: $--system-box-shadow1;
    }
  }
}

.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: $--system-module-color1;
  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;
}

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

  .table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px !important;
    background-color: $--system-module-color1;
    position: relative;
    box-sizing: border-box;

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

.time-select-item {
  color: #f0f0f0 !important;
}

.time-select-item:hover {
  background-color: #0d304d !important;
}

.time-select-item.selected:not(.disabled) {
  color: #43a1ff !important;
}

.el-color-picker__trigger {
  border-color: #409eff;
}

.el-table__footer-wrapper tbody td.el-table__cell {
  background: #114066;
  color: #c3cad0;
  border: none;
}

.el-table__footer-wrapper tbody th.el-table__cell {
  background: #114066;
  color: #c3cad0;
  border: none;
}


/* 在全局或组件样式中添加 */
.el-table__body-wrapper.custom-height-100 {
  height: calc(100% - 100px) !important;
}

.el-table__body-wrapper.custom-height-140 {
  height: calc(100% - 140px) !important;
}

.main-table-container .table-container .btn-box {
  margin-bottom: 20px;
}