/* home */
.home-body {
  background: var(--color-background);
  padding: 72px 16px 16px 216px;
  min-height: 100vh;
  position: relative;
  transition: padding-left 0.3s;
}

/* navs */
.home-navs {
  position: fixed;
  width: 201px;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow: auto;
  font-size: 14px;
  background: #e5f4ff;
  border-right: 1px solid var(--color-border);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .home-title {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;

    .svg-icon {
      font-size: 24px;
      margin-right: 8px;
    }

    h1 {
      font-weight: 700;
      font-size: 16px;
    }
  }
  .el-menu {
    background-color: transparent;
    border-right: none;

    &.el-menu-home {
      padding: 16px 8px;
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .svg-icon {
      margin-right: 8px;
      font-size: 16px;
      color: #b8cade;
    }
    .el-sub-menu__icon-arrow {
      color: #a4b4c6;
      font-size: 14px;
    }

    .el-menu-item {
      height: auto;
      min-height: 38px;
      line-height: 20px;
      white-space: normal;
      margin: 4px 0;
      color: var(--color-text-dark);
      padding-left: 16px;
      border-radius: 6px;

      &:hover {
        background-color: var(--el-color-primary-light-7);
      }

      &.is-active {
        background: var(--color-primary);
        box-shadow: 0px 4px 8px #7fc3ff;
        color: var(--color-white);
      }
    }
    .el-sub-menu {
      &.is-active {
        .svg-icon,
        .el-sub-menu__title,
        .el-sub-menu__icon-arrow {
          color: var(--color-primary);
        }
      }

      .el-sub-menu__title {
        border-radius: 6px;

        &:hover {
          background-color: var(--el-color-primary-light-7);
        }
      }

      .el-menu-item {
        padding-left: 44px !important;
      }
    }
    .el-sub-menu__title {
      height: auto;
      min-height: 38px;
      line-height: 20px;
      white-space: normal;
    }
  }
  .nav-footer {
    padding: 16px;
    font-size: 14px;
    height: 70px;
    line-height: 38px;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      width: 152px;
      height: 1px;
      background: var(--color-border);
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    .el-button {
      color: var(--color-text-dark);
      border-bottom: 1px solid var(--color-text-dark);
      border-radius: 0;

      &:hover {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
      }
    }
    .svg-icon {
      font-size: 16px;
    }
  }
}

/* head */
.home-header {
  position: fixed;
  height: 56px;
  top: 0;
  right: 0;
  left: 201px;
  z-index: 99;
  padding: 11px 16px 11px;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  transition: left 0.3s;

  .home-exam {
    display: flex;
    align-items: center;

    .el-button {
      padding: 9px 8px;
      margin-right: 10px;
      height: 34px;
    }

    .svg-icon {
      font-size: 18px;
    }

    > span {
      font-weight: 500;
      color: var(--color-text-dark);
      font-size: 16px;
    }
  }

  .home-tips {
    height: 34px;
    background: #e8f3ff;
    border: 1px solid #c3deff;
    border-radius: 6px;
    padding: 5px 12px;
    color: var(--color-primary);

    display: flex;
    align-items: center;

    .svg-icon {
      margin-right: 8px;
      font-size: 20px;
    }
  }

  .home-action {
    .el-button {
      padding: 9px 8px;
      margin-right: 10px;
      height: 34px;
      margin: 0;
      color: var(--color-text-dark);
      font-size: 16px;
    }

    .svg-icon {
      font-size: 18px;
    }
  }
}

// menu-dialog
.menu-dialog {
  .arco-dialog.is-fullscreen {
    border-radius: 0;
    box-shadow: none;

    .arco-dialog__body {
      padding: 10px;

      &::after {
        display: none;
      }
    }
  }

  .menu-logout {
    padding: 10px;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border: 1px solid var(--color-text-gray-1);
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    color: var(--color-text-gray-1);
    cursor: pointer;

    &:hover {
      border-color: var(--color-danger);
      color: var(--color-danger);
    }
  }
}

// home-breadcrumb
.home-breadcrumb {
  margin-bottom: 16px;

  .breadcrumb-tips {
    display: inline-block;
    vertical-align: middle;
    color: var(--color-text-gray);

    > .svg-icon {
      margin-top: -3px;
      margin-right: 5px;
      font-size: 14px;
    }
  }

  .arco-breadcrumb {
    display: inline-block;
    vertical-align: middle;

    .arco-breadcrumb-item {
      line-height: 22px;
      color: var(--color-text-gray);
    }

    .arco-breadcrumb-item-separator {
      margin: 0;
    }
    .arco-breadcrumb-item:last-child {
      font-weight: normal;
    }
  }
}

// home-view

/* view-footer */
.home-footer {
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: 0;
  left: 0;
  z-index: 99;
  padding: 5px 0;
  line-height: 20px;
  color: var(--color-text-gray-1);
  text-align: center;
  font-size: 13px;
  background-color: var(--color-background);

  a {
    color: var(--color-text-gray-1);
  }

  a:hover {
    color: var(--color-text-gray);
  }
}

.home.is-collapse {
  .home-navs {
    width: 64px;
    overflow-x: hidden;

    .home-title {
      padding: 16px 5px;
      justify-content: center;
      .svg-icon {
        margin: 0;
      }

      > h1 {
        display: none;
      }
    }

    .el-menu {
      .svg-icon {
        margin: 0;
      }
      .el-menu-item {
        padding: 0 5px;
        justify-content: center;

        > span {
          display: none;
        }
      }
      .el-sub-menu__title {
        padding: 0 5px;
        justify-content: center;

        > span {
          display: none;
        }
      }
    }
  }
  .home-body {
    padding-left: 80px;
  }
  .home-header {
    left: 64px;
  }
}

// .home-guide
.home-guide {
  position: absolute;
  left: 216px;
  top: 72px;
  bottom: 16px;
  right: 16px;

  padding: 20px;
  background-image: url(../images/bg-guide.png);
  background-repeat: repeat;
  background-size: 75px 75px;

  border-radius: 10px;
  border: 1px solid var(--color-border-light);

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 1074px;
  min-height: 692px;

  .guide-container {
    margin: 0 auto;
    position: relative;
  }

  .guide-row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;

    .guide-card {
      height: 292px;
    }

    &:not(:first-child) {
      margin-top: 108px;

      .guide-card {
        height: 252px;
      }
    }
  }

  .guide-card {
    background: var(--color-white);
    padding: 16px;
    min-height: 252px;
    min-width: 230px;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .card-icon {
    margin-right: 6px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 1px solid #dddddd;
    text-align: center;
    padding: 5px;
    font-size: 16px;
    background-color: #fff;
  }

  .card-title {
    font-weight: 600;
    margin: 0;
    line-height: 26px;
    color: #000201;
    font-size: 16px;
  }

  .card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 14px;
    color: #000201;
    height: 38px;
    background: linear-gradient(180deg, #ffffff 0%, #e5e5e5 100%);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }
  .menu-box {
    .menu-item {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    .menu-body {
      padding: 8px 12px;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-top: none;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;

      .number {
        font-weight: 600;

        &.orange {
          color: var(--color-warning);
        }
      }
    }
  }

  .arrow-right {
    width: 0;
    height: 0;
    border-left: 6px solid var(--color-text-dark);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  .connection-arrow {
    width: 84px;
    height: 22px;
    background-image: url(../images/bg-arrow.png);
    background-size: 100% 100%;

    &.left {
      transform: rotate(-180deg);
    }

    &.bottom {
      transform: rotate(90deg);
    }

    &.row-arrow {
      position: absolute;
      top: 332px;
      right: 73px;
      transform-origin: center;
    }
  }

  .guide-mark {
    width: 358px;

    .card-content {
      position: relative;
      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 175px;
        top: -12px;
        left: 15px;
        border-left: 1px solid #ddd;
        z-index: 2;
      }
    }

    .guide-branch {
      position: absolute;
      width: 8px;
      height: 93px;
      border: 1px solid #ddd;
      border-right: none;
      top: 20px;
      right: 194px;

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 13px;
        height: 0;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        border-bottom: 1px solid #ddd;
        z-index: 2;
      }
    }
    .guide-line {
      position: absolute;
      width: 42px;
      height: 0;
      border-bottom: 1px solid #ddd;
      bottom: 18px;
      right: 194px;
    }
  }

  .mark-step {
    display: flex;
    align-items: center;

    .step-title {
      flex: 1;
      position: relative;
      padding-left: 28px;
      z-index: 9;

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
        left: 11px;
        top: 50%;
        margin-top: -5px;
        box-sizing: border-box;
        background-color: #fff;
      }
    }
    .step-content {
      width: 210px;
      padding-left: 16px;

      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }

  .guide-score {
    width: 358px;

    .card-content {
      position: relative;
      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 99px;
        top: 18px;
        left: 9px;
        border-left: 1px solid #ddd;
        z-index: 2;
      }
    }
  }

  .process-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-dark-1);
    z-index: 9;

    .step-number {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      color: var(--color-primary);
      border: 1px solid #7cb5ec;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .menu-item {
      flex: 1;

      > span {
        flex: 1;
      }
    }

    .status-icon {
      font-size: 16px;
      margin-right: 12px;

      &.success {
        color: var(--color-success);
      }
    }
  }
}
