.company-jobs-page-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  background-color: #f5f5f5;

  .company-jobs-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .company-jobs-page-spin {
      margin: 200px 500px;
    }

    .company-jobs-page-title {
      width: 100%;
      height: 42px;
      font-size: 20px;
      font-weight: 600;
      line-height: 30px;
      margin-bottom: 20px;
      color: #1d2129;
      flex-shrink: 0;
      position: relative;
      border-bottom: 1px solid #e5e6eb;

      &::after {
        content: "";
        position: absolute;
        left: 20px;
        bottom: 10px;
        width: 32px;
        height: 6px;
        background-image: url("@/assets/images/Common/title_icon.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    .company-jobs-page-left {
      width: 570px;
      height: 860px;
      border-radius: 8px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding: 20px;
      overflow: hidden;

      .company-jobs-page-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .company-jobs-page-title {
          font-size: 20px;
          font-weight: 600;
          line-height: 30px;
          color: #1d2129;
          margin: 0;
          flex: 1;
        }

        .view-all-jobs-btn {
          padding: 6px 16px;
          background-color: #ffffff;
          border: 1px solid #2c7aff;
          border-radius: 4px;
          color: #2c7aff;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          white-space: nowrap;
          flex-shrink: 0;
          margin-left: 20px;

          &:hover {
            background-color: #2c7aff;
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(44, 122, 255, 0.2);
          }

          &:active {
            transform: scale(0.98);
          }
        }
      }

      .company-jobs-page-left-list-wrapper {
        width: 100%;
        height: 760px;
        overflow: auto;
      }
    }

    .company-jobs-page-interview-wrapper {
      width: 572px;
      height: 860px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .company-jobs-page-interview-expand {
        height: 100% !important;
        margin: 0 !important;
      }

      .company-jobs-page-interview {
        width: 100%;
        height: 860px;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #ffffff;
        position: relative;
        border-radius: 8px;
        border-bottom: 1px solid #e5e6eb;

        .company-jobs-page-interview-list {
          width: 540px;
          height: 760px;
          overflow-y: auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;

          .interview-item-wrapper {
            width: 100%;
            margin-bottom: 10px;
            transition: all 0.3s ease;
          }

          .company-jobs-page-interview-item {
            flex-shrink: 0;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #e5e6eb;
            margin-bottom: 0;
            box-sizing: border-box;
            padding: 20px;
            list-style: none;
            background-color: #e5f1ff;
            background-image: url("@/assets/images/CompanyJobsPage/jobs_page_left_list_item_bg.png");
            background-size: 100% 100%;
            transition: all 0.3s ease;
            cursor: pointer;
            
            &:hover {
              border-color: #4080ff;
              box-shadow: 0 4px 12px rgba(44, 127, 255, 0.15);
              transform: translateY(-2px);
              background-color: #d9e9ff;
            }

            .company-jobs-page-interview-item-info {
              width: 100%;
              position: relative;

              .company-jobs-page-interview-item-info-position {
                width: 100%;
                height: 24px;
                font-size: 16px;
                font-weight: 600;
                line-height: 24px;
                margin-bottom: 5px;
                color: #1d2129;
              }

              .company-jobs-page-interview-item-info-tags {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 5px;
                margin-bottom: 5px;

                .company-jobs-page-interview-item-info-tag {
                  background-color: #ffffff;
                  box-sizing: border-box;
                  margin-bottom: 5px;
                  padding: 1px 8px;
                  color: #4e5969;
                  font-size: 12px;
                  font-weight: 600;
                  border-radius: 2px;
                  margin-right: 10px;
                }
              }

              .company-jobs-page-interview-item-info-salary {
                position: absolute;
                right: 0;
                top: 0;
                height: 22px;
                font-size: 14px;
                font-weight: 600;
                line-height: 22px;
                color: #ff7d00;
              }
            }

            .company-jobs-page-interview-item-btn-wrapper {
              width: 100%;
              height: 36px;
              position: relative;
              border: 1px solid #94bfff;
              border-radius: 4px;
              background-color: #e8f3ff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              box-sizing: border-box;
              padding: 0 20px;

              > span {
                font-size: 14px;
                font-weight: 600;
                line-height: 22px;
                color: #4e5969;
              }
              .company-jobs-page-interview-item-btn {
                font-size: 14px;
                font-weight: 600;
                line-height: 22px;
                color: #4e5969;
              }
              .company-jobs-page-interview-item-btn-active {
                color: #2c7aff;
                cursor: pointer;
                transition: all 0.3s ease;
                
                &:hover {
                  color: #1967d2;
                  text-decoration: underline;
                  transform: translateX(2px);
                }
              }
            }
          }
        }
      }
    }

    .company-jobs-page-process-wrapper-close {
      position: fixed;
      z-index: 1000;
      bottom: 20px;
      right: 20px;
      width: 96px;
      height: 66px;
      background-image: url("@/assets/images/CompanyJobsPage/process_wrapper_close_bg.png");
      background-size: 100% 100%;
      cursor: pointer;

      .company-jobs-page-process-wrapper-title {
        display: none;
      }

      .company-jobs-page-process-content {
        display: none;
      }
    }

    .company-jobs-page-process-wrapper-expand {
      position: fixed;
      z-index: 1000;
      bottom: 20px;
      right: 20px;
      width: 572px;
      height: 340px;
      background-image: linear-gradient(270deg, #e6f2ff, #ffffff);
      border: 1px solid #e5e6eb;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 10px;

      .company-jobs-page-process-wrapper-title {
        width: 100%;
        padding-bottom: 40px;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        margin-bottom: 20px;
        color: #1d2129;
        flex-shrink: 0;
        position: relative;
        border-bottom: 1px solid #e5e6eb;

        &::before {
          content: "";
          position: absolute;
          right: 0;
          top: 4px;
          width: 24px;
          height: 24px;
          background-image: url("@/assets/images/CompanyJobsPage/close_icon.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        &::after {
          content: "";
          position: absolute;
          left: 20px;
          bottom: 40px;
          width: 32px;
          height: 3px;
          background-image: url("@/assets/images/Common/title_icon.png");
          background-size: 100% 100%;
        }
      }

      .company-jobs-page-process-content {
        display: flex;
        box-sizing: border-box;
        padding: 80px 20px;
        width: 100%;
        height: 48px;
        justify-content: space-between;
        align-items: center;

        .company-jobs-page-process-item-icon {
          width: 48px;
          height: 48px;
          background-size: 100% 100%;
          position: relative;

          > p {
            width: 84px;
            position: absolute;
            left: 50%;
            bottom: -40px;
            transform: translateX(-50%);
            color: #4e5969;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
          }
        }

        .company-jobs-page-process-item-round-dot {
          width: 10px;
          height: 10px;
          background-image: url("@/assets/images/CompanyJobsPage/process_dot.png");
          background-size: 100% 100%;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: -40px;
            transform: translateX(-50%);
            width: 132px;
            height: 25px;
            background-size: 100% 100%;
          }

          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 68px;
            height: 0px;
            border: 1px dashed #c9cdd4;
          }
        }
        .icon1 {
          background-image: url("@/assets/images/CompanyJobsPage/process1.png");
        }
        .icon2 {
          &::before {
            background-image: url("@/assets/images/CompanyJobsPage/process2.png");
          }
        }
        .icon3 {
          background-image: url("@/assets/images/CompanyJobsPage/process3.png");
          > p {
            bottom: -20px;
          }
        }
        .icon4 {
          background-image: url("@/assets/images/CompanyJobsPage/process4.png");
          margin: 0 48px;

          &::after {
            content: "";
            position: absolute;
            right: -68px;
            top: 50%;
            transform: translateY(-50%);
            width: 68px;
            height: 0px;
            border: 1px dashed #c9cdd4;
          }
          &::before {
            content: "";
            position: absolute;
            left: -68px;
            top: 50%;
            transform: translateY(-50%);
            width: 68px;
            height: 0px;
            border: 1px dashed #c9cdd4;
          }
        }
        .icon5 {
          background-image: url("@/assets/images/CompanyJobsPage/process5.png");
          > p {
            bottom: -20px;
          }
        }
        .icon6 {
          &::before {
            background-image: url("@/assets/images/CompanyJobsPage/process6.png");
          }
        }
        .icon7 {
          background-image: url("@/assets/images/CompanyJobsPage/process7.png");
        }
      }
    }
  }
}