// Jobs 页面样式
// 颜色变量已移至全局 variables.scss
@use '../variables' as *;

.jobs-page {
  display: flex;

  &__content {
    margin-left: 2.2rem;
    margin-right: var(--chat-width, 3.6rem);
    flex: 1;
    padding-bottom: 0.18rem;
    height: var(--app-height, 100vh);
    box-sizing: border-box;
    overflow: hidden;
    background: $bg-main;
    font-size: 0.14rem;
  }

  // 页面标题
  &__header {
    margin-bottom: 0;
  }

  &__title {
    font-size: 0.24rem;
    font-weight: 700;
    color: $text-dark;
    margin: 0 !important;
    padding: 0;
    line-height: 1.1;
  }

  &__subtitle {
    font-size: 0.13rem;
    color: $text-light;
    margin: 0.02rem 0 0 0 !important;
    padding: 0;
  }

  // Tab 切换
  &__tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    margin: 0.06rem 0 0.16rem 0;
    background: $bg-white;
    border-radius: 0.22rem;
    padding: 0.04rem;
  }

  &__tab {
    font-size: 0.13rem;
    color: $text-light;
    cursor: pointer;
    padding: 0.06rem 0.22rem;
    border-radius: 0.18rem;
    transition: all 0.25s ease;
    user-select: none;
    font-weight: 500;

    &:hover {
      color: $text-dark;
      background: $theme-color;
    }

    &--active {
      background: $accent;
      color: $bg-white;
      font-weight: 600;
      box-shadow: 0 0.02rem 0.08rem rgba(79, 194, 201, 0.3);

      &:hover {
        background: $accent-hover;
        color: $bg-white;
      }
    }
  }

  // 筛选条件外层白色背景条
  &__filters-bar {
    border-radius: 0.12rem;
    margin: 0 0.24rem 0.5rem 0.24rem;
  }

  // AI 推荐提示条外层
  &__ai-tip-wrapper {
    position: relative;
    margin: -0.38rem 0.24rem 0.12rem 0.24rem;
  }

  // 尖角容器（用双伪元素实现：::before 画品牌色外三角，::after 画白色内三角遮住底边）
  &__ai-tip-arrow {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 2;

    // 外层三角（品牌色边框）
    &::before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 0.07rem solid transparent;
      border-right: 0.07rem solid transparent;
      border-bottom: 0.12rem solid $accent;
    }

    // 内层白色三角（覆盖外层内部，只露出约0.5px边框）
    &::after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(1px);
      width: 0;
      height: 0;
      border-left: 0.065rem solid transparent;
      border-right: 0.065rem solid transparent;
      border-bottom: 0.112rem solid $bg-white;
    }
  }

  // 提示条主体
  &__ai-tip {
    position: relative;
    background: $bg-white;
    border: 1px solid $accent;
    border-radius: 0.08rem;
    padding: 0.08rem 0.12rem 0.07rem 0.12rem;
    z-index: 1;
  }

  // 提示条内容行
  &__ai-tip-content {

  }

  // Nova logo
  &__ai-tip-logo {
    width: 0.16rem;
    height: 0.16rem;
    flex: none;
  }

  // 提示文字
  &__ai-tip-text {
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: $accent;
    vertical-align: text-top;
    margin-left: 0.03rem;
  }

  // 筛选条件
  &__filters {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    flex-wrap: wrap;
  }

  &__filter-group {
    display: flex;
    align-items: center;
    gap: 0.08rem;
  }

  &__filter-item {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 0.08rem;
    padding: 0.15rem 0.12rem;
    color: $text-middle;
    font-size: 0.12rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    height: 0.234rem;

    &:hover {
      color: #fff;
      background: $btn-dark;
      svg{
        color: #fff;
      }
    }
  }

  // 工作类型下拉菜单
  &__filter-dropdown {
    position: absolute;
    top: calc(100% + 0.06rem);
    left: 0;
    background: $bg-white;
    border: 1px solid #E8E8E8;
    border-radius: 0.08rem;
    padding: 0.04rem 0;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.08);
    z-index: 20;
    min-width: 100%;
  }

  // 下拉菜单选项
  &__filter-dropdown-item {
    padding: 0.06rem 0.16rem;
    font-size: 0.12rem;
    color: $text-dark;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;

    &:hover {
      background: $theme-color;
      color: $accent-hover;
    }

    // 选中态
    &--active {
      color: $accent;
      font-weight: 600;
    }
  }

  &__filter-arrow-icon {
    width: 0.1rem;
    height: 0.1rem;
    color: $text-light;
    flex-shrink: 0;
  }

  &__search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: $bg-white;
    border-radius: 0.08rem;
    padding: 0.08rem 0.14rem;
    min-width: 1.6rem;

    &:focus-within {
    }
  }

  &__search-svg {
    width: 0.14rem;
    height: 0.14rem;
    color: $text-light;
    margin-right: 0.08rem;
    flex-shrink: 0;
  }

  &__search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: $text-dark;
    font-size: 0.12rem;

    &::placeholder {
      color: $text-light;
    }
  }

  // 职位列表（用 calc 减去上方头部+筛选栏大致高度，保证列表独立滚动）
  &__list {
    gap: 0;
    overflow-y: auto;
    height: calc(var(--app-height, 100vh) - 1.8rem);
    padding-bottom: 0.2rem;
    margin: 0 0.24rem;

    // 列表中每张卡片间距用 margin-bottom 替代 gap
    & > .jobs-page__job-card {
      margin-bottom: 0.12rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &__job-card {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.2rem 0.24rem;
    transition: all 0.25s ease;
    border: 0.02rem solid transparent;
    cursor: pointer;
    position: relative;

    &:hover {
      box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.06);
      //background: #fbfbfb;
    }

    &--selected {
      border-color: $accent;
      background: $selected-color;
      box-shadow: 0 0.02rem 0.12rem rgba(79, 194, 201, 0.12);
    }
  }

  &__job-main {
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
  }

  // ========== 左栏：职位信息 ==========
  &__col-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;  // 纵排，配合 meta-bottom 的 margin-top: auto 把它推到底部
  }

  &__job-title-row {
    display: flex;
    align-items: center;
    gap: 0.08rem;
  }

  &__job-name {
    font-size: 0.18rem;
    font-weight: 620;
    color: #000000;
    line-height: 0.24rem;
  }

  // 收藏红心
  &__favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.02rem;
    display: flex;
    align-items: center;
    color: #8C8C8C;
    transition: color 0.2s;

    &:hover {
      color: $danger;
    }

    &--liked {
      color: $danger;
    }
  }

  &__favorite-svg {
    width: 0.16rem;
    height: 0.16rem;
  }

  &__job-remove {
    color: $text-light;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.04rem;
    border-radius: 0.04rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;

    &:hover {
      color: $danger;
      background: #FFF0ED;
    }
  }

  &__remove-svg {
    width: 0.14rem;
    height: 0.14rem;
  }

  // 职位标签
  &__job-tags {
    display: flex;
    gap: 0.08rem;
    flex-wrap: wrap;
    margin-top: 0.14rem;
  }

  &__job-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.04rem 0.06rem;
    background: #F4F4F4;
    border-radius: 0.04rem;
    font-size: 0.12rem;
    font-weight: 330;
    color: #929292;
    line-height: 0.16rem;
  }

  // 底部：地区 + 学历 + 招聘分类，margin-top: auto 把它推到左栏底部
  &__job-meta-bottom {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    margin-top: auto;
    padding-top: 0.08rem;
    flex-wrap: wrap;
  }

  &__meta-location {
    display: flex;
    align-items: center;
    gap: 0.02rem;
    font-size: 0.14rem;
    font-weight: 330;
    color: #8C8C8C;
    line-height: 0.19rem;
  }

  &__location-icon {
    width: 0.18rem;
    height: 0.18rem;
    color: #8C8C8C;
    flex-shrink: 0;
  }

  &__meta-edu {
    font-size: 0.14rem;
    font-weight: 330;
    color: #8C8C8C;
    line-height: 0.19rem;
  }

  &__meta-recruit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.02rem 0.06rem;
    background: #EDF9FA;
    border-radius: 0.04rem;
    font-size: 0.12rem;
    font-weight: 330;
    color: $accent;
    line-height: 0.16rem;
  }

  // ========== 中栏：公司信息（居中） ==========
  &__col-center {
    flex: 1;       // 参与 flex 空间分配，获得真实宽度约束
    min-width: 0;  // 防止内容撑破 flex 容器
  }

  // 公司信息容器，需要 min-width 才能让内部标签换行
  &__company-info {
    min-width: 0;
  }

  &__company-row {
    display: flex;
    align-items: center;
    gap: 0.06rem;
    margin-bottom: 0.06rem;
    flex-wrap: wrap;
  }

  &__company-logo {
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 0.04rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.24rem;
    color: #8C8C8C;
    overflow: hidden;
  }

  &__company-name {
    font-size: 0.18rem;
    font-weight: 330;
    color: #000000;
    line-height: 0.24rem;
  }

  &__company-tags {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    flex-wrap: wrap;
    min-width: 0;  // 允许内容收缩触发换行
    margin-top: 0.14rem;
  }

  &__company-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.04rem 0.06rem;
    background: #F4F4F4;
    border-radius: 0.04rem;
    font-size: 0.12rem;
    font-weight: 330;
    color: #929292;
    line-height: 0.16rem;
  }

  // ========== 右栏：操作按钮 ==========
  &__col-right {
    display: flex;
    flex-direction: column;
    text-align: right;
  }

  &__job-action-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem;
  }

  &__job-helper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.16rem;
    border: 1.23px solid $accent;
    border-radius: 0.08rem;
    background: none;
    font-size: 0.14rem;
    font-weight: 450;
    color: $accent;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 0.19rem;
    white-space: nowrap;

    &:hover {
      background: $theme-color;
    }
  }

  &__job-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.16rem;
    background: $accent;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.14rem;
    font-weight: 450;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 0.19rem;
    white-space: nowrap;

    &:hover {
      background: $accent-hover;
    }

    &--active {
      background: $accent;
      color: #FFFFFF;
    }
  }

  // 不再显示（默认隐藏，hover 卡片时显示）
  &__hide-btn {
    display: block;
    margin-top: auto;
    font-size: 0.14rem;
    font-weight: 330;
    color: #8C8C8C;
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s;
    line-height: 0.19rem;
    white-space: nowrap;
    opacity: 0;

    &:hover {
      color: $text-dark;
    }
  }

  // hover 卡片时显示"不再显示"按钮
  &__job-card:hover &__hide-btn {
    opacity: 1;
  }

  // 弹出菜单
  &__job-popup {
    position: absolute;
    right: 1.4rem;
    top: 0.5rem;
    background: $bg-white;
    border: 1px solid #E8E8E8;
    border-radius: 0.1rem;
    padding: 0.06rem 0;
    box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  &__job-popup-item {
    padding: 0.08rem 0.2rem;
    font-size: 0.12rem;
    color: $text-dark;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;

    &:hover {
      background: $theme-color;
      color: $accent-hover;
    }
  }

  // ========== 最右侧：匹配度 ==========
  &__job-match {
    width: 1.01rem;
    text-align: center;
    flex-shrink: 0;
    border-radius: 0.08rem;
    padding: 0.14rem 0.1rem;
    transition: all 0.25s ease;

    &--high {
      background: #FBFDF7;
    }

    &--medium {
      background: #FFFBF5;
    }

    &--low {
      background: #FFF6F5;
    }
  }

  &__match-ring {
    position: relative;
    width: 0.62rem;
    height: 0.62rem;
    margin: 0 auto;
  }

  &__ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__match-score {
    font-size: 0.18rem;
    font-weight: 620;
    line-height: 0.62rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
  }

  &__match-level {
    font-size: 0.13rem;
    font-weight: 620;
    line-height: 0.19rem;
    margin-top: 0.04rem;
  }

  // 高匹配度颜色
  &__job-match--high &__match-score {
    color: #9FD051;
  }

  &__job-match--high &__match-level {
    color: #9FD051;
  }

  // 中匹配度颜色
  &__job-match--medium &__match-score {
    color: #F59E0B;
  }

  &__job-match--medium &__match-level {
    color: #F59E0B;
  }

  // 低匹配度颜色
  &__job-match--low &__match-score {
    color: #FE6D52;
  }

  &__job-match--low &__match-level {
    color: #FE6D52;
  }

  // 未登录锁定态
  &__job-match--locked {
    background: $bg-main;
    border: 1px solid #E8E8E8;
  }

  &__lock-icon {
    width: 0.32rem;
    height: 0.32rem;
    color: $text-light;
    display: block;
    margin: 0 auto 0.06rem;
  }

  &__match-lock-text {
    font-size: 0.1rem;
    color: $text-light;
    white-space: nowrap;
  }

  // 收藏统计栏
  &__fav-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  &__fav-stats-item {
    font-size: 0.14rem;
    color: $text-dark;
    font-weight: 500;
    cursor: pointer;
    padding: 0.04rem 0.08rem;
    border-radius: 0.06rem;
    transition: all 0.2s;

    &:hover {
      color: $accent;
    }

    &--active {
      color: $accent;
      font-weight: 600;
      background: $theme-color;
    }
  }

  // 暂无数据提示
  &__empty {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.14rem;
    color: $text-light;
  }

  // 加载更多提示
  &__loading-more {
    text-align: center;
    padding: 0.16rem 0;
    font-size: 0.12rem;
    color: $text-light;
    z-index: 10;
  }

  // 列表底部加载盒子
  &__loading-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    padding: 0.24rem 0;
    font-size: 0.13rem;
    color: $text-light;
  }

  // 加载旋转动画
  &__loading-spinner {
    width: 0.18rem;
    height: 0.18rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: $accent;
    border-radius: 50%;
    animation: jobs-spin 0.6s linear infinite;
  }

  @keyframes jobs-spin {
    to { transform: rotate(360deg); }
  }

  // ==================== 选择投递方式弹窗 ====================

  // 遮罩层
  &__apply-method-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $overlay-bg;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }

  // 弹窗主体
  &__apply-method-dialog {
    position: relative;
    width: 4.8rem;
    background: $bg-white;
    border: 1px solid #F0F0F0;
    box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
    border-radius: 0.12rem;
    padding: 0.28rem 0.32rem 0.32rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  // 渐变背景层
  &__apply-method-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
    border-radius: 0.12rem;
    pointer-events: none;
  }

  // 标题
  &__apply-method-title {
    position: relative;
    font-size: 0.18rem;
    font-weight: 620;
    color: $text-dark;
    text-align: center;
    margin: 0 0 0.2rem 0;
    line-height: 0.24rem;
  }

  // 关闭按钮
  &__apply-method-close {
    position: absolute;
    top: 0.24rem;
    right: 0.24rem;
    width: 0.24rem;
    height: 0.24rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    &:hover {
      opacity: 0.7;
    }
  }

  // 选项卡容器
  &__apply-method-options {
    position: relative;
    display: flex;
    gap: 0.16rem;
    margin-bottom: 0.24rem;
  }

  // 选项卡
  &__apply-method-card {
    position: relative;
    flex: 1;
    height: 1.06rem;
    background: $bg-white;
    border: 1px solid #F0F0F0;
    border-radius: 0.08rem;
    padding: 0.2rem 0;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;

    &:hover {
      border-color: #D0D0D0;
    }

    // 选中态
    &--active {
      border-color: $accent;
      background: #EDF9FA;
    }
  }

  // 选项卡标题
  &__apply-method-card-title {
    font-size: 0.14rem;
    font-weight: 450;
    color: #000;
    margin: 0;
    line-height: 0.19rem;

    // 品牌色标题
    &--accent {
      color: $accent;
    }
  }

  // 选项卡描述文字
  &__apply-method-card-desc {
    font-size: 0.12rem;
    font-weight: 330;
    color: $text-light;
    line-height: 0.2rem;
    margin: 0.06rem 0 0 0;
    white-space: pre-line;
  }

  // 选项卡头部（icon + 标题）
  &__apply-method-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
  }

  // 左下角圆形装饰
  &__apply-method-card-circle {
    position: absolute;
    width: 0.46rem;
    height: 0.46rem;
    left: -0.05rem;
    bottom: -0.08rem;
    background: #AEE6EA;
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.2s;

    .jobs-page__apply-method-card--active & {
      opacity: 1;
    }

    // 圆形上的两个白色小圆点（眼睛）
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 0.04rem;
      height: 0.09rem;
      background: $bg-white;
      border-radius: 0.02rem;
      top: 40%;
    }

    &::before {
      left: 42%;
    }

    &::after {
      left: 60%;
    }
  }

  // 底部操作按钮
  &__apply-method-action {
    position: relative;
    width: 100%;
    height: 0.35rem;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.14rem;
    font-weight: 450;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;

    // 未选择状态 — 浅色背景
    &--disabled {
      background: #EDF9FA;
      color: #AEE6EA;
      cursor: not-allowed;
    }

    // 已选择状态 — 品牌色背景
    &--active {
      background: $accent;
      color: $bg-white;

      &:hover {
        background: $accent-hover;
      }
    }
  }
}

// ==================== 不感兴趣反馈弹窗 ====================
.dislike-dialog {
  // 弹窗圆角
  .el-dialog {
    border-radius: 0.16rem;
    overflow: hidden;
  }

  // 覆盖 el-dialog 默认 body padding
  .el-dialog__body {
    padding: 0.12rem;
  }

  // 标题样式
  &__title {
    font-size: 0.16rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 1.6;
    margin-bottom: 0.2rem;

    // 居中标题（问题反馈弹窗用）
    &--center {
      text-align: center;
    }
  }

  // 选项列表容器
  &__options {
    margin-bottom: 0.16rem;

    // 选项间距用 margin-bottom
    .dislike-dialog__option {
      margin-bottom: 0.1rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  // 单个选项行
  &__option {
    display: flex;
    align-items: center;
    background: $bg-main;
    border-radius: 0.08rem;
    padding: 0.04rem 0.1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;

    &:hover {
      border-color: $accent;
      background: $theme-color;
    }

    // 选中态
    &--active {
      border-color: $accent;
      background: $theme-color;
    }

    // 覆盖 el-radio 默认样式
    .el-radio {
      margin-right: 0;
      width: 100%;

      .el-radio__label {
        font-size: 0.14rem;
        color: $text-dark;
        font-weight: 500;
      }
    }
  }

  // 补充描述输入框
  &__textarea {
    .el-textarea__inner {
      background: $bg-main;
      border: 1px solid $border-color;
      border-radius: 0.08rem;
      font-size: 0.13rem;
      color: $text-dark;
      resize: none;

      &::placeholder {
        color: $text-light;
      }

      &:focus {
        border-color: $accent;
      }
    }
  }

  // 底部按钮区域
  &__footer {
    margin-top: 0.3rem;
    display: flex;
    gap: 0.16rem;
  }

  // 按钮通用样式
  &__btn {
    flex: 1;
    padding: 0.12rem 0;
    border-radius: 0.08rem;
    font-size: 0.14rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;

    // 取消按钮
    &--cancel {
      background: $bg-main;
      color: $text-light;
      border: 1px solid $border-color;

      &:hover {
        color: $text-dark;
        border-color: #ccc;
      }
    }

    // 提交按钮
    &--submit {
      background: $btn-dark;
      color: $bg-white;

      &:hover {
        background: $btn-dark-hover;
      }
    }
  }
}